Friday, July 15, 2016

Angular2: A learning approach.

We all know JavaScript development practice is moving to ES6 & typescript. Most of the Interactive developers are updating their skillset to ES6 & Typescript. Being Angular based Interactive developer we too have a change coming i.e. Angular2. Here we have three choices to go with AngularJS.
  1. Angular2 for JavaScript.
  2. Angular2 for Typescript.
  3. Angular2 for Dart.

Typescript is a typed super set of JavaScript which has been built and maintained by Microsoft and chosen by the AngularJS team for development. The presence of types makes the code written in Typescript less prone to run-time errors. Typescript may help us to write angular hooks easily at a later point of time. So Angular2 for Typescript is the better option.

Bower:

I started looking for Angular2 tutorial. I found it’s completely changed from Angular1.  In Angular1 I was having bower and npm for package manager. When started with Angular2 first wander was bower package manager. Angular2 was not available in Bower (Dev version is there). Quora (https://www.quora.com/Why-is-Angular-2-not-available-in-Bower) gave me answer saying typescript compilation from ES6 to ES5 require node. It cannot be import to HTML directly without compiling. So bower is of no use here. I am not exploring much on bower side for now. I guess it needs some workaround to know its possibility and I am expecting it to be possible.

Angular Template:

There are multiple templates available forAngular2. But from the time google started Angular-CLI, it has become the best template. So I started my learning with angular-cli from https://cli.angular.io/ .

Angular-CLI:

To start with AngularCLI we need latest node to be installed on our system as the basic requirement. Having lower version may not support Angular-CLI. Get the latest version of node from https://nodejs.org/en/ .  here we may have to install typings with command (npm install -g typings). Next we have to install angular-cli from command prompt or terminal. Let’s execute

npm install –g angular-cli

Now our Platform is ready to start with angular-cli.  So create a new project with

ng new <project_name>

it will create an angular-cli project. Just navigate to project directory & start the server as:

cd <project_name>
ng serve.

Open Browser & navigate to http://localhost:4200/ . It will say application works.
More details can be found at https://github.com/angular/angular-cli.
Here everything looks so easy.  Just follow the steps, execute ng serve & application is running.

Bootstrap CSS

To add bootstrap styling just add CDN resource or bootstrap.css file to the src directory and link it in index.html file. Better to go with CDN resource.

SASS Support:

To enable sass install node-sass as

npm install node-sass

and rename .css files to .scss. in /dist  folder it will create compiled respective .css files.

Layout:

Now the question came where will I create my page layout?
For page layout the perfect place is app.component.html. Here we can draw the layout we want for our page. & with the help of component selector we can decorate our page. Let’s create a component with name “top-navigation” as

ng g component top-navigation

it will create 4 files .html, .ts, .css, .spec.ts inside top-navigation folder. Now go to app.cmponent.ts update the file with

import { TopNavigationComponent } from './top-navigation/top-navigation.component'; in import section. Remember TopNavigationComponent is component name and inside from we need to provide the respective path.

and directives: [TopNavigationComponent] inside @Component.

and <app-top-navigation></app-top-navigation> inside app.component.html.

If any respective css is required for top-navigation component, update top-navigation.component.css.
Note: Here I am integrating top-navigation template inside app.component.html.  so importing top-navigation component inside app.component.

Route:

When considering page navigation we are supposed to use route.  Let’s add a router to application by executing ng generate route login

Oops it failed to create route files saying.

“(node:12032) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
Due to changes in the router, route generation has been temporarily disabled. You can find more information about the new router here: http://victorsavkin.com/post/145672529346/angular-router

Why?
They have mentioned “The Component Router is in beta release. This is the recommended Angular 2 router and supersedes the earlier deprecated beta and v2 routers.”

Just Check package.json, what dependency is mentioned with rc.3?

Update them as rc.4 so it will look like
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",

Update these packages with npm install.

I am considering we already have created ‘login’ & ‘dashboard’ component. So let’s tell our application that I am going to add router to application by updating main.ts with

import { appRouterProviders } from './app/app.routes';

and update the bootstrap as

bootstrap(AppComponent, [appRouterProviders]);

Now create a route file manually say ‘app.routes.ts’.

import { provideRouter, RouterConfig } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.Component'
import { LoginComponent } from './login/login.component'

const routes: RouterConfig = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'login', component: LoginComponent },
  { path: '', component: LoginComponent}
];

export const appRouterProviders = [
  provideRouter(routes)
];

Here to route we have configured our RouterConfig with path & component. Since to navigate we need a component, so respective component import is required.  “path: ''” is for creating a default route.

Now update app.component.ts with import.

import { ROUTER_DIRECTIVES } from '@angular/router';

next directives: [ROUTER_DIRECTIVES] inside @Component.

next <router-outlet></router-outlet> inside app.component.html, it tells the layout that routed 
component content will come inside.

Now hit the URL with login & dashboard, It will navigate to respective component.

Navigation from DOM:

Now update top-navigation.component.ts with import.
import { ROUTER_DIRECTIVES } from '@angular/router';

next directives: [ROUTER_DIRECTIVES] inside @Component.
and <a [routerLink]="['/dashboard']" >Dashboard</a> inside app.component.html . wherever navigation link is required.

If navigation has to appear on button click then html content will be like
<button type="button" (click)="dashboardNav();"> dashboard </button>

For this we need a method in respective component.ts as below

  dashboardNav (){
      this.router.navigate(['/dashboard']);
  }

And here constructor will be like

constructor(private router: Router) {}

Yep Ready to go. Just execute ng serve & enjoy.
I guess it may help. :)