AngularJS is a Javascript MVC framework created by means of Google to build well architectured and maintenable web applications.AngularJS takes another approach. It attempts to reduce the impedance mismatch among document centric HTML and what an application needs via developing new HTML constructs. AngularJS teaches the browser new syntax through a construct we call directives. Examples include:
Why AngularJS?
AngularJS is a MVC framework that defines numerous ideas to properly arrange our web software. Our utility is defined with modules which could depend from one to the others. It complements HTML with the aid of attaching directives to your pages with new attributes or tags and expressions in an effort to outline very powerful templates at once on your HTML. It also encapsulates the behavior of your software in controllers which are instanciated way to dependency injection. Thanks to using dependency injection, AngularJS enables you shape and take a look at your Javascript code very easily. Finally, software code can easily be factorized into services that may be injected to your controllers. Now let's have a closer examine all the ones features.
Feature 1: Two Way Data-Binding
Think of your model because the single-source-of-fact in your application. Your version is wherein you go to to read or replace some thing for your application.Data-binding is probably the good and maximum useful characteristic in AngularJS. It will prevent from writing a large amount of boilerplate code. A typical internet utility may incorporate as much as 80% of its code base, devoted to traversing, manipulating, and taking note of the DOM. Data-binding makes this code disappear, so we can consciousness on our software.
Think of your version because the single-source-of-reality to your software. Your model is in which you go to to examine or replace something in your software. The data-binding directives offer a projection of your model to the software view. This projection is seamless, and happens without any effort from you.
Traditionally, while the version adjustments, the developer is answerable for manually manipulating the DOM elements and attributes to mirror these modifications. This is a two-manner street. In one direction, the version modifications drive exchange in DOM elements. In the other, DOM element adjustments necessitate adjustments inside the model. This is further complex with the aid of consumer interaction, for the reason that developer is then responsible for interpreting the interactions, merging them into a version, and updating the view. This is a very guide and cumbersome process, which turns into hard to control, as an application grows in size and complexity.
There ought to be a better manner! AngularJS' two-way data-binding handles the synchronization among the DOM and the version, and vice versa.
Here is a simple example, which demonstrates the way to bind an input value to an
element.
Name:
Enter a name here
Hello, yourName!
This is extremely simple to set up, and nearly magical...
Feature 2: Template
It's important to realize that at no factor does AngularJS manage the template as strings. It's all the browser DOM.
In AngularJS, a template is just plain-old-HTML. The HTML vocabulary is extended, to contain commands on how the version have to be projected into the view.
The HTML templates are parsed via the browser into the DOM. The DOM then becomes the enter to the AngularJS compiler. AngularJS traverses the DOM template for rendering commands, which are referred to as directives. Collectively, the directives are answerable for putting in place the records-binding to your utility view.
It is important to comprehend that at no factor does AngularJS manipulate the template as strings. The input to AngularJS is browser DOM and no longer an HTML string. The data-bindings are DOM transformations, not string concatenations or inner HTML adjustments. Using the DOM as the enter, in place of strings, is the most important differentiation AngularJS has from its sibling frameworks. Using the DOM is what lets in you to increase the directive vocabulary and build your own directives, or even summary them into reusable additives!
One of the greatest benefits to this approach is that it creates a tight workflow among designers and builders. Designers can mark up their HTML as they generally might, and then developers take the baton and hook in capability, thru bindings with little or no effort.
Here is an example where I am using the ng-repeat directive to loop over the photos array and populate what is largely an img template.
function AlbumCtrl($scope)
scope.pix = [
"thumbnail":"img/image_01.Png", "description":"Image 01 description",
"thumbnail":"img/image_02.Png", "description":"Image 02 description",
"thumbnail":"img/image_03.Png", "description":"Image 03 description",
"thumbnail":"img/image_04.Png", "description":"Image 04 description",
"thumbnail":"img/image_05.Png", "description":"Image 05 description"
];
image.Description
It is also well worth mentioning, as a facet note, that AngularJS does no longer pressure you to examine a brand new syntax or extract your templates out of your utility.
Feature 3: MVC
AngularJS incorporates the simple principles behind the unique MVC software design pattern into how it builds client-aspect web applications.
The MVC or Model-View-Controller sample means a number of various things to one-of-a-kind people. AngularJS does no longer put in force MVC within the conventional sense, but instead something toward MVVM (Model-View-ViewModel).
The Model
The model is surely the facts within the utility. The model is simply plain antique JavaScript objects. There is no need to inherit from framework classes, wrap it in proxy objects, or use unique getter/setter techniques to get entry to it. The fact that we are coping with vanilla JavaScript is a really pleasant feature, which cuts down on the utility boilerplate.
The ViewModel
A viewmodel is an item that provides particular statistics and methods to maintain unique views.
The viewmodel is the $scope object that lives within the AngularJS application. $scope is just a simple JavaScript item with a small API designed to hit upon and broadcast changes to its kingdom.
The Controller
The controller is answerable for setting preliminary kingdom and augmenting $scope with techniques to control behavior. It is worth noting that the controller does not store nation and does not have interaction with remote offerings.
The View
The view is the HTML that exists after AngularJS has parsed and compiled the HTML to consist of rendered markup and bindings.
This department creates a stable foundation to architect your application. The $scope has a connection with the data, the controller defines conduct, and the view handles the layout and handing off interaction to the controller to respond accordingly.
Feature 4: Dependency Injection
AngularJS has a built-in dependency injection subsystem that enables the developer through making the application less difficult to develop, understand, and test.
Dependency Injection (DI) permits you to ask for your dependencies, rather than having to go look for them or make them yourself. Think of it as a manner of saying "Hey I need X', and the DI is accountable for creating and imparting it for you.
To benefit get right of entry to to middle AngularJS services, it is in reality a be counted of adding that carrier as a parameter; AngularJS will hit upon that you need that carrier and provide an example for you.
function EditCtrl($scope, $location, $routeParams)
// Something clever here...
You also are able to define your own custom services and make those to be had for injection as well.
Angular.
Module('MyServiceModule', []).
Factory('notify', ['$window', function (win)
return function (msg)
win.Alert(msg);
;
]);
function myController(scope, notifyService)
scope.CallNotify = characteristic (msg)
notifyService(msg);
;
myController.$inject = ['$scope', 'notify'];
Feature 5: Directives
Directives are my non-public preferred characteristic of AngularJS. Have you ever wanted that your browser could do new tricks for you? Well, now it can! This is one of my favourite parts of AngularJS. It is also probable the most challenging aspect of AngularJS.
Directives may be used to create custom HTML tags that serve as new, custom widgets. They also can be used to "decorate" elements with conduct and manage DOM attributes in thrilling ways.
Here is a easy example of a directive that listens for an occasion and updates its $scope, accordingly.
MyModule.Directive('myComponent', feature(mySharedService)
return
restrict: 'E',
controller: function($scope, $attrs, mySharedService)
$scope.$on('handleBroadcast', feature()
$scope.Message = 'Directive: ' + mySharedService.Message;
);
,
replace: true,
template: '
'
;
);
Then, you can use this practice directive, like so.
Creating your software as a composition of discrete additives makes it incredibly smooth to add, update or delete capability as needed.
We will speak here about how to installation AngularJS library for use in internet utility development. We may even briefly take a look at the directory shape and its contents.
Note : if anyone looking for angular js tutorial online then there are lots of way to learn basic to advance. after completed your angular js training online you can prepare for angular js interview online.
- Data binding, as in .
- DOM manipulate systems for repeating, displaying and hiding DOM fragments.
- Support for paperwork and shape validation.
- Attaching new behavior to DOM elements, which include DOM event handling.
- Grouping of HTML into reusable components.
Why AngularJS?
AngularJS is a MVC framework that defines numerous ideas to properly arrange our web software. Our utility is defined with modules which could depend from one to the others. It complements HTML with the aid of attaching directives to your pages with new attributes or tags and expressions in an effort to outline very powerful templates at once on your HTML. It also encapsulates the behavior of your software in controllers which are instanciated way to dependency injection. Thanks to using dependency injection, AngularJS enables you shape and take a look at your Javascript code very easily. Finally, software code can easily be factorized into services that may be injected to your controllers. Now let's have a closer examine all the ones features.
Feature 1: Two Way Data-Binding
Think of your model because the single-source-of-fact in your application. Your version is wherein you go to to read or replace some thing for your application.Data-binding is probably the good and maximum useful characteristic in AngularJS. It will prevent from writing a large amount of boilerplate code. A typical internet utility may incorporate as much as 80% of its code base, devoted to traversing, manipulating, and taking note of the DOM. Data-binding makes this code disappear, so we can consciousness on our software.
Think of your version because the single-source-of-reality to your software. Your model is in which you go to to examine or replace something in your software. The data-binding directives offer a projection of your model to the software view. This projection is seamless, and happens without any effort from you.
Traditionally, while the version adjustments, the developer is answerable for manually manipulating the DOM elements and attributes to mirror these modifications. This is a two-manner street. In one direction, the version modifications drive exchange in DOM elements. In the other, DOM element adjustments necessitate adjustments inside the model. This is further complex with the aid of consumer interaction, for the reason that developer is then responsible for interpreting the interactions, merging them into a version, and updating the view. This is a very guide and cumbersome process, which turns into hard to control, as an application grows in size and complexity.
There ought to be a better manner! AngularJS' two-way data-binding handles the synchronization among the DOM and the version, and vice versa.
Here is a simple example, which demonstrates the way to bind an input value to an
element.
Name:
Enter a name here
Hello, yourName!
This is extremely simple to set up, and nearly magical...
Feature 2: Template
It's important to realize that at no factor does AngularJS manage the template as strings. It's all the browser DOM.
In AngularJS, a template is just plain-old-HTML. The HTML vocabulary is extended, to contain commands on how the version have to be projected into the view.
The HTML templates are parsed via the browser into the DOM. The DOM then becomes the enter to the AngularJS compiler. AngularJS traverses the DOM template for rendering commands, which are referred to as directives. Collectively, the directives are answerable for putting in place the records-binding to your utility view.
It is important to comprehend that at no factor does AngularJS manipulate the template as strings. The input to AngularJS is browser DOM and no longer an HTML string. The data-bindings are DOM transformations, not string concatenations or inner HTML adjustments. Using the DOM as the enter, in place of strings, is the most important differentiation AngularJS has from its sibling frameworks. Using the DOM is what lets in you to increase the directive vocabulary and build your own directives, or even summary them into reusable additives!
One of the greatest benefits to this approach is that it creates a tight workflow among designers and builders. Designers can mark up their HTML as they generally might, and then developers take the baton and hook in capability, thru bindings with little or no effort.
Here is an example where I am using the ng-repeat directive to loop over the photos array and populate what is largely an img template.
function AlbumCtrl($scope)
scope.pix = [
"thumbnail":"img/image_01.Png", "description":"Image 01 description",
"thumbnail":"img/image_02.Png", "description":"Image 02 description",
"thumbnail":"img/image_03.Png", "description":"Image 03 description",
"thumbnail":"img/image_04.Png", "description":"Image 04 description",
"thumbnail":"img/image_05.Png", "description":"Image 05 description"
];
image.Description
It is also well worth mentioning, as a facet note, that AngularJS does no longer pressure you to examine a brand new syntax or extract your templates out of your utility.
Feature 3: MVC
AngularJS incorporates the simple principles behind the unique MVC software design pattern into how it builds client-aspect web applications.
The MVC or Model-View-Controller sample means a number of various things to one-of-a-kind people. AngularJS does no longer put in force MVC within the conventional sense, but instead something toward MVVM (Model-View-ViewModel).
The Model
The model is surely the facts within the utility. The model is simply plain antique JavaScript objects. There is no need to inherit from framework classes, wrap it in proxy objects, or use unique getter/setter techniques to get entry to it. The fact that we are coping with vanilla JavaScript is a really pleasant feature, which cuts down on the utility boilerplate.
The ViewModel
A viewmodel is an item that provides particular statistics and methods to maintain unique views.
The viewmodel is the $scope object that lives within the AngularJS application. $scope is just a simple JavaScript item with a small API designed to hit upon and broadcast changes to its kingdom.
The Controller
The controller is answerable for setting preliminary kingdom and augmenting $scope with techniques to control behavior. It is worth noting that the controller does not store nation and does not have interaction with remote offerings.
The View
The view is the HTML that exists after AngularJS has parsed and compiled the HTML to consist of rendered markup and bindings.
This department creates a stable foundation to architect your application. The $scope has a connection with the data, the controller defines conduct, and the view handles the layout and handing off interaction to the controller to respond accordingly.
Feature 4: Dependency Injection
AngularJS has a built-in dependency injection subsystem that enables the developer through making the application less difficult to develop, understand, and test.
Dependency Injection (DI) permits you to ask for your dependencies, rather than having to go look for them or make them yourself. Think of it as a manner of saying "Hey I need X', and the DI is accountable for creating and imparting it for you.
To benefit get right of entry to to middle AngularJS services, it is in reality a be counted of adding that carrier as a parameter; AngularJS will hit upon that you need that carrier and provide an example for you.
function EditCtrl($scope, $location, $routeParams)
// Something clever here...
You also are able to define your own custom services and make those to be had for injection as well.
Angular.
Module('MyServiceModule', []).
Factory('notify', ['$window', function (win)
return function (msg)
win.Alert(msg);
;
]);
function myController(scope, notifyService)
scope.CallNotify = characteristic (msg)
notifyService(msg);
;
myController.$inject = ['$scope', 'notify'];
Feature 5: Directives
Directives are my non-public preferred characteristic of AngularJS. Have you ever wanted that your browser could do new tricks for you? Well, now it can! This is one of my favourite parts of AngularJS. It is also probable the most challenging aspect of AngularJS.
Directives may be used to create custom HTML tags that serve as new, custom widgets. They also can be used to "decorate" elements with conduct and manage DOM attributes in thrilling ways.
Here is a easy example of a directive that listens for an occasion and updates its $scope, accordingly.
MyModule.Directive('myComponent', feature(mySharedService)
return
restrict: 'E',
controller: function($scope, $attrs, mySharedService)
$scope.$on('handleBroadcast', feature()
$scope.Message = 'Directive: ' + mySharedService.Message;
);
,
replace: true,
template: '
'
;
);
Then, you can use this practice directive, like so.
Creating your software as a composition of discrete additives makes it incredibly smooth to add, update or delete capability as needed.
We will speak here about how to installation AngularJS library for use in internet utility development. We may even briefly take a look at the directory shape and its contents.
Note : if anyone looking for angular js tutorial online then there are lots of way to learn basic to advance. after completed your angular js training online you can prepare for angular js interview online.
0 Comments