Angular 2 - Getting Started

Angular 2

Angular 2 is the next version of Google’s massively popular MV* framework for building complex applications in the browser (and beyond).

Angular 2 comes with almost everything you need to build complicated front-end web or mobile apps, from powerful templates to fast rendering, data management, HTTP services, form handling, and so much more.

Angular 2 key features

• Develop Across All Platforms: Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile, and native desktop.
• Speed & Performance: Achieve the maximum speed possible on the web platform today, and take it further, via Web Workers and Server-side rendering. Angular puts you in control over scalability so as to meet huge data requirements by building data models on RxJS, Immutable.js, or another push-model.
• Incredible Tooling: Build features quickly with simple, declarative templates. Extend the template language with your own components and use a wide array of existing components. Get immediate Angular-specific help and feedback with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather than trying to make the code work.
• Loved by Millions: From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google's largest applications.

Getting Started

• Start Visual Studio
• Create a new website
• Provide the name and the location of the website
• Click "Next".

First of all, you need to install npm_module in your project directory using the command prompt.

Add four files to your root directory.

Package.json

{
    "name": "angular-sample",
    "version": "1.0.0",
    "scripts": {
        "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
        "lite": "lite-server",
        "tsc": "tsc",
        "tsc:w": "tsc -w"
    },
    "licenses": [{
        "type": "MIT",
        "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }],
    "dependencies": {
        "@angular/common": "~2.2.0",
        "@angular/compiler": "~2.2.0",
        "@angular/core": "~2.2.0",
        "@angular/forms": "~2.2.0",
        "@angular/http": "~2.2.0",
        "@angular/platform-browser": "~2.2.0",
        "@angular/platform-browser-dynamic": "~2.2.0",
        "@angular/router": "~3.2.0",
        "@angular/upgrade": "~2.2.0",
        "angular-in-memory-web-api": "~0.1.15",
        "core-js": "^2.4.1",
        "reflect-metadata": "^0.1.8",
        "rxjs": "5.0.0-beta.12",
        "systemjs": "0.19.39",
        "zone.js": "^0.6.25"
    },
    "devDependencies": {
        "@types/core-js": "^0.9.34",
        "@types/node": "^6.0.45",
        "concurrently": "^3.0.0",
        "lite-server": "^2.2.2",
        "typescript": "^2.0.3"
    }
}   

tsconfig.json

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

systems.config

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "node": "registry:dt/node#6.0.0+20160831021119"
  }
}

Now, let’s add a new folder with the name of the app in your root project. Add a few TypeScript files like main.ts, app.module.ts, and app.component.ts. Here is the code of these TypeScript files.

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { enableProdMode } from '@angular/core';
platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, FormsModule, HttpModule],
    declarations: [AppComponent],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {};

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app/app.component.html',
    styleUrls: ['./app/styles/styles.css']
})
export class AppComponent {}

app.component.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>

<body>
    <h1>Welcome to Angular2</h1>
    <h3>First sample of Angular2 By Raj Kumar. :)</h3>
</body>

</html>

app.component.css

html {
    overflow-y: scroll;
    overflow-x: hidden;
}
main {
    position: relative;
    padding-top: 60px;
}
h1 {
    color: red;
}
h3 {
    color: green;
}

Now, let’s add an index.html page and add all the required references of the app module, node modules, and component.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="app/styles/styles.css" rel="stylesheet" />
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function(err) {
            console.error(err);
        });
    </script>
</head>
<body>
    <header class="navbar navbar-inner navbar-fixed-top">
        <nav class="container">
            <p class="navbar-header">
                <span class="app-title">Angular2 Sample</span>
            </p>
        </nav>
    </header>
    <main class="container">
        <my-app>Loading...</my-app>
        <br /><br />
    </main>
</body>
</html>

Now, it is time to run the application.

Conclusion

In this article, we learned how to get started with Angular 2 and how to add mandatory files. If you have any questions or comments, drop me a line in the comments section.