Before continuing this, please refer AngularJS - Part 1
AngularJS Components
The AngularJS framework can be divided into following three major parts −- ng-app − This directive defines and links an AngularJS application to HTML.
- ng-model − This directive binds the values of AngularJS application data to HTML input controls.
- ng-bind − This directive binds the AngularJS Application data to HTML tags.
AngularJS page life cycle
| Component of Angular | Description |
| Module | Modules serve as containers to assist in organizing code within your AngularJs application. Modules can contain sub-modules. |
| Services | Services are a point where you can put common functionality to an AngularJs application. For example if you would like to share data with more than one controller then the best way is to promote that data to a service and then make it available via the service. Services extend controllers and make them more globally accessible. |
| Routes | Routes allow us to determine ways to navigate to specific states within our application. It also allows us to define configuration options for each specific route, such as which template and controller to use. |
| View | The view in AngularJs is what exists after AngularJs has compiled and rendered the DOM. It's a representation of whatever outcome from |
| @scope | $scope is essentially the “glue” between the view and controller within an AngularJs application. And somewhere supports two-way binding within the application. |
| Controller | The controller is responsible for defining methods and properties that the view can bind to and interact with. Controllers should be lightweight and only focus on the view they're controlling. |
| directive | A directive is an extension of a view in AngularJs in that it allows us to create custom, reusable elements. You can also consider directives as decorators for your HTML. Directives are used to extend views and to make these extensions available for use in more than one place. |
| Config | The config block of an AngularJs application allows for the configuration to be applied before the application actually runs. This is useful for setting up routes, dynamically configuring services and so on. |
AngularJS directives
At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.
AngularJS directives are used to extend HTML. These are special attributes starting with ng- prefix. We're going to discuss following directives −
- ng-app − This directive starts an AngularJS Application.
- ng-init − This directive initializes application data.
- ng-model − This directive defines the model that is variable to be used in AngularJS.
- ng-repeat − This directive repeats html elements for each item in a collection.
ng-app directive
ng-app directive starts an AngularJS Application. It defines the root element. It 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. In following example, we've defined a default AngularJS application using ng-app attribute of a div element.
<div ng-app = "">
...
</div>
ng-init directive
ng-init directive initializes an AngularJS Application data. It is used to put values to the variables to be used in the application. In following example, we'll initialize an array of countries. We're using JSON syntax to define array of countries.
<div ng-app = ""
ng-init = "countries = [{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
...
</div>
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".
<div ng-app = "">
...
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>
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.
<div ng-app = "">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
AngularJS - Custom Directives
Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using "directive" function. A custom directive simply replaces the element for which it is activated. AngularJS application during bootstrap finds the matching elements and do one time activity using its compile() method of the custom directive then process the element using link() method of the custom directive based on the scope of the directive. AngularJS provides support to create custom directives for following type of elements.
- Element directives − Directive activates when a matching element is encountered.
- Attribute − Directive activates when a matching attribute is encountered.
- CSS − Directive activates when a matching css style is encountered.
- Comment − Directive activates when a matching comment is encountered
AngularJS – Expressions
Expressions are used to bind application data to html. Expressions are written inside double braces like {{ expression}}. Expressions behaves in same way as ng-bind directives. AngularJS application expressions are pure javascript expressions and outputs the data where they are used.
Using numbers
<p>Expense on Books : {{cost * quantity}} Rs</p>
Using strings
<p>Hello {{student.firstname + " " + student.lastname}}!</p>
Using object
<p>Roll No: {{student.rollno}}</p>
Using array
<p>Marks(Math): {{marks[3]}}</p>
No comments:
Post a Comment