Angular 2 with CLI & Angularfire

 

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

1

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.

2
 
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).

2
 
ng e2e

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

2
 
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
2
 
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
2

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

1
Not signed in 
{
  "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.

1

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')
]);
Made with Slides.com