Angular4的学习

2018-3-15 星期四

一、安装

注意：请现在终端/控制台窗口中运行 node -v 和 npm -v，来验证一下你正在运行的 node 6.9.x 和 npm 3.x.x 以上的版本。更老的版本可能会出现错误，更新的版本则没问题。

全局安装 Angular CLI 脚手架工具（只需安装一次）

1.使用 npm 命令安装

npm install -g @angular/cli

注意：这里的@angular/cli版本为：

image.png

2.安装 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.使用 cnpm 命令安装

cnpm install -g @angular/cli

创建项目

1.打开 cmd 找到要创建项目的目录
2.创建项目

ng new 项目名称 eg: ng new my-app

3.创建带路由的项目

ng new 项目名称 --routing

3.进入刚才创建的项目里面启动服务

cd my-app
ng serve --open //启动服务（--open可以省略）

安装插件（jquery/bootstrap......）

方法一：

npm install jquery --save
npm install bootstrap --save

方法二：

npm install [email protected] jquery tether --save

配置项目中的.angular-cli.json文件：
style:[
  "style.css",
  "../node_modules/bootstrap/dist/css/bootstrap.css"
],
script:[
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/bootstrap/dist/bootstrap.js"
]
方法一需要：让typescript能解析文件：
npm install @types/jquery --save-dev
npm install @types/bootstrap --save-dev

在angular4中使用sass

1、利用npm工具安装sass依赖和loader

npm install node-sass --save-dev
npm install sass-loader --save-dev

2、修改.angular-cli.json文件

"styles": [
    "styles.scss"
],
"defaults":{
    "styleExt": "scss",
    "component": {}
}

注意：不用怀疑是不是写错了，不是sass，就是改成scss

3、将项目中已经存在的.css文件改成.scss【项目会自动修改的】

4、新建的component项目会直接生成.scss文件

创建组件

ng g c components/组件名 eg：ng g c components/navbar

注意：ng g component my-new-component是创建一个新的组件，默认创建在src/app目录下；ng g component components/my-new-component是创建到指定目录下面
使用组件：在 app.component.html 中添加组件的 component.ts 中 @Component 中 selector 后面的值为标签名的标签（参见页面底部）

如：navbar 组件中的 navbar.component.ts中有
@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
那这个组件在主页面中使用时为：

主要组件介绍：
import { BrowserModule } from '@angular/platform-browser';/*浏览器解析的模块*/
import { NgModule } from '@angular/core';/*angular.js 核心模块*/
import { FormsModule } from '@angular/forms';/*表单数据绑定 表单验证需要的模块*/
import { AppComponent } from './app.component';/*根组件*/
import { HttpModule } from '@angular/http';/*数据请求模块*/

@NgModule({
  declarations: [    /*引入当前项目运行的组件*/
    AppComponent,
  ],
  imports: [      /*引入当前模块运行依赖的其他模块*/
    BrowserModule,
    FormsModule
  ],
  providers: [DataService],      /*定义的服务*/
  bootstrap: [AppComponent]      /*指定应用的主视图（称为根组件）通过引导根 AppModule 来启动应用，这里一般写的是根组件*/

export class AppModule { }  /*根模块不需要导出任何东西，因为其他组件不需要导入根模块，但是一定要写*/
})

创建服务

ng g s services/服务名 eg：ng g s services/data

注意：创建服务后npm没有帮我们将服务自动添加到app.module.ts中，需要我们手动添加

在app.module.ts中添加import { DataService } from './services/data.service';
然后将 DataService 添加到providers中：providers: [DataService],

---

---

创建路由

一：直接创建一个配置好路由的项目

1、首先使用 ng new demo02 --routing 命令创建新的项目
2、引入组件，然后

假设有三个页面：主页面home、新闻页面news、新闻详情页newscontent
ng g c components/home
ng g c components/news
ng g c components/newscontent

3、找到app-routing.module.ts配置路由

import { HomeComponent } from './components/home/home.component'; 
import { NewsComponent } from './components/news/news.component'; 
import { NewscontentComponent } from './components/newscontent/newscontent.component'; 

const routes: Routes = [
 {path:'home',component:HomeComponent},
 {path:'news',component:NewsComponent},
 {
  path:'newscontent/:id',/*配置动态路由*/
  component:NewscontentComponent
 },
 {
  path: '',
  redirectTo: 'home',
  pathMatch: 'full'
 },
 {/*匹配不到路由的时候加载的组件*/
  path: '**',/*任意的路由*/
  redirectTo: 'home'
 }
];

4、找到 app.component.html 根组件模板，配置 router-outlet 显示动态加载的路由

  
  首页
  新闻

image.png

二、在已经创建好的项目中添加路由

1、假设已经有相应的模块：home、news、newscontent
2、在app文件夹下新建app-routing.module.ts页面，并向其中注入模块+引入组件+配置组件+配置模块+暴露模块

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

import { HomeComponent } from './components/home/home.component';
import { NewsComponent } from './components/news/news.component';
import { NewscontentComponent} from './components/newscontent/newscontent.component';

const routes: Routes = [
 {
  path:'home',
  component:HomeComponent
 },
 {
  path:'news',
  component:NewsComponent
 },
 {
     /*:id  配置动态路由*/
  path:'newscontent/:id',
  component:NewscontentComponent
 },
 {
  path: '',
  redirectTo: 'home',
  pathMatch: 'full'
 },
 {/*匹配不到路由的时候加载的组件*/
  path: '**',/*任意的路由*/
  redirectTo: 'home'
 }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule{ }

3、在 app.module.ts 中引入刚才定义的路由
import { AppRoutingModule } from './app-routing.module';
4、app.module.ts 里面的 import 注册这个路由模块

imports: [
   BrowserModule,
   AppRoutingModule
]

5、找到 app.component.html 根组件模板，配置 router-outlet 显示动态加载的路由

  
  首页
  新闻

路由的动态传值
1、配置动态路由，上文有（:id）
2、获取动态路由的值

注意：那个页面需要动态路由，在哪个页面引入
import { ActivatedRoute } from '@angular/router';


constructor(private route:ActivatedRoute) { }

 ngOnInit() {
  //获取动态路由
  console.log(this.route.params['_value'].id)
  或者:使用this.route.params.subscribe(data=>this.id=data.id);
 }

1、

image.png

2、

image.png

image.png

---

---

创建管道

ng g pipe 管道名 eg：ng g pipe my-new-pipe 或者 ng g p my-new-pipe 类似写法相同

创建类

ng g class my-new-class

创建指令

ng g directive my-new-directive

创建Guard

ng g guard my-new-guard

创建interface

ng g interface my-new-interface

创建enum

ng g enum my-new-enum

创建module

ng g module my-module

父子组件之间的传递和引用

1、嵌套

组件之间的嵌套和在主页面中引用组件的方式一样，找到子组件的selector，然后在父组件的页面中引用标签名，例：

2、子组件引用父组件的数据

传递数据需要在父组件中设定属性，给属性赋值：
[question]="question">
然后子组件的component.ts中添加依赖 Input ：
import { Component, OnInit, Input } from '@angular/core';
再在函数中添加 @Input 接收父组件中被赋值的属性：
@Input("question") question:Question;

---

---

Angular的一些指令

*ngFor普通循环

    
{{item}}

循环的时候设置key

  
{{item}} --{{i}}

或者:

  
{{item}}---{{i}}

template循环数据

  
{{item}}

*ngIf 条件判断

这是 ngIf 判断是否显示
 这是 ngIf 判断是否显示

(click)="getDate()" 执行事件

点击按钮触发事件
button class="button" (click)="setData()">点击按钮设置数据
etData(){/*自定义方法获取数据*/ //获取alert(this.msg)};
setData(){//设置值 this.msg="这是设置的值";}

绑定属性

使用[属性]=“值”进行属性绑定(属性如果不加[],那么就直接是传统的赋值，加上[]就是angular中属性绑定)

2.属性绑定:

3.属性绑定:



src:string = "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png";

class类的绑定

1、直接使用[class]DOM绑定会覆盖之前的class

//ts文件
classname:string = "c";

2、使用[class.类名]=”boolean”来判断是否追加这个class

// 或者使用表达式

//ts文件
isShow:boolean = true;

3、使用对象显示

//ts文件
isA:boolean = true;
isB:boolean = true;
isC:boolean = true;
//或者

//ts文件
classGroup:any = {
    a:true,
    b:true,
    c:true
  }

样式绑定

1、绑定单个样式

我是测试样式的
我是测试样式的
// ts文件
isRed:boolean = true;
redColor:string = "red";

2、带单位的

我是测试样式的
// ts
fontSize:boolean = false;

3、绑定多个样式

// ts
styleGroup:any = {
  width:"100px",
  height:"100px",
  border:"1px solid #ddd",
  margin:"20px"
}

综合运用的一次示例

在for循环中使用属性绑定和事件绑定：

  

    

      
      {{item.name}}
    
    
  

.my-list{
    display: flex;
    justify-content: space-between;
    padding: 11px 30px 11px 20px; 
    font-size: 16px;
    color: #333;
    border-top: 1px solid #eee;
    div{
      width: 150px;
      ion-icon{
        margin-right: 13px;
      }
    }
    &.list3{
      border-bottom: 1px solid #eee;
    }
 }

// ts
typeList = [
    {
      ev: ()=>{this.hello()},
      icon: 'star',
      color: '#63c860',
      name: '投放记录',
    },
    {
      ev: ()=>{this.world()},
      icon: 'ios-clock',
      color: '#7699ff',
      name: '我的积分'
    },
    {
      ev: ()=>{ this.name()},
      icon: 'ios-home',
      color: '#ffd700',
      name: '兑换记录'
    }
];
constructor(...){...}
hello(){
  console.log('hello');
}
world(){
  console.log('world');
}
name(){
  console.log('xiao ming');
}

表单处理

keyUpFn(e){console.log(e)}

双向数据绑定

注意引入：FormsModule
import { FormsModule } from '@angular/forms';
@NgModule({
    declarations:[
       AppComponent,
       HeaderComponent,
       FooterCompoonent,
       NewsComponent
   ],
  imports:[
      BrowserModule,
      FormsModule
  ],
  providers: [],
    bootstrap: [AppComponent]
})
export class AppModule{   }

使用

{{inputValue}}

Todolist 功能

html部分

---

其他的一些内容

import { Component, OnInit } from '@angular/core';    /*引入 angular 核心*/

@Component({
  selector: 'app-question-list',    /*使用这个组件的名称*/
  templateUrl: './question-list.component.html',    /*html模板*/
  styleUrls: ['./question-list.component.css']    /*css 样式*/
})
export class QuestionListComponent implements OnInit {

  constructor() {   }    /*构造函数*/

  ngOnInit() {      /*初始化加载的生命周期函数*/
   
  }
}

关于打包

1、执行打包命令：ng build --prod --aot后会生成dist文件，但有可能打包出来的文件里面的index.html什么都不显示，解决办法：

将项目/src 目录下的index.html内容修改:
修改为
即可。

2、将项目发布到服务器上后图片路径都为assets/.......或者./assets/.....
3、项目发布到服务器刷新显示404问题：
解决方法：
配置app.module.ts

import {HashLocationStrategy , LocationStrategy} from '@angular/common';

@NgModule({
  declarations: [AppCmp],
  bootstrap: [AppCmp],
  imports: [BrowserModule, routes],
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
});

主要添加的代码：
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
这样设置后，访问angular站点，会自动在根节点后面加一个#锚点。再次刷新便不会报404错误了。