In the field of web application development, Angular is considered to be one of the best open source JavaScript frameworks.
Google's Angular team has released Angular 4 on March 23, and the long-awaited Angular 2 version is a complete refactoring of the previous version.
For mature developers, having both options is a great thing; however, for new developers in the learning phase, it can be a bit confusing.
So, this article will make an in-depth comparison of Angular2 and Angular4 to help you better understand these two versions.
Angular2
Angular2 was released in late 2015. Let's take a look at the reasons for this release of Angular 2 and how to add it to web development.
This version of Angular is more focused on developing mobile applications, developers can use it to create cross-platform applications, after solving the challenges of mobile applications (functionality, load time, etc.), Angular2 can handle desktop components more easily.
Many modules were eliminated from the Angular core, which also contributed to better performance in Angular 2. Angular is moving towards a growing ecosystem of modules, which means developers are free to choose the components they need.
Angular 2.0 is based on ES6 standards and "evergreen" modern browsers (which automatically update to the latest version of the browser). Building applications on these browsers means that Angular can be more easily developed and optimized, allowing developers to focus more on the code for the company's business implementation.
Angular2 features and performance
AtScript is a superset of ES6 to aid Angular2 development. It is processed by the Traceur compiler (in conjunction with ES6), which then generates ES5 code and uses TypeScript syntax to create runtime type assertions. However, AtScript is not mandatory and developers can still choose to build Angular applications using only pure JavaScript/ES5 code.
Boost Dependency Injection (DI):
Dependency injection (a programming pattern where calls can be made through dependencies without generation) is a feature that distinguishes Angular from its competitors. Dependency injection is very helpful in modular development and element isolation, but its implementation has been plagued by Angular 1.x. Angular2 solves this problem and additionally adds some missing features like sub-injection and lifecycle/scope control.
annotation:
AtScript provides tools to connect metadata and functionality. This simplifies the construction of object instances by providing basic information in the DI library (functions can be called or instances of classes can be created to check relevant metadata). By providing injection annotations, parameter information rewriting is also made simple.
Subinject:
A child inject inherits all professional services from its parent inject, as well as the ability to override at the child level. Some types of objects can be invoked and mechanically overridden as needed, within a certain scope.
Instance scope:
The enhanced DI library is composed of instance-scoped controllers, which are more powerful when used with sub-injectors along with scoped identifiers.
Dynamic loading:
This is a feature that was not available in previous Angular versions, and Angular 2 includes this feature to allow adding new directives or controls even when the developer is busy.
template:
In Angular2, the template compilation process is asynchronous. Since the code depends on ES6 modules, the module loader will load the dependencies by referencing them on some components.
instruction:
Angular2 provides three directives:
- Component directives: Make components reusable by encapsulating logic in HTML, CSS, and JavaScript.
- Decorator directives: Can be used to decorate elements (e.g. by hiding/showing elements ng-hide/ng-show or adding tooltips).
- Template directives: Can convert HTML into reusable templates. The instantiation of this template and insertion into the DOM can be completely controlled by the directive creator. For example ng-repeat and ng-if.
sub route
Sub-routers will transform each part of the program into a tighter application by providing its own routing functionality, which facilitates the encapsulation of the entire set of program functionality.
Screen Activator：
通过Angular 2，开发人员可以通过一系列can *回调对导航生命周期进行更好的控制。
- canActivate：它允许或阻止导航到新的控件。
- 激活：它会响应导航到新控件的成功事件。
- canDeactivate：它将防止或允许跳出旧控制器的导航。
- 停用：它会响应跳出旧控制器的成功事件。
设计：
所有这些逻辑都是使用管道架构创建的，这使得将自己的操作添加到管道中或删除默认操作变得非常简单。此外，它的异步字符允许开发人员在管道中，实现对用户进行身份验证或加载控件信息的服务器请求。
记录：
Angular 2.0包括一个名为diary.js的日志记录服务，这是一个非常有用的属性，用于测量开发人员的编码投入时间（从而允许开发人员识别代码中的瓶颈）。
scope：
$scope 从Angular2中删除了。
Angular4
Angular4 的特性和性能
相比于Angular 2，Angular4的功能列表中添加了许多新功能，同时还有一些旧功能的改进。
更小更快：
使用Angular4，程序将会消耗更少的空间，并比以前的版本运行地更快。工作主要用于不断进行改进。
视图引擎：
Angular4的开发人员修改了视图引擎的代码，例如AOT创建的代码。这些修改促使视图部分生成的代码大小减少了大约60％。模板越是复杂，节省的就越多。
动画包：
Angular4的开发人员将动画从Angular的核心部分提取出来，并将它们放在独立的包中。这意味着如果开发人员不需要使用动画，就可以不创建这些额外的代码。
这个功能还能够帮助更方便的查找docs文件和使用自动完成功能。开发人员可以通过为@angular/platform-browser/animations引入浏览器动画模块，从而实现为主要的NgModule添加动画功能。
改进 *ngIf 和 *ngFor：
模板绑定语法目前支持一些少量有帮助的更改。现在，开发人员已经可以使用if/else设计语法，并分配局部变量了。
Angular Universal：
此版本是Universal团队几个月的工作成果。这个Universal版本的代码的绝大多数目前位于@angular/platform-server。
TypeScript 2.1和2.2兼容性：
Angular4开发组将Angular升级为更新版本的TypeScript。这将提高ngc的速度，方便开发人员将在编码过程中更好的进行类型检查。
模板的源映射：
每当模板中的某些内容出现错误时，都将创建源映射，为原始模板提供有意义的说明内容。
结论：
对于仍处于学习阶段的人来说，Angular会有点混乱。但对于具有Angular2知识的有经验的开发人员来说，会觉得Angular很容易使用，并且使用Angular对项目非常有帮助。
原文链接：https://dzone.com/articles/angular-2-vs-angular-4-features-performance
转载请注明出自：葡萄城控件