Posts
22
Comments
75
Trackbacks
0
Friday, June 17, 2016
AngularJS2 on ASP.Net Core using TypeScript Part 2 - Our First App

 

On Part 1 we started preparing the stage. If you still haven't done so, please visit http://wblo.gs/lRz

On this Part of the series we will start building our first AngularJS2 on ASP.Net Core using Typescript. On Part 3 we will start coding our own Directives (component that can help us change the appearance or behavior of an HTML elements)

Note

Original Article is from AngularIO Site - https://angular.io/docs/ts/latest/quickstart.html 
I wrote this blog entry for those who want to begin doing Angular using ASP.NET Core 1.0 as a backend.

Updates

July 2, 2016 - ASP.NET CORE is now RTM and AngularJS2 RC4 is released, Updated some scripts below

Procedures Summary

  • Create a new ASP.NET Core Web Application
  • Add package.json (package.json)
  • Add a Gulp file
  • Add a typings.json file
  • Install typings
  • Add a tsconfig.json file – This will contain our TypeScript configurations
  • Create an app folder that will house all of our AngularJS2 codes
  • Create the following files within app folder
  • Create systemjs.config.js
  • Create a css folder and add a new scss file with the following code
  • Configure compilerconfig.json (automatically generated after compiling the scss file) to send css files to wwwroot/css folder
  • Create index.html
  • Edit startup.cs
  • Configure the project to use index.html as a startup page

 

PROCEDURES

1. Create a new ASP.NET Core Web Application

- File new project

image_thumb[11]

- Select Web API

image_thumb[12]

2. Add package.json (package.json)

- Open Solutions Explorer (CTRL + W then S)

- Select the your project name within src folder

image_thumb[13]

- Add a new item (CTRL + SHIFT + A)

- On the upper right side of the screen type package, this will filter the main window

image_thumb[15]

Update the contents of the file with the following code and save

{
    "version": "1.0.0",
    "name": "asp.net",
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "systemjs": "^0.19.31",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "^5.0.0-beta.9",
    "symbol-observable": "1.0.1",
    "zone.js": "0.6.12",
    "angular2-in-memory-web-api": "^0.0.14",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.1.0",   
    "gulp": "^3.9.1",
    "rimraf": "^2.5.2"

  }
}

After saving package.json, Visual Studio will use NPM to download the files required by the dependencies and devDependencies you specified.

image_thumb[16]

On your local drive, you will have a copy of the different items you included in your package.json file

image

image

3.  Add a Gulp file

image

- Update the contents of the file with the following code and save

var gulp = require('gulp');
var rimraf = require('rimraf');

gulp.task('default', function () {
    // place code for your default task here
});

gulp.task('clean:lib', function (cb) {
    return rimraf('wwwroot/lib/', cb);
});

gulp.task('copy:lib', function () {
    return gulp.src('node_modules/**/*')
    .pipe(gulp.dest('wwwroot/lib/'));
});

- right click on gulp.js and select Task Runner

image

- click refresh(upper left corner of the task runner explorer )

image

image

- right click on “copy:lib” then select RUN

- After the task runner finishes you will be able to see that the npm files previously downloaded/copied from step 2 will also be copied to wwwroot folder

image

4. Add a typings.json file

image

- Update the contents of the file with the following code and save

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

5. Install typings

- Open command prompt

- go to the path where your typings.json file is located

- use the following command to install the items we added in typings.json

typings install

- use the following command if you are behind a proxy

typings install –-proxy http://proxy.com:8888

- you will now have a typings folder containing the objects we included on our typings.json file

image

6. Add a tsconfig.json file – This will contain our TypeScript configurations

image

- Update the contents of the file with the following code and save

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "wwwroot/app/"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

6. Create an app folder that will house all of our AngularJS2 codes

image

7. Create the following files within app folder

app.component.js

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

 

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

- js files will be generated under wwwroot\app folder as a result of our tsconfig.json after saving the ts files we created above

image

8. Create systemjs.config.js inside wwwroot folder

- Update the contents of the file with the following code and save

/**
* 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': 'lib/@angular',
        'angular2-in-memory-web-api': 'lib/angular2-in-memory-web-api',
        'rxjs': 'lib/rxjs',
        'symbol-observable':'lib/symbol-observable'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
        'symbol-observable': { main: 'index.js', defaultExtension: 'js' }
    };
    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'forms',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated',
      'upgrade',
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
    var config = {
        map: map,
        packages: packages
    };
    System.config(config);
})(this);

9. Create a css folder udner the project folder and add a new scss file with the following code

main.scss

$font-stack: Arial, Helvetica, sans-serif;
$primary-color: #336699;
$font-size:250%;
$margin:2em;

h1 {
  font: $font-size $font-stack;
  color: $primary-color;   
}

body {
      margin: $margin;
}

- right click on main.scss and select Web Compiler then Re-compile file, This will generate main.css

image

main.css and main.min.css will be generated automatically

image

10. Configure compilerconfig.json (automatically generated after compiling the scss file) to send css files to wwwroot/css folder

[
  {
    "outputFile": "wwwroot/css/main.css",
    "inputFile": "css/main.scss"
  }
]

-css files should now be automatically generated under wwwroot/css/

image

11. Create index.html Inside wwwroot folder

<html>
<head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css\main.css">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="lib/core-js/client/shim.min.js"></script>
    <script src="lib/zone.js/dist/zone.js"></script>
    <script src="lib/reflect-metadata/Reflect.js"></script>
    <script src="lib/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>
<!-- 3. Display the application -->
<body>
    <my-app>Loading...</my-app>
</body>
</html>

12. Edit startup.cs – add the code below (BOLD)

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            loggerFactory.AddConsole(Configuration.GetSection("Logging"));
            loggerFactory.AddDebug();
          
app.UseStaticFiles();
            app.UseMvc();
        }

- click the word UseStaticFiles() and press CTRL + .  and select “Add package Microsoft.AspNetCore.StaticFiles 1.0.0

image

13. Configure the project to use index.html as a startup page

- Open Project>Properties and open Debug Tab and set Launch URL: index.html

image

14. Run the Project by pressing F5

image

 

Additional References/Notes

package.json - https://docs.npmjs.com/files/package.json
gulp.js/grunt/gulp/webpack -
https://npmcompare.com/compare/browserify,grunt,gulp,webpack
rimraf – This will traverse a folder and delete objects, similar to linux’ rm –rf command
taskrunner – task runners help developers to automate tasks by using different tools like GULP, BOWER
package.json - A package.json file contains meta data about your app or module. Most importantly, it includes the list of dependencies to install from npm when running npm install

 

Please feel fee to comment . . .

Posted On Friday, June 17, 2016 7:01 PM | Comments (4)
Tag Cloud