credit: http://mean.ghost.io/sandbox-eval-plunker-and-angularjs/
Angular 4 by examples - Plunker_Created on Plnkr: Helping developers build the web._embed.plnkr.co
The best way to learn programming is to see code in action:
I have kept the following notes for future reference:
Angular CLI helps development to debugging, testing to deploying the Angular apps.
Here is the terminology:
angular-cli - refers to Angular 2
@angular/cli - refers to Angular 4
To install npm install -g @angular/cli
The underlying language used is typescript which is translated to javascript using babel.
The task manager (like gulp, grunt) used by Angular CLI is webpack.
Old apps were page centric, modern apps are component based.
4 pillars of Angular 4
- Component — encapsulates the template (html), data (variables) but not source of data and the behaviour (functions) of a view.
- Directives — bridges the gap between backend and front end. Used for DOM manipulation.
- Routers — takes care of navigation between components.
- Services — reusable tags primarily used for manipulating DOM elements
Adding a component
create a mycomp.component.ts file
import {Component} from '@angular/core'
@Component({selector:'my-component',template:'welcome to my custom component'})
export class MyComponent{
}
and add component reference to app.module.ts in declarations parameter of @NgModule
import { MyComponent } from './mycomp.component';
@NgModule({declarations: [AppComponent, MyComponent],imports: [BrowserModule],providers: [],bootstrap: [AppComponent]})
Adding a template file to a component
Create a file footer.component.html and replace the template key in @Component of a component templateUrl:'./footer.component.html'.
One way binding
Add properties to component class:
export class FooterComponent {
title = "welcome to footer component"
courses = ['Angular', 'React', 'jQuery']
}
And bind them like this:
<li *ngFor="let course of courses">
</li>
Adding a service
Add a file course.service.ts
import { Injectable } from '@angular/core'
export class CourseService {
getCourses() {return ['Angular', 'React', 'jQuery'];}}
Add the reference inside app.module.ts’s @NgModule
providers: [CourseService]
Inject it in a component through it’s constructor:
constructor(cs: CourseService) {this.courses = cs.getCourses();}
Create a component from CLI
Fire the command ng g c newComponent.
There are 5 types of binding are supported
- Property binding
[]- bind the ts component property with html template property - Event binding
()- binding the html template event to ts component - Two way data binding
[()]- for component to template and vice versa data flow - Class binding — e.g.: [class.active]. Is used to add/remove a CSS class
- Style binding — used to set the CSS style rules
Property binding
Add a property to class profilePic = "http://lorempixel.com/400/200"
Use the property in the component <img [src]=profilePic />
Add Bootstrap to Angular app
As of this writing the most stable version of Bootstrap is 3.3. Hence, head over to http://getbootstrap.com/docs/3.3/getting-started/#download and et CDN link under Bootstrap CDN somewhat like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Add this to index.html
Use event binding
Add a button like this:
<button class="btn btn-danger" (click)="clickHandler($event)">click me</button>
And it’s corresponding event handler in the component:
clickHandler($event) {console.log($event);}
Using 2 way data binging
<input type="text" [(ngModel)]="currentCity" />
This is similar to
<input type="text" [value]="currentCity" (input)="currentCity=$event.target.value" />
Class binding
With a property isActive in the component, this
<button class="btn btn-danger" [class.active]="isActive" >automatic active - click me</button>
is equal to
<button class="btn btn-danger active" >manually active - click me</button>
Style binding
We can set the style properties of an element using style properties
<button class="btn btn-danger" [style.backgroundColor]="isActive?'green':'red'" >click me</button>
Inputs
Set a input property in the child component
@Component({selector: 'header-component',template: 'welcome to header component ',inputs: ['dataFromParentComponent']})
export class HeaderComponent {
dataFromParentComponent = ""; //or [@Input](http://twitter.com/Input "Twitter profile for @Input") dataFromParentComponent = "";
}
Notice that there is no value assigned to dataFromParentComponent.
In the parent component, set the value of this input with it’s own property:
@Component({selector: 'my-component',template: `<header-component [dataFromParentComponent]="myComponentData" ></header-component>`})
export class MyComponent {
myComponentData = "Parent data"
}
Originally published at xameeramir.github.io.