4 5区别 angular 和_angularJs和angular、vue、react对比

angularJs指2.0以下的版本，2.0以上都叫做angular

angularJs的优点

模板功能强大丰富

比较完善的前端mvc框架

引入java的概念

angularJs的一些问题

性能、路由、(不能嵌套路由)、作用域、表单验证、学习成本

angular的新特性

全新的命令行工具angularCli

服务端渲染

移动和桌面兼容

(50k)

与react对比

速度快(虚拟dom)

FLUX框架 (ui的组件化)

服务端渲染(预渲染，利于爬虫)

与vue对比

简单、灵活、性能(大小10k)、个人指导、只关注web

环境搭建(安装nodejs)

1、npm install -g @angular/ali

2、ng new 文件名

组件由 装饰器(@Component())+模板(Template)+控制器(controller)组成

所有组件由@Component()注解 ，组件装饰器里的属性就是元数据

3、启动angular服务

ng serve

4、创建组件

ng g component footer(组件名字)

5、angular的路由功能

配置路由

const routes: Routes = [

// Routes 配置的时候path前面一定不要是 "/"

{

path:'',

component:HomeComponent

},

{

path:'product',

component:ProductComponent

},

{

path:"**",

component:Code404Component

}

];

路由跳转 routerLink接受一个数组

主页

商品详情

点击事件跳转

export class AppComponent {

title = 'content';

constructor(private router:Router){}; //constructor获取路由

toDetail(){

this.router.navigate(['/product']) //跳转到某个位置 和routerLink类似

}

}

占位符,供加载组件的位置

传参的2种方法

查询参数(一)

商品详情

接受参数

// 接受传递过啦的id

private productId:number;

constructor(private roterId:ActivatedRoute) { }

//给productId赋值

ngOnInit() {

this.productId=this.roterId.snapshot.queryParams['id']

}

理由传参(二)

const routes: Routes = [

// Routes 配置的时候path前面一定不要是 "/"

{

path:'',

component:HomeComponent

},

{

path:'product/:id', -----------------------

component:ProductComponent -----------------

},

];

商品详情

取值

export class ProductComponent implements OnInit {

// 接受传递过啦的id

private productId:number;

constructor(private roterInfo:ActivatedRoute) { }

//给productId赋值

ngOnInit() {

//把queryParams改为params

this.productId=this.roterInfo.snapshot.params['id']

}

}

snapshot//参数快照 组件自身不会到自身

subscribe //参数订阅 组件自身到自身这种跳转

export class ProductComponent implements OnInit {

// 接受传递过啦的id

private productId:number;

constructor(private roterInfo:ActivatedRoute) { }

//给productId赋值

ngOnInit() {

//参数订阅

this.roterInfo.params.subscribe((params: Params) => this.productId = params['id'])

// 参数快照

// this.productId=this.roterInfo.snapshot.params['id']

}

}

6、重定向路由

const routes: Routes = [

// Routes 配置的时候path前面一定不要是 "/"

{

path:'',

redirectTo:'/home', //重定向路由

pathMatch:'full'

},

{

path:'home',

component:HomeComponent

},

{

path:'product/:id',

component:ProductComponent

},

{

path:"**",

component:Code404Component

}

];

7、子路由children

{

path:'product/:id',

component:ProductComponent,

children:[

{

path:'',

component:ProduceDescComponent

},

{

path:'sellor/:id',

component:SellorInfoComponent

}

]

},

8、路由守卫

使用方法

路由的ts里面去写

import { NgModule } from '@angular/core';

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

import { loginGuard } from './guard/login_guard';

import { unsaveGuard } from './guard/unsave_guards';

const routes: Routes = [

// Routes 配置的时候path前面一定不要是 "/"

{

path:'',

redirectTo:'/home', //重定向路由

pathMatch:'full'

},

{

path:'product/:id',

component:ProductComponent,

children:[

{

path:'',

component:ProduceDescComponent

},

{

path:'sellor/:id',

component:SellorInfoComponent

}

],

canActivate:[loginGuard],---------------------------------

canDeactivate:[unsaveGuard]-------------------

},

{

path:"**",

component:Code404Component

}

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule],

providers:[loginGuard,unsaveGuard] ----------------------------

})

export class AppRoutingModule { }

CanActivate的使用方法

import { CanActivate } from '@angular/router';

export class loginGuard implements CanActivate{

canActivate(){

let loggedIn:boolean=Math.random()<0.5

if(!loggedIn){

console.log("用户未登陆")

}

return loggedIn;

}

}

CanDeactivate 的使用方法

import { CanDeactivate } from '@angular/router';

import { ProduceDescComponent } from '../produce-desc/produce-desc.component';

export class unsaveGuard implements CanDeactivate{

canDeactivate(component:ProduceDescComponent){

return window.confirm("当前页面没有保存，你确定要离开吗，")

}

}