一、安装最新版本的 nodejs
注意：请先在终端/控制台窗口中运行命令 node -v 和 npm -v， 来验证一下你正在运行
node 6.9.x 和 npm 3.x.x 以上的版本。 更老的版本可能会出现错误，更新的版本则没
问题。
二、全局安装 Angular CLI 脚手架工具
1. 使用 npm 命令安装
npm install -g @angular/cli
2.使用 cnpm 命令安装
cnpm install -g @angular/cli
三、创建项目
1. 打开 cmd 找到你要创建项目的目录
2. 创建项目 ng new 项目名称 创建一个项目 ng new my-app
3. 进入刚才创建的项目里面启动服务 cd my-app
cnpm install //安装依赖
ng serve --open
四、目录结构分析
1. app.module.ts、组件分析
定义 AppModule，这个根模块会告诉 Angular 如何组装该应用。 目前，它只声明了 AppComponent。 稍后它还会声明更多组件。
//Angular 模块类描述应用的部件是如何组合在一起的。 每个应用都至少有一个 Angular 模块，也就 是根模块，
// 用来引导并运行应用。 你可以为它取任何名字。常规名字是 AppModule。 也就是 app.module.ts 文件
/*引入组件*/
import { BrowserModule } from '@angular/platform-browser'; /*BrowserModule，浏览器解 析的模块*/
import { NgModule } from '@angular/core'; /*angualrjs 核心模块*/
import { FormsModule } from '@angular/forms'; /*表单数据绑定 表单验证需要的模块*/
import { AppComponent } from './app.component'; /*根组件*/ @NgModule 接受一个元数据对象，告诉 Angular 如何编译和启动应用。*/
@NgModule({
declarations: [ /*引入当前项目运行的的组件*/
AppComponent
],
imports: [ /*引入当前模块运行依赖的其他模块*/
BrowserModule,
FormsModule
],
providers: [], /*定义的服务 回头放在这个里面*/
bootstrap: [AppComponent] /* 指定应用的主视图（称为根组件） 通过引导根 AppModule 来启动 应用 ，这里一般写的是根组件*/
})
export class AppModule { }
2 创建 angualr 组件
https://github.com/angular/angular-cli
创建组件：
ng g component components/header
组件内容详解：
import { Component, OnInit } from '@angular/core'; /*angular 核心*/
@Component({
selector: 'app-header', /*使用组件的名称*/
templateUrl: './header.component.html', /*html 模板*/
styleUrls: ['./header.component.css'] /*css 样式*/
})
export class HeaderComponent implements OnInit {
constructor() { /*构造函数*/
}
ngOnInit() { /*初始化加载的生命周期函数*/
}
}
五，常用的内容
1. 数据文本绑定
{{}}
<h1> {{title}} </h1>
2.绑定属性绑定 html
this.h="<h2>这是一个 h2 用[innerHTML]来解析</h2>"
<div [innerHTML]='h'></div>
3、*ngFor 普通循环
<ul>
<li *ngFor="let item of list;let i=index">
{{i}}------- {{item}}
</li>
</ul>
4、条件判断
<p *ngIf="list.length>3">这是 ngIF 判断是否显示</p>
5、执行事件
<button (click)="getData()" >xxxxx</button>
getData(){
alert('xxxxxx');
}
6、双向数据绑定
<input [{ngModel}]="inputValue" />
注意引入：FormsModule
imports: [
BrowserModule,
FormsModule
]
使用：
<input type='text' [{ngModel}]="inputValue" />
{{ inputValue }}
六、创建 angualr 服务使用服务
ng g service my-new-service
创建到指定目录下面
ng g service services/storage
1.app.module.ts 里面引入创建的服务
import { StorageService } from './services/storage.service';
2. NgModule 里面的 providers 里面依赖注入服务
providers: [StorageService]
3、使用的页面引入服务，注册服务
import { StorageService } from '../../services/storage.service';
constructor(private storage: StorageService) { }
4.使用
this.storage.内容
七、Angular4.x get post 以及 jsonp 请求数 据
1.引入 HttpModule 、JsonpModule （普通的 HTTP 调用并不需要用到 JsonpModule）
import { HttpModule, JsonpModule } from '@angular/http';
2.HttpModule 、JsonpModule 依赖注入
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule,
AppRoutingModule
],
使用 Http、Jsonp：
1、在需要请求数据的地方引入
Http import {Http,Jsonp} from "@angular/http";
2、构造函数内申明：
constructor(private http:Http,private jsonp:Jsonp) { }
3、对应的方法内使用 http 请求数据
this.http.get(url).subscribe( function(data){
console.log(data);
},function(err){
console.log('失败');
} );
this.jsonp.get("http://www.xxx.com&callback=JSONP_CALLBACK") .subscribe( function(data){
console.log(data);
},function(err){
console.log('失败');
} );
使用 Post
1. 引入 Headers 、Http 模块 在用的地方
import {Http,Jsonp,Headers} from "@angular/http";
2. 实例化 Headers
private headers = new Headers({'Content-Type': 'application/json'});
3.post 提交数据
this.http .post('http://localhost:8008/api/test', JSON.stringify({username: 'admin'}),
{headers:this.headers}) .subscribe(function(res){
console.log(res.json());
});
使用 rxjs 请求数据
RxJS 是一种针对异步数据流编程工具，或者叫响应式扩展编程；可不管如何解释 RxJS 其
目标就是异步编程，Angular 引入 RxJS 为了就是让异步可控、更简单。 大部分 RxJS 操作
符都不包括在 Angular 的 Observable 基本实现中，基本实现只包括 Angular 本身所需的功
能。 如果想要更多的 RxJS 功能，我们必须导入其所定义的库来扩展 Observable 对象， 以下 是这个模块所需导入的所有 RxJS 操作符：
1、 引入 Http 、Jsonp、RxJs 模块
import {Http,Jsonp} from "@angular/http";
import {Observable} from "rxjs";
import "rxjs/Rx";
你可能并不熟悉这种 import 'rxjs/Rx'语法，它缺少了花括号中的导入列表：{...}。 这是因为我们并不需要操作符本身，这种情况下，我们所做的其实是导入这个库，加载并运行其中的脚本， 它会把操作符添加到 Observable 类中。
2、 构造函数内申明：
constructor(private http:Http,private jsonp:Jsonp) { }
3、get 请求
this.http.get(url).map(res => res.json()) .subscribe( function(data){
console.log(data);
} );
4、Jsonp 请求
this.jsonp.get("http://www.xx.com&callback=JSONP_CALLBACK") .map(res =>
res.json()) .subscribe( function(data){
console.log(data);
} );
http.get 方法中返回一个 Observable 对象，我们之后调用 RxJS 的 map 操作符对返回的数据 做处理。
八、路由
创建路由
ng new 项目名称 --routing
会有 app-routing.module.ts文件
若没有我们可以手动创建
样式：
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
//引入组件
import { HomeComponent } from './components/home/home.component';
import { UserComponent } from './components/user/user.component';
import { HomeconComponent } from './components/home/homecon/homecon.component';
import { UserlistComponent } from './components/user/usercon/userlist/userlist.component';
import { UseraddComponent } from './components/user/usercon/useradd/useradd.component';
import { UsereditComponent } from './components/user/usercon/useredit/useredit.component';
//配置路由
const routes: Routes = [
{
path:'home',
component:HomeComponent,
children:[
{
path:'homecon',
component:HomeconComponent
},
{ //匹配不到路由的时候加载的组件 或者跳转的路由
path:'**',/*任意的路由*/
redirectTo:'/home/homecon'
}
]
},
{
path:'user',
component:UserComponent,
children:[
{
path:'userlist',
component:UserlistComponent,
},
{
path:'useradd',
component:UseraddComponent,
},
{
path:'useredit',
component:UsereditComponent,
},
{ //匹配不到路由的时候加载的组件 或者跳转的路由
path:'**',/*任意的路由*/
redirectTo:'/user/userlist'
}
]
},
{ //匹配不到路由的时候加载的组件 或者跳转的路由
path:'**',/*任意的路由*/
redirectTo:'home'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
获取传值
1.引入
import {ActivatedRoute } from '@angular/router';
2.实例化
constructor(private route:ActivatedRoute) { }
3.
path:'con/aid:123',
ngOnInit() {
this.route.params.subscribe(function(data){
console.log(data);//123
}) }
8.3 默认跳转路由
<a routerLink='/home'>xxxx</a>
//刚进来路由为空跳转的路由(了解)
{
path:'',
redirectTo:'home',
pathMatch:"full"
}
//匹配不到路由的时候加载的组件 或者跳转的路由
{ path: '**', /*任意的路由*/
redirectTo:'home' }
8.4 routerLinkActive 设置 routerLink 默认选中路由
<a routerLink='/home' routerLinkActive="active">xxxx</a>
<a routerLink='/news' routerLinkActive="active>xxxx</a>
.active{
color:red;}
8.5 路由的 js 跳转
1. 引入
import { Router } from '@angular/router';
2.初始化
export class HomeComponent implements OnInit {
constructor(private router: Router) {
}
ngOnInit() {
}goNews(){
// this.router.navigate(['/news', hero.id]);
this.router.navigate(['/news']);
}}
3.路由跳转
this.router.navigate(['/news', hero.id]);
8.6 父子路由
1. 创建组件引入组件
import { NewsaddComponent } from './components/newsadd/newsadd.component';
import { NewslistComponent } from './components/newslist/newslist.component';
2. 配置路由
{path: 'news',component:NewsComponent,
children: [
{path:'newslist'
,component:NewslistComponent},
{path:'newsadd',
component:NewsaddComponent}
]
}
3. 父组件中定义 router-outlet
<router-outlet></router-outlet>
九、父子组件传值
1. 父组件给子组件传值
1.子组件
import { Component, OnInit ,Input } from '@angular/core';
2.父组件调用子组件
<app-header [msg]="msg"></app-header>
3.子组件中接收数据
export class HeaderComponent implements OnInit {
@Input() msg:string
constructor() { }
ngOnInit() {
}}
2. 子组件给父组件传值
1. 子组件引入 Output 和 EventEmitter
import { Component, OnInit ,Input,Output,EventEmitter} from '@angular/core';
2.子组件中实例化 EventEmitter
@Output() private outer=new EventEmitter();
/*用 EventEmitter 和 output 装饰器配合使用指定类型变量*/
3. 子组件通过 EventEmitter 对象 outer 实例广播数据
sendParent(){
// alert('zhixing'
);
this.outer.emit('msg from child')}
4.父组件调用子组件的时候，定义接收事件 , outer 就是子组件的 EventEmitter 对象 outer
<app-heade (outer)="runParent($event)"></app-header>
5.父组件接收到数据会调用自己的 runParent 方法，这个时候就能拿到子组件的数据
//接收子组件传递过来的数据
runParent(msg:string){
alert(msg);
}
十、获取 dom 节点操作 dom 节点
模板
<div #mydiv>box</box>
ts 文件
import { Component, OnInit,ElementRef,ViewChild} from '@angular/core';
@ViewChild('mydiv') mydiv: ElementRef;
ngOnInit() {
let el = this.mydiv.nativeElement
;console.log(el)
// 使用原生方法
el.style.color='red';
}
网友评论