Category Archives: angular 2

Introduction Set up TTD for Angular App – to be continue

Step 1 : go to Jasmine release page download the standalone zip file.

Step2: create a project folder in your computer where you like to put it, unzip the jasmine standalone zip file inside your project folder, then we could delete the sample files inside src and spec folder since we won’t using it, but keep the folder, so we could still using it.

Step3:  run npm init (make sure nodejs has been install in your computer) will create package.json file

Step4: install karma as test runner

npm install karma --save-dev

Step5: install -g karma-cli

Step6: npm install karma-jasmine karma-chrome-launcher –save-dev

Step7:karma init (for add the config file for karma)


Step 8: normal running test in phantom is fast so also need install packages:

“karma-phantomjs-launcher”: “^0.2.1”,
“phantomjs”: “^1.9.18”

Now your package.json file will look like this

  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
     "test": "karma start karma.conf.js"
  "keywords": [
  "author": "sandy zhang",
  "license": "ISC",
  "devDependencies": {
    "jasmine-core": "^2.3.4",
    "karma": "^0.13.9",
    "karma-chrome-launcher": "^0.2.0",
    "karma-jasmine": "^0.3.6",
    "karma-phantomjs-launcher": "^0.2.1",
    "phantomjs": "^1.9.18"

Step9: Add angularjs and angular-mock.js into the lib folder, and included it into the karma config file

// Karma configuration
// Generated on Sat Nov 12 2016 22:15:24 GMT+1100 (AUS Eastern Daylight Time)

module.exports = function(config) {

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',

    // frameworks to use
    // available frameworks:
    frameworks: ['jasmine'],

    // list of files / patterns to load in the browser
    files: [

    // list of files to exclude
    exclude: [

    // preprocess matching files before serving them to the browser
    // available preprocessors:
    preprocessors: {

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters:
    reporters: ['progress'],

    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // start these browsers
    // available browser launchers:
    browsers: ['PhantomJS'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity

Now I create a calculater.js file inside src folder with one function

function add(x,y){
return x+y;

And create your first calculater.spec.js inside spec folder

it(‘should add two number’,function(){

then run npm test, then your will get your result.



Angular 2 Tutorial – movies App

Last time I wrote a blog created the MovieAPI and now I am using that API as back end services to create an angular 2 app.

the final source code could find at my github repository.  here is the link download

For the MovieAPI open it, build it will install the packages automatically, then run the service first.

After the service is done, go to the angular2 folder, open command window

–run npm install,

— npm start

It will look like this:




Step 1 : Setting up your angular 2 application, I already have a blog  click here to found it. Or also could download from the source file from but it add a lot of unnecessary setting, probably confuse for beginning learner.

It was better do few times manually setting it up to get understand all of the necessary for start anguar 2 application.

Step 2:  In angualr 2 everything is component, for me normally like to create the service first. I just create a file named movies.service.ts under folder movies

import {Injectable} from 'angular2/core';
import {IMovie} from './movie';
import {Http, RequestOptions , Response, Headers} from 'angular2/http';
import {Observable} from 'rxjs/Observable';

export class MovieService {   
    private _movieUrl = 'http://localhost:53871/api/movies';

    constructor(private _http: Http) { }

    getMovies(): Observable<IMovie[]> {
        return this._http.get(this._movieUrl)
            .map((response: Response) => <IMovie[]>response.json()) //arrow function, tranceform response to json object and is array of IMovie[]
            .do(data => console.log("All: " + JSON.stringify(data))) //for debug

    createMovie(movie: IMovie): Observable {
        let body = JSON.stringify(movie); 
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        return, body, options)               

    private extractData(res: Response) {
        let body = res.json();
        return || {};

    private handleError(error: Response) {
        return Observable.throw(error.json().error || 'Server error');

In there MovieService I have a IMovie here is my movie.ts I put it in the same folder with MovieService .

//interface won't compile to js file, it just for typescript do type checking
 export interface IMovie { 
    movieId: number;
    title: string;
    genre: string;
    classification: string;
    releaseDate: number;
    rating: number;
    cast: string[];


export class Movie implements IMovie {
    movieId: number;
    title: string;
    genre: string;
    classification: string;
    releaseDate: number;
    rating: number;
    cast: string[];

Step 3: Inject the services.
Go to the app.component.ts this is our container component, for anguar 2 only need inject once, then all of the nest container could using it ( by import it ).

Inject a service has two steps:

1) import the file into the app.component,

2) Inject it as providers

here is my app.component.ts


Step 4: Create the movies-list.component.ts

//for using component, simply import it into this file
import {Component, OnInit} from 'angular2/core';
import { ROUTER_DIRECTIVES } from 'angular2/router';

import {IMovie} from './movie';
import {MovieService} from './movies.service';
import {MovieFilterPipe} from './movie-filter.pipe';
import { StarComponent } from '../shared/star.component';

    selector: 'sz-movies',
    templateUrl: 'app/movies/movies-list.component.html',
    styleUrls: ['app/movies/movies-list.component.css'],  
    pipes: [MovieFilterPipe],
    directives: [StarComponent, ROUTER_DIRECTIVES]
export class MovieListComponent implements OnInit {
    pageTitle: string = 'Movie List';   
    listFilter: string;
    errorMessage: string;
    movies: IMovie[];

    constructor(private _movieService: MovieService) {

    ngOnInit(): void {
            movies => this.movies = movies,
            error => this.errorMessage = error);


here is the movies-list.component.htmlmovies_html


for this component I have a nested StarComponent.

Setp 5: create nested StarComponent, here is the star.component.ts under the share folder

import { Component, OnInit, Input} from 'angular2/core';
    selector: 'sz-star',
    templateUrl: 'app/shared/star.component.html',
    styleUrls: ['app/shared/star.component.css']
export class StarComponent implements OnInit {
    @Input() rating: number;
    starWidth: number;
    ngOnInit(): void {
        this.starWidth = this.rating * 86 / 5;




In angular 2: data flow is unidirectional, for passing data from view to the class

first: you passing data into the directive could bind it to the property


Second: need import the Input from angular2/core, and bind it to the property


Now, one nested movies-list.component and nested star.componet down.

Now using the same steps create the MovieCreateComponent

import {Component, OnInit} from 'angular2/core';

import {IMovie, Movie} from '../movie';
import {Router} from 'angular2/router';
import {MovieService} from '../movies.service';

    templateUrl: 'app/movies/create/movie-create.component.html'

export class MovieCreateComponent implements OnInit {
    title: string = 'Create New Movie';
    newMovie: IMovie;

        private _moviesService: MovieService,
        private _router: Router
    ) { }

    ngOnInit() {
        this.newMovie = new Movie;

    createMovie(event) {
        let _this = this;

            .subscribe(function () {

    cancelCreate(event) {


In the index.html page, put the baseurl:

Done, have fun!

Key different compare angular 2 to 1

  1. angualr 2 using bootstraping the app,
    import { bootstrap } from 'angular2/platform/browser';
    // Our main component
    import { AppComponent } from './app.component';

    and in angular 2 we bind it to html tag <body ng-app=”insuranceApp”>

  2. In angular 2 we create a application by create multiply components, and a component must contain: template(html layout also could included directives) + class(properties and methods) + Metadata(Extra data for angular, defined with a decorator). example:
    import { Component} from 'angular2/core';//must include the import
    @Component({ //metadata and template
        selector: 'rate-star',
        template: '


    ' })export class HelloComponent {//class with property and methods greatingText:string = "hello"; }

    In angular 1 we create controller + view

    First Name:
    Last Name:

    Full Name: {{firstName + ” ” + lastName}}

    var app = angular.module(‘myApp’, []);
    app.controller(‘myCtrl’, function($scope) {
    $scope.firstName = “John”;
    $scope.lastName = “Doe”;

  3. In Angular 2 the data flow is unidirectional and angular 1 is two way bind
  4. In angular 2 bind property using [], bind event using () and removed
    <button (click)="onClickMe()">Click me!</button>//bind event
    //bind property


  5. In Angular 2 there are not $scope anymore, for communicate with different components using service. And in angular 2 create service using class
import { Injectable } from 'angular2/core';

@Injectable() // working with constructor to do injection
export class BooksService {
     GetAllBooks = () =>
		{ title: 'Ulysses', author: 'James Joyce', available: true, category: Category.Fiction },
		{ title: 'A Farewell to Arms', author: 'Ernest Hemingway', available: false, category: Category.Fiction },
		{ title: 'I Know Why the Caged Bird Sings', author: 'Maya Angelou', available: true, category: Category.Poetry },
		{ title: 'Moby Dick', author: 'Herman Melville', available: true, category: Category.Fiction }
but in angularjs 1 we could using priovide, service, value, factories to create a service.