Angular JS Key Points / Directives

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

ng-app   : defines /initializes Angular JS Applicaiton. Defines root element of an Angular JS application.
           auto-bootstrap the application when a web page is loaded.
ng-model : binds the value of HTML controls(input, select, textarea)
                   Provide type validation for application data ( number, email required)
                   Provide status for application data (invalid,dirty,touched,error)
                   Provide CSS classes for HTML elements
                   Bind HTML elements to HTML forms.
ng-bind  : binds application data to the HTML view
ng-init  : initializes Angular JS application / application data
modules  : define AngularJS applications, container for the different parts of an application.
           Container for the application controllers.
Controllers: control AngularJS applications. Controllers always belong to a module.
ng-controller: defines the application controller.
                      A controller is a JavaScript Object, created by a standard JavaScript object constructor.
ng-repeat : clones HTML elements once for each item in a collection.

New directives are created by using the  .directive  function
To invoke the new directive, make an HTML element with the same tag as the new directive.

When naming a directive, you must use a camel case name, w3TestDirective, but when invoking it, you must use - separated name, w3-test-directive:

You can invoke a directive by using:

•             Element Name, 
•             Attribute , 
•             Class  ,
•             Comment. 

You can restrict your directives to only be invoked by some of the methods.
By adding a restrict property with the value "A", the directive can only be invoked by attributes:

The legal restrict values are:
E for Element name
A for Attribute
C for Class
M for Comment

The ng-model directive adds/removes the following classes, according to the status of the form field:

• ng-empty
• ng-not-empty
• ng-touched
• ng-untouched
• ng-valid
• ng-invalid
• ng-dirty
• ng-pending
• ng-pristine

The scope is the binding part between the HTML (view) and the JavaScript (controller).
The scope is an object with the available properties and methods.
The scope is available for both the view and the controller.
When you make a controller in AngularJS, you pass the $scope object as an argument:

Root Scope
All applications have a $rootScope which is the scope created on the HTML element that contains the ng-app directive.
The rootScope is available in the entire application.
If a variable has the same name in both the current scope and in the rootScope, the application use the one in the current scope.

AngularJS provides filters to transform data:

• currency Format a number to a currency format.
• date Format a date to a specified format.
• filter Select a subset of items from an array.
• json Format an object to a JSON string.
• limitTo Limits an array/string, into a specified number of elements/characters.
• lowercase Format a string to lower case.
• number Format a number to a string.
• orderBy Orders an array by an expression.
• uppercase Format a string to upper case.

Filters can be added to expressions by using the pipe character |, followed by a filter.

The uppercase filter format strings to upper case:

Filters are added to directives, like ng-repeat, by using the pipe character |, followed by a filter:

The filter filter selects a subset of an array.

The filter filter can only be used on arrays, and it returns an array containing only the matching items.

Filter an Array Based on User Input

By setting the ng-model directive on an input field, we can use the value of the input field as an expression in a filter.

Type a letter in the input field, and the list will shrink/grow depending on the match:

By adding the ng-click directive on the table headers, we can run a function that changes the sorting order of the array:

In AngularJS you can make your own service, or use one of the many built-in services.

---

What is a Service?

In AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application.

AngularJS has about 30 built-in services. One of them is the $location service.

The $location service has methods which return information about the location of the current web page:

Note that the $location service is passed in to the controller as an argument. In order to use the service in the controller, it must be defined as a dependency.

---

Why use Services?

For many services, like the $location service, it seems like you could use objects that are already in the DOM, like the window.locationobject, and you could, but it would have some limitations, at least for your AngularJS application.

AngularJS constantly supervises your application, and for it to handle changes and events properly, AngularJS prefers that you use the $locationservice instead of the window.location object.

---

The $http Service

The $http service is one of the most common used services in AngularJS applications. The service makes a request to the server, and lets your application handle the response.

The $timeout service is AngularJS' version of the window.setTimeout function.

The $interval service is AngularJS' version of the window.setInterval function.

To create your own service, connect your service to the module:

Create a service named  'hexafy'

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

Use a Custom Service Inside a Filter

Once you have created a service, and connected it to your application, you can use the service in any controller, directive, filter, or even inside other services.

To use the service inside a filter, add it as a dependency when defining the filter:

app.filter('myFormat',['hexafy', function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);

Methods

The example above uses the .get method of the $http service.

The .get method is a shortcut method of the $http service. There are several shortcut methods:

• .delete()
• .get()
• .head()
• .jsonp()
• .patch()
• .post()
• .put()

The methods above are all shortcuts of calling the $http service:

Properties

The response from the server is an object with these properties:

• .config the object used to generate the request.
• .data a string, or an object, carrying the response from the server.
• .headers a function to use to get header information.
• .status a number defining the HTTP status.
• .statusText a string defining the HTTP status.

JSON

The data you get from the response is expected to be in JSON format.

JSON is a great way of transporting data, and it is easy to use within AngularJS, or any other JavaScript.

Example: On the server we have a file that returns a JSON object containing 15 customers, all wrapped in array called records.

Server Code Examples

The following section is a listing of the server code used to fetch SQL data.

1. Using PHP and MySQL. Returning JSON.
2. Using PHP and MS Access. Returning JSON.
3. Using ASP.NET, VB, and MS Access. Returning JSON.
4. Using ASP.NET, Razor, and SQL Lite. Returning JSON.

---

Cross-Site HTTP Requests

Requests for data from a different server (than the requesting page), are called cross-site HTTP requests.

Cross-site requests are common on the web. Many pages load CSS, images, and scripts from different servers.

In modern browsers, cross-site HTTP requests from scripts are restricted to same site for security reasons.

The following line, in our PHP examples, has been added to allow cross-site access.

header("Access-Control-Allow-Origin: *");

AngularJS has directives for binding application data to the attributes of HTML DOM elements.

The ng-disabled Directive

The ng-disabled directive binds AngularJS application data to the disabled attribute of HTML elements.

AngularJS Events

You can add AngularJS event listeners to your HTML elements by using one or more of these directives:

• ng-blur
• ng-change
• ng-click
• ng-copy
• ng-cut
• ng-dblclick
• ng-focus
• ng-keydown
• ng-keypress
• ng-keyup
• ng-mousedown
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-mouseover
• ng-mouseup
• ng-paste

The event directives allows us to run AngularJS functions at certain user events.

An AngularJS event will not overwrite an HTML event, both events will be executed.

---

Mouse Events

Mouse events occur when the cursor moves over an element, in this order:

1. ng-mouseenter
2. ng-mouseover
3. ng-mousemove
4. ng-mouseleave

Or when a mouse button is clicked on an element, in this order:

1. ng-mousedown
2. ng-mouseup
3. ng-click

You can add mouse events on any HTML element.

$event Object

You can pass the $event object as an argument when calling the function.

The $event object contains the browser's event object:

Form Validation

AngularJS offers client-side form validation.

AngularJS monitors the state of the form and input fields (input, textarea, select), and lets you notify the user about the current state.

AngularJS also holds information about whether they have been touched, or modified, or not.

You can use standard HTML5 attributes to validate input, or you can make your own validation functions.

Client-side validation cannot alone secure user input. Server side validation is also necessary.

Use the HTML5 attribute required to specify that the input field must be filled out:

Form State and Input State

AngularJS is constantly updating the state of both the form and the input fields.

Input fields have the following states:

• $untouched The field has not been touched yet
• $touched The field has been touched
• $pristine The field has not been modified yet
• $dirty The field has been modified
• $invalid The field content is not valid
• $valid The field content is valid

They are all properties of the input field, and are either true or false.

Forms have the following states:

• $pristine No fields have been modified yet
• $dirty One or more have been modified
• $invalid The form content is not valid
• $valid The form content is valid
• $submitted The form is submitted

They are all properties of the form, and are either true or false.

You can use these states to show meaningful messages to the user. Example, if a field is required, and the user leaves it blank, you should give the user a warning:

CSS Classes

AngularJS adds CSS classes to forms and input fields depending on their states.

The following classes are added to, or removed from, input fields:

• ng-untouched The field has not been touched yet
• ng-touched The field has been touched
• ng-pristine The field has not been  modified yet
• ng-dirty The field has been modified
• ng-valid The field content is valid
• ng-invalid The field content is not valid
• ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated
• ng-invalid-key Example: ng-invalid-required

The following classes are added to, or removed from, forms:

• ng-pristine No fields has not been modified yet
• ng-dirty One or more fields has been modified
• ng-valid The form content is valid
• ng-invalid The form content is not valid
• ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated
• ng-invalid-key Example: ng-invalid-required

The classes are removed if the value they represent is false.

Add styles for these classes to give your application a better and more intuitive user interface.

AngularJS Global API

The AngularJS Global API is a set of global JavaScript functions for performing common tasks like:

• Comparing objects
• Iterating objects
• Converting data

The Global API functions are accessed using the angular object.

Below is a list of some common API functions:

API	Description
angular.lowercase()	Converts a string to lowercase
angular.uppercase()	Converts a string to uppercase
angular.isString()	Returns true if the reference is a string
angular.isNumber()	Returns true if the reference is a number