AngularJS Tutorial : AngularJS 2.0 Released, What’s New?

AngularJS Tutorial : AngularJS 2.0 was featured, what is new in AngularJS JavaScript framework? AngularJS 2.0 vs AngularJS 1.5

AngularJs Tutorial - As we know, JavaScript Framework AngularJS has become one of the most popular open source in the world in this year. AngularJS has matured into a client-side MVW framework (Model-View-Whatever) for the building of complex single-page applications. It places equal importance on application testing and application writing, while simplifying the development process.

At the previews lessons, we have learn how to install AngularJs 1.5.2, please read on this link.

What's New in AngularJS 2.0?

The current version of Angular is 1.3. This version is both stable and performant and is used by Google (the framework’s maintainers) to power a great many of their applications (it’s estimated that that there are over 1600 apps inside of Google running on Angular 1.2 or 1.3).

AngularJS 2.0 Released

AtScript

AtScript is a superset of ES6 and it’s being used to develop Angular 2.0. It’s processed by the Traceur compiler (along with ES6) to produce ES5 code and uses TypeScript’s type syntax to generate runtime type assertions instead of compile time checks. However, AtScript isn’t compulsory—you will still be able to use plain JavaScript/ES5 code instead of AtScript to write Angular apps.
Improved Dependency Injection (DI)

Dependency injection (a software design pattern in which an object is passed its dependencies, rather than creating them itself) was one of the factors that initially differentiated Angular from its competitors. It is particularly beneficial in terms of modular development and component isolation, yet its implementation was plagued with problems in Angular 1.x. Angular 2.0 will will address these issues, as well as adding missing features such as child injectors and lifetime/scope control.

Annotations

AtScript provides tools for associating metadata with functions. This facilitates the construction of object instances by providing the required information to the DI library (which will check for associated metadata when calling a function or creating an instance of a class). It will be also easy to override parameter data by supplying an Inject annotation.

Child Injectors

A child injector inherits all the services of its parent with the capability of overriding them at the child level. According to requirement, different types of objects can be called out and automatically overridden in various scopes.

Instance Scope

The improved DI library will feature instance scope control, which will become even more powerful when used with child injectors and your own scope identifiers.

Templating and Data Binding

Let’s take a look at templating and data binding as they go hand in hand when developing apps.

Dynamic Loading

This is a feature which is missing from the current version of Angular. It will be addressed by Angular 2.0, which will let developers add new directives or controllers on the fly.

Templating

In Angular 2.0, the template compilation process will be asynchronous. As the code is based on the ES6 module spec, the module loader will load dependencies by simply referencing them in the component definition.

Directives

In Angular 2.0 there will be three kinds of directives:
  1. Component Directives – These will create reusable components by encapsulating logic in JavaScript, HTML or an optional CSS style sheet.
  2. Decorator Directives – These directives will be used to decorate elements (for example adding a tooltip, or showing/hiding elements using ng-show/ng-hide).
  3. Template Directives – These will turn HTML into a reusable template. The instantiating of the template and its insertion into the DOM can be fully controlled by the directive author. Examples include ng-if and ng-repeat.

Routing Solution

The initial Angular router was designed to handle just a few simple cases, yet as the framework grew, more and more features were bolted on. The router in Angular 2.0 has been reworked to be simple, yet extensible. It will include the following basic features:
  1. Simple JSON-based Route Config
  2. Optional Convention over Configuration
  3. Static, Parameterized and Splat Route Patterns
  4. URL Resolver
  5. Query String Support
  6. Use Push State or Hashchange
  7. Navigation Model (For Generating a Navigation UI)
  8. Document Title Updates
  9. 404 Route Handling
  10. Location Service
  11. History Manipulation
Now, let’s check out the features which make the improved router a catalyst to take Angular 2.0 to new heights.

Child Router

The child router will convert each component of the application into a smaller application by providing it with its own router. It will help encapsulate entire feature sets of an application.
Screen Activator

