Angular

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 website
   • Click "Next".

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


Add four files in your root directory.

Package.json

  1. {  
  2.     "name": "angular-sample",  
  3.     "version": "1.0.0",  
  4.     "scripts": {  
  5.         "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",  
  6.         "lite": "lite-server",  
  7.         "tsc": "tsc",  
  8.         "tsc:w": "tsc -w"  
  9.     },  
  10.     "licenses": [{  
  11.         "type": "MIT",  
  12.         "url": "https://github.com/angular/angular.io/blob/master/LICENSE"  
  13.     }],  
  14.     "dependencies": {  
  15.         "@angular/common": "~2.2.0",  
  16.         "@angular/compiler": "~2.2.0",  
  17.         "@angular/core": "~2.2.0",  
  18.         "@angular/forms": "~2.2.0",  
  19.         "@angular/http": "~2.2.0",  
  20.         "@angular/platform-browser": "~2.2.0",  
  21.         "@angular/platform-browser-dynamic": "~2.2.0",  
  22.         "@angular/router": "~3.2.0",  
  23.         "@angular/upgrade": "~2.2.0",  
  24.         "angular-in-memory-web-api": "~0.1.15",  
  25.         "core-js": "^2.4.1",  
  26.         "reflect-metadata": "^0.1.8",  
  27.         "rxjs": "5.0.0-beta.12",  
  28.         "systemjs": "0.19.39",  
  29.         "zone.js": "^0.6.25"  
  30.     },  
  31.     "devDependencies": {  
  32.         "@types/core-js": "^0.9.34",  
  33.         "@types/node": "^6.0.45",  
  34.         "concurrently": "^3.0.0",  
  35.         "lite-server": "^2.2.2",  
  36.         "typescript": "^2.0.3"  
  37.     }  
  38. }  

 

tsconfig.json

  1. {  
  2.     "compilerOptions": {  
  3.         "target": "es5",  
  4.         "module": "commonjs",  
  5.         "moduleResolution": "node",  
  6.         "sourceMap": true,  
  7.         "emitDecoratorMetadata": true,  
  8.         "experimentalDecorators": true,  
  9.         "removeComments": false,  
  10.         "noImplicitAny": false  
  11.     },  
  12.     "compileOnSave": true,  
  13.     "exclude": [  
  14.         "node_modules",  
  15.         "wwwroot",  
  16.         "Scripts/app"  
  17.     ]  
  18. }   

 

systemjs.config 
  1. /**  
  2.  * System configuration for Angular samples  
  3.  * Adjust as necessary for your application needs.  
  4.  */  
  5. (function(global) {  
  6.     System.config({  
  7.         paths: {  
  8.             // paths serve as alias    
  9.             'npm:': 'node_modules/'  
  10.         },  
  11.         // map tells the System loader where to look for things    
  12.         map: {  
  13.             // our app is within the app folder    
  14.             app: 'app',  
  15.             // angular bundles    
  16.             '@angular/core': 'npm:@angular/core/bundles/core.umd.js',  
  17.             '@angular/common': 'npm:@angular/common/bundles/common.umd.js',  
  18.             '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',  
  19.             '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',  
  20.             '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',  
  21.             '@angular/http': 'npm:@angular/http/bundles/http.umd.js',  
  22.             '@angular/router': 'npm:@angular/router/bundles/router.umd.js',  
  23.             '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',  
  24.             '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',  
  25.             // other libraries    
  26.             'rxjs': 'npm:rxjs',  
  27.             'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'  
  28.         },  
  29.         // packages tells the System loader how to load when no filename and/or no extension    
  30.         packages: {  
  31.             app: {  
  32.                 main: './main.js',  
  33.                 defaultExtension: 'js'  
  34.             },  
  35.             rxjs: {  
  36.                 defaultExtension: 'js'  
  37.             }  
  38.         }  
  39.     });  
  40. })(this);  

typings.json

  1. {  
  2.    "globalDependencies": {  
  3.    "core-js": "registry:dt/core-js#0.0.0+20160725163759",  
  4.    "node": "registry:dt/node#6.0.0+20160831021119"  
  5. }  
  6. }  

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

main.ts

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

app.module.ts

  1. import {  
  2.     NgModule  
  3. } from '@angular/core';  
  4. import {  
  5.     BrowserModule  
  6. } from '@angular/platform-browser';  
  7. import {  
  8.     FormsModule  
  9. } from '@angular/forms';  
  10. import {  
  11.     HttpModule  
  12. } from '@angular/http';  
  13. import {  
  14.     AppComponent  
  15. } from './app.component';  
  16. @NgModule({  
  17.     imports: [BrowserModule, FormsModule, HttpModule],  
  18.     declarations: [AppComponent],  
  19.     providers: [],  
  20.     bootstrap: [AppComponent]  
  21. })  
  22. export class AppModule {};  

 

app.component.ts
  1. import {  
  2.     Component  
  3. } from '@angular/core';  
  4. @Component({  
  5.     selector: 'my-app',  
  6.     templateUrl: './app/app.component.html',  
  7.     styleUrls: ['./app/styles/styles.css']  
  8. })  
  9. export class AppComponent {}  
app.component.html 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title></title>  
  6.     <meta charset="utf-8" />  
  7. </head>  
  8.   
  9. <body>  
  10.     <h1>Welcome to Angular2</h1>  
  11.     <h3>First sample of Angular2 By Raj Kumar. :)</h3>  
  12. </body>  
  13.   
  14. </html>  
app.component.css 
  1. html {  
  2.     overflow - y: scroll;  
  3.     overflow - x: hidden;  
  4. }  
  5. main {  
  6.     position: relative;  
  7.     padding - top: 60 px;  
  8. }  
  9. h1 {  
  10.     color: red;  
  11. }  
  12. h3 {  
  13.     color: green;  
  14. }  
Now, let’s add index.html page and add all the required references of app module, node modules, and add component.
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title></title>  
  6.     <meta charset="utf-8" />  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />  
  9.     <link href="app/styles/styles.css" rel="stylesheet" />  
  10.     <!-- Polyfill(s) for older browsers -->  
  11.     <script src="node_modules/core-js/client/shim.min.js"></script>  
  12.     <script src="node_modules/zone.js/dist/zone.js"></script>  
  13.     <script src="node_modules/reflect-metadata/Reflect.js"></script>  
  14.     <script src="node_modules/systemjs/dist/system.src.js"></script>  
  15.     <!-- Configure SystemJS -->  
  16.     <script src="systemjs.config.js"></script>  
  17.     <script>  
  18.         System.import('app').catch(function(err) {  
  19.             console.error(err);  
  20.         });  
  21.     </script>  
  22. </head>  
  23.   
  24. <body>  
  25.     <header class="navbar navbar-inner navbar-fixed-top">  
  26.         <nav class="container">  
  27.             <div class="navbar-header">  
  28.                 <span class="app-title">Angular2 Sample</span>  
  29.             </div>  
  30.         </nav>  
  31.     </header>  
  32.     <main class="container">  
  33.         <my-app>Loading...</my-app>  
  34.         <br /><br />  
  35.     </main>  
  36. </body>  
  37.   
  38. </html>  

Now, it is time to run the application.


Conclusion

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

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs