View and Directive

AngularJS allows us to extend HTML with new attributes and new elements. These attributes and new elements are called directives. They extend the capabilities of the Angular DOM compiler

Angular comes with around 100 built-in directives which allow you to accomplish most common tasks. We can also write our own, and these will be treated in the same way as the built-in directives.

Directives are special attributes starting with ng- prefix. Following are the most common directives:

1. ng-app: This directive starts an AngularJS Application.

We tell Angular which portion of our DOM to treat as the master template using the ng-app directive. A directive is a custom attribute or element that the Angular template compiler knows how to deal with. 

<html>  
 <head>    
 <script src="/angular.js"></script>  
 </head>  
 <body ng-app>    
 {{ 'Hello' + 'World' }}  
 </body> 
</html>

ngModel
With ng-model we can bind a variable to any type of input field. You can display the variable using double curly braces, eg {{ name }} .

<input type=”text” ng-model=”name”>
<p>{{ name }}</p>

As we type in the input field or change it in any way you will see the value in the paragraph update instantly on view. The ng-model variable, in this instance, will be available in the controller as $scope.name .

<div ng-controller="myCtrl">
 <input type="text" ng-model="name">
  <p>{{ name }}</p>
</div>

ngSrc
Using Angular markup like {{ url }} in an src attribute doesn’t work right. The browser will fetch from the URL with
the literal text {{ url }} until Angular replaces the expression inside {{ url }} . ng-src directive overrides the original src attribute for the image tag element and solves the problem.

<div ng-init="pic = 'pic_angular.jpg'">
   <h1>Angular</h1>
   <img ng-src="{{pic}}">
</div>

ng-include

ng-include allows you to delegate the control of one part of the page to a specific controller. You may want to do this because the complexity of that component is becoming such that you want to encapsulate all the logic in a dedicated controller.

An example is:

<div ng-include src=”‘/placeview'” ng-controller=’placeController as pc ‘>
</div>

Note that the /placeview will need to be served by the web server as a distinct and legitimate url.

Note that the src -attribute accepts an Angular expression. This could be a variable or a function call for example or, like in this example, a string constant. In this case you need to make sure to wrap the source URL in single quotes, so it will be evaluated as a string constant. This is a common source of confusion.

Within the /placeview html, you can refer to the placeController as if it were wrapped around the page, eg:

<div class=”row”>
<button type=”button” ng-click=”pc.doSomething()”></button>
</div>

We have told the body element to be the root template. Anything in it will be compiled.

ng-controller Attaches a controller class to the view.
ng-init: This directive initializes application data.
ng-model: This directive defines the model that is variable to be used in AngularJS.
ng-if Remove or recreates an element in the DOM depending on an expression
ng-repeat: This directive repeats HTML elements for each item in a collection.
ng-init Sets a default variable value.
ng-bind Alternative to {{ }} template.
ng-bind-template Binds multiple expressions to the view.
ng-non-bindable States that the data isn’t bindable.
ng-bind-html Binds inner HTML property of an HTML element.
ng-change Evaluates specified expression when the user changes the input.
ng-checked Sets the checkbox.
ng-class Sets the css class dynamically.
ng-cloak Prevents displaying the content until AngularJS has taken control.
ng-click Executes a method or expression when an element is clicked.
ng-disabled Controls the form element’s disabled property
ng-form Sets a form
ng-href Dynamically bind AngularJS variables to the href attribute.
ng-include Used to fetch, compile and include an external HTML fragment to your page.
ng-switch Conditionally switch control based on matching expression.
ng-model Binds an input, select, textarea etc elements with model property.
ng-readonly Used to set readonly attribute to an element.
ng-selected Used to set selected option in element.
ng-show/ng-hide Show/Hide elements based on an expression.
ng-src Dynamically bind AngularJS variables to the src attribute.
ng-submit Bind angular expressions to onsubmit events.
ng-value Bind angular expressions to the value of .
ng-required Bind angular expressions to onsubmit events.
ng-style Sets CSS style on an HTML element.
ng-pattern Adds the pattern validator to ngModel.
ng-maxlength Adds the maxlength validator to ngModel.
ng-minlength Adds the minlength validator to ngModel.
ng-classeven Works in conjunction with ngRepeat and take effect only on odd (even) rows.
ng-classodd Works in conjunction with ngRepeat and take effect only on odd (even) rows.
ng-cut Used to specify custom behavior on cut event.
ng-copy Used to specify custom behavior on copy event.
ng-paste Used to specify custom behavior on paste event.
ng-options Used to dynamically generate a list of elements for the element
ng-list Used to convert string into list based on specified delimiter.
ng-open Used to set the open attribute on the element, if the expression inside ngOpen is truthy.

The directive is for DOM manipulation or otherwise controlling the scope or a model from the view. It is never used outside the context of a view.

ngOptions
The ngOptions attribute is used to dynamically generate a list of <option> elements for the <select> element using the array or object obtained by evaluating the ngOptions comprehension expression.

The ng-options directive fills a <select> element with <options>.In many cases, it would be easier to use the ng-repeat directive, but you have more flexibility when using the ng-options directive.

With ng-options the markup can be reduced to just a select tag and the directive will create the same select:

ngOptions
The ngOptions attribute is used to dynamically generate a list of <option> elements for the <select> element using the array or object obtained by evaluating the ngOptions comprehension expression.

The ng-options directive fills a <select> element with <options>.In many cases, it would be easier to use the ng-repeat directive, but you have more flexibility when using the ng-options directive.

With ng-options the markup can be reduced to just a select tag and the directive will create the same select:

Data model for the example: 

$scope.students
 { label: "Smith", id:1 }, 
 { label: "Pintu", id: 2 }, 
 { label: "Joseph", id: 3 }, 
 { label: "John", id: 4}
];

<select ng-options="s.label for s in students" ng-model="selectedStudent"></select>

ngCopy
The ngCopy directive specifies behavior to be run on a copy event. Prevent a user from copying data

<p ng-copy="blockCopy($event)">This paragraph cannot be copied</p>

In the controller 

$scope.blockCopy = function(event) {
   event.preventDefault();
   console.log("Copying won't work");
}

ngList
The ng-list directive is used to convert a delimited string from an input type text to an array of strings or vice versa. The ng-list directive uses a default delimiter of “, ” (comma space).

Syntax
<element ng-list=”separator”></element>

By default ng-list has an attribute ng-trim which is set to true. ng-trim when false, will respect white space in your delimiter. By default, ng-list does not take white space into account unless you set ng-trim=”false”.

angular.module('test', [])
.controller('ngListExample', function($scope) {
$scope.list = ['Hello', 'world', '!'];
});

A customer delimiter is set to be ; . And the model o

<body ng-app="test" ng-controller="ngListExample">
<input ng-model="list" ng-list="; " ng-trim="false">
</body>

The input box will display the content: Hello; world; !