However, the power and purity of MVC implementation came with a big price – complexity. Angular is not for the faint hearted, with some scary and often perverse syntax to stumble through. You will also find that the power keeps drawing you back into it’s grasp, but you will repeatedly find that Angular tutorial sites teach from the inside out, rather than from where you are to where you want to go. The Google reference site is particularly terse and obscure to newcomers.
AngularJS directives allow the developer to specify custom and reusable HTML tags that moderate the behavior of certain elements.
Declares an element as a root element of the application allowing behavior to be modified through custom HTML tags.
Automatically changes the text of an HTML element to the value of a given expression.
Similar to ng-bind, but allows two-way data binding between the view and the scope.
Allows class attributes to be dynamically loaded.
Instantiate an element once per item from a collection.
ng-show & ng-hide
Conditionally show or hide an element, depending on the value of a boolean expression. Show and hide is achieved by setting the CSS display style.
Conditionally instantiate one template from a set of choices, depending on the value of a selection expression.
The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers.
Basic if statement directive which allow to show the following element if the conditions are true. When the condition is false, the element is removed from the DOM. When true, a clone of the compiled element is re-inserted.
How Angular works
The key powers of Angular.js are :
Live, bi-directional binding of web display data to the data model
Separation of data, logic and presentation code
An HTML-based, extensible syntax
1. Bi-directional data binding
If you type into this box you will see the 2-way data binding in action :
The input field is connected to the data model, so the value you typed was immediately stored in that model. The same value was immediately reflected back on the right in a display field that was also linked to the model.
In effect, Angular web pages are better described as state machines rather than event driven ones. The mindset to think state-wise rather than event-wise or procedurally is one of the hard parts about acclimatising to Angular.
2. Separation of data, logic and presentation code
The diagram below shows the basic structure of a typical Angular-based web site :
Database data can be preloaded into the model in full or in part, with asynchronous retrieval and storage requests handled via Angular code, as you keep the database and data model in sync.
By largely distilling out the HTML code, with its hooks to the data model, changes to the appearance are less likely to require data handling changes.
3. An HTML-based, extensible syntax
You are not limited to the Angular supplied HTM extensions such as ng-model above. For those wary of standards, Angular recognises that this extension does not rigidly adhere to naming standards, so they support the data- prefix to bring it into line, like this : data-ng-model.
By encapsulating the effect of these new HTML elements and attributes, reusable code can be developed more easily. Write once, deploy many times is always an ideal we can strive for.
Angular operates by traversing the web page Document Object Model (DOM). It interprets the element tags and attributes in conjunction with the data model and controller logic to dynamically alter the HTML code and its rendering. It supplies all the event handling in support of the live two-way data binding.
Part of the complexity of Angular is that much of its internal mechanics are exposed to the developer. This is needed, alas, in order to perform some data control logic. But they really should have provided more intelligible wrappers to hide the internals better. It is likely that you will therefore become involved in the internal linking and compiling that Angular carries out. I will, however, try to keep the explanations simple, not least because I found the concepts hard to grasp myself.
Reference – http://www.angularbasics.co.uk/#
Happy Learning with Angular.js in techartifact. Stay tuned for more on Angular.js