The ng-repeat directive is used to draw tables in AngularJS. Displaying tables with AngularJS is very easy and simple. Let’s take an example. This example use ng-repeat directive to draw a table. See this example: Displaying with CSS style You can also style the tables by using CSS. See this example: AngularJS Table example with CSS

In AngularJS, filters are used to format data. Following is a list of filters used for transforming data. Filter Description Currency It formats a number to a currency format. Date It formats a date to a specified format. Filter It select a subset of items from an array. Json It formats an object to a Json string. Limit It is used to limit an array/string, into a specified number of elements/characters. Lowercase It formats a string to lower case. Number It formats a number to a string. Orderby It orders an array by an expression. Uppercase It formats a string to upper case. How to add filters to expressions You can add filters to expressions by using the pipe character |, followed by a filter. In this example, the uppercase filter format strings to upper case: See this example: Let’s apply the lowercase filter into the same example: See this example: How to add filters to directives Filters can be added to directives, like ng-repeat, by using the pipe character |, followed by a filter. Let’s take an example: In this example, orderBy filter is used to sort an array. See this example: The filter Filter The filter Filter can only be used on arrays because it selects a subset of an array. It returns an array containing only the matching items. Let’s take an example: This example will return the names that contain the letter “o”. See this example: Filter an array based on user input You can use the value of the input field as an expression in a filter by setting the ng-model directive on an input field. See this example: Sort an array based on user input You can sort an array according to the table columns. See this example: AngularJS Custom Filters You can create your own filters by register a new filter factory function with your module. See this example: 

AngularJS comes with a built-in dependency injection mechanism. It facilitates you to divide your application into multiple different types of components which can be injected into each other as dependencies. Dependency Injection is a software design pattern that specifies how components get holds of their dependencies. In this pattern, components are given their dependencies instead of coding them within the component. Modularizing your application makes it easier to reuse, configure and test the components in your application. Following are the core types of objects and components: These objects and components can be injected into each other using AngularJS Dependency Injection. Value In AngularJS, value is a simple object. It can be a number, string or JavaScript object. It is used to pass values in factories, services or controllers during run and config phase. Here, values are defined using the value() function on the module. The first parameter specifies the name of the value, and the second parameter is the value itself. Factories, services and controllers can now reference these values by their name. Injecting a value To inject a value into AngularJS controller function, add a parameter with the same when the value is defined. Factory Factory is a function that is used to return value. When a service or controller needs a value injected from the factory, it creates the value on demand. It normally uses a factory function to calculate and return the value. Let’s take an example that defines a factory on a module, and a controller which gets the factory created value injected: Injecting values into factory To inject a value into AngularJS controller function, add a parameter with the same when the value is defined. Note: It is not the factory function that is injected, but the value produced by the factory function. Service In AngularJS, service is a JavaScript object which contains a set of functions to perform certain tasks. Services are created by using service() function on a module and then injected into controllers. Provider In AngularJS, provider is used internally to create services, factory etc. during config phase (phase during which AngularJS bootstraps itself). It is the most flexible form of factory you can create. Provider is a special factory method with a get() function which is used to return the value/service/factory. Constants You cannot inject values into the module.config() function. Instead constants are used to pass values at config phase. Let’s take an example to deploy all above mentioned directives.

The Scope is an object that is specified as a binding part between the HTML (view) and the JavaScript (controller). It plays a role of joining controller with the views. It is available for both the view and the controller. How to use Scope To make a controller in AngularJS, you have to pass the $scope object as an argument. See this example:

In AngularJS, a module defines an application. It is a container for the different parts of your application like controller, services, filters, directives etc. A module is used as a Main() method. Controller always belongs to a module. How to create a module The angular object’s module() method is used to create a module. It is also called AngularJS function angular.module Here, “myApp” specifies an HTML element in which the application will run. Now we can add controllers, directives, filters, and more, to AngularJS application. How to add controller to a module If you want to add a controller to your application refer to the controller with the ng-controller directive. See this example: How to add directive to a module AnglarJS directives are used to add functionality to your application. You can also add your own directives for your applications. Following is a list of AngularJS directives: Directive Description ng-app It defines the root element of an application. ng-bind It binds the content of an html element to application data. ng-bind-html Itbinds the innerhtml of an html element to application data, and also removes dangerous code from the html string. ng-bind-template It specifies that the text content should be replaced with a template. ng-blur It specifies a behavior on blur events. ng-change It specifies an expression to evaluate when content is being changed by the user. ng-checked It specifies if an element is checked or not. ng-class It specifies css classes on html elements. ng-class-even It is same as ng-class, but will only take effect on even rows. ng-class-odd It is same as ng-class, but will only take effect on odd rows. ng-click It specifies an expression to evaluate when an element is being clicked. ng-cloak It prevents flickering when your application is being loaded. ng-controller It defines the controller object for an application. ng-copy It specifies a behavior on copy events. ng-csp It changes the content security policy. ng-cut It specifies a behavior on cut events. ng-dblclick It specifies a behavior on double-click events. ng-disabled It specifies if an element is disabled or not. ng-focus It specifies a behavior on focus events. ng-form It specifies an html form to inherit controls from. ng-hide It hides or shows html elements. ng-href It specifies a URL for the <a> element. ng-if It removes the html element if a condition is false. ng-include It includes html in an application. ng-init It defines initial values for an application. ng-jq It specifies that the application must use a library, like jQuery. ng-keydown It specifies a behavior on keydown events. ng-keypress It specifies a behavior on keypress events. ng-keyup It specifies a behavior on keyup events. ng-list It converts text into a list (array). ng-model It binds the value of html controls to application data. ng-model-options It specifies how updates in the model are done. ng-mousedown It specifies a behavior on mousedown events. ng-mouseenter It specifies a behavior on mouseenter events. ng-mouseleave It specifies a behavior on mouseleave events. ng-mousemove It specifies a behavior on mousemove events. ng-mouseover It specifies a behavior on mouseover events. ng-mouseup It specifies a behavior on mouseup events. ng-non-bindable It specifies that no data binding can happen in this element, or it’s children. ng-open It specifies the open attribute of an element. ng-options It specifies <options> in a <select> list. ng-paste It specifies a behavior on paste events. ng-pluralize It specifies a message to display according to en-us localization rules. ng-readonly It specifies the readonly attribute of an element. ng-repeat It defines a template for each data in a collection. ng-required It specifies the required attribute of an element. ng-selected It specifies the selected attribute of an element. ng-show It shows or hides html elements. ng-src It specifies the src attribute for the <img> element. ng-srcset It specifies the srcset attribute for the <img> element. ng-style It specifies the style attribute for an element. ng-submit It specifies expressions to run on onsubmit events. ng-switch It specifies a condition that will be used to show/hide child elements. ng-transclude It specifies a point to insert transcluded elements. ng-value It specifies the value of an input element. How to add directives See this example: Modules and controllers in file In AngularJS applications, you can put the module and the controllers in JavaScript files. In this example, “myApp.js” contains an application module definition, while “myCtrl.js” contains the controller: See this example: Here “myApp.js” contains: Here “myCtrl.js” contains: This example can also be written as:

AngularJS controllers are used to control the flow of data of AngularJS application. A controller is defined using ng-controller directive. A controller is a JavaScript object containing attributes/properties and functions. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control. AngularJS Controller Example Note: AngularJS controller example with methods (variables as functions) AngularJS Controller in external files In larger applications, generally the controllers are stored in external files. Create an external file named “personController.js” to store controller. Here, “personController.js” is: See this example:

AngularJS facilitates you to extend HTML with new attributes. These attributes are called directives. There is a set of built-in directive in AngularJS which offers functionality to your applications. You can also define your own directives. Directives are special attributes starting with ng- prefix. Following are the most common directives: ng-app directive ng-app directive defines the root element. It starts an AngularJS Application and automatically initializes or bootstraps the application when web page containing AngularJS Application is loaded. It is also used to load various AngularJS modules in AngularJS Application. See this example: In following example, we’ve defined a default AngularJS application using ng-app attribute of a div element. ng-init directive ng-init directive initializes an AngularJS Application data. It defines the initial values for an AngularJS application. In following example, we’ll initialize an array of countries. We’re using JSON syntax to define array of countries. ng-model directive: ng-model directive defines the model/variable to be used in AngularJS Application. In following example, we’ve defined a model named “name”. ng-repeat directive ng-repeat directive repeats html elements for each item in a collection. In following example, we’ve iterated over array of countries. AngularJS directives Example Let’s take an example to use all the above discussed directives: AngularJS Directives List AnglarJS directives are used to add functionality to your application. You can also add your own directives for your applications. Following is a list of AngularJS directives: Directive Description ng-app It defines the root element of an application. ng-bind It binds the content of an html element to application data. ng-bind-html It binds the inner HTML of an HTML element to application data, and also removes dangerous code from the html string. ng-bind-template It specifies that the text content should be replaced with a template. ng-blur It specifies a behavior on blur events. ng-change It specifies an expression to evaluate when content is being changed by the user. ng-checked It specifies if an element is checked or not. ng-class It specifies css classes on html elements. ng-class-even It is same as ng-class, but will only take effect on even rows. ng-class-odd It is same as ng-class, but will only take effect on odd rows. ng-click It specifies an expression to evaluate when an element is being clicked. ng-cloak It prevents flickering when your application is being loaded. ng-controller It defines the controller object for an application. ng-copy It specifies a behavior on copy events. ng-csp It changes the content security policy. ng-cut It specifies a behavior on cut events. ng-dblclick It specifies a behavior on double-click events. ng-focus It specifies a behavior on focus events. ng-hide It hides or shows html elements. ng-href It specifies a URL for the <a> element. ng-if It removes the html element if a condition is false. ng-include It includes html in an application. ng-init It defines initial values for an application. ng-jq It specifies that the application must use a library, like jQuery. ng-keydown It specifies a behavior on keydown events. ng-keypress It specifies a behavior on keypress events. ng-keyup It specifies a behavior on keyup events. ng-list It converts text into a list (array). ng-open It specifies the open attribute of an element. ng-options It specifies <options> in a <select> list. ng-paste It specifies a behavior on paste events. ng-pluralize It specifies a message to display according to en-us localization rules. ng-readonly It specifies the readonly attribute of an element. ng-required It specifies the required attribute of an element. ng-selected It specifies the selected attribute of an element. ng-show It shows or hides html elements. ng-src It specifies the src attribute for the <img> element. ng-srcset It specifies the srcset attribute for the <img> element. ng-style It specifies the style attribute for an element. ng-submit It specifies expressions to run on onsubmit events. ng-switch It specifies a condition that will be used to show/hide child elements. ng-transclude It specifies a point to insert transcluded elements. ng-value It specifies the value of an input element. ng-disabled It specifies if an element is disabled or not. ng-form It specifies an html form to inherit controls from. ng-model It binds the value of html controls to application data. ng-model-options It specifies how updates in the model are done. ng-mousedown It specifies a behavior on mousedown events. ng-mouseenter It specifies a behavior on mouseenter events. ng-mouseleave It specifies a behavior on mouseleave events. ng-mousemove It specifies a behavior on mousemove events. ng-mouseover It specifies a behavior on mouseover events. ng-mouseup It specifies a behavior on mouseup events. ng-non-bindable It specifies that no data binding can happen in this element, or it’s children. ng-repeat It defines a template for each data in a collection. How to add directives See this example:

In AngularJS, expressions are used to bind application data to HTML. AngularJS resolves the expression, and return the result exactly where the expression is written. Expressions are written inside double braces {{expression}}.They can also be written inside a directive: AnularJS expressions are very similar to JavaScript expressions. They can contain literals, operators, and variables. For example: AngularJS Expressions Example Note: If you remove the directive “ng-app”, HTML will display the expression without solving it. See this example: You can also write expressions wherever you want, AngularJS will resolve the expression and return the result. Let’s take an example to change the color of input box by changing its value. See this example: AngularJS Numbers AngularJS numbers are similar to JavaScript numbers. We can use the same example by using ng-bind: See this example: AngularJS Strings Same example with ng-bind: AngularJS Objects Same example with ng-bind: AngularJS Arrays Same example with ng-bind: Difference between AngularJS Expressions and JavaScript expressions: Similarity between AngularJS Expressions and JavaScript expressions:

Data binding is a very useful and powerful feature used in software development technologies. It acts as a bridge between the view and business logic of the application. AngularJS follows Two-Way data binding model. One-Way Data Binding The one-way data binding is an approach where a value is taken from the data model and inserted into an HTML element. There is no way to update model from view. It is used in classical template systems. These systems bind data in only one direction. Two-Way Data Binding Data-binding in Angular apps is the automatic synchronization of data between the model and view components. Data binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. If the model is changed, the view reflects the change and vice versa. In the above example, the {{ firstName }} expression is an AngularJS data binding expression. Data binding in AngularJS binds AngularJS expressions with AngularJS data. {{ firstName }} is bound with ng-model=”firstName”. Let’s take another example where two text fields are bound together with two ng-model directives:

AngularJS applications are a mix of HTML and JavaScript. The first thing you need is an HTML page. Second, you need to include the AngularJS JavaScript file in the HTML page so we can use AngularJS: Note: You should always use the latest version of AngularJS, so it is not necessary to use the same version as the above example. AngularJS First Example Following is a simple “Hello Word” example made with AngularJS. It specifies the Model, View, Controller part of an AngularJS app. View Part Controller Part