Forward Everyday

Replace ng-annotate with babel-plugin-angularjs-annotate ng-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 ngInjec...

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 () export class AuthService { private currentUser$ : BehaviorSubject < User > = new BehaviorSubject < User >( null ); private authenticated$ : ReplaySubject < boolean > = new ReplaySubject < boolean >( 1 ); private desiredUrl : string = null ; constructor ( private api : ApiService , private jwt : JWT , private router : Router ) { } attempAuth( type : string , credentials : any ) { const path = ( type === ' signin ' ) ? ' /login ' ...

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 Post new-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 ' ] }) export class NewPostComponent implements OnInit , OnDestroy { data = { title: ...