PURPOSE OF LEARN ANGULAR JS
Why AngularJS?
AngularJS is a MVC framework that defines numerous concepts to properly organize your web application. Your application is defined with modules that can depend from one to the others. It enhances HTML by attaching directives to your pages with new attributes or tags and expressions in order to define very powerful templates directly in your HTML. It also encapsulates the behavior of your application in controllers which are instanciated thanks to dependency injection. Thanks to the use of dependency injection, AngularJS helps you structure and test your Javascript code very easily. Finally, utility code can easily be factorized into services that can be injected in your controllers. Now let’s have a closer look at all those features.
Expressions
AngularJS let you build properly structured web applications very easily. For that, AngularJS contains several concepts to separate the different parts of your application.
In order to create the views of your application, AngularJS let you execute expressions directly within your HTML pages. In those expressions, you have access to Javascript code which give you the ability to realize some computation in order to display what you want. In the screenshots below, you can see a very basic expression and it result.
Expressions in your HTML page are nice, but you won’t build a complete web application like that, it would be horrible to write and to maintain, we need the help of something more powerful. Expressions are used for small operations, In order to structure you web application, AngularJS will give you a much impressive tool, directives.
Directives
Directives are one of the most powerful feature of AngularJS. They allow you to extend HTML to answer the needs of web applications. Directives let you specify how your page should be structured for the data available in a given scope.
We will have a look at the scope and where those data are coming from later in this post but first let’s have a look at how directives are working.
AngularJS comes with several directives which let you build your basic application. The first directive you will use most of the time is “ngRepeat”. This directive let AngularJS create a new set of elements in the dom for each element in a collection. In the following example, we ask AngularJS to create a new div containing a small title and a paragraph for each element of the array users. Each of those element will be affected to a variable named user wich let us access the individual elements of the array.
The result is exactly what we were expecting, a new div has been created for each of my entity with their name as a title and their description in a paragraph.
For those who are wondering why I have prefixed “ng-repeat” by “data-”, have a look here.
AngularJS also let you determine if an element should be displayed or not with the directive “ngShow”. This directive uses an expression which returns a boolean to determine if the element should be displayed or not.
As you can see in the result, only females are displayed. If you inspect the dom, you would see that the other elements have been computed but their are just hidden
(display = none).
Dependency Injection
The operation “config” is using dependency injection in order to retrieve some elements of the application that should be configured when the module will be loaded. Here, we will use the service provider “$routeProvider” in order to define the routes of our application. You have two ways of using dependency injection in AngularJS. You can pass a function to the operation with parameters named after the elements that you want to retrieve.
This solution is not really recommended since minification of the code would change the name of the variable which would prevent your application from working. If you want to use a robust solution, you should use an array with the name of the elements that you want to see injected and a function naming those elements.
The name of the parameter of the function does not have to be the same as the name of the element injected.
RESOURCES:
Angular js training in chennai
AngularJS — Superheroic JavaScript MVW Framework
