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、特点

单页应用,

方便快捷,高重用性组件


Logo

前往低代码交流专区

更多推荐