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>
終版
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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。