从AngularJS快速跳转到Angular

标题将会让角新手感到困惑。第一个问题是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迁移到斜角文档的知识。