Asp.Net Core RC2 web-api and Angular 2 Cross Platfrom - Getting Started on Linux/Mac/Windows & VSCode Part-1

mkdir testapp
cd testapp

git init
git remote add origin https://github.com/amitthk/angdnx.git
git pull origin master

NodeJs is Javascript based server side development platform built on Google Chrome's (V8) Javascript Engine. Being very fast, highly scalable, Asynchronous/Non-Blocking, cross-platfrom are among few of many compelling reasons to choose NodeJs.

NPM stands for NodeJs Package Manager. NPM is as its name suggest a package manager for NodeJs Modules. NPM simplifies the process of specifying, downloading, installing, linking and managing our package NodeJs Package dependencies.

We want to use typescript so we install typescript related packages using Node Package Manager npm:-

npm install -g typescript tslint typings

npm install -g yo bower grunt-cli gulp

Note: If your're getting permission errors - run the above commands in Administrator mode. sudo npm install -g <package names>

npm install -g generator-aspnet

This is a generator package for Yeoman to scaffold different types of Asp.Net applications for us. It includes templates for scaffolding various type of .Net projects like Console, Web, Web-Application, Class Library, Unit Test Projects etc.

• C#
• Angular 2 TypeScript Snippets (from johnpapa)
• TSLint(optional)

Our machine is pretty much ready. Lets go ahead and setup our application.

In terminal we created a directory for our application (mkdir angdnx) "angdnx". Then we type the command:

yo aspnet

Select Web API application, enter the name of your app, press Enter.

We type "yo aspnet" again and created 2 more "Class Library" projects:- angdnx.Domain  and  angdnx.Data

Then we added global.json with following contents to the root of our solution:-

{ 
"projects": [ "angdnx", "angdnx.Domain", "angdnx.Data"], 
"sdk": { "version": "1.0.0-rc2-final"}
}

Then we updated our project references like this:- angdnx references => angdnx.Domain, angdnx.Data 

//File: \angdnx\angdnx\project.json
{
"dependencies": {
"Microsoft.NETCore.App": {
"version": "1.0.0-rc2-3002702",
"type": "platform"
},
// ...... truncated for brevity
"Microsoft.Extensions.Logging.Debug": "1.0.0-rc2-final",
"angdnx.Domain":"*",
"angdnx.Data":"*"
},
"tools": {
"Microsoft.AspNetCore.Server.IISIntegration.Tools": {
"version": "1.0.0-preview1-final",
"imports": "portable-net45+win8+dnxcore50"
}
},
//...... continues.....
}

angdnx.Data references => angdnx.Domain

//File: angdnx\angdnx.Data
{
"version": "1.0.0-*",
"dependencies": {
"NETStandard.Library": "1.5.0-rc2-24027",
"angdnx.Domain":"*"
},
"frameworks": {
"netstandard1.5": {
"imports": "dnxcore50"
}
},
"tooling": {
"defaultNamespace": "angdnx.Data"
}
}

And from top level directory we run the following command:- 

dotnet restore

If we go now to angdnx and run dotnet build it would build angdnx.Domain and angdnx.Data projects first before building angdnx

cd angdnx
dotnet build

We go ahead and added following classes to our projects:-

1. Note Class, and INotesRepository domain in angdnx.Domain project (domain objects)
2. NotesRepository Class in angdnx.Data (data layer)
3. NoteController in our angdnx Project \Controllers directory ( our Web Api Layer)

1.1.  Domain model class Note in Domain Class Library Project.

//File: \angdnx.Domain\Note.cs
using System;
using System.Collections.Generic;

namespace angdnx.Domain
{
   public class Note
    {
        private Guid _Id;
        public Guid Id
        {
            get { return _Id;}
            set { _Id = value;}
        }
        
        private string _Title;
        public string Title
        {
            get { return _Title;}
            set { _Title = value;}
        }
        
        private string _Text;
        public string Text
        {
            get { return _Text;}
            set { _Text = value;}
        }
        
        
    }
}

1.2. INotesRepository interface in angdnx.Domain Class Library project. This is the contract for NotesRepository:-

using System.Collections.Generic;
using angdnx.Domain;
using System;
using System.Linq;

namespace angdnx.Domain
{
    public interface INotesRepository
        {
            List<Note> GetAll();
            Note Get(Guid id);
            Guid Add(Note note);
            bool Update(Guid id, Note note);
            bool Delete(Guid id);
        }
}

2. NotesRepository class in our Data layer (i.e. angdnx.Data Class Library project):-

//File: \angdnx.Data\NotesRepository.cs<note><note><note></note></note></note>
using System.Collections.Generic;
using angdnx.Domain;
using System;
using System.Linq;

namespace angdnx.Data
{
    public class NotesRepository : INotesRepository
    {
        List<Note> _notesList;
        public NotesRepository(){
            _notesList= new List<Note>();
            
            seed();
        }
        
        public List<Note> GetAll(){
            return(_notesList);
        }
        
        public Note Get(Guid id){
            return _notesList.FirstOrDefault(x=>x.Id==id);
        }
        
        public Guid Add(Note note){
            _notesList.Add(note);
            return note.Id;
        }

        public bool Update(Guid id, Note note){
            int idx=_notesList.FindIndex(x=>x.Id==id);
            if(idx!=-1){
                note.Id=id;
                _notesList[idx]=note;
                return true;
            }else{
                return false;
            }
        }
        
        public bool Delete(Guid id){
            var note= _notesList.FirstOrDefault(x=>x.Id==id);
            if (note!=null)
            {
                _notesList.Remove(note);
                return(true);
            }else
            {
                return false;
            }
        }
        
        private void seed(){
            _notesList.Add(new Note(){
                Id=Guid.NewGuid(),
                Title="One",
                Text="1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  1"
            });
                        _notesList.Add(new Note(){
                Id=Guid.NewGuid(),
                Title="2",
                Text="2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  2"
            });
                        _notesList.Add(new Note(){
                Id=Guid.NewGuid(),
                Title="3",
                Text="3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  3"
            });
                        _notesList.Add(new Note(){
                Id=Guid.NewGuid(),
                Title="4",
                Text="4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  4"
            });
                        _notesList.Add(new Note(){
                Id=Guid.NewGuid(),
                Title="5",
                Text="5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  5"
            });
        }
    }
}

3. And here's how our NoteController looks like in our Web project:-

 //File: \angdnx\Controllers\NoteController.cs 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using angdnx.Data;
using angdnx.Domain;
using Microsoft.Extensions.Logging;

namespace angdnx.Controllers
{
    [Route("api/[controller]")]
    public class NoteController : Controller
    {
        
        INotesRepository _repo;
        private readonly ILogger<NoteController> _logger;
        
        public NoteController(ILogger<NoteController> logger, INotesRepository noteRepository){
            _logger=logger;
            _repo= noteRepository;          
        }
        
        // GET api/note
        [HttpGet]
        public List<Note> Get()
        {
            return _repo.GetAll();
        }

        // GET api/note/{guid}
        [HttpGet("{id}")]
        public Note Get(string id)
        {
            var _guid = Guid.Empty;
            if((Guid.TryParse(id, out _guid))&&(_guid!=Guid.Empty)){
            return _repo.Get(_guid);
            }else
            {
                return null;
            }
        }

        // POST api/note
        [HttpPost]
        public Guid Post(Note value)
        {
            return _repo.Add(value);
        }

        // PUT api/note/{guid}
        [HttpPut("{id}")]
        public bool Put(string id, [FromBody]Note value)
        {
            var _id=Guid.Parse(id);
            _logger.LogInformation(_id.ToString());
            _logger.LogInformation("Values: "+value.Id.ToString());
             _logger.LogInformation("Title:"+value.Title);
             _logger.LogInformation("Text:"+ value.Text);
            return _repo.Update(_id,value);
        }

        // DELETE api/note/{guid}
        [HttpDelete("{id}")]
        public bool Delete(string id)
        {
            var _id= Guid.Parse(id);
            _logger.LogInformation(_id.ToString());
            return _repo.Delete(_id);
        }
    }
}

We also need to update the ConfigureServices method in Startup class in our web project to inject the NotesRepository wherever we're asking for INotesRepository like below:-

// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
    // Add framework services.
    services.AddMvc();
    services.Add(new ServiceDescriptor(typeof(INotesRepository), p=> new NotesRepository(), ServiceLifetime.Singleton));
}

and we're ready with new app created in respective directory.

Type "dotnet restore" and "dotnet run" the app should be running on port 5000. Use any Rest Client to access http://localhost:5000/api/note we should be able to see all our objects being fetched. That's cool our API is ready. Let's do some more work on server side then we proceed to UI Layer.

3.1.3 Add Landing Page (Index.html) to our Web Project

We want to add the basic landing page for our app. But currently our app is not configured to serve static pages. Below is the configuration we do to serve static pages. Also  for demo we would create a basic HTML 5 page as in below listing. We would update this later on.

We would immediately see the \wwwroot\node_modules directory would be filled up with packages.

cd angdnx
typings install

This will install typings to our app. We should see a folder named typings in our web api project. We also notice that there's a typescript file index.d.ts which references all the installed typings in its subdirectory.

We're going to add the following files to setup our Angular 2 UI :-

1. \app\main.ts (Bootstrap code for our application)
2. \app\NotesListComponent.ts (This is our component class we're using for CRUD)
3. \app\Services\NotesService.ts (Service layer to interact with Web-Api via Http REST)
4. \app\Models\Note.ts (Our UI model class we would be using as Type in our typescript)
5. \app\systemjs.config.js

1. In our \app folder we add a typescript file named main.ts. Then in this file we type ng2 and we should see the Angular 2 code snippets as we installed from extension as in below image.

We select ng2-bootstrap template and the code will scaffold into Angular 2 bootstrap template. We do few updates to this file something like below.

/// <reference path='../typings/index.d.ts' />

import { enableProdMode } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';

import { NotesListComponent } from './noteslistcomponent';

// enableProdMode();

bootstrap(NotesListComponent, [HTTP_PROVIDERS])
    .then(success => console.log('Bootstrap success'))
    .catch(error => console.log(error));

2. Up next we created our component NotesListComponent in its own file noteslistcomponent.ts. This is the component which our main.ts class is importing above. We can use ng2-component template to scaffold this Component for us.  @Component is an Angular 2 decorator. It takes Metadata as argument - which is used to describle how our component classes will be used by Angular 2.

import { Component, OnInit } from '@angular/core';
import { NotesService } from './Services/NotesService';
import { Note } from './Models/Note';

@Component({
    moduleId: module.id,
    selector: 'notes-list',
    templateUrl: '/app/Views/noteslistcomponent.html',
    providers:[NotesService]
})
export class NotesListComponent implements OnInit {
            allnotes:Note[];
        selectedNote:Note;
        newNote:Note;
        isUpdated:boolean;
    constructor(private notesService:NotesService) { }
    ngOnInit() {
        this.notesService.getNotes().subscribe(lst=>this.allnotes=lst.json());
        this.selectedNote = new Note('','','');;
        this.newNote = new Note('','','');;
     }
    onSelect(note){
         this.selectedNote=note;
     }

    onAdd(note){
        if(note.Text.trim()==''){
            return;
        }
        this.notesService.addNote(note).subscribe(rsp=>{
            note.Id=this.trim(rsp.text(),'"');
            this.allnotes.push(note);
            let fresh=new Note('','','');
            this.newNote = fresh;
        });
    }
    onUpdate(note){
            if(note.Id.trim()==''){
                return;
            }
        this.notesService.updateNote(note.Id,note).subscribe(rsp=>{
           //var idx= this.allnotes.indexOf(note);
           //this.allnotes[idx].Id=rsp.text();
            console.log(rsp.text());
            if (rsp.text()=='true')
            {
                let fresh=new Note('','','');
                this.selectedNote = fresh;
            }
        });
    }
    onDelete(note){
        if(note.Id.trim()==''){
            return;
        }
        this.notesService.deleteNote(note.Id).subscribe(rsp=>{
            console.log(rsp.text());
            if (rsp.text()=='true') {
                this.deleteItem(this.allnotes,note);
                let fresh=new Note('','','');
                this.selectedNote = fresh;
            }
        });
    }

    trim(str, chr) {
    var rgxtrim = (!chr) ? new RegExp('^\\s+|\\s+$', 'g') : new RegExp('^'+chr+'+|'+chr+'+$', 'g');
    return str.replace(rgxtrim, '');
    }

    deleteItem(arr:Note[],itm:Note){
        for (var idx = 0; idx < arr.length; idx++) {
            var elm = arr[idx];
            if (elm.Id==itm.Id) {
                arr.splice(idx,1);
            }
        }
    }

    isEquivalent(a, b) {
        var bVal=JSON.stringify(a) === JSON.stringify(b);
        return (bVal);
    }
}

2.b

And here is the CRUD view \angdnx\app\Views\noteslistcomponent.html we are refering to in above component:-

<div class="row">
    <div class="col-sm-12">
        <table class="table table-bordered">
            <tr>
                <td colspan="4">
                    Edit (Select an Item below first)
                </td>
            </tr>
            <tr>
                <th>Title</th>
                <th>Text</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
            <tr>
                <td><input class="form-control" placeholder="Title" type="text" [(ngModel)]="selectedNote.Title" /></td>
                <td><textarea class="form-control" placeholder="Text" type="text" [(ngModel)]="selectedNote.Text"></textarea></td>
                <td><input type="button" value="Update" (click)="onUpdate(selectedNote)"/></td>
                <td><input type="button" value="Delete" (click)="onDelete(selectedNote)"/></td>
            </tr>
        </table>
    </div>
</div>
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered">
    <tr>
        <th>Title</th>
        <th>Text(Click to Select)</th>
        <th>Id(Click To Select)</th>
    </tr>
<tr *ngFor="let note of allnotes">
<td class="col-sm-2" (click)="onSelect(note)">{{note.Title}}</td><td class="col-sm-8" (click)="onSelect(note)"> {{note.Text}}</td><td (click)="onSelect(note)">{{note.Id}}</td>
</tr>
</table>
</div>
</div>
<hr/>
<div class="row">
    <div class="col-sm-12">
        <table class="table table-bordered">
            <tr>
            <th colspan="3">
                Add
            </th>
            </tr>
            <tr>
                <th>Title</th>
                <th>Text</th>
                <th>(Add)</th>
            </tr>
            <tr>
                <td>
                    <input class="form-control" placeholder="Title" type="text" [(ngModel)]="newNote.Title" />
                </td>
                <td>
                    <textarea class="form-control" placeholder="Text" type="text" [(ngModel)]="newNote.Text"></textarea>
                </td>
                <td>
                    <input type="button" value="add" (click)="onAdd(newNote)">
                </td>
            </tr>
        </table>
    </div>

</div>

3. Here is our \app\Services\NotesService.ts class which is reference above in NotesListComponent.ts:-

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions  } from '@angular/http';
import "rxjs/add/operator/map";
import { Note } from '../Models/Note';

@Injectable()
export class NotesService {

    apiUrl:string;

    constructor(private http:Http) {
        this.apiUrl='/api/note';
    }
    
     getNotes(){
         return this.http.get(this.apiUrl).map((res: Response) => res);
     }

     updateNote(id:string,note:Note){
        let body = JSON.stringify(note);
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
         return this.http.put(this.apiUrl+'/'+id,body, options).map((res:Response)=>res);
     }
     
     addNote(note:Note){
         return this.http.post(this.apiUrl,JSON.stringify(note)).map((res:Response)=>res);
     }

     deleteNote(id:string){
        return this.http.delete(this.apiUrl+'/'+id).map((res:Response)=>res);
     }

}

4. And of course here is our simple UI Model class which we're using as type in above classes.

/**
 * \angdnx\app\Models\Note.ts
 */
export class Note {
    Id:string;
    Title:string;
    Text:string;
    constructor(id:string,title:string,text:string) {
        this.Id=id;
        this.Title=title;
        this.Text=text;
    }
}

If our typescript is showing reference errors in VSCode, we add the following line to the top of or main.ts:-

/// <reference path='../typings/index.d.ts' />

This references the typings and we should immediately see the the typescript error markers disappear.

There's various commands listed in Angular 2 help page to transpile and play around our typescript files. We simply go to our project directory in Terminal and typed following:-

tsc -p .

We would see for each of our ts file there would be a transpiled js(and corresponding .map file) generated. If not, possibly you've missed installing npm typescipt/typings - please verify again.

We wanna do minor updates to our systemjs.config.js so that this file can correctly locate our modules once loaded. So in our final app we're gonna transpile and bundle our javascript to one file named myapp.min.js. so our var packages ={ 'app': {main: 'myapp.min.js',…. in below file.

Second, we also need to tell our app where to look for libraries. Our map should locate correct directories so our var map = { 'app': 'js', '@angular': 'js/lib/@angular' in the below file. (This is the place where we would use Gulp to copy our Javascript libraries to)

/** File: \angdnx\app\systemjs.config.js
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'app/lib/@angular',
    'angular2-in-memory-web-api': 'app/lib/angular2-in-memory-web-api',
    'rxjs':                       'app/lib/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'angdnxapp.min.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

Up here we're going to update the landing page of our Application. Below is how our landing page (Index.html) would look like. Basically we are only referencing the required libraries. Then we reference our 'systemjs.config.js" which pull up our application from minified Javascript file. (This minified Javascript file we are going to bundle using gulp as in below section 3.2.6 The gulpfile.js. ) Then we call our Angular 2 component using the selector <notes-list>

<html>
<head>
  <base href="/">
    <title>Hello world</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
<style type="text/css">
    .main_content,.rhs_nav{
        border:solid 1px #ccc;
    }
</style>
    <script src="app/lib/shim.min.js"></script>
    <script src="app/lib/zone.js"></script>
    <script src="app/lib/Reflect.js"></script>
    <script src="app/lib/system.src.js"></script>
    <script src="app/lib/systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script
</head>
<body>
<div class="container">
  <notes-list>
</div>
</body>
</html>

We want to make use of some gulp automation now in order to package our application. We want gulp to basically do following tasks for us:-

1. Copy over the required javascript libraries
2. Copy (and bundle) the stylesheets for us
3. Compile the typescript files
4. Bundle the typescript files and pakcage them into one minifile file
5. Copy Assets (Views, Styles and other site assets)

In addition we want our gulpfile to:-

1. Watch for changes in typescript files and automatically run the above packaging as soon as change is detected.
2. (Optionally) watch for changes in CSharp(C#) files and perform the rebuild and redeploy of our app as soon as change is detected.

We added following gulpfile.js to our app. The tasks in the gulpfile serve the same purpose as defined above.

If we would need to install more packages for gulp tasks. Remember the –save-dev option here, this creates an entry for our "DevDependency" in our package.json so that next time we call "npm install" the Dev dependencies are pulled correctly in the target machine. For Example:-

npm install --save-dev gulp-util