一、安裝最新版本的 nodejs
注意：請先在終端/控制臺窗口中運行命令 node -v 和 npm -v， 來驗證一下你正在運行
node 6.9.x 和 npm 3.x.x 以上的版本。 更老的版本可能會出現錯誤，更新的版本則沒
問題。
二、全局安裝 Angular CLI 腳手架工具
1. 使用 npm 命令安裝
npm install -g @angular/cli
2.使用 cnpm 命令安裝?
cnpm install -g @angular/cli?
三、創建項目?
1. 打開 cmd 找到你要創建項目的目錄?
2. 創建項目 ng new 項目名稱 創建一個項目 ng new my-app?
3. 進入剛才創建的項目里面啟動服務 cd my-app?
cnpm install //安裝依賴?
ng serve --open?
四、目錄結構分析?
1. app.module.ts、組件分析?
定義 AppModule，這個根模塊會告訴 Angular 如何組裝該應用。 目前，它只聲明了 AppComponent。 稍后它還會聲明更多組件。
?//Angular 模塊類描述應用的部件是如何組合在一起的。 每個應用都至少有一個 Angular 模塊，也就 是根模塊，
?// 用來引導并運行應用。 你可以為它取任何名字。常規名字是 AppModule。 也就是 app.module.ts 文件?
/*引入組件*/?
import { BrowserModule } from '@angular/platform-browser'; /*BrowserModule，瀏覽器解 析的模塊*/?
import { NgModule } from '@angular/core'; /*angualrjs 核心模塊*/?
import { FormsModule } from '@angular/forms'; /*表單數據綁定 表單驗證需要的模塊*/?
import { AppComponent } from './app.component'; /*根組件*/ @NgModule 接受一個元數據對象，告訴 Angular 如何編譯和啟動應用。*/?
@NgModule({
?declarations: [ /*引入當前項目運行的的組件*/?
AppComponent?
],?
imports: [ /*引入當前模塊運行依賴的其他模塊*/
?BrowserModule,?
FormsModule?
],?
providers: [], /*定義的服務 回頭放在這個里面*/
?bootstrap: [AppComponent] /* 指定應用的主視圖（稱為根組件） 通過引導根 AppModule 來啟動 應用 ，這里一般寫的是根組件*/
?})?
export class AppModule { }?
2 創建 angualr 組件?
https://github.com/angular/angular-cli?
創建組件：
?ng g component components/header?
組件內容詳解：
?import { Component, OnInit } from '@angular/core'; /*angular 核心*/
?@Component({
?selector: 'app-header', /*使用組件的名稱*/
?templateUrl: './header.component.html', /*html 模板*/?
styleUrls: ['./header.component.css'] /*css 樣式*/?
})?
export class HeaderComponent implements OnInit {?
constructor() { /*構造函數*/?
}
ngOnInit() { /*初始化加載的生命周期函數*/
?}
?}?
五，常用的內容
1. 數據文本綁定?
{{}}?
<h1> {{title}}? </h1>??
2.綁定屬性綁定 html?
this.h="<h2>這是一個 h2 用[innerHTML]來解析</h2>"
<div [innerHTML]='h'></div>?
?3、*ngFor 普通循環
<ul>
<li *ngFor="let item of list;let i=index">
{{i}}------- {{item}}
</li>
</ul>
?4、條件判斷?
<p *ngIf="list.length>3">這是 ngIF 判斷是否顯示</p>
5、執行事件?
<button (click)="getData()" >xxxxx</button>
getData(){
alert('xxxxxx');
}
? 6、雙向數據綁定?
<input [{ngModel}]="inputValue" />
?注意引入：FormsModule?
?imports: [
? ?BrowserModule,
? ? FormsModule
]
使用：?
<input type='text' [{ngModel}]="inputValue" />
{{ inputValue }}
六、創建 angualr 服務使用服務?
ng g service my-new-service?
創建到指定目錄下面?
ng g service services/storage?
1.app.module.ts 里面引入創建的服務
?import { StorageService } from './services/storage.service';?
2. NgModule 里面的 providers 里面依賴注入服務
?providers: [StorageService]
?3、使用的頁面引入服務，注冊服務?
import { StorageService } from '../../services/storage.service';?
constructor(private storage: StorageService) { }?
4.使用
this.storage.內容
?七、Angular4.x get post 以及 jsonp 請求數 據?
1.引入 HttpModule 、JsonpModule? ?（普通的 HTTP 調用并不需要用到 JsonpModule）
?import { HttpModule, JsonpModule } from '@angular/http';?
2.HttpModule 、JsonpModule 依賴注入?
imports: [?
BrowserModule,?
FormsModule,?
HttpModule,?
JsonpModule,
?AppRoutingModule?
],
使用 Http、Jsonp：?
1、在需要請求數據的地方引入
?Http import {Http,Jsonp} from "@angular/http";
?2、構造函數內申明：?
constructor(private http:Http,private jsonp:Jsonp) { }?
3、對應的方法內使用 http 請求數據?
this.http.get(url).subscribe( function(data){
console.log(data);
},function(err){
console.log('失敗');
} );
this.jsonp.get("http://www.xxx.com&callback=JSONP_CALLBACK") .subscribe( function(data){
console.log(data);
},function(err){
console.log('失敗');
} );?
使用 Post?
1. 引入 Headers 、Http 模塊 在用的地方?
import {Http,Jsonp,Headers} from "@angular/http";?
2. 實例化 Headers?
private headers = new Headers({'Content-Type': 'application/json'});?
3.post 提交數據
?this.http .post('http://localhost:8008/api/test', JSON.stringify({username: 'admin'}),
{headers:this.headers}) .subscribe(function(res){
console.log(res.json());
});?
使用 rxjs 請求數據?
RxJS 是一種針對異步數據流編程工具，或者叫響應式擴展編程；可不管如何解釋 RxJS 其?
目標就是異步編程，Angular 引入 RxJS 為了就是讓異步可控、更簡單。 大部分 RxJS 操作
符都不包括在 Angular 的 Observable 基本實現中，基本實現只包括 Angular 本身所需的功
能。 如果想要更多的 RxJS 功能，我們必須導入其所定義的庫來擴展 Observable 對象， 以下 是這個模塊所需導入的所有 RxJS 操作符：?
1、 引入 Http 、Jsonp、RxJs 模塊?
import {Http,Jsonp} from "@angular/http";?
import {Observable} from "rxjs";
?import "rxjs/Rx";?
你可能并不熟悉這種 import 'rxjs/Rx'語法，它缺少了花括號中的導入列表：{...}。 這是因為我們并不需要操作符本身，這種情況下，我們所做的其實是導入這個庫，加載并運行其中的腳本， 它會把操作符添加到 Observable 類中。
2、 構造函數內申明：?
constructor(private http:Http,private jsonp:Jsonp) { }?
3、get 請求?
this.http.get(url).map(res => res.json()) .subscribe( function(data){
console.log(data);
} );?
4、Jsonp 請求?
this.jsonp.get("http://www.xx.com&callback=JSONP_CALLBACK") .map(res =>
res.json()) .subscribe( function(data){
console.log(data);
} );
?http.get 方法中返回一個 Observable 對象，我們之后調用 RxJS 的 map 操作符對返回的數據 做處理。
?八、路由?
創建路由?
ng new 項目名稱 --routing
會有 app-routing.module.ts文件
若沒有我們可以手動創建
樣式：
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
//引入組件
import { HomeComponent } from './components/home/home.component';
import { UserComponent } from './components/user/user.component';
import { HomeconComponent } from './components/home/homecon/homecon.component';
import { UserlistComponent } from './components/user/usercon/userlist/userlist.component';
import { UseraddComponent } from './components/user/usercon/useradd/useradd.component';
import { UsereditComponent } from './components/user/usercon/useredit/useredit.component';
//配置路由
const routes: Routes = [
{
? ? ?path:'home',
? ? ? component:HomeComponent,
children:[
? ? {
? ? path:'homecon',
? ? ?component:HomeconComponent
? ?},
? ? ?{ //匹配不到路由的時候加載的組件 或者跳轉的路由
? ? ? ?path:'**',/*任意的路由*/
? ? ? ?redirectTo:'/home/homecon'
? ? }
? ?]
? },
? {
? ?path:'user',
? ?component:UserComponent,
? children:[
? {
? path:'userlist',
? component:UserlistComponent,
? ?},
?{
path:'useradd',
component:UseraddComponent,
},
{
path:'useredit',
component:UsereditComponent,
},
{ //匹配不到路由的時候加載的組件 或者跳轉的路由
path:'**',/*任意的路由*/
redirectTo:'/user/userlist'
}
]
},
{ //匹配不到路由的時候加載的組件 或者跳轉的路由
path:'**',/*任意的路由*/
redirectTo:'home'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
?獲取傳值?
1.引入
?import {ActivatedRoute } from '@angular/router';?
2.實例化?
constructor(private route:ActivatedRoute) { }?
3.?
? path:'con/aid:123',
ngOnInit() {
this.route.params.subscribe(function(data){
console.log(data);//123
}) }?
8.3 默認跳轉路由?
<a routerLink='/home'>xxxx</a>
//剛進來路由為空跳轉的路由(了解)
{
path:'',
redirectTo:'home',
pathMatch:"full"
}
//匹配不到路由的時候加載的組件 或者跳轉的路由
{ path: '**', /*任意的路由*/
redirectTo:'home' }
8.4 routerLinkActive 設置 routerLink 默認選中路由?
<a routerLink='/home'? routerLinkActive="active">xxxx</a>
<a routerLink='/news' routerLinkActive="active>xxxx</a>
.active{?
color:red;}
8.5 路由的 js 跳轉
1. 引入
import { Router } from '@angular/router';
2.初始化
export class HomeComponent implements OnInit {
constructor(private router: Router) {
}
ngOnInit() {
}goNews(){
// this.router.navigate(['/news', hero.id]);
this.router.navigate(['/news']);
}}
3.路由跳轉
this.router.navigate(['/news', hero.id]);
8.6 父子路由
1. 創建組件引入組件
import { NewsaddComponent } from './components/newsadd/newsadd.component';
import { NewslistComponent } from './components/newslist/newslist.component';
2. 配置路由
{path: 'news',component:NewsComponent,
children: [
{path:'newslist'
,component:NewslistComponent},
{path:'newsadd',
component:NewsaddComponent}
]
}
3. 父組件中定義 router-outlet
<router-outlet></router-outlet>
九、父子組件傳值
1. 父組件給子組件傳值
1.子組件
import { Component, OnInit ,Input } from '@angular/core';
2.父組件調用子組件
<app-header [msg]="msg"></app-header>
3.子組件中接收數據
export class HeaderComponent implements OnInit {
@Input() msg:string
constructor() { }
ngOnInit() {
}}
2. 子組件給父組件傳值
1. 子組件引入 Output 和 EventEmitter
import { Component, OnInit ,Input,Output,EventEmitter} from '@angular/core';
2.子組件中實例化 EventEmitter
@Output() private outer=new EventEmitter();
/*用 EventEmitter 和 output 裝飾器配合使用指定類型變量*/
3. 子組件通過 EventEmitter 對象 outer 實例廣播數據
sendParent(){
// alert('zhixing'
);
this.outer.emit('msg from child')}
4.父組件調用子組件的時候，定義接收事件 , outer 就是子組件的 EventEmitter 對象 outer
<app-heade (outer)="runParent($event)"></app-header>
5.父組件接收到數據會調用自己的 runParent 方法，這個時候就能拿到子組件的數據
//接收子組件傳遞過來的數據
runParent(msg:string){
alert(msg);
}
十、獲取 dom 節點操作 dom 節點
模板
<div #mydiv>box</box>
ts 文件
import { Component, OnInit,ElementRef,ViewChild} from '@angular/core';
@ViewChild('mydiv') mydiv: ElementRef;
ngOnInit() {
let el = this.mydiv.nativeElement
;console.log(el)
// 使用原生方法
el.style.color='red';
}
