Category Archives: JAVASCRIPT

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!

React & ES6 project dev enviroment setup

In this day, the JavaScript project set up it was a big complex, and this tutorial will show you how to set up the environment for build react SPA working with ES6.

First, create package.json file, here is the common using packages I was included, and I will use npm start to run the project instead of gulp. so the packages has included the scripts part with in it.

  "name": "react-Demo",
  "version": "1.0.0",
  "description": "react kit for React and es6 demo project",
  "scripts": {
    "prestart":"babel-node tools/startMessage.js",
    "start":"npm-run-all --parallel test:watch open:src lint:watch",
    "open:src": "babel-node tools/srcServer.js",
    "lint": "node_modules/.bin/esw webpack.config.* src tools",
    "lint:watch": "npm run lint -- --watch",
    "test": "mocha --reporter progress tools/testSetup.js \"src/**/*.spec.js\"",
    "test:watch": "npm run test -- --watch"
  "author": "Sandy Zhang",
  "license": "MIT",
  "dependencies": {
    "babel-polyfill": "6.8.0",
    "bootstrap": "3.3.6",
    "jquery": "2.2.3",
    "react": "15.0.2",
    "react-dom": "15.0.2",
    "react-redux": "4.4.5",
    "react-router": "2.4.0",
    "react-router-redux": "4.0.4",
    "redux": "3.5.2",
    "redux-thunk": "2.0.1",
    "toastr": "2.1.2"
  "devDependencies": {
    "babel-cli": "6.8.0",
    "babel-core": "6.8.0",
    "babel-loader": "6.2.4",
    "babel-plugin-react-display-name": "2.0.0",
    "babel-preset-es2015": "6.6.0",
    "babel-preset-react": "6.5.0",
    "babel-preset-react-hmre": "1.1.1",
    "babel-register": "6.8.0",
    "colors": "1.1.2",
    "compression": "1.6.1",
    "cross-env": "1.0.7",
    "css-loader": "0.23.1",
    "enzyme": "2.2.0",
    "eslint": "2.9.0",
    "eslint-plugin-import": "1.6.1",
    "eslint-plugin-react": "5.0.1",
    "eslint-watch": "2.1.11",
    "eventsource-polyfill": "0.9.6",
    "expect": "1.19.0",
    "express": "4.13.4",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.8.5",
    "jsdom": "8.5.0",
    "mocha": "2.4.5",
    "nock": "8.0.0",
    "npm-run-all": "1.8.0",
    "open": "0.0.5",
    "react-addons-test-utils": "15.0.2",
    "redux-immutable-state-invariant": "1.2.3",
    "redux-mock-store": "1.0.2",
    "rimraf": "2.5.2",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "webpack": "1.13.0",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.10.0"

step 2: setup the dev server with webpack, and for the developing tools all put it inside the tools folder.

  • in the root project create the, there are the standards

import webpack from 'webpack';
import path from 'path';

export default {
  debug: true,
  devtool: 'cheap-module-eval-source-map',
  noInfo: false,
  entry: [
    'eventsource-polyfill', // necessary for hot reloading with IE
    'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
  target: 'web',
  output: {
    path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
    publicPath: '/',
    filename: 'bundle.js' 
  devServer: {
    contentBase: './src' //the folder put the source files
  plugins: [
    new webpack.HotModuleReplacementPlugin(),//for the hot load
    new webpack.NoErrorsPlugin()
  module: {
    loaders: [
      {test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
      {test: /(\.css)$/, loaders: ['style', 'css']},
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"},
      {test: /\.(woff|woff2)$/, loader: "url?prefix=font/&limit=5000"},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"}


step 3: create a file named srcServer.js inside the tools, npm scripts already has the command will run to open the dev server.

import express from 'express';
import webpack from 'webpack';
import path from 'path';
import config from '../';
import open from 'open';

/* eslint-disable no-console */

const port = 3000;
const app = express();
const compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath


app.get('*', function(req, res) {
  res.sendFile(path.join( __dirname, '../src/index.html'));

app.listen(port, function(err) {
  if (err) {
  } else {

step 4: for people like to set up testing driver developer, create a testSetp.js inside the tools folder:

process.env.NODE_ENV = 'test';


require.extensions['.css'] = function () {return null;};
require.extensions['.png'] = function () {return null;};
require.extensions['.jpg'] = function () {return null;};

var jsdom = require('jsdom').jsdom;

var exposedProperties = ['window', 'navigator', 'document'];

global.document = jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    global[property] = document.defaultView[property];

global.navigator = {
  userAgent: 'node.js'

documentRef = document; 

in the script I have

  "test": "mocha --reporter progress tools/testSetup.js \"src/**/*.spec.js\"",

will run with it.

step 5: setup the .babelrc in the root project

  "presets": ["react", "es2015"],
  "env": {
    "development": {
      "presets": ["react-hmre"]

step 6 : setup .eslintrc inside the root project

  "extends": [
  "plugins": [
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "jquery": true,
    "mocha": true
  "rules": {
    "quotes": 0,
    "no-console": 1,
    "no-debugger": 1,
    "no-var": 1,
    "semi": [1, "always"],
    "no-trailing-spaces": 0,
    "eol-last": 0,
    "no-unused-vars": 0,
    "no-underscore-dangle": 0,
    "no-alert": 0,
    "no-lone-blocks": 0,
    "jsx-quotes": 1,
    "react/display-name": [ 1, {"ignoreTranspilerName": false }],
    "react/forbid-prop-types": [1, {"forbid": ["any"]}],
    "react/jsx-boolean-value": 1,
    "react/jsx-closing-bracket-location": 0,
    "react/jsx-curly-spacing": 1,
    "react/jsx-indent-props": 0,
    "react/jsx-key": 1,
    "react/jsx-max-props-per-line": 0,
    "react/jsx-no-bind": 1,
    "react/jsx-no-duplicate-props": 1,
    "react/jsx-no-literals": 0,
    "react/jsx-no-undef": 1,
    "react/jsx-pascal-case": 1,
    "react/jsx-sort-prop-types": 0,
    "react/jsx-sort-props": 0,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "react/no-danger": 1,
    "react/no-did-mount-set-state": 1,
    "react/no-did-update-set-state": 1,
    "react/no-direct-mutation-state": 1,
    "react/no-multi-comp": 1,
    "react/no-set-state": 0,
    "react/no-unknown-property": 1,
    "react/prefer-es6-class": 1,
    "react/prop-types": 1,
    "react/react-in-jsx-scope": 1,
    "react/require-extension": 1,
    "react/self-closing-comp": 1,
    "react/sort-comp": 1,
    "react/wrap-multilines": 1

there are already have script command could run check the lint

 "lint": "node_modules/.bin/esw webpack.config.* src tools",

Now could start create react components
> create index.html inside the src folder

<!DOCTYPE html>
<html lang=”en”>
<title>Pluralsight Admin</title>


create index.js file

/*eslint-disable import/default */
import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory } from 'react-router';
import routes from './routes';
import './styles/styles.css'; //Webpack can import CSS files too!
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';


create route.js inside the src folder

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './components/App';
import HomePage from './components/home/HomePage';
import AboutPage from './components/about/AboutPage';

export default (

create components folder inside the src, then create App.js inside it

// This component handles the App template used on every page.
import React, {PropTypes} from 'react';

class App extends React.Component {
  render() {
    return (



); } } App.propTypes = { children: PropTypes.object.isRequired }; export default App;

separate pages by folder,create home, about folder

for HomePage.js

import React from 'react';
import {Link} from 'react-router';

class HomePage extends React.Component {
  render() {
    return (

React Demo

React, Redux and React Router in ES6 for ultra-responsive web apps.

Learn more

); } } export default HomePage;

for AboutPage.js

import React from 'react';

class AboutPage extends React.Component {
  render() {
    return (


This application uses React, Redux, React Router and a variety of other helpful libraries.


); } } export default AboutPage;

source code here:

now run npm start it will open the page in the brower, and you could start code now. have fun!

the default page will look like this:


Angularjs directive

Directives are the most important feature of AngularJS . Before we jump into how to create custom directive, first to understand the relationship between directive Scope and controllers is very important to help your create custom directives.

In angularjs, directive sit inside controllers, so when you create a custom directive, you must first create an angularjs module and controller first.

When you create a directive, angularjs provide 3 different scope for your to use:

Shared scope when you create a directive don’t specify the scope then it will be shared scope.So your controller and your directive has the same scope, like in c# field, the controller and the directive have point it point to the same object.Create shared scope you must be very careful, because the directive could override the controller scopes.

//shared scope example
angular.module('app', []);

angular.module('app').controller('mainCtrl', function($scope) {
  $scope.Todo = {
    title: 'your title',
    address: 'your address',
    description: 'your description'


angular.module('app').directive('toDoList', function() {
  return {// in here I didn't specify the scope, so it will be shared scope
    templateUrl: "todoList.html",
    restrict: "E"

////event without define the scope in here, but the directive already share the 
//mainCtrol scope here
Description: {{description}}

Inherited scope when you create a directive return scope:true then it will create a inherited scope, so the parent scope(controller scope) will visible in the child scope( directive scope), but the  directive can’t override the parent scope. for example if you have scope.message = “parent message”; in the directive you create a scope.message = “child messages” it won’t override the parent scope, in there view if you use {{messages}} output is parent message, but if you use shared scope, in the directive template the output will be {{child messages}}

//shared scope example
angular.module('app', []);

angular.module('app').controller('mainCtrl', function($scope) {
  $scope.message = "parent message";

angular.module('app').directive('messagesView', function() {
  return {
    templateUrl: "messagesView.html",
    restrict: "E",
    scope:true,  // this is make the directive scope inherit from the mainCtrl
      $scope.message = "child message"; 

 } } })
{{message}} // output will be parent message 

Isolated scope: it allow the developer to encapsulate the data to your custom directive use only.

angular.module('app').directive('removeTodo', function() {
  return {
    restrict: 'E',
    templateUrl: 'removeTodo.html',
    scope: {
      todos: '=' //todos is only visible in your directive scope
    controller: function($scope) {
      $scope.removeItem = function(todo) {
        var idx = $;
        if(idx > -1) {
          $, 1);

And attach the whole angularjs directive structionangularjs-directive

Angularjs Service — Value and Constant Services

Value Services

  • Shorthand for factory with no parameters
  • Cannot be injected into a module configuration function
  • Can be overridden by an AngularJS decorator

Example using value

        .value('clientId', 'a12345654321x');

Constant Services

  • Simply registers service with injector, no factory/provider calls
  • Can be injected into a module configuration function
  • Cannot be overridden by an AngularJSdecorator


        .constant('constants', {
            APP_TITLE: 'My App',
            APP_DESCRIPTION: 'Description here.',
            APP_VERSION: '0.0.1'


ANGULARJS SERVICES – Factory and Services

Using the factory function on the provide service is usually a much simpler option than using provider, if you don’t need to configure the underlying provider object. The snippet of code here is the Angular source code for the factory function.

function factory(name, factoryFn, enforce) { 
	return provider(name, { 
		$get: enforce !== false ? enforceReturnValue(name, factoryFn) : factoryFn 

You can see that all it really does is call the provider function and assign the function you pass to the factory function as the value of the get property on the provider.

Internally, it creates and passes the parameter name, enforce, just as a safety check to make sure the function passed to it actually returns an object. To use the factory function, you just pass it a name as the first parameter, like the provider function, and the second parameter is a function that will return an object that represents the service instance. If you don’t need to configure the provider, like previous post sample demo code, then using the factory function will be a much simpler and readable way to create your services.

The next service creation function we’ll look at is actually named service. It’s just a very thin wrapper around the factory function we just saw. The only difference is that the function you passed to the service method will be treated as a constructor function and called with the JavaScript “new” operator.

The snippet here is the Angular source code for the service function.

	function service(name, constructor) { 
	  return factory(name, ['$injector', function($injector) {  
	   return $injector.instantiate(constructor); 

It uses the instantiate method of the injector to call the function you pass to the service method. The instantiate method will then use the “new” operator to execute the function that creates the service. You would use the service method instead of the factory method if you specifically needed your function to be treated as a constructor and called with the “new” operator. There are several reasons why you may want that behavior. One is if you have defined an inheritance hierarchy in your code. Creating an instance with “new” will make sure that your instantiated object properly inherits from its prototypes.

Here is the example you must use the services instead of factory.

        .service('logger', MyLogger);

    function LoggerBase() { }

    LoggerBase.prototype.output = function(message) {
        console.log('LoggerBase: ' + message);

    function MyLogger() {;

        this.log = function(obj) {
            console.log('Book: ' +;

    MyLogger.prototype = Object.create(LoggerBase.prototype);

only now I can use the output function, but using factory it won’t.

 app.config(['$logProvider',  function ( $logProvider) {
        $logProvider.output('what ever here!');

to be continue……..

AngularJs Services – Provider

Try to help reader to understanding of Angular service, and the confidence to choose the right technique when come to use it .

There are five functions you can use to create an Angular service. All of these functions may be called on the built-in provide service. All of them are also exposed on the module object as a convenience. The most fundamental service creation function is the provider function. Creating services with it allows you to explicitly create a configurable provider object. The provider knows how to create the resulting service. The remaining four functions all internally call the provider function.

Now start with the lower provider services, here is the example code for using the angularjs provider service:

app.provider('myApp', [function () {

        var includeVersion = false;
        this.setIncludeVersion = function (value) {
            includeVersion = value;

        this.$get = function () {
            var appName = 'My first App";
            var version = '0.0.1';
            if (includeVersion) {
                appName += ' ' + version;
            var appDesc = 'here is some description';
            return {
                appName: appName,
                appDesc: appDesc


See in here you could pass a parameter to decided some basic setting, just like website have a web.config file, so the app in the client side also have their own config file.
Be aware of when you use the provider function the angularjs will automatic add the Provider to it, so when you use it need use the name with myAppProvider.

   app.config(['myAppProvider', function (bookingAppProvider) {


to be continue….

Truth in Javascript and simple example using in angularjs

Javascript is loose language and understand the truth is very help you to write javascript code. Here it is:

var num = 0;
var myObj1 = undefine;
var myObj2 = null;
var myObj3 = {};
var myStr = "";
if(num) // false
if(myObj1) // false
if(myObj2) //false
if(myStr) //false
if(myObj3) // true

Very simple and common used in angularjs

<div ng-show="myObj3"></div> // will show

<div ng-show="myStr" class="ng-hide"></div> // will hide

The architecture of real live AngularJS — Get start with angularJs — Part 2

A good project should has a good architecture, and in angularjs is very easy to modular your projects. And also your project will be easy to extend it.

For example like this:

(function () {
    "use strict";
   // app.js
    var app = angular.module("productManagement",

//this is services.js
(function () {
    "use strict";

//this is my productResource.js
(function () {
    "use strict";

    function productResource($http) {
        //url could be external or internal
        return $http("/api/products/:productId")

So every javascript file just has few lines. And it separate the angular project to three modules, the main moudule is the “productManagement” and it has two dependants are “services” and “productResource”.

I came from C# background, so I like write code also follow the rule  single responsibility and dependency inversion.

It is much easy to read and extensible.

Building a website with node.js–to be continue

This will inlude knowledge of express,view engines,controllers,services,static resources,client-side dependencies.

After you installed the node.js tools for Visio Studio, when you start create a new project you could choose build a nodejs website

nodejs website

Once you created it, the package.json is like your create other project,this is to know what dependence I used in my project.

Clear your server.js code.


Now just run your server.js first, you could open a browser you could the request in your server