Angular CLI 簡單使用
版本5.2.7
全局安裝脚手架
npm install -g @angular/cli
新建一個項目
ng new ng-app
啓動項目
ng serve -o
新建一個組件
ng g component heroes
輸入框雙向綁定
X.component.html
<div>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name">
</label>
</div>
[(ngModel)]是一个Angular语法，用与把hero.name绑定到输入框中。 它的数据流是双向的：从属性到输入框，并且从输入框回到属性。
app.module.ts
import { FormsModule } from '@angular/forms';
imports: [
BrowserModule,
+ FormsModule
],
循環列表
*ngFor="let data of datas"
判斷顯示
*ngIf="X"
添加事件
(click)="handle(arg)"
樣式判定
[class.selected]="X=== selectedX"
模擬獲取數據
ng generate service name --module=app
name.service.ts
+ import {Hero} from './hero/hero';
+ import {HEROES} from './mock';
export class HeroService {
+ getHeroes(): Hero[] {
+ return HEROES;
+ }
}
where you use:
+ import {HeroService} from '../hero.service';
constructor(
+ private heroService: HeroService
) {}
添加路由
look at index.html
<base href="/">
The router needs this to define where the root of our application is.
ng g module app-routing --flat --module=app
ng g component test
ng g component test-child
app-routing.module 引入模块时使用相对路径（./）
+import {RouterModule, Routes} from '@angular/router';
+import {TestComponent} from './test/test.component';
+import {TestChildComponent} from './test-child/test-child.component';
+const child: Routes = [
+ {path: '', component: TestComponent},
+ {path: 'test-child', component: TestChildComponent},
+];
+const routes: Routes = [
+ {
+ path: 'test',
+ children: child
+ }
+];
@NgModule({
imports: [
+ RouterModule.forRoot(routes),
+ RouterModule.forChild(child)],
+ exports: [RouterModule],
})
test.component.html
<p>
test works!
<a routerLink="test-child">to test-child</a>
</p>
test-child.component.html
<p>
test-child works!
</p>
添加路由傳參
使用官網介紹的HeroList
name.service.ts
+ getHero(id: number): Hero { + return HEROES.find(hero => hero.id === id); + }
app-routing.module
+import {HeroesComponent} from './heroes/heroes.component';
+import {HeroComponent} from './hero/hero.component';
const routes: Routes = [
+ {path: 'heroes', component: HeroesComponent},
+ {path: 'hero/:id', component: HeroComponent}
];
heroes.component.html
<div>
<ul>
<li *ngFor="let hero of heroes"
[class.seleted]="hero === selectedHero">
<a routerLink="/hero/{{hero.id}}"><span>{{hero.id}}</span><span>{{hero.name}}</span></a>
</li>
</ul>
</div>
hero.component
import {ActivatedRoute} from '@angular/router';
+import {Hero} from './hero';
+import {HeroService} from '../hero.service';
export class HeroComponent implements OnInit {
+ hero: Hero;
+ id: number;
constructor(
+ private heroService: HeroService,
+ private route: ActivatedRoute) {
}
ngOnInit() {
+ this.route.params
+ .subscribe(x => {
+ this.hero = this.heroService.getHero(+x.id);
+ });
}
}
給路由添加data屬性
const child: Routes = [
{path: '', redirectTo: 'test', pathMatch: 'full'},
{path: 'test/test-child', component: TestChildComponent, data: {navigation: false}}, ]; const routes: Routes = [ {path: 'heroes', component: HeroesComponent, data: {navigation: true}}, { path: 'test', data: {navigation: true}, children: child }, {path: 'hero/:id', component: HeroComponent, data: {navigation: true}} ];
用來判斷是否顯示導航，或是做页面访问权限判断。----开玩笑，我也不知道什么情景有用
app.component
import {Router, ActivatedRoute, NavigationEnd} from '@angular/router';
navigation: string;
constructor(private router: Router, private activatedRoute: ActivatedRoute) {
}
getNavigation(): void {
this.router.events
.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.navigation = this.activatedRoute.firstChild.routeConfig.data.navigation;
}
});
}
ngOnInit() {
this.getNavigation();
}
<ul *ngIf="navigation">
<li routerLink="test">test</li>
<li routerLink="heroes">heroes</li>
</ul>
終版
const child: Routes = [ {path: '', redirectTo: 'test', pathMatch: 'full'}, {path: 'test/test-child', component: TestChildComponent, data: {navigation: false}}, {path: 'test/test-child2', component: TestChild2Component, data: {navigation: true}}, ]; const routes: Routes = [ {path: '', redirectTo: 'heroes', pathMatch: 'full'}, { path: 'test', data: {navigation: true}, component: TestComponent, pathMatch: 'full', children: child }, {path: 'heroes', component: HeroesComponent, data: {navigation: true}}, {path: 'hero/:id', component: HeroComponent, data: {navigation: true}}, ];
添加http
app.module.ts
+ import {HttpClientModule} from '@angular/common/http';
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
+ HttpClientModule
],
hero.service.ts
+ import {HttpClient} from '@angular/common/http';
private heroesUrl = 'http://127.0.0.1:8080/getName';
getHeroes2(): Observable<any> { return this.http.get<any>(this.heroesUrl + '?name=user_name'); } getHeroes3(): Observable<any> { return this.http.post<any>(this.heroesUrl,{name:"user_name"}); }
服務器是用nodejs起的，用的以前寫過的數據，調用接口和本地模擬的時候是一樣的。
初步看到這裏了，得先看看typescript和rxjs才好繼續。
附上github地址，純新互勉。
添加父子間的數據傳遞
父傳子：heroes組建中將hero傳遞給<app-hero [hero]="selectedHero"></app-hero>
子傳父：
子組件
import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'app-sizes-child',
templateUrl: './sizes-child.component.html',
styleUrls: ['./sizes-child.component.css']
})
export class SizesChildComponent implements OnInit {
@Input() size: number | string;
@Output() changeSize = new EventEmitter<number | string>();
constructor() {
}
changedSize(size:number | string):void{
this.changeSize.emit(size)
}
ngOnInit() {
}
}
<p>
ngModel：雙向綁定
ngModelChange：傳遞子數據
{{size}}
<input [(ngModel)]="size" (ngModelChange)="changedSize($event)">
</p>
父組件
<app-sizes-child [size]="fontSizePx" (changeSize)="handleSize($event)"></app-sizes-child>
changedSize:{{changedSize}}
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-sizes',
templateUrl: './sizes.component.html',
styleUrls: ['./sizes.component.css']
})
export class SizesComponent implements OnInit {
fontSizePx: number | string = '20';
changedSize: number | string;
constructor() {
}
handleSize($event) {
this.changedSize = $event;
}
ngOnInit() {
}
}
總結：vue,react,angular，師出同門，相煎何太急。
添加动画
import {Component, OnInit} from '@angular/core';
import {trigger, state, style, animate, transition} from '@angular/animations';
@Component({
selector: 'app-animations',
templateUrl: './animations.component.html',
styleUrls: ['./animations.component.css'],
animations: [
trigger('signal', [
state('hide', style({
'height': 0,
'background-color': 'green'
})),
state('show', style({
'height': '100px',
'background-color': 'yellow'
})),
transition('*=>*', animate(500))
])
]
})
export class AnimationsComponent implements OnInit {
signal: string;
constructor() {
}
hide() {
this.signal = 'hide';
}
show() {
this.signal = 'show';
}
toggleState() { this.signal= this.signal=== 'hide' ? 'show' : 'hide'; }
ngOnInit() {
}
}
<div [@signal]="signal"></div> <button (click)="hide()">hide</button> <button (click)="show()">show</button>
在适用的元素上绑定[@trigger]，每当state改变，触发相应animation。
