angular4.0 day01

angular4.0 day01

1.创建angular4.0矿建 建议采用npm

npm install  -g @angular/cli

2 创建项目

ng new my-app

3.运行项目

ng serve --open

4.文件src下的目录

src
    app
        app.component.css //定义模块样式
        app.component.html //定义模块页面
        app.component.spec.ts //定义模块测试
        app.component.ts //应用组件
        app.module.ts //模块组件集合
    assets
        .gitkeep //静态文件
    environments
        environment.prod.ts 
        environment.ts
favicon.ico
index.html //访问的HTML页面
main.ts //应用入口点
polyfills.ts
styles.css
test.ts
tsconfig.app.json
tsconfig.spec.json

5.整个项目下的文件

my-app
e2e
app.e2e-spec.ts
app.po.ts
tsconfig.e2e.json
node_modules/...
src/...
.angular-cli.json //Angular CLI的配置。
.editorconfig
.gitignore
karma.conf.js
package.json
protractor.conf.js
README.md
tsconfig.json
tslint.json

6.指令

ng g component '组件名'  //创建组件

ng generate module app-routing --flat --module=app  //创建路由

ng generate module service ' ' //创建服务

7.组件创建之后自动引入到app.module.ts模块上，其标签占位符为例<app-navbar></app-navbar>

8、常见应用绑定

   01 、*ngFor (遍历) *ngIf(隐藏)

    02、属性绑定为中括号[]或者是{{}}

    03、路由绑定传值如

 <li><a [routerLink]="['/consider']" [queryParams]="{ids:10}">consider</a></li>  //直接设置queryParams属性值
 <li><a [routerLink]="['/status', 9]">status</a></li> //数组，后面添加传值，并在路由配置添加'status/:id'

9.路由routing

1.引入路由模块，路由

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

2、配置理由

const routes: Routes = [
  {
  path: '',
  redirectTo: '/home', //默认路由设置
  pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: '',
        component:  HomeOneComponent
      },
      {
        path: 'homeTwo/:id',
        component: HomeTwoComponent
      },
      {
        path: 'homeThree',
        component: HomeThreeComponent
      }
    ]
  },
  {
    path: 'products',
    component: ProductsComponent
  },
  {
    path: 'dashboard',
    component: DashboardComponent
  },
  {
    path: 'heroDetail/:id', //路由传值
    component: HeroDetailComponent
  },
  {
   path: 'consider',
   component: ConsiderComponent
  },
  {
    path: 'status/:id',
    component: StatusComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [ RouterModule ],
  declarations: []
})
export class AppRoutingModule { } //导出路由模块

9、路由属性值

    01、路由占位符<router-outlet></router-outlet>

    02、路由导航路径 routerLink= ' /' 或者[routerLink] = "['/']"

    03、routerModule.forRoot()  //提供路由所需要的服务商和指令，并根据当前的浏览器URL执行初始导航

    04、ActivateRoute //用于路由器的状态树

    05、navigate() // 调用跳转路由配置的路径，类型是个[],例['/product', {queryParams: {productId: 1}]

import { Component, OnInit , Input} from '@angular/core';
import { Router , ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  @Input() //装饰器
  private productIdss: number;
  constructor(
    private router: Router, // 定义
    private routeInfo: ActivatedRoute
  ) { }

  ngOnInit() {  //初始化执行的生命周期函数，只执行一次
    this.routeInfo.queryParams.subscribe((queryParams) => {
      this.productIdss = queryParams.productIdss;
    });
  };
  toggleOne () {
    console.log(1);
    this.router.navigate(['/home'], {
      queryParams: {
        productId: 88
      }
    });
  };
  toggleTwo () {
    console.log(2);
    this.router.navigate(['/home/homeTwo', 99]);
  };
  toggleThree () {
    console.log(3);
    this.router.navigate(['/home/homeThree']);
  };
}

10、创建class类对象导出

export class Product {
  constructor (
    public id: number, //定义类型
    public title: string,
    public price: number,
    public ratings: number,
    public desc: string,
    public categories: Array<string> //定义为数组里包含的字符串类型
  ) {
  }
}