Examples

• 29

  Install angular2 with angular-cli

  edit move example delete share

  29

  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.

  To setup a new project

  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.

  To add to an existing project

  Navigate to the root of your current project.

  Run the command:

  ng init
  

  This will add the necessary scaffolding to your project. Simply run ng serve afterwards to build and start the dev server.

  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
  Module	ng g module my-new-module
  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

  You can also replace the type name by its first letter. For example:

  ng g m my-new-module to generate a new module or ng g c my-new-component to create a component.

  Building/Bundling

  When you are all finished building your Angular 2 web app and you would like to install it on a web server like Apache Tomcat, all you need to do is run the build command either with or without the production flag set. Production will minifiy the code and optimize for a production setting.

  ng build
  

  or

  ng build --prod
  

  Then look in the projects root directory for a /dist folder, which contains the build.

  If you'd like the benefits of a smaller production bundle, you can also use Ahead-of-Time template compilation, which removes the template compiler from the final build:

  ng build --prod --aot
  

  Unit Testing

  Angular 2 provides in-built unit testing, and every item created by angular-cli generates a basic unit test, that can be expended. The unit tests are written using jasmine, and executed through Karma. In order to start testing execute the following command:

  ng test
  

  This command will execute all the tests in the project, and will re-execute them every time a source file changes, whether it is a test or code from the application.

  edited Oct 17 at 14:36

  

  

  

  

  

  +8
• 22

  Getting started with Angular 2 without angular-cli.

  edit move example delete share

  22

  Angular 2.0.0-rc.4

  In this example we'll create a "Hello World!" app with only one root component (AppComponent) for the sake of simplicity.

  Prerequisites:

  • Node.js v5 or later
  • npm v3 or later

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

  Step 1

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

  mkdir angular2-example
  cd angular2-example
  

  Step 2

  Before we start writing our app code, we'll add the 4 files provided below: package.json, tsconfig.json, typings.json, and systemjs.config.js.

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

  package.json - Allows us to download all dependencies with 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 - Configures the TypeScript transpiler.

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

  typings.json - 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 - Configures SystemJS (you can also use webpack).

  /**
   * System configuration for Angular 2 samples
   * Adjust as necessary for your application's 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 the dependencies by typing

  npm install
  

  in the console/terminal.

  Step 4

  Create index.html inside of the 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 will be rendered between the my-app tags.

  However, Angular still doesn't know what to render. To tell it that, we'll define AppComponent.

  Step 5

  Create a subfolder called app where we can define the components and services that make up our app. (In this case, it'll just contain the AppComponent code and main.ts.)

  mkdir app
  

  Step 6

  Create the file app/app.component.ts

  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"
      ];
  }
  

  What's happening? First, we're importing the @Component decorator which we use to give Angular the HTML tag and template for this component. Then, we're creating the class AppComponent with title and messages variables that we can use in the template.

  Now let's look at that template:

  <h1>{{title}}</h1>
  <ul>
      <li *ngFor="let message of messages">
          {{message}}
      </li>
  </ul>
  

  We're displaying the title variable in an h1 tag and then making a list showing each element of the messages array by using the *ngFor directive. For each element in the array, *ngFor creates a message variable that we use within the li element. The result will be:

  <h1>Angular 2 example</h1>
  <ul>
      <li>Hello World!</li>
      <li>Another string</li>
      <li>Another one</li>
  </ul>
  

  Step 7

  Now we create a main.ts file, which will be the first file that Angular looks at.

  Create the file app/main.ts.

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

  We're importing the bootstrap function and AppComponent class, then using bootstrap to tell Angular which component to use as the root.

  Step 8

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

  npm start
  

  in your console/terminal. This will run a prepared script from package.json that starts lite-server, opens your app in a browser window, and runs the TypeScript transpiler in watch mode (so .ts files will be transpiled and the browser will refresh when you save changes).

  What now?

  Check out the official Angular 2 guide and the 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 Oct 14 at 0:11

  

  

  

  

  

  +1
• 4

  Getting through that pesky company proxy

  edit move example delete share

  4

  If you are attempting to get an Angular2 site running on your Windows work computer at XYZ MegaCorp the chances are that you are having problems getting through the company proxy.

  There are (at least) two package managers that need to get through the proxy:

  1. NPM
  2. Typings

  For NPM you need to add the following lines to the .npmrc file:

  proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
  https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
  

  For Typings you need to add the following lines to the .typingsrc file:

  proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
  https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
  rejectUnauthorized=false
  

  These files probably don't exist yet, so you can create them as blank text files. They can be added to the project root (same place as package.json or you can put them in %HOMEPATH% and they will be available to all your projects.

  The bit that isn't obvious and is the main reason people think the proxy settings aren't working is the %5C which is the URL encode of the \ to separate the domain and user names. Thanks to Steve Roberts for that one: Using npm behind corporate proxy .pac

  created Sep 12 at 6:32

  
• 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