This will give developers finer control over the navigation lifecycle, via a set of can* callbacks:
  1. canActivate – Allow/Prevent navigating to the new controller.
  2. activate – Respond to successful navigation to the new controller.
  3. canDeactivate – Allow/Prevent navigation away from the old controller.
  4. deactivate – Respond to successful navigation away from the old controller.
These callbacks will allow the developer to return Boolean values, a Promise for that value, or a Navigation Command (for a lower level control).

Design

All of this logic is built using a pipeline architecture which makes it incredibly easy to add one’s own steps to the pipeline or remove default ones. Moreover, its asynchronous nature will allow developers to a make server request to authenticate a user or load data for a controller, while still in the pipeline.

Logging

Angular 2.0 will contain a logging service called diary.js—a super useful feature which measures where time is spent in your application (thus enabling you to identify bottlenecks in your own code).

Scope

$scope will be removed in Angular 2.0 in favor of ES6 classes.

Conclusion

There is a lot of excitement and buzz around Angular 2.0 at the moment and this will only heighten as its release date nears. The beginning of March will see the next ng-conf take place where it’s likely that more details of the next version will emerge.

Meanwhile opinion remains divided as to whether breaking change is a good thing. Proponents claim there are hard limits on the improvements that can be made to 1.x, whilst opponents are understandably nervous at the apparent lack of a migration plan.

Resources : https://www.sitepoint.com/whats-new-in-angularjs-2/

See you next lessons..

COMMENTS

Next Recomended


Feel free to code it up and send us a pull request.

Hi everyone, let's me know how much this lesson can help your work. Please Subscribe and Follow Our Social Media 'kodeajaib[dot]com' to get Latest tutorials and will be send to your email everyday for free!, Just hit a comment if you have confused. Nice to meet you and Happy coding :) all ^^



Follow by E-Mail


Name

ADO.NET,3,Ajax,6,Android,9,AngularJS,4,ASP.NET,4,Blogger Tutorials,7,Bootstrap,7,C++,1,Codeigniter,2,Cplusplus,6,Crystal Report,6,CSharp,25,Ebook Java,2,FlyExam,1,FSharp,3,Game Development,2,Java,35,JDBC,2,Laravel,84,Lumen,2,MariaDB,2,Ms Access,3,MySQL,31,ODBC,6,OleDB,1,PHP,14,PHP Framework,5,PHP MYSQLI,9,PHP OOP,5,Python,8,Python 3,4,SQL Server,4,SQLite,4,Uncategorized,5,Vb 6,2,Vb.Net,89,Video,48,Vue Js,4,WPF,2,Yii,3,
ltr
item
KODE AJAIB: AngularJS Tutorial : AngularJS 2.0 Released, What’s New?
AngularJS Tutorial : AngularJS 2.0 Released, What’s New?
AngularJS Tutorial : AngularJS 2.0 was featured, what is new in AngularJS JavaScript framework? AngularJS 2.0 vs AngularJS 1.5
https://2.bp.blogspot.com/-Nougt4ZVsLI/V1AqMcAzQYI/AAAAAAAAB10/1CZ8-91O4vsJ1-acfRL_Z-Fy6YJ8ukhEACLcB/s320/belajar-angular-js-pemula.jpg
https://2.bp.blogspot.com/-Nougt4ZVsLI/V1AqMcAzQYI/AAAAAAAAB10/1CZ8-91O4vsJ1-acfRL_Z-Fy6YJ8ukhEACLcB/s72-c/belajar-angular-js-pemula.jpg
KODE AJAIB
https://www.kodeajaib.com/2016/09/angularjs-2-release-whats-new-in-angularjs-2.html
https://www.kodeajaib.com/
https://www.kodeajaib.com/
https://www.kodeajaib.com/2016/09/angularjs-2-release-whats-new-in-angularjs-2.html
true
3214704946184383982
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy