42 |
47 |
48 |
49 | `,
50 | })
51 | export class AppComponent {
52 | name = 'Angular';
53 | routers = routers;
54 |
55 | constructor( @Inject(ActivatedRoute) public _route: ActivatedRoute) {
56 | console.log(this._route)
57 | }
58 |
59 | }
60 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 | import { RouterModule } from '@angular/router';
4 |
5 |
6 | import { AppComponent } from './app.component';
7 | import { SideBarComponent } from './components/sidebar/sidebat.component';
8 | import { HeaderComponent } from './components/header/header.component';
9 | import { FooterComponent } from './components/footer/footer.component';
10 |
11 | import { contactComponent } from './components/contact/contact.component';
12 |
13 | import { DialogModule } from './components/dialog/dialog.module';
14 |
15 | import { AdModule } from './dynamic-ad/ad.module'
16 |
17 |
18 |
19 | import { LoadScriptService } from './service/loadScript.service'
20 | import { BaiduMaptService } from './service/baiduMap.service'
21 | import { rootRouterConfig } from './app.router'
22 | @NgModule({
23 | imports: [
24 | BrowserModule,
25 | DialogModule,
26 | AdModule,
27 | RouterModule.forRoot(rootRouterConfig, { useHash: true }),
28 | ],
29 | declarations: [
30 | AppComponent,
31 | SideBarComponent,
32 | HeaderComponent,
33 | FooterComponent,
34 | contactComponent
35 | ],
36 | providers: [LoadScriptService, BaiduMaptService],
37 | bootstrap: [AppComponent]
38 | })
39 | export class AppModule {
40 | }
41 |
--------------------------------------------------------------------------------
/src/app/app.router.ts:
--------------------------------------------------------------------------------
1 | import { Routes } from '@angular/router';
2 |
3 | // import { AboutComponent } from './components/about/about.component';
4 | import { contactComponent } from './components/contact/contact.component';
5 | import { HomeModule } from './components/home/home.module';
6 |
7 |
8 | import { ListComponent } from './components/home/list/list.component';
9 | import { DetailComponent } from './components/home/detail/detail.component';
10 |
11 |
12 | export const rootRouterConfig: Routes = [
13 | { path: '', redirectTo: 'contact', pathMatch: 'full' },
14 | { path: 'contact', component: contactComponent },
15 |
16 | { path: 'home', loadChildren: './components/home/home.module#HomeModule' },
17 | { path: 'about', loadChildren: './components/about/about.module#AboutModule' },
18 | { path: 'news', loadChildren: './components/news/news.module#NewsModule' },
19 |
20 |
21 | { path: 'colors', loadChildren: './components/colors/colors.module#ColorsModule' },
22 | { path: 'tabs', loadChildren: './components/tabs/tabs.module#TabsModule' },
23 | { path: 'http', loadChildren: './components/http/http.module#Http_Module' },
24 | { path: 'd3', loadChildren: './components/d3/d3.module#D3Module' },
25 | { path: 'map', loadChildren: './components/map/baidu_map.module#BaiduMapModule' },
26 | { path: 'echarts', loadChildren: './components/echarts/echarts.module#EchartsModule' },
27 | { path: 'ngcontent', loadChildren: './components/ngcontent/ngcontent.module#NgcontentModule'},
28 | { path: 'range', loadChildren: './components/range/range.module#RangeModule'}
29 | ];
--------------------------------------------------------------------------------
/src/app/components/about/about.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'about',
5 | template: `
6 |
44 |
46 | about page
7 | ` 8 | }) 9 | export class AboutComponent implements OnInit { 10 | constructor() { } 11 | 12 | ngOnInit() { } 13 | 14 | } -------------------------------------------------------------------------------- /src/app/components/about/about.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | 4 | import { AboutComponent } from './about.component'; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forChild([ 8 | { 9 | path: '', component: AboutComponent 10 | } 11 | ])], 12 | exports: [], 13 | declarations: [AboutComponent], 14 | providers: [], 15 | }) 16 | export class AboutModule { } 17 | -------------------------------------------------------------------------------- /src/app/components/colors/colors.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'colors', 5 | template: ` 6 |红色文字
7 |蓝色文字
8 |蓝色文字
9 | 10 |黑色文字 点击更换文字颜色 {{myColor}}
11 | 12 | ` 13 | }) 14 | 15 | export class ColorsComponent{ 16 | myColor: string = '#333'; 17 | 18 | setColor(){ 19 | this.myColor = this.myColor == 'red' ? '#999' : 'red'; 20 | console.log(this.myColor) 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/app/components/colors/colors.directive.ts: -------------------------------------------------------------------------------- 1 | import {Directive, Input, ElementRef, Renderer , HostBinding, HostListener} from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[color]' 5 | }) 6 | 7 | export class ColorDirective { 8 | private _element: HTMLElement; 9 | private _defaultColor:string = 'yellow'; 10 | @Input() color: string; 11 | 12 | constructor(elRef: ElementRef, private _render: Renderer){ 13 | this._element = elRef.nativeElement; 14 | } 15 | 16 | @HostBinding('style.color' ) get c() { return this.color || this._defaultColor}; 17 | 18 | @HostListener('mouseenter') onMouseEnter(){ 19 | this._render.setElementStyle(this._element, 'color', 'green'); 20 | } 21 | @HostListener('mouseleave') onMouseLeave(){ 22 | this._render.setElementStyle(this._element, 'color', this.color); 23 | } 24 | 25 | // ngOnInit(){ 26 | // this._render.setElementStyle(this._ele.nativeElement, 'color', this.color); 27 | // } 28 | 29 | 30 | } 31 | -------------------------------------------------------------------------------- /src/app/components/colors/colors.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | 4 | import { ColorsComponent } from './colors.component'; 5 | import { ColorDirective } from './colors.directive' 6 | 7 | @NgModule({ 8 | imports: [RouterModule.forChild([{path: '', component: ColorsComponent}])], 9 | exports: [], 10 | declarations: [ColorsComponent, ColorDirective], 11 | providers: [], 12 | }) 13 | export class ColorsModule { } 14 | -------------------------------------------------------------------------------- /src/app/components/contact/contact.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'contact', 5 | template: ` 6 |contact page
7 | 8 |
20 |
21 |
22 |
23 | `,
24 | styles: [`
25 | :host {
26 | display: flex;
27 | justify-content: center
28 | }
29 | .open-button {
30 | padding: 5px;
31 | border: 1px solid black;
32 | cursor: pointer;
33 | }
34 | `]
35 | })
36 |
37 | export class DialogComponent implements AfterViewInit {
38 |
39 | @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
40 |
41 | tpl:string;
42 |
43 | constructor(public compiler: Compiler) {
44 |
45 | }
46 |
47 | openDialogBox() {
48 | let tpl = this.tpl || 'Dynamic Module!
' 49 | this.addComponent(tpl); 50 | } 51 | 52 | ngAfterViewInit() { 53 | 54 | 55 | } 56 | 57 | addComponent(template: string) { 58 | 59 | 60 | @Component({ template: template }) 61 | class TemplateComponent { } 62 | 63 | @NgModule({ 64 | declarations: [TemplateComponent] 65 | }) 66 | class TemplateModule { } 67 | 68 | const mod = this.compiler.compileModuleAndAllComponentsSync(TemplateModule); 69 | const factory = mod.componentFactories.find(comp => { 70 | return comp.componentType == TemplateComponent 71 | }); 72 | const compoent = this.container.createComponent(factory); 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/app/components/dialog/dialog.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { DialogComponent } from './dialog.component'; 3 | import { FormsModule } from '@angular/forms' 4 | 5 | @NgModule({ 6 | imports: [FormsModule], 7 | declarations: [ DialogComponent ], 8 | exports: [DialogComponent] 9 | 10 | }) 11 | 12 | export class DialogModule {} -------------------------------------------------------------------------------- /src/app/components/echarts/echarts.module.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, AfterViewInit, ElementRef, Renderer, NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | 4 | import * as echarts from 'echarts'; 5 | import { option } from './options'; 6 | 7 | @Component({ 8 | selector: 'echarts-demo', 9 | template: '' 10 | }) 11 | export class EchartsComponent implements OnInit { 12 | ele:any = null; 13 | 14 | constructor(private _elRef: ElementRef, private _rn: Renderer) { 15 | this.ele = _elRef.nativeElement; 16 | 17 | } 18 | 19 | ngOnInit() { 20 | this.initEcharts(); 21 | 22 | } 23 | 24 | initEcharts(){ 25 | // var div = this.ele.querySelector('div'); 26 | 27 | this._rn.setElementStyle(this.ele, 'color', 'green'); 28 | this._rn.setElementStyle(this.ele, 'width', '800px'); 29 | this._rn.setElementStyle(this.ele, 'height', '600px'); 30 | 31 | 32 | var myChart = echarts.init(this.ele); 33 | 34 | console.log(myChart) 35 | 36 | // 指定图表的配置项和数据 37 | // var option = { 38 | // title: { 39 | // text: 'ECharts 入门示例' 40 | // }, 41 | // tooltip: {}, 42 | // legend: { 43 | // data:['销量'] 44 | // }, 45 | // xAxis: { 46 | // data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] 47 | // }, 48 | // yAxis: {}, 49 | // series: [{ 50 | // name: '销量', 51 | // type: 'bar', 52 | // data: [5, 20, 36, 10, 10, 20] 53 | // }] 54 | // }; 55 | 56 | setInterval(function (){ 57 | option.series[0].data[0].value ={c} {b}" 4 | }, 5 | toolbox: { 6 | show: true, 7 | feature: { 8 | restore: {show: true}, 9 | saveAsImage: {show: true} 10 | } 11 | }, 12 | series : [ 13 | { 14 | name: '速度', 15 | type: 'gauge', 16 | z: 3, 17 | min: 0, 18 | max: 220, 19 | splitNumber: 11, 20 | radius: '50%', 21 | axisLine: { // 坐标轴线 22 | lineStyle: { // 属性lineStyle控制线条样式 23 | width: 10 24 | } 25 | }, 26 | axisTick: { // 坐标轴小标记 27 | length: 15, // 属性length控制线长 28 | lineStyle: { // 属性lineStyle控制线条样式 29 | color: 'auto' 30 | } 31 | }, 32 | splitLine: { // 分隔线 33 | length: 20, // 属性length控制线长 34 | lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式 35 | color: 'auto' 36 | } 37 | }, 38 | title : { 39 | textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE 40 | fontWeight: 'bolder', 41 | fontSize: 20, 42 | fontStyle: 'italic' 43 | } 44 | }, 45 | detail : { 46 | textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE 47 | fontWeight: 'bolder' 48 | } 49 | }, 50 | data:[{value: 40, name: 'km/h'}] 51 | }, 52 | { 53 | name: '转速', 54 | type: 'gauge', 55 | center: ['20%', '55%'], // 默认全局居中 56 | radius: '35%', 57 | min:0, 58 | max:7, 59 | endAngle:45, 60 | splitNumber:7, 61 | axisLine: { // 坐标轴线 62 | lineStyle: { // 属性lineStyle控制线条样式 63 | width: 8 64 | } 65 | }, 66 | axisTick: { // 坐标轴小标记 67 | length:12, // 属性length控制线长 68 | lineStyle: { // 属性lineStyle控制线条样式 69 | color: 'auto' 70 | } 71 | }, 72 | splitLine: { // 分隔线 73 | length:20, // 属性length控制线长 74 | lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式 75 | color: 'auto' 76 | } 77 | }, 78 | pointer: { 79 | width:5 80 | }, 81 | title: { 82 | offsetCenter: [0, '-30%'], // x, y，单位px 83 | }, 84 | detail: { 85 | textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE 86 | fontWeight: 'bolder' 87 | } 88 | }, 89 | data:[{value: 1.5, name: 'x1000 r/min'}] 90 | }, 91 | { 92 | name: '油表', 93 | type: 'gauge', 94 | center: ['77%', '50%'], // 默认全局居中 95 | radius: '25%', 96 | min: 0, 97 | max: 2, 98 | startAngle: 135, 99 | endAngle: 45, 100 | splitNumber: 2, 101 | axisLine: { // 坐标轴线 102 | lineStyle: { // 属性lineStyle控制线条样式 103 | width: 8 104 | } 105 | }, 106 | axisTick: { // 坐标轴小标记 107 | splitNumber: 5, 108 | length: 10, // 属性length控制线长 109 | lineStyle: { // 属性lineStyle控制线条样式 110 | color: 'auto' 111 | } 112 | }, 113 | axisLabel: { 114 | formatter:function(v:any){ 115 | switch (v + '') { 116 | case '0' : return 'E'; 117 | case '1' : return 'Gas'; 118 | case '2' : return 'F'; 119 | } 120 | } 121 | }, 122 | splitLine: { // 分隔线 123 | length: 15, // 属性length控制线长 124 | lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式 125 | color: 'auto' 126 | } 127 | }, 128 | pointer: { 129 | width:2 130 | }, 131 | title : { 132 | show: false 133 | }, 134 | detail : { 135 | show: false 136 | }, 137 | data:[{value: 0.5, name: 'gas'}] 138 | }, 139 | { 140 | name: '水表', 141 | type: 'gauge', 142 | center : ['77%', '50%'], // 默认全局居中 143 | radius : '25%', 144 | min: 0, 145 | max: 2, 146 | startAngle: 315, 147 | endAngle: 225, 148 | splitNumber: 2, 149 | axisLine: { // 坐标轴线 150 | lineStyle: { // 属性lineStyle控制线条样式 151 | width: 8 152 | } 153 | }, 154 | axisTick: { // 坐标轴小标记 155 | show: false 156 | }, 157 | axisLabel: { 158 | formatter:function(v:any){ 159 | switch (v + '') { 160 | case '0' : return 'H'; 161 | case '1' : return 'Water'; 162 | case '2' : return 'C'; 163 | } 164 | } 165 | }, 166 | splitLine: { // 分隔线 167 | length: 15, // 属性length控制线长 168 | lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式 169 | color: 'auto' 170 | } 171 | }, 172 | pointer: { 173 | width:2 174 | }, 175 | title: { 176 | show: false 177 | }, 178 | detail: { 179 | show: false 180 | }, 181 | data:[{value: 0.5, name: 'gas'}] 182 | } 183 | ] 184 | }; -------------------------------------------------------------------------------- /src/app/components/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | 2 | import {Component} from '@angular/core'; 3 | 4 | @Component({ 5 | selector: 'Footer', 6 | template: ` 7 | 10 | ` 11 | }) 12 | 13 | export class FooterComponent{} 14 | -------------------------------------------------------------------------------- /src/app/components/header/header.component.ts: -------------------------------------------------------------------------------- 1 | 2 | import {Component} from '@angular/core'; 3 | 4 | @Component({ 5 | selector: 'Header', 6 | template: ` 7 |
9 |
30 |
32 | Kunl's Angular demo
31 |detail {{id}} page
10 | 11 | ` 12 | }) 13 | export class DetailComponent implements OnInit { 14 | id:number; 15 | 16 | constructor( @Inject(ActivatedRoute) public _route: ActivatedRoute, @Inject(Router) public _router: Router) { 17 | } 18 | 19 | goBack(){ 20 | this._router.navigate(['/home']) 21 | } 22 | ngOnInit() { 23 | this._route.params.map(p => p['id']).subscribe(params => { 24 | this.id = params 25 | }) 26 | } 27 | 28 | } -------------------------------------------------------------------------------- /src/app/components/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ActivatedRoute } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'home', 6 | styles: [ 7 | ` 8 | home { 9 | overflow: hidden; 10 | } 11 | .list { 12 | width: 30%; 13 | margin-right: 20px; 14 | border-right: 1px solid #ccc; 15 | } 16 | .list, .detail { 17 | display: inline-block; 18 | vertical-align: top 19 | } 20 | 21 | ` 22 | ], 23 | template: ` 24 |home page
25 |
26 |
28 |
29 |
31 | `
32 | })
33 | export class HomeComponent implements OnInit {
34 |
35 |
36 | ngOnInit() { }
37 |
38 | }
--------------------------------------------------------------------------------
/src/app/components/home/home.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { RouterModule } from '@angular/router';
4 |
5 | import { RouterConfig } from './home.router'
6 |
7 | import { HomeComponent } from './home.component';
8 | import { ListComponent } from './list/list.component';
9 | import { DetailComponent } from './detail/detail.component';
10 | @NgModule({
11 | imports: [ CommonModule,
12 | // RouterModule
13 | RouterModule.forChild(RouterConfig)
14 | ],
15 | declarations: [ HomeComponent, ListComponent, DetailComponent ],
16 | exports: [ HomeComponent ],
17 | bootstrap: [ ]
18 | })
19 | export class HomeModule { }
20 |
--------------------------------------------------------------------------------
/src/app/components/home/home.router.ts:
--------------------------------------------------------------------------------
1 | import { Routes } from '@angular/router';
2 |
3 | import { HomeComponent } from './home.component';
4 | import { ListComponent } from './list/list.component';
5 | import { DetailComponent } from './detail/detail.component';
6 |
7 | export const RouterConfig: Routes = [
8 |
9 |
10 | {
11 | path: '', component: HomeComponent,
12 | children: [
13 | { path: 'detail/:id', component: DetailComponent },
14 |
15 | ]
16 | },
17 |
18 |
19 | ];
--------------------------------------------------------------------------------
/src/app/components/home/list/list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | @Component({
3 | selector: 'list',
4 | styles: [
5 | `
6 | a{
7 | padding: 0 10px;
8 | }
9 | a.active{
10 | color: #fff;
11 | background: pink
12 | }
13 | `
14 | ],
15 | template: `
16 | -
17 |
- 18 | 19 | {{num}} 20 | 21 | 22 |
2 |
--------------------------------------------------------------------------------
/src/app/components/http/http.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | import { UserComponent, User } from './user/user.component';
4 | import { HttpService } from './http.service';
5 |
6 | @Component({
7 | selector: 'http',
8 | templateUrl: 'http.component.html',
9 | styles: [`
10 | .card-img-top{
11 | max-height: 100px;
12 | }
13 | .input-group-addon {
14 | width: 80px
15 | }
16 | .input-group {
17 | margin-bottom: 16px
18 | }
19 | `]
20 | })
21 |
22 | export class HttpComponent implements OnInit {
23 | users: User[] = [];
24 |
25 |
26 | constructor(private http_service: HttpService) {
27 |
28 | }
29 |
30 | ngOnInit() {
31 | console.log(1)
32 | this.http_service.getUsers().subscribe(data => this.users = data);
33 | }
34 |
35 | del(it:User){
36 |
37 | this.http_service.del(it.id).subscribe(
38 | data => {this.users = this.users.filter(item => item!=it)},
39 |
40 | err => alert(err)
41 | );
42 | }
43 |
44 |
45 | }
--------------------------------------------------------------------------------
/src/app/components/http/http.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { HttpModule} from '@angular/http';
4 | import { FormsModule } from '@angular/forms';
5 | import { RouterModule } from '@angular/router';
6 |
7 |
8 | import { HttpService } from './http.service';
9 | import { HttpComponent } from './http.component';
10 | import { UserComponent } from './user/user.component';
11 |
12 | import { ImgPipe } from './img.pipe'
13 | import { PipeModule } from '../../pipes/pipe.module';
14 |
15 | @NgModule({
16 | imports: [RouterModule.forChild([
17 | {
18 | path: '', component: HttpComponent,
19 | children: [
20 | // { path: '', redirectTo: 'list', pathMatch: 'full' },
21 | { path: 'list', component: HttpComponent},
22 | { path: 'user/:id', component: UserComponent }
23 | ]
24 | }
25 | ]),HttpModule, CommonModule, FormsModule, PipeModule],
26 |
27 | declarations: [HttpComponent, UserComponent, ImgPipe],
28 | providers: [HttpService]
29 | })
30 |
31 | export class Http_Module {
32 |
33 | }
--------------------------------------------------------------------------------
/src/app/components/http/http.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Http, Response } from '@angular/http';
3 |
4 | import { Observable } from 'rxjs/Rx';
5 |
6 | import { User } from './user/user.component';
7 |
8 | @Injectable()
9 | export class HttpService {
10 |
11 | url = 'http://5737ef8cc0a1be11000e6895.mockapi.io/'
12 |
13 | users = this.url + 'users';
14 |
15 | constructor(private http: Http) {
16 |
17 | }
18 |
19 | getUsers(): Observable
3 |
6 |
7 |
22 |
8 |
20 |
21 |
9 | ![{{it.name}}]()
10 |
19 |
11 |
18 | {{it.createdAt | moment_pipe : 'YYYY-MM-DD, h:mm:ss' }}
12 |{{it.name}}/{{it.age}}
13 |Some quick example text to build on the card title and make up the bulk of the card's content.
14 | 15 | 编辑 16 | 17 |
2 |
21 |
22 |
--------------------------------------------------------------------------------
/src/app/components/http/user/user.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input } from '@angular/core';
2 | import { ActivatedRoute } from '@angular/router';
3 |
4 | import { HttpService } from '../http.service';
5 | import { User } from '../../../model/';
6 | export { User }
7 |
8 | @Component({
9 | selector: 'user',
10 | templateUrl: 'user.component.html'
11 | })
12 | export class UserComponent implements OnInit {
13 | private id: string = '10';
14 | user: User = {
15 | name: '',
16 | age: 0,
17 | imageUrl: '',
18 | createdAt: 0,
19 | id: ''
20 | };
21 |
22 | constructor(private _service: HttpService, public _route: ActivatedRoute) {
23 | // console.log(_route)
24 | // console.log('当前的 id:',.getParam('id'))
25 | // this.id = params.getParam('id');
26 | }
27 |
28 |
29 |
30 | ngOnInit() {
31 | this._route.params.map(params => params['id'])
32 | .subscribe(id => {
33 | this.getUserById(id);
34 | })
35 | }
36 |
37 | getUserById(id) {
38 | this._service.getUser(id).subscribe(user => {
39 | this.user = user
40 | console.log(user)
41 | });
42 | }
43 |
44 | }
--------------------------------------------------------------------------------
/src/app/components/map/baidu_map.module.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ElementRef, NgModule } from '@angular/core';
2 | import { RouterModule } from '@angular/router';
3 |
4 | import { BaiduMaptService } from '../../service/baiduMap.service'
5 | // import * as d3 from 'd3';
6 |
7 | @Component({
8 | selector: 'baidu-demo',
9 | styles: [`
10 | #map {
11 | width: 400px;
12 | height: 400px;
13 | }
14 | `],
15 | template: `
16 |
17 | `
18 | })
19 | export class BaiduMapComponent implements OnInit {
20 | constructor(private _elRef: ElementRef, private _baiduMap: BaiduMaptService) {
21 |
22 | }
23 |
24 | ngOnInit() {
25 | let key = 'C78b0c2c170e47e6f8e074e592785837';
26 |
27 | let src = 'http://api.map.baidu.com/api?v=2.0&ak=${key}&callback=initialize'
28 |
29 | this._baiduMap.init(key).then(() => {
30 | this.initMap(window['BMap'])
31 | })
32 |
33 | }
34 |
35 | initMap(BMap) {
36 | var map = new BMap.Map("map"); // 创建地图实例
37 | var point = new BMap.Point(116.404, 39.915); // 创建点坐标
38 | map.centerAndZoom(point, 15);
39 | map.enableScrollWheelZoom(true);
40 | map.addControl(new BMap.ScaleControl()); // 右下比例尺
41 | map.setDefaultCursor("Crosshair");//鼠标样式
42 | }
43 |
44 | }
45 |
46 | @NgModule({
47 | imports: [RouterModule.forChild([{ path: '', component: BaiduMapComponent }])],
48 | declarations: [BaiduMapComponent]
49 | })
50 | export class BaiduMapModule { }
--------------------------------------------------------------------------------
/src/app/components/news/news.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'news',
5 | template: `
6 |
3 |
20 |
4 | name
5 |
6 |
7 |
8 |
9 | age
10 |
11 |
12 |
13 |
14 | image
15 |
16 |
17 |
18 |
19 | news page
7 | ` 8 | }) 9 | export class NewsComponent implements OnInit { 10 | constructor() { } 11 | 12 | ngOnInit() { } 13 | 14 | } -------------------------------------------------------------------------------- /src/app/components/news/news.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | 4 | import { NewsComponent } from './news.component'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | RouterModule.forChild([ 9 | { 10 | path: '', component: NewsComponent 11 | } 12 | ]) 13 | ], 14 | declarations: [ NewsComponent ] 15 | }) 16 | export class NewsModule { } 17 | -------------------------------------------------------------------------------- /src/app/components/ngcontent/ngcontent.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ContentChild, TemplateRef } from '@angular/core'; 2 | 3 | let num = 0; 4 | 5 | @Component({ 6 | selector: 'counter', 7 | template: '{{this.id}}
' 8 | }) 9 | 10 | export class CounterComponent { 11 | id: number 12 | 13 | constructor() { 14 | this.id = ++num; 15 | } 16 | } 17 | 18 | @Component({ 19 | selector: 'wrapper', 20 | template: ` 21 |
22 |
29 |
31 | `
32 | })
33 | export class WrapperContent {
34 | @ContentChild(TemplateRef) template: TemplateRef29 |
44 | 45 |
44 |
45 |
53 | `
54 | })
55 | export class RangeComponent {}
56 |
57 | @NgModule({
58 | imports: [CommonModule],
59 | declarations: [
60 | RangeDirective,
61 | RangeComponent
62 | ],
63 | exports: [RangeComponent],
64 | schemas: []
65 | })
66 | export class RangeModule {}
--------------------------------------------------------------------------------
/src/app/components/sidebar/sidebat.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'side-bar',
5 | styles: [
6 | `
7 | a{
8 | display: block;
9 | text-decoration: none;
10 | margin-right: 20px;
11 | padding: 2px 10px;
12 | border-bottom: 1px solid transparent;
13 | }
14 |
15 | .side-list {
16 | margin-right: -1px;
17 | }
18 | .list-group-item {
19 | margin-bottom: -1px;
20 | border: 1px solid #ccc;
21 | }
22 |
23 | .list-group-item.active {
24 | background: rgba(111, 111, 111, .06)
25 | }
26 |
27 | `
28 | ],
29 | template: `
30 |
37 |
38 | `
39 | })
40 | export class SideBarComponent {
41 |
42 | @Input() sidebar;
43 | }
--------------------------------------------------------------------------------
/src/app/components/tabs/tab.directive.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input, AfterContentInit, ContentChildren, QueryList } from '@angular/core';
2 |
3 |
4 | @Component({
5 | selector: 'tab',
6 | template: `
7 | Your age:
46 | 51 | 52 |
8 |
10 | `
11 | })
12 |
13 | export class TabDirective {
14 | @Input('tabTitle') title: string;
15 | @Input() active = false;
16 | }
17 |
18 |
19 | @Component({
20 | selector: 'tabs',
21 | template: `
22 |
23 |
26 |
27 |
28 |
32 | `
33 | })
34 |
35 |
36 | export class TabsDirective implements AfterContentInit {
37 | // 获取所有 TabComponent
38 | @ContentChildren(TabDirective) tabs: QueryList
29 |
31 | 10 | 我市最近几天出现强降雨
11 | 我市最近几天出现强降雨
12 | 我市最近几天出现强降雨 13 |
16 | 下周我市将正式开启夏天模式
17 | 下周我市将正式开启夏天模式
18 | 下周我市将正式开启夏天模式 19 |
22 | 五月多雨闷热
23 | 五月多雨闷热
24 | 五月多雨闷热 25 |
10 |
13 | `
14 | })
15 |
16 | export class AdBannerComponent implements AfterViewInit, OnDestroy {
17 | interval: any;
18 | @Input() ads: AdItem[];
19 | currentAddIndex: number = -1;
20 | @ViewChild(AdDirective) adHost: AdDirective;
21 |
22 | constructor(private _componentFactoryResolver: ComponentFactoryResolver, private _cdr: ChangeDetectorRef) { }
23 |
24 | ngAfterViewInit() {
25 |
26 | this.loadComponent();
27 | this.getAds();
28 |
29 | }
30 |
31 | loadComponent() {
32 | this.currentAddIndex = (this.currentAddIndex + 1) % this.ads.length;
33 |
34 | let adItem = this.ads[this.currentAddIndex];
35 |
36 | let componentFactory = this._componentFactoryResolver.resolveComponentFactory(adItem.component);
37 |
38 | let viewContainerRef = this.adHost.viewContainerRef;
39 | viewContainerRef.clear();
40 |
41 | let componentRef = viewContainerRef.createComponent(componentFactory);
42 |
43 | componentRef.instance.data = adItem.data;
44 |
45 | this._cdr.detectChanges();
46 | }
47 |
48 | getAds() {
49 | this.interval = setInterval(() => {
50 | this.loadComponent();
51 | }, 2000);
52 | }
53 |
54 | ngOnDestroy() {
55 | clearInterval(this.interval);
56 | }
57 | }
--------------------------------------------------------------------------------
/src/app/dynamic-ad/ad-item.ts:
--------------------------------------------------------------------------------
1 | import { Type } from '@angular/core';
2 |
3 | export class AdItem {
4 | constructor(public component: Type侧栏广告位
11 | 12 |
11 |
13 |
14 | `
15 | })
16 |
17 | export class AdComponent implements OnInit {
18 | ads: AdItem[];
19 |
20 | constructor(private adService: AdService) {}
21 |
22 | ngOnInit() {
23 | this.ads = this.adService.getAds();
24 |
25 | }
26 | }
--------------------------------------------------------------------------------
/src/app/dynamic-ad/ad.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, ViewContainerRef } from '@angular/core';
2 |
3 | @Directive({
4 | selector: '[ad-host]'
5 | })
6 |
7 | export class AdDirective {
8 | constructor(public viewContainerRef: ViewContainerRef) { }
9 | }
--------------------------------------------------------------------------------
/src/app/dynamic-ad/ad.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import { AdComponent } from './ad.component';
5 | import { AdDirective } from './ad.directive';
6 |
7 | import { AdBannerComponent } from './ad-banner.component';
8 | import { HeroJobAdComponent } from './hero-job-ad.component';
9 | import { HeroProfileComponent } from './hero-profile.component';
10 |
11 | import { AdService } from './ad.service';
12 |
13 | @NgModule({
14 | imports: [BrowserModule],
15 | exports: [AdComponent],
16 | entryComponents: [HeroJobAdComponent, HeroProfileComponent],
17 | declarations: [AdComponent, AdDirective, AdBannerComponent, HeroJobAdComponent, HeroProfileComponent],
18 | providers: [AdService],
19 | })
20 | export class AdModule { }
21 |
22 |
--------------------------------------------------------------------------------
/src/app/dynamic-ad/ad.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 |
3 | import { HeroJobAdComponent } from './hero-job-ad.component';
4 | import { HeroProfileComponent } from './hero-profile.component';
5 | import { AdItem } from './ad-item';
6 |
7 | @Injectable()
8 | export class AdService {
9 | getAds() {
10 | return [
11 |
12 | new AdItem(HeroJobAdComponent, { name: '测试1', bio: '测试广告1' }),
13 | new AdItem(HeroJobAdComponent, { name: '测试2', bio: '测试广告2' }),
14 |
15 | new AdItem(HeroProfileComponent, { name: '测试3', bio: '测试广告3' }),
16 | new AdItem(HeroProfileComponent, { name: '测试4', bio: '测试广告4' }),
17 | ]
18 | }
19 | }
--------------------------------------------------------------------------------
/src/app/dynamic-ad/hero-job-ad.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, AfterViewInit } from '@angular/core';
2 |
3 | export interface AdComponent {
4 | data: any;
5 | }
6 |
7 | @Component({
8 | template: `
9 |
10 | 招聘 广告
11 |
14 | `
15 | })
16 | export class HeroJobAdComponent implements AdComponent {
17 |
18 | @Input() data: any = null;
19 |
20 |
21 | }
--------------------------------------------------------------------------------
/src/app/dynamic-ad/hero-profile.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 |
3 | export interface AdComponent {
4 | data: any;
5 | }
6 |
7 |
8 | @Component({
9 | template: `
10 | {{data?.name}}
12 | {{data?.bio}} 13 |
11 | 求职广告
12 |
15 |
16 | `
17 | })
18 |
19 | export class HeroProfileComponent implements AdComponent {
20 | @Input() data: any;
21 |
22 |
23 | }
--------------------------------------------------------------------------------
/src/app/model/index.ts:
--------------------------------------------------------------------------------
1 | export interface User {
2 | id: string;
3 | createdAt: number;
4 | name: string;
5 | imageUrl: string;
6 | age: number;
7 | }
8 |
--------------------------------------------------------------------------------
/src/app/pipes/moment.pipe.ts:
--------------------------------------------------------------------------------
1 | import { Pipe, PipeTransform } from '@angular/core';
2 | import * as moment from 'moment';
3 |
4 | @Pipe({
5 | name: 'moment_pipe'
6 | })
7 |
8 | export class MomentPipe implements PipeTransform{
9 | transform(value: any, args: any) {
10 | // let time = moment(value, args);
11 |
12 | // console.log(time)
13 |
14 | console.log(args)
15 | return moment(value).format(args);
16 | }
17 | }
--------------------------------------------------------------------------------
/src/app/pipes/pipe.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { MomentPipe } from './moment.pipe';
4 |
5 |
6 | @NgModule({
7 | declarations: [
8 | MomentPipe
9 | ],
10 | exports: [
11 | MomentPipe
12 | ]
13 | })
14 |
15 | export class PipeModule {
16 |
17 | }
--------------------------------------------------------------------------------
/src/app/service/baiduMap.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { LoadScriptService } from './loadScript.service';
3 | @Injectable()
4 | export class BaiduMaptService {
5 |
6 | constructor(
7 | private _loadScript: LoadScriptService
8 | ) { }
9 |
10 | init(key) {
11 | return this._load(key);
12 | }
13 | private _load(key: string) {
14 | let _callback_str = '__baidu_map_cb_' + (Math.random().toString()).slice(2, 6),
15 |
16 | url = `http://api.map.baidu.com/api?v=2.0&ak=${key}&callback=${_callback_str}`;
17 |
18 | return new Promise((resolve, reject) => {
19 |
20 | this._loadScript.load(url).catch((err) => reject(err));
21 |
22 | window[_callback_str] = (map) => {
23 |
24 | resolve();
25 | console.log('baidu map callback')
26 | delete window[_callback_str];
27 | }
28 | })
29 |
30 | }
31 |
32 |
33 |
34 | }
--------------------------------------------------------------------------------
/src/app/service/loadScript.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 |
3 | @Injectable()
4 | export class LoadScriptService {
5 | doc = document;
6 |
7 | constructor() { }
8 |
9 | load(src):Promise{{data.name}}
13 |{{data.bio}}
14 |