Examples

• 15

  Getting started with Angular2 without angular-cli.

  edit move example delete share

  15

  Angular 2.0.0-rc.4

  In this example we'll create a little bit more complicated "Hello World!" app which will include only one root component (AppComponent) for the sake of simplicity.

  Prerequisites:

  • At least node v5.x.x
  • At least npm v3.x.x

  Note: You can check versions by running node -v and npm -v in the console/terminal.

  Step 1

  Create new project folder. Let's call it... angular2-example and enter it.

  mkdir angular2-example
  cd angular2-example
  

  Step 2

  To make it easier we'll add 4 files provided below: package.json, tsconfig.json, typings.json and systemjs.config.js

  Disclaimer: The same files can be found in Official 5 Min Quickstart.

  package.json - It allows us to download all dependencies thanks to NPM and provides simple script execution to make life easier for simple projects. (You should consider using something like Gulp in the future to automate tasks).

  {
    "name": "angular2-example",
    "version": "1.0.0",
    "scripts": {
      "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
      "lite": "lite-server",
      "postinstall": "typings install",
      "tsc": "tsc",
      "tsc:w": "tsc -w",
      "typings": "typings"
    },
    "license": "ISC",
    "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.27",
      "core-js": "^2.4.0",
      "reflect-metadata": "^0.1.3",
      "rxjs": "5.0.0-beta.6",
      "zone.js": "^0.6.12",
      "angular2-in-memory-web-api": "0.0.14",
      "bootstrap": "^3.3.6"
    },
    "devDependencies": {
      "concurrently": "^2.0.0",
      "lite-server": "^2.2.0",
      "typescript": "^1.8.10",
      "typings":"^1.0.4"
    }
  }
  

  tsconfig.json - Configuration of TypeScript transpiler.

  {
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "noImplicitAny": false
    }
  }
  

  typings.json - It makes TypeScript recognize libraries we're using.

  {
    "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"
    }
  }
  

  systemjs.config.js - Configuration of SystemJS (you can also use webpack).

  /**
   * 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':                   'node_modules/@angular',
      'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
      'rxjs':                       'node_modules/rxjs'
    };
    // 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' },
    };
    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);
  

  Step 3

  Let's install all dependencies by typing

  npm install
  

  in the console/terminal.

  Step 4

  Create index.html file inside of angular2-example folder.

  <html>
    <head>
      <title>Angular2 example</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- 1. Load libraries -->
      <!-- 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>
      <!-- 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></my-app>
    </body>
  </html>
  

  Your application is then rendered inside:

  <my-app></my-app>
  

  Angular2 will know what to do with it after creating main.ts and app.component.ts files.

  Step 5

  Create app subfolder in which we'll hold .ts, .js, .html (external templates) and .css files.

  mkdir app
  

  Step 6

  After installing all dependencies and creating index.html file we can start writing some code that matters to bring your first Angular2 app to life!

  Create app/app.component.ts file.

  import { Component } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    template: `
      <h1>{{title}}</h1>
      <ul>
          <li *ngFor="let message of messages">
              {{message}}
          </li>
      </ul>
    `
  })
  export class AppComponent { 
      title = "Angular2 example";
      messages = [
          "Hello World!",
          "Another string",
          "Another one",
          "Another one",
          "Another one",
          "...",
          "Another one"
      ];
  }
  

  What's happening? First, we're importing @Component decorator which will tell Angular2 which tag and template this component uses. We'll come back to the template shortly. Next, we're creating AppComponent class with variables which can be used in your template. These are title (string) and messages (array of strings).

  Now let's look at the template:

  /* ... */
  @Component({
        selector: 'my-app',
        template: `
          <h1>{{title}}</h1>
          <ul>
              <li *ngFor="let message of messages">
                  {{message}}
              </li>
          </ul>
        `
      }) /* ... */
  

  First please note that this is a ES6 template string which allows us to break lines and make it more readable in that case.

  We're putting title variable into h1 tag and then we're making a list which shows every element of the messages array by using *ngFor functionality. It literally means "create message variable for each element of messages array" and we can use it in the tag's scope. It works like for each loop in this case. The final effect will be h1 tag with "Angular2 example" message and list with 7 bullets (7 li tags).

  Step 7

  Now we've to create main.ts file which is the first file looked up by Angular2.

  Create app/main.ts file.

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

  We're importing the bootstrap function, AppComponent class then using the bootstrap function to tell which component is the root.

  Step 8

  It's time to fire up your first app. Type

  npm start
  

  in your console/terminal. It'll run a prepared script from package.json file which runs lite-server and typescript transpiler in watch mode (browser we'll be refreshed when changes appear and .ts files will be transpiled).

  A few moments later your browser should open your app's page and show the results.

  What now?

  I'd recommend checking out Angular2 documentation and tutorials and also other topics on StackOverflow's documentation.

  You can also edit AppComponent to use external templates, styles or add/edit component variables. You should see your changes immediately after saving files.

  edited Aug 4 at 15:22

  

  

  

  

  

• Improvements requested by monkey intern:

  • This example does not sufficiently illustrate the point and needs to be edited to provide more details. - Aug 10 at 7:14

    Comments:

    • Could it explain how to add an already existing project to this setup? I've been looking for days and I believe it would be useful, not only getting started from scratch but, how to add a project to this installation. - monkey intern

  Edit Example Delete Example
  14

  Install angular2 with angular-cli

  edit move example delete share 1

  14

  This example is a quick setup of Angular 2 and how to generate a quick example project.

  Prerequisites:

  • Node.js v4 or greater.
  • npm v3 or greater.
  • Typings v1 or greater.

  Open a terminal and run the commands one by one:

  npm install -g typings
  npm install -g angular-cli
  

  The first command installs the typings library globally (and adds the typings executable to PATH). The second installs angular-cli globally, adding the executable ng to PATH.

  Navigate with the terminal to a folder where you want to set up the new project.

  Run the commands:

  ng new PROJECT_NAME
  cd PROJECT_NAME
  ng serve
  

  That is it, you now have a simple example project made with Angular 2. You can now navigate to the link displayed in terminal and see what it is running.

  For more info also visit: angular-cli github page

  Generating Components, Directives, Pipes and Services

  The ng generate <scaffold-type> <name> (or simply ng g <scaffold-type> <name>) command allows you to automatically generate Angular components:

  # The command below will generate a component in the folder you are currently at
  ng generate component my-generated-component
  # Using the alias (same outcome as above)
  ng g component my-generated-component
  

  There are several possible types of scaffolds angular-cli can generate:

  Scaffold Type	Usage
  Component	ng g component my-new-component
  Directive	ng g directive my-new-directive
  Pipe	ng g pipe my-new-pipe
  Service	ng g service my-new-service
  Class	ng g class my-new-class
  Interface	ng g interface my-new-interface
  Enum	ng g enum my-new-enum

  edited Jul 26 at 22:05

  

  

  

  

  

  +2

• Improvements requested by Rusinov Maksim:

  • This example is completely unclear, incomplete, or has severe formatting problems. It is unlikely to be salvageable through editing and should be removed. - 1d ago

  Edit Example Delete Example
  4

  Installation or Setup

  edit move example delete share 1

  4

  The easiest way to get started with Angular 2 is by using the angular-cli build by the angular team.

  First, you need to install the tool: npm install -g angular-cli.

  Now you can start using it.

  Creating a new project: ng new projectname.

  Launching a development server: ng serve.

  Creating a new component ng generate component home.

  You can also use the short syntax: ng g c home.

  With angular CLI it is very easy to create components, routes, services, directives and tests.

  Angular-CLI saves a lot of time building and scaffolding application structure, because it puts all the needed files in the right places, creates tests automatically and uses the best practices found by many Angular 2 developers.

  edited Jul 21 at 11:21

  

  
• 1

  Keeping Visual Studios in sync with NPM and NODE Updates

  edit move example delete share

  1

  Step 1: Locate your download of Node.js, typically it is installed under C:/program files/nodejs

  Step 2: Open Visual Studios and navigate to "Tools>Options"

  Step 3: In the options window navigate to "Projects and Solutions>External Web Tools"

  Step 4: Add new entry with you Node.js file location (C:/program files/nodejs), IMPORTANT use the arrow buttons on menu to move your reference to the top of the list.

  

  Step 5: Restart Visual Studios and Run an npm install, against your project, from npm command window

  created Aug 3 at 7:40