Angular Js

In this blog post I will talk about the advantage of Angular 2.0 over  Angular 1,
In Angular 1, we have gone through views and controllers. In Angular 2, we will go through component model, will make components the basic building block for building applications.
What is component model:

1.Templates, which define chunks of markup.
2.Custom Elements, which let define their own elements, with new tag names and new script interfaces just like custom directive.
3.Shadow DOM, which encapsulates a DOM subtree for more reliable composition of user interface elements.

So we can see there is no controller in component model.The major advantage of angular 2 is the death of controller.

Like example:
In Angular 1
Angular 1.0 controller

index.html

{{message}}

myController.js

myApp.controller(‘HelloWorldController’, function($scope) {
$scope.message = ‘ Angular2’;
});

Output: Angular2

In Angular 2

index.html

<my-angular>

angularView.html

{{message}}

myDirective.js

myApp.directive(‘myAngular’, function() {
return {
restrict: ‘E’,
templateUrl: ‘angularView.html’,
link: function(scope, element, attrs) {
scope.message = ‘Angular2’;
}
};
});

Output: Angular2

Advantage of Angular 2 approach

1.We are using own markup in it’s own template, so there is no ng-include is required to link the template.
2.We can put this markup any where in app by simply writing <my-angular.
3.We get all of this without losing any of the functionality of a standalone controller and $scope.
4.Everything will be the component based approach.

As we can see that there is no $scope is required to glue between controller and view.

Another advantage of Angular 2 is that its really easy to define their interfaces; plus, HTML elements already have an easily mappable interface in events, attributes, and properties. Component APIs are evident in this look at a possible 2.0 component definition

@ComponentDirective
class TodoApp {
constructor() {
this.newTodoTitle = ”;
}
addTodo: function() { … }
removeTodo: function(todo) { … }
todosOf: function(filter) { … }

There’s no scope object! Because components are the only direct owners of views, we can use their function scopes as the execution context for their respective templates.

Looking for AngularJS Development Company, your search ends here!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.