.NET BOX

.Net Core 2.0 released and you might using it for learning or actual production purposes. With .Net Core you usually use Entity Framework Core to communicate with your database, and usually you might use MS SQL Server with this environment. But have you thought about MySql Database? Couldn't find any good resource to how to do this? Then you are in the correct place. In this post I'll explain you how to use MySql as you Database while using .Net Core backend. Let's get started. I'm developing this in a Mac and I'm using Visual Studio Community for Mac. For this example I'll create a Web API project and get pre entered data from MySql database. 1. Open MySql management tool and do following.  1.1. Create a database (UserDB) 1.2. Create a table (Users) 1.3. Add fields to Users table (Username, Password, etc.) 1.4. Add some sample data to the table. 2. Create a .Net Core Web API project using Visual Studio.  I have created as UserLog...

When you are stared to do your own project the main concern and the importance will be the security of your source code. How do you make sure it is safe? What happen if you lose your hard drive or your laptop which have all your project source code? All of your effort will lose, isn't it? But nowadays you can safeguard your code using a source control service. Bitbucket is a great place to start. It has a free plan for small teams, so you can use this. In this post I'll explain how to host your .Net Core project using Bitbucket from mac. Let's get started. Prerequisites Before we get stared you have to install following in your mac. 1. Git - Download it from  https://git-scm.com/downloads  and install it. 2. Visual Studio for Mac - Download it from  https://www.visualstudio.com/vs/mac/  and install it. Ok. I assume that you have all the prerequisite software installed in your mac. Now follow the bellow steps. 1. Create an account in Bitbucket ( https...

Angular Routing allows navigation between different views. Learn more on:  https://angular.io/guide/router Lets try this with an example. 1. Create another component inside components folder. I named it as phone. 2. Go to phone.component.html and change the html a bit. < h2 >   Phone works! </ h2 > 3. Go to app.module.ts and import router module import { RouterModule , Routes } from '@angular/router' ; 4. Import router module inside imports RouterModule . forRoot ( appRoutes ) 5. Create the routs in app.module.ts Each route will have an object. const appRoutes : Routes = [   { path: '' , component: UserComponent },   { path: 'phone' , component: PhoneComponent }, ]; 6. Change app.component.html and change its html to: < router-outlet ></ router-outlet > 7. Save and go to your browser and type: http://localhost:4200/phone then it will show your phone component. ...

2-way data binding can use to bind data to properties in page. 1. Create a form to enter data. Lets create a simple user form in user.component.html < div >   < label for = "name" > Name: </ label >   < input type = "text" /> </ div > < br > < div >     < label for = "age" > Age: </ label >     < input type = "text" /> </ div > < br > In order to bind data from template to component and vise versa; we need to use ngModel To use ngModel we have to import forms module. 2. Go to app.modules.ts and import forms module. 3. Go to user.component.html and perform 2-way data binding It defines by: 1. [(ngModel)] = 'Name of the property' 2. Need name attribute with the same name of the property Ex: < input type = "text" [( ngModel )]= "name" name = "name" /> When a property is inside a mod...

Directives There are 2 types of directive in Angular 4: 1. Attribute Directives ( https://angular.io/guide/attribute-directives ) 2. Structural Directives ( https://angular.io/guide/structural-directives ) For now lets learn about Structural Directives . Lets create an array called hobbies.    hobbies : string []; this . hobbies = [ 'gamming' , 'travelling' , 'coding' ]; Lets use Angular's predefined directives for this example. We are going to use ngFor ( https://angular.io/api/common/NgForOf ) Go to your component template (user.component.html) and use this directive to populate the data in the array. < h3 > Hobbies </ h3 > < ul >   < li * ngFor = "let hobby of hobbies" > {{hobby}} </ li > </ ul > You can use the Index if you want. < ul >   < li * ngFor = "let hobby of hobbies; let i = index" > {{i + 1}} - {{hobby}} </ li > </ ul > Th...

Installing Angular 4 There are 2 ways to install Angular4 Using Angular CLI - Recommended ( https://cli.angular.io/ ) Quickstart seed So in this blog I will use the recommended way; using the CLI. In order to use CLI you have to have Nodejs installed in your pc.  If you have not installed Nodejs; download and install it from their website: https://nodejs.org/en/download/ Ok let's install Angular CLI globally by executing following command in node command prompt: npm install -g @angular/cli Create new Application I'm going to use Visual Studio Code as the IDE for develop this application. 1. Open VS Code  2. Open the application folder  3. Open the terminal in VS Code and execute the following command ng new MyAngular4App ngCommands Find this command in package.json under scripts Ex: ng serve - start the app "scripts" : {     "ng" : "ng" ,     "start" : "ng serve" , ...