标题将会让角新手感到困惑。第一个问题是AngularJS和棱角的区别。AngularJS是all 1的名称。x版本的Angular。Angular的最新版本被称为Angular i.e版本大于1.x。
Filters – Pipes:
在AngularJS中,用于过滤输出管道符号(|)。例如,用户名将被过滤到大写。
The name is {{ userName | uppercase }}
在角度上,我们将使用相同的管道符号(|)来过滤输出,但是现在它被称为管道。AngularJS中的大多数内置过滤器都可以在管道中以角的形式构建。
{}
由于性能问题,过滤器和orderBy内置过滤器不可用角。
局部变量-输入变量:
AngularJS,使用局部变量。例如:
{}
Angular,使用显式声明的输入变量与let关键字。例如:
{}
ng-class – ngclass:
在AngularJS中,ng类指令用于根据表达式包含或排除CSS。
在Angular,ngclass指令的工作原理是类似的,它被用来在表达式的基础上包含或排除不同的CSS类。
在这两个版本中,都可以使用单个类或多个CSS类。基于该表达式,将CSS类应用于相应的标记。
ng-hide/ng-show – hidden:
在AngularJS中,ng-hide & ng-show指令用于隐藏和显示基于表达式的HTML元素。
Your favorite hero is: {}
Your favorite hero is: {}
在Angular中,没有特定的隐藏或显示指令,但是隐藏的属性是可用的,我们可以用这个属性实现上述功能。
Your favorite hero is: {}
Your favorite hero is: {}
ng-href – href:
在AngularJS中,ng-href指令是可用的,它将预处理href属性,因此它将用正确的URL替换绑定表达式,因此,当将单击适当的URL时将呈现。
Angular Docs
这个指令甚至被用来作为应用程序中页面之间导航的一部分。Movies
在Angular上,没有特定的href指令可用,但是href属性可用来实现这个目的。Angular Docs
ng-if – *ngif:
在AngularJS中,ng-if指令是可用的,它将根据表达式移除或重新创建DOM中的HTML元素。如果表达式的结果为false,则该元素将从DOM中删除。
在Angular上,*ngif指令是可用的,它与AngularJS中的ng-if指令相同。它基于表达式输出创建和删除dom部分。如果表达式返回false,
ng-model – ngModel:
在AngularJS中,ng模型指令提供了双向绑定,这样视图中的任何更改都将与模型同步,当模型发生更改时,将自动与视图同步。
在Angular上,双向绑定通常用[()]表示。它被称为“盒子里的香蕉”。
ng-repeat – *ngFor:
在AngularJS中,可以使用ng-repeat指令,并对每个条目重复DOM元素。
在这个例子中,tr元素在电影的集合中重复出现。
在Angular上,*ngFor指令存在于ng-repeat的位置,类似于AngularJS中的ng-repeat。
在上面的示例中,使用let关键字将电影初始化为本地变量。
ng-src – src:
它几乎与ng-href和href相似。在AngularJS中,ng-src指令将预处理URL,并使用适当的URL绑定表达式。
在Angular上,没有src指令,但是我们有src属性绑定。
ng-style – ngStyle:
它几乎类似于ng类和类指令。
在Angular上,
如果您想了解更多关于从AngularJS迁移到斜角文档的知识。
领取专属 10元无门槛券
私享最新 技术干货