跳至主要内容

帖子

Replace ng-annotate with babel-plugin-angularjs-annotate

Replace ng-annotate with babel-plugin-angularjs-annotateng-annotate was deprecated, the successor is babel-plugin-angularjs-annotate.
More details, please read this post.
babel-plugin-angularjs-annotate is a standard Babel plugin.
Install babel-plugin-angularjs-annotate.
npm install babel-plugin-angularjs-annotate --save-dev It is easy to configure it in the babel configuration file, there is a .babelrc file located in the project root folder.
{ "plugins": ["transform-runtime", ["angularjs-annotate", { "explicitOnly" : true}]], "presets": ["es2015", "stage-0"] } The explicitOnly option force you to use ngInject or /*@ngInject*/ to handle the dependency injection.
I have used ngInject in all of the smaple codes to process dependency injection explicitly, there is no need to change the codes.
In the former codes, I configured a webpack loader named ng-annotate-loader to process ngInject via ng-annotate in we…
最新博文

Getting started wtih Angular 2: part 5

Authentication We follow the steps in Angular 1.x sample. I will create some facilities.
A Signin and Signup components.A AuthService to wrap HTTP authentiction service.A AppShowAuthed directive to show or hide UI element against the authentiction status. Lets start with creating AuthService.
AuthService In order to handle signin and signup request, create a service named AuthService in src/app/core folder to process it.
@Injectable() exportclassAuthService { private currentUser$:BehaviorSubject<User> =newBehaviorSubject<User>(null); private authenticated$:ReplaySubject<boolean> =newReplaySubject<boolean>(1); private desiredUrl:string=null; constructor( privateapi:ApiService, privatejwt:JWT, privaterouter:Router) { } attempAuth(type:string, credentials:any) { const path = (type==='signin') ?'/login':'/signup'; const url ='/auth'+path; this.api.post(url, credentials) .map(res=>res.jso…

Getting started with Angular 2: part 4

Create a new post Since Angular2 RC2 introduced a complete new form modules(search @angular/forms in https://npmjs.com), it allow you use template driven form like Angular 1.x, it also support the programatic approach.
In the previous posts, we have create some components, and use HTTP client to fetch data from backend APIs. In this post, we will focus on form submission.
Add Postnew-post.component.ts:
import { Component, OnInit, OnDestroy } from'@angular/core'; import { Router } from'@angular/router'; import { Subscription } from'rxjs/Subscription'; import { Post } from'../core/post.model'; import { PostService } from'../core/post.service'; @Component({ selector: 'app-new-post', templateUrl: './new-post.component.html', styleUrls: ['./new-post.component.css'] }) exportclassNewPostComponentimplementsOnInit, OnDestroy { data = { title: '', home: '' }; sub:Subscription; constructor(privatep…