Angular4的学习

作者: ftmo | 来源:发表于2018-05-21 16:42 被阅读0次

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 bootstrap@4.0.0-alpha.6 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']
})
那这个组件在主页面中使用时为：
<app-navbar></app-navbar>

主要组件介绍：
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 显示动态加载的路由

<h1>
  <!-- routerLinkActive  为选中路由加载相应的class（激活样式）如果routerLinkActive写在a链接的父类中，那么在路由到相应的页面时，它的父类就会获得激活样式 -->
  <a routerLink="/home" routerLinkActive="active">首页</a>
  <a routerLink="/news" routerLinkActive="active">新闻</a>
</h1>

<hr>
<router-outlet></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 显示动态加载的路由

<h1>
  <!-- routerLinkActive  为选中路由加载相应的class（激活样式） -->
  <a routerLink="/home" routerLinkActive="active">首页</a>
  <a routerLink="/news" routerLinkActive="active">新闻</a>
</h1>

<hr>
<router-outlet></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

创建管道

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，然后在父组件的页面中引用标签名，例：
<app-question *ngFor="let question of questions"></app-question>

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

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

Angular的一些指令

*ngFor普通循环

<ul>
    <li *ngFor="let item of list">{{item}}</li>
</ul>

循环的时候设置key

<ul>
  <li *ngFor="let item of list;let i = index">{{item}} --{{i}}</li>
</ul>
或者:
<ul>
  <li *ngFor="let item of list;index as i">{{item}}---{{i}}</li>
</ul>

template循环数据

<ul>
  <li template="ngFor let item of list">{{item}}</li>
</ul>

*ngIf 条件判断

<p *ngIf="list.length > 3">这是 ngIf 判断是否显示</p>
<p template="ngIf list.length > 3"> 这是 ngIf 判断是否显示</p>

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

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

绑定属性

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

<!-- 例子 -->
<p>2.属性绑定:</p>
<img src="{{src}}"/>
<p>3.属性绑定:</p>
<img [src]="src"/>

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

class类的绑定

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

<div class="a b" [class]="classname"></div>
//ts文件
classname:string = "c";

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

<div class="a b" [class.c]="isShow"></div>
// 或者使用表达式
<div class="a b" [class.c]="isShow == true"></div>
//ts文件
isShow:boolean = true;

3、使用对象显示

<div [ngClass]={a:isA,b:isB,c:isC}></div>
//ts文件
isA:boolean = true;
isB:boolean = true;
isC:boolean = true;
//或者
<div [ngClass]="classGroup"></div>
//ts文件
classGroup:any = {
    a:true,
    b:true,
    c:true
  }

样式绑定

1、绑定单个样式

<p [style.color]="isRed?'red':'blue'">我是测试样式的</p>
<p [style.color]="redColor">我是测试样式的</p>
// ts文件
isRed:boolean = true;
redColor:string = "red";

2、带单位的

<p [style.font-size.em]="fontSize?1:3">我是测试样式的</p>
// ts
fontSize:boolean = false;

3、绑定多个样式

<div [ngStyle]="styleGroup"></div>
// ts
styleGroup:any = {
  width:"100px",
  height:"100px",
  border:"1px solid #ddd",
  margin:"20px"
}

综合运用的一次示例

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

<!-- html -->
  <div class="my-list" *ngFor="let item of typeList;index as i" (click)="item.ev()" [class.list3]="i == 2">
    <div>
      <ion-icon name="{{item.icon}}" [style.color]="item.color"></ion-icon>
      {{item.name}}
    </div>
    <ion-icon name="ios-arrow-forward"></ion-icon>
  </div>

.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');
}

表单处理

<input type="test" (keyup)="keyUpFn($event)"/>
keyUpFn(e){console.log(e)}

双向数据绑定

<input [(ngModel)]="inputValue">

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

使用

<input type="text" [(ngModel)]="inputValue"/>
{{inputValue}}

Todolist 功能

html部分

<input type="text" [(ngModel)]="username">
<button (click)='addData()>增加</button>
<ul>
   <li *ngFor="let item of list>{{item}}</li>
</ul>

js部分

export class TodolistComponent implements OnInit {
  list:any[];
  username:any;
  
  consturctor(){

  }
  
  ngOnInit(){
    this.list=[];
    this.username='';
  }
  addData(){
    alert(this.username);
    this.list.push(this.username);
  }

}

其他的一些内容

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内容修改:
<base href="/"> 修改为
<base href="./"> 即可。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AdminConsole</title>
  <base href="./">      <!-- 这里是重点 -->
 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</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错误了。

Angular4的学习

2018-3-15 星期四

一、安装

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

创建项目

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

在angular4中使用sass

创建组件

创建服务

创建路由

创建管道

创建类

创建指令

创建Guard

创建interface

创建enum

创建module

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

Angular的一些指令

*ngFor普通循环

*ngIf 条件判断

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

绑定属性

class类的绑定

样式绑定

综合运用的一次示例

表单处理

双向数据绑定

Todolist 功能

其他的一些内容

关于打包

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程