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版本为:

Angular4的学习_第1张图片
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、
Angular4的学习_第2张图片
image.png

2、
Angular4的学习_第3张图片
image.png

Angular4的学习_第4张图片
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内容修改:
修改为
即可。




  
  AdminConsole
        
 
  
  


  


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的学习)