Angular与AngularJS区别变化

1、angular2.0以后与react和vue的区别

命名变化，angular2以后官方命名为angular，而2.0以前版本称为angularjs

改变：

AngularJS 的特性和优点：angualr中全部被继承并且发扬光大

1、模板功能强大丰富：声明式的，自带很多指令使angularJS拥有了强大的数据绑定能力。不需要自己用jQuery操作dom，只需要更改对象。

2、比较完善的前端mvc框架

3、引入了java的概念:依赖注入单元测试等等，很容易写出可复用的代码，

AngualrJS中的问题：

1、性能问题：数据改变通过脏检查项目完成，数量越多性能越低。

                       在angular中默认的绑定方式是单项数据绑定，其次检查机制被完全重写。

2、简单的路由功能：ng-view只能有一个不能嵌套很多的视图，

                       在angular中路由模块变成了核心模块

3、作用域：在angular中没有$scpoe,原生的事件可以直接绑定。

4、表单验证：

5、JavaScript：面向对象开发并不足够，angular中使用typescript，是带有es6的一个超集。带有完善的类型系统。

6、学习成本：angular的核心就是组件，angularJS核心很多

Angular新特性：

全新的Angular CLI 

服务器端渲染

移动和桌面得兼容

1、创建新项目

ng new  项目名称

2、启动服务

ng serve --open

3、typescript

与JavaScript不同点：

• 类型声明

myVar:string="hello"

myVar:boolean=true

myVar:any   可以是任何类型

• 类的概念：

class Car{

    wheels:numberr=4

 drive{

   console.log('孟小佳')

   }
}
mycar:Car=new Car

构造函数：当类被创建出来的时候会立即执行

class Car{

    speed:number；

 constructor{mph:number

   this.speed=mph;

   }
}
mycar:Car=new Car(70)

• 可见度

public、protected（当前类和子类）、private（当前类）

• 箭头函数

1.()=>相当于function()

2.()=>{something}

4、数据绑定

模板绑定只能使用字符串但是属性绑定可以使用表达式。

单项数据绑定：模板绑定（双花括号{{}}）----准备数据：使用数据

属性绑定：[something]="表达式"

双向数据绑定：<input [(ngModel)]="person.name" >    <p>{{person.name}}</p>

5、指令

什么是指令？具备某种能力完成某种任务，在ng2中有是那种类型的指令，分别是组件、属性和结构指令。

属性指令：ngClass="类名"，改变当前dom结构的样式，

结构指令：*ngif="表达式"改变当前dom结构

ngClass：主要作用添加一些样式，

5、pipe实现搜索

简单来说管道的作用就是传输。

1、内置管道

2、自定义管道  首先创建管道，ng -g pipe guandaomingzi  然后进行管道设置：进入pipe.ts文件

<form id="filter">
    <lable>Filter Name</lable>
    <input type="text" [(ngModel)]="term" name="first">
</form>

export class FilterPipe implements PipeTransform{
    transform(people:any,term:any):any{
        if(term === undefined)return people;//说明没有任何匹配
        //如果有匹配就返回people里的值
        //es6方法filter
        return people.filter(function(person)){
            return person.name.toLowerCase().includes(term.toLowerCase());
            //includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。
        } }
}

5、服务service

变当前dom结构，想要使用服务的组件要进行import[],

然后通过这个类创建这个对象，拥有这个对象之后才能使用这个类，在component中添加provide属性

5、http

类中拥有属性和方法，

请求：http.get()方法 ，用于从后台获取数据。

第三方库：map()对数据进行映射，（后台拿到的数据是json数据，无法进行操作，但是可以对对象进行操作。）

操作：subscribe(

(data)=>console.log(data)

)

constructor(private http:Http){}
fetchData(){
    this.http.get('../../public/people.json').subscribe(
        //处理对应的数据
        (data)=>console.log(data)
    )
}

5、请求数据到页面

借助第三方库rxjs  

放到组建中

ngOnInit(){
    this.dataService.fetchData().subscribe(
        (data) => this.people = data
    );
}

5、特点

单页应用，

方便快捷，高重用性组件