Introduction to AngularJS framework, Services, Routing, Factory, Directives.
AngularJS is the JavaScript framework for developing Single Page Applications (SPA). It is an open source framework maintained by Google. "Single page applications load the entire HTML on first load and then use AJAX to retrieve data from the server." AngularJS extends HTML with ng-directives attributes. <html ng-app=”webapp”> <input ng-model=”variable&rd...
For create an AngularJS application, you need to include AngularJS javascript file into your application. First download the latest AngularJS javascript file. There are two ways you can include the AngularJS javascript file in your application. Download AngularJS javascript file directly from AngularJS site Include AngularJS javascript file from Google CDN Download from t...
An AngularJS application is divided into two parts: Application Bindings AngularJS Application An AngularJS application defines the section of HTML that starts the AngularJS application. We define the application using the ng-app attribute. You can add this attribute with any HTML element like body, div, table. <body> <div ng-app> </div> <scri...
AngularJS expressions are used for display data from your Model to View. You can write expressions in double curly braces {{ expression }}. It is like one way binding from your Model to View and works just like ng-bind attribute. AngularJS expressions output the data where it is written. You can write expression with any numbers, strings, objects and arrays. AngularJS Expression...
AngularJS Directives are indicators to AngularJS compiler to attach some behaviour to HTML DOM elements. AngularJS comes with some built-in directives but you can create your own custom directive. Some main AngularJS directives are: ng-app ng-bind ng-class ng-init ng-model ng-switch ng-repeat ng-app Directive The ng-app directive is used for defining the root...
AngularJS supports Model-View-Controller (MVC) architecture pattern. A Controller is a javascript object which has properties and functions. AngularJS Controller is the only object that communicates with both Models and Views. Controller Directive In AngularJS application, a controller directive is defined with ng-controller directive. <div ng-controller="empController"&...
AngularJS Filters is used for change the format of the expression result. Filters are applied directly on expressions. AngularJS Filter Syntax {{ expression | filter1:arg1,arg2 | filter2:arg1,arg2 }} Filters use the pipe (|) character for its syntax. Main AngularJS Filters currency number lowercase uppercase json date orderBy limitTo currency Fi...
AngularJS provides great way to create Forms which submit their data without postback. AngularJS Forms use two directives: ng-model: The ng-model directives is used for binding input controls to Javascript Objects. ng-submit: Bind AngularJS Controller submit function to submit event of HTML Form. It also prevents the form to submit to server directly. AngularJS Form Example ...
Nested Forms provides a great way to apply grouping of form controls. Because HTML does not allow you to nest forms so AngularJS provides support for nested forms using ng-form directive. Nested Forms is useful for creating grouping of form controls so that their validition can be implemented separately. Nested Forms Example <html> <head> <title>AngularJS N...
AngularJS provides great support for implemeting validations in Forms. Validation is performed by States properties and Validators directives. There are four States in AngularJS Forms. $invalid : This state describes that form is in invalid state. $valid : This state describes that form is in valid state. $dirty :This state describes that form is in dirty state means any one input...
