AngularJS 2 Framework

Reading time ~1 minute

This note is about the AngularJS 2.

Import Libraries

Install by using npm

Install one by one

> npm install %{package_name}

Or install together with package.json

> npm install
{
  "name": "webrtc",
  "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.6",
    "@angular/compiler": "2.0.0-rc.6",
    "@angular/compiler-cli": "0.6.0",
    "@angular/core": "2.0.0-rc.6",
    "@angular/forms": "2.0.0-rc.6",
    "@angular/http": "2.0.0-rc.6",
    "@angular/platform-browser": "2.0.0-rc.6",
    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
    "@angular/platform-server":"^2.0.0-rc.6",
    "@angular/router": "3.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.6",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.11",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.17",
    "angular2-in-memory-web-api": "0.0.18",
    "bootstrap": "^3.3.6",
    "webrtc-adapter": "^2.0.2",
    "sockjs-client":"^1.1.1",
    "stompjs":"^2.3.3",
    "ng2-cookies":"^1.0.2",
    "typescript":"^2.0.2"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.2",
    "typescript": "^1.8.10",
    "typings": "^1.3.2"
  }
}

Setting in app

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
            'webrtc-adapter': 'npm:webrtc-adapter',
            'sockjs-client': 'npm:sockjs-client',
            'stompjs': 'npm:stompjs',
            'ng2-cookies': 'npm:ng2-cookies',
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular2-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            },
            'webrtc-adapter': {
                main: './out/adapter.js',
                defaultExtension: 'js'
            },
            'sockjs-client': {
                main: './lib/sockjs.min.js',
                defaultExtension: 'js'
            },
            'stompjs': {
                main: './lib/stomp.min.js',
                defaultExtension: 'js'
            },
            'ng2-cookies': {
                defaultExtension: 'js'
            }
        }
    });
})(this);

Import to class

import {Injectable}     from '@angular/core';
import {Http, Headers} from '@angular/http';
import {Cookie} from 'ng2-cookies/ng2-cookies';
import {SettingService} from './app.setting';
import 'rxjs/Rx';
import 'webrtc-adapter';

Or

declare var navigator:any;
let SockJS = require('sockjs-client');
let Stomp = require('stompjs').Stomp;

Call variables or functions asynchronously

Using Http instead of Ajax

Callbacks syntax

Originally in JavaScript

navigator.getUserMedia({video: true, audio: true}, function(success){
        console.log(success);
    }, function(error){
        console.log(error);
    });

In AngularJS 2

navigator.getUserMedia({video: true, audio: true},
    success => {
        console.log(success);
    },
    error => {
        console.log(error);
    });

This will solve the problem of scope using ‘this’, but why?

竟然无法拒绝你的打赏

微信支付

专业处理中国护照照片一次通过

专业处理中国护照照片一次通过 Continue reading

Python Notes

Published on April 01, 2021

Scrum Training Notes

Published on December 01, 2020