;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ DemoInputComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(DemoInputComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/demo/demo-input/demo-input.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-demo-input',
5 | templateUrl: './demo-input.component.html',
6 | styleUrls: ['./demo-input.component.scss']
7 | })
8 | export class DemoInputComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | onChange(event: any) {
16 | alert(event);
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/demo/demo-pipe/demo-pipe.component.css:
--------------------------------------------------------------------------------
1 |
2 |
3 | /*# sourceMappingURL=demo-pipe.component.css.map */
4 |
--------------------------------------------------------------------------------
/src/app/demo/demo-pipe/demo-pipe.component.css.map:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "mappings": "",
4 | "sources": [],
5 | "names": [],
6 | "file": "demo-pip.component.css"
7 | }
--------------------------------------------------------------------------------
/src/app/demo/demo-pipe/demo-pipe.component.html:
--------------------------------------------------------------------------------
1 |
2 |
DatePipe
3 |
{{ today | date }}
4 |
{{ today | date: 'y-MM-dd'}}
5 |
6 |
7 |
8 | {{ birthday | date:format }}
9 |
10 |
13 |
JsonPipe
14 |
{{jsonObject | json}}
15 |
18 |
UpperCasePipe
19 | {{ 'aBc' | uppercase}}
20 |
21 |
22 |
23 |
LowerCasePipe
24 | {{ 'AbC' | lowercase}}
25 |
26 |
27 |
28 |
DecimalPipe
29 |
aa ：{{aa | number: '3.4-5'}}
30 |
bb ：{{bb | number: '3.1-5'}}
31 |
34 |
CurrencyPipe
35 |
ac ：{{ ac | currency: 'USD': false }}
36 |
bc ：{{ bc | currency: 'CNY': true: '3.1-3'}}
37 |
40 |
PercentPipe
41 |
ad ：{{ ad | percent }}
42 |
bd ：{{ bd | percent: '3.1-3' }}
43 |
46 |
SlicePipe
47 |
{{ 'abcdef' | slice: 2 : 4}}
48 |
49 |
50 | {{a}}
51 |
52 |
53 |
56 |
TitleCasePipe
57 |
{{ 'abbcd' | titlecase }}
58 |
61 |
自定义管道sort
62 |
63 |
{{a}}
64 |
65 |
2 | 异步路由
3 |
4 |
--------------------------------------------------------------------------------
/src/app/demo/demo-router-load/demo-router-load.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IronPans/angular-demo/7fe7ac0431e5409fb041fd51b3e5dc94423e318c/src/app/demo/demo-router-load/demo-router-load.component.scss
--------------------------------------------------------------------------------
/src/app/demo/demo-router-load/demo-router-load.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { DemoRouterLoadComponent } from './demo-router-load.component';
4 |
5 | describe('DemoRouterLoadComponent', () => {
6 | let component: DemoRouterLoadComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ DemoRouterLoadComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(DemoRouterLoadComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/demo/demo-router-load/demo-router-load.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-demo-router-load',
5 | templateUrl: './demo-router-load.component.html',
6 | styleUrls: ['./demo-router-load.component.scss']
7 | })
8 | export class DemoRouterLoadComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/demo/demo-router-load/demo-router-load.module.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core';
2 | import {CommonModule} from '@angular/common';
3 | import {DemoRouterLoadComponent} from './demo-router-load.component';
4 | import {DemoRouterLoadRougingModule} from './demo-router-load-routing.module';
5 |
6 | @NgModule({
7 | imports: [CommonModule, DemoRouterLoadRougingModule],
8 | declarations: [DemoRouterLoadComponent]
9 | })
10 |
11 | export class RouterLoadModule {}
12 |
--------------------------------------------------------------------------------
/src/app/demo/demo-router/demo-router.component.css:
--------------------------------------------------------------------------------
1 |
2 |
3 | /*# sourceMappingURL=demo-router.component.css.map */
4 |
--------------------------------------------------------------------------------
/src/app/demo/demo-router/demo-router.component.css.map:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "mappings": "",
4 | "sources": [],
5 | "names": [],
6 | "file": "demo-router.component.css"
7 | }
--------------------------------------------------------------------------------
/src/app/demo/demo-router/demo-router.component.html:
--------------------------------------------------------------------------------
1 |
2 | 传递的参数：{{id}}
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/app/demo/demo-router/demo-router.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IronPans/angular-demo/7fe7ac0431e5409fb041fd51b3e5dc94423e318c/src/app/demo/demo-router/demo-router.component.scss
--------------------------------------------------------------------------------
/src/app/demo/demo-router/demo-router.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { DemoRouterComponent } from './demo-router.component';
4 |
5 | describe('DemoRouterComponent', () => {
6 | let component: DemoRouterComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ DemoRouterComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(DemoRouterComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/demo/demo-router/demo-router.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {ActivatedRoute} from '@angular/router';
3 |
4 | @Component({
5 | selector: 'app-demo-router',
6 | templateUrl: './demo-router.component.html',
7 | styleUrls: ['./demo-router.component.scss']
8 | })
9 | export class DemoRouterComponent implements OnInit {
10 |
11 | id: any;
12 | constructor(private route: ActivatedRoute) {
13 | this.route.params.subscribe(param => {
14 | this.id = param['id'];
15 | })
16 | }
17 |
18 | ngOnInit() {
19 | }
20 |
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/demo/demo-router2/demo-router2.component.css:
--------------------------------------------------------------------------------
1 |
2 |
3 | /*# sourceMappingURL=demo-router2.component.css.map */
4 |
--------------------------------------------------------------------------------
/src/app/demo/demo-router2/demo-router2.component.css.map:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "mappings": "",
4 | "sources": [],
5 | "names": [],
6 | "file": "demo-router2.component.css"
7 | }
--------------------------------------------------------------------------------
/src/app/demo/demo-router2/demo-router2.component.html:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/src/app/demo/demo-router2/demo-router2.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IronPans/angular-demo/7fe7ac0431e5409fb041fd51b3e5dc94423e318c/src/app/demo/demo-router2/demo-router2.component.scss
--------------------------------------------------------------------------------
/src/app/demo/demo-router2/demo-router2.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { DemoRouter2Component } from './demo-router2.component';
4 |
5 | describe('DemoRouter2Component', () => {
6 | let component: DemoRouter2Component;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ DemoRouter2Component ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(DemoRouter2Component);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/demo/demo-router2/demo-router2.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-demo-router2',
5 | templateUrl: './demo-router2.component.html',
6 | styleUrls: ['./demo-router2.component.scss']
7 | })
8 | export class DemoRouter2Component implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/demo/demo-service/demo-service.component.css:
--------------------------------------------------------------------------------
1 |
2 |
3 | /*# sourceMappingURL=demo-service.component.css.map */
4 |
--------------------------------------------------------------------------------
/src/app/demo/demo-service/demo-service.component.css.map:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "mappings": "",
4 | "sources": [],
5 | "names": [],
6 | "file": "demo-service.component.css"
7 | }
--------------------------------------------------------------------------------
/src/app/demo/demo-service/demo-service.component.html:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/app/demo/demo-service/demo-service.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IronPans/angular-demo/7fe7ac0431e5409fb041fd51b3e5dc94423e318c/src/app/demo/demo-service/demo-service.component.scss
--------------------------------------------------------------------------------
/src/app/demo/demo-service/demo-service.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { DemoServiceComponent } from './demo-service.component';
4 |
5 | describe('DemoServiceComponent', () => {
6 | let component: DemoServiceComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ DemoServiceComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(DemoServiceComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/demo/demo-service/demo-service.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {BookService} from '../../service/book.service';
3 |
4 | @Component({
5 | selector: 'app-demo-service',
6 | templateUrl: './demo-service.component.html',
7 | styleUrls: ['./demo-service.component.scss'],
8 | providers: [BookService]
9 | })
10 | export class DemoServiceComponent implements OnInit {
11 |
12 | books: any[];
13 | constructor(private bookService: BookService) { }
14 |
15 | ngOnInit() {
16 | this.bookService.getBooks()
17 | .then(res => {
18 | this.books = res.books;
19 | console.log(this.books);
20 | });
21 |
22 | }
23 |
24 | }
25 |
--------------------------------------------------------------------------------
/src/app/demo/demo-style/demo-style.component.css:
--------------------------------------------------------------------------------
1 |
2 |
3 | /*# sourceMappingURL=demo-style.component.css.map */
4 |
--------------------------------------------------------------------------------
/src/app/demo/demo-style/demo-style.component.css.map:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "mappings": "",
4 | "sources": [],
5 | "names": [],
6 | "file": "demo-style.component.css"
7 | }
--------------------------------------------------------------------------------
/src/app/demo/demo-style/demo-style.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | 卡头
4 | 我是卡的内容
5 |
6 |
7 |
8 | 卡头
9 | 我是卡的内容
10 |
11 |
12 |
13 |
14 | 卡头
15 | 我是卡的内容
16 |
17 |
2 |
动态模板: 注入
3 |
4 |
5 |
6 |
7 |
10 |
动态模板: @ViewChild
11 |
12 |
13 |
14 |
15 |
3 |