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]](https://gwb.blob.core.windows.net/humpreycogay/Open-Live-Writer/ac8a89bfba57_DE79/image_thumb[11]_thumb.png "image_thumb[11]")
- Select Web API
![image_thumb[12]](https://gwb.blob.core.windows.net/humpreycogay/Open-Live-Writer/ac8a89bfba57_DE79/image_thumb[12]_thumb.png "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]](https://gwb.blob.core.windows.net/humpreycogay/Open-Live-Writer/ac8a89bfba57_DE79/image_thumb[13]_thumb.png "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]](https://gwb.blob.core.windows.net/humpreycogay/Open-Live-Writer/ac8a89bfba57_DE79/image_thumb15_thumb.png "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]](https://gwb.blob.core.windows.net/humpreycogay/Open-Live-Writer/ac8a89bfba57_DE79/image_thumb[16]_thumb.png "image_thumb[16]")
On your local drive, you will have a copy of the different items you included in your package.json file
3. Add a Gulp file
- 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
- click refresh(upper left corner of the task runner explorer )
- 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
4. Add a typings.json file
- 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
6. Add a tsconfig.json file – This will contain our TypeScript configurations
- 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
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
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
main.css and main.min.css will be generated automatically
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/
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
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
14. Run the Project by pressing F5
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 . . .