Angular 2 with CLI & Angularfire

Angular 2's CLI makes building an structuring your app just that much easier

AngularFire makes building angular 2 apps with firebase so nice

With this stack

Angular-CLI

ng new

The Angular2 CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!

ng generate

Generate components, routes, services and pipes with a simple command. The CLI will also create simple test shells for all of these.

ng serve

Easily put your application in production

Test, Lint, Format

Make your code really shine. Run your unittests or your end-to-end tests with the breeze of a command. Execute the official Angular2 linter and run clang format.

npm install -g angular-cli

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

http://localhost:4200/

Lets setup our Angular 2 project

ng generate component my-new-component
ng g component my-new-component //using the alias

//components support relative path generation
//if in the directory src/app/feature/ and you run
ng g component new-cmp

//your component will be generated in src/app/feature/new-cmp
//but if you were to run
ng g component ../newer-cmp

//your component will be generated in src/app/newer-cmp

Generating Components, Directives, Pipes and Services

ng generate route hero

Generating a route (localhost:4200/my-route)

This will create a folder which will contain the hero component and related test and style files.

The generated route will also be registered with the parent component's @RouteConfig decorator.

By default the route will be designated as a lazy route which means that it will be loaded into the browser when needed, not upfront as part of a bundle.

In order to visually distinguish lazy routes from other routes the folder for the route will be prefixed with a + per the above example the folder will be named +hero.

ng build

Creating a build for production

The build artifacts will be stored in the dist/ directory.

ng test

Running unit and end-to-end tests 

ests will execute after a build is executed via Karma, and it will automatically watch your files for changes.

You can run tests a single time via --watch=false, and turn off building of the app via --build=false (useful for running it at the same time as ng serve).

ng e2e

Before running the tests make sure you are serving the app via ng serve.

ng github-pages:deploy --message "Optional commit message"

Deploying the app via GitHub Pages

This will do the following:

• creates GitHub repo for the current project if one doesn't exist
• rebuilds the app in production mode at the current HEAD
• creates a local gh-pages branch if one doesn't exist
• moves your app to the gh-pages branch and creates a commit
• edit the base tag in index.html to support github pages
• pushes the gh-pages branch to github
• returns back to the original HEAD

ng github-pages:deploy --message "Optional commit message"

Deploying the app via GitHub Pages

This will do the following:

• creates GitHub repo for the current project if one doesn't exist
• rebuilds the app in production mode at the current HEAD
• creates a local gh-pages branch if one doesn't exist
• moves your app to the gh-pages branch and creates a commit
• edit the base tag in index.html to support github pages
• pushes the gh-pages branch to github
• returns back to the original HEAD

AngularFire

AngularFire2 integrates Firebase's realtime observers and authentication with Angular2.

Example

import {Component} from 'angular2/core';
import {AngularFire} from 'angularfire2';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'project-name-app',
  providers: [],
  templateUrl: 'app/project-name-app.html',
  directives: [],
  pipes: []
})
export class MyApp {
  items: Observable<any[]>;
  constructor(af: AngularFire) {
    this.items = af.list('/items');
  }
}

1. Create a new project

ng new <project-name>
cd <project-name>

2. Install AngularFire 2 and Firebase

npm install angularfire2 firebase --save

3. Install typings

npm install typings -g
typings install --save --global firebase

Open typings.json make sure ambient is replaced with global

{
  "globalDevDependencies": {
    "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
    "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
  },
  "globalDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"
  }
}

typings install

4. Include AngularFire 2 and Firebase in the vendor files

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  var app = new Angular2App(defaults, {
    vendorNpmFiles: [
      'angularfire2/**/*.js',
      'firebase/lib/*.js'
    ]
  });
  return app.toTree();
}

5. Build

ng build

6. System.js

System.config({
  map: {
    firebase: 'vendor/firebase/lib/firebase-web.js',
    angularfire2: 'vendor/angularfire2'
  },    
  packages: {
    app: {
      format: 'register',
      defaultExtension: 'js'
    },
    angularfire2: {
      defaultExtension: 'js',
      main: 'angularfire2.js'
    }
  }
});

7. Bootstrap

import {bootstrap} from 'angular2/platform/browser';
import {MyAppClass} from './app/<my-app-class>';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {FIREBASE_PROVIDERS, defaultFirebase, AngularFire} from 'angularfire2';

bootstrap(<MyAppClass>, [
  FIREBASE_PROVIDERS,
  defaultFirebase('https://<your-firebase>.firebaseio.com'),
  ROUTER_PROVIDERS
]);

8. Inject AngularFire

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {AngularFire} from 'angularfire2';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'project-name-app',
  providers: [],
  templateUrl: 'app/project-name-app.html',
  directives: [ROUTER_DIRECTIVES],
  pipes: []
})
@RouteConfig([

])
export class ProjectNameApp {
  constructor(af: AngularFire) {

  }
}

9. Bind to a list

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {AngularFire} from 'angularfire2';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'project-name-app',
  providers: [],
  templateUrl: 'app/project-name-app.html',
  directives: [ROUTER_DIRECTIVES],
  pipes: []
})
@RouteConfig([

])
export class ProjectNameApp {
  items: Observable<any[]>;
  constructor(af: AngularFire) {
    // create a list at /items
    this.items = af.list('/items');
  }
}

<ul *ngFor="#item of items | async">
  <li class="text">
    {{item}}
  </li>
</ul>

10. Serve

ng serve

Run the serve command and go to localhost:4200 in your browser.

API: AngularFire Service

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {Observable} from 'rxjs/Observable';
import {FIREBASE_PROVIDERS, defaultFirebase, AngularFire} from 'angularfire2';
import {Question} from './services/question';

@Component({
  template:`
    <ul>
      <li *ngFor="#question of questions | async">
        {{question.text}}
      </li>
    </ul>
  `
})
class App {
  questions:Observable<Question[]>
  constructor(af:AngularFire) {
    // Get an observable of a synchronized array from <firebase-root>/questions
    this.questions = af.list('/questions');
  }
}

bootstrap(App, [
  // Common injectable providers from the AngularFire lib
  FIREBASE_PROVIDERS,
  // Tell AngularFire the base URL for the Firebase used throughout
  defaultFirebase('https://<some-firebase>.firebaseio.com')
]);