What is AngularJs? And its Features
AngularJs is a google product and one of the most used javascript-based open-source front-end web frameworks. It was released in 2009 and it is open source. AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. AngularJs helps eliminate much of the code using its data binding and dependency. All the process is done within the browser which makes it faster and works better with server technology.
AngularJs Has Several features:
- Two Way Data Binding
- Templates
- MVC(Model View Controller)
- Dependency Injection
- Routing
- Directives
Two Way Data Binding
Two-way data binding means when a data-related change is made to the model, the respected view is updated and vice versa. When app data changes, so do the UI and vice versa. It is a two-way process.
It is an extraordinary feature in the javascript framework. AngularJs needs to use ng-model directive for two-way data binding.
Angular directives
It gives the option to extend HTML attributes by the use of Angular directives. Extending HTML with AngularJS is very simple, one can use a standard AngularJS directive or develop a custom directive and mount it on any div.
There is some inbuilt directive in angularjs like ng-app, ng-model, ng-init. The ng-app directive initialize the angular application and the ng-model binds with the value of HTML elements like input, select, text area, and ng-init initializes application data.
Here is the example of the ng-app
You entered: {{name}}
Now Create your own directive like this
<my-directive></my-directive>
Here is the code
<script>
var app = angular.module("myApp", []);
app.directive("myDirective",
function() {
return {
template : "<h1>My First Directive</h1>"
};
});
</script>
</strong>
Angular Templates
Templates are written in HTML using HTML tags or directives created by the user which contains AngularJS-specific elements and attributes. This is the front-end view of any application in angularjs which user sees in the browser, angularjs combines templates with information from the model and controller which is displayed in the view.
The data can be displayed in view like this, whatever the name of the data which is fetched from the model and controller will be placed between the double curly brackets. The double curly brace notation {{ }} to bind expressions to elements is built-in AngularJS markup.
{{data}}
MVC(Model View Controller)
Model: It is the lowest level pattern maintaining data, all the codes to fetch data from database or JSON are written in Model. It responds to request from view and instructions from the controller to update itself.
View: It is the last level pattern that displays all or some data to the user. The view gets the variable from the controller which contains the respective data. It displays the data like this {{data}}.
Controller: It is the code that controls the interaction between Model and View, this code gets the data from the model and stores it in a variable form. The controller receives input, validates it, and then performs business operations that modify the state of the data model.
Dependency Injection
Dependency Injection is a software design pattern in which components are given their dependencies instead of hard coding them within the component. This relieves a component from locating the dependency and makes dependencies configurable. This helps in making components reusable, maintainable, and testable.
Angular Js provides good dependency injection, it has various components which can be injected into another dependency.
- Value: It is a simple JavaScript object and it is used to pass values to the controller during the config phase.
- Factory: It is a function that is used to return value. It creates value on demand whenever a service or controller requires it.
- Service: It is a single JS object containing a set of functions to perform tasks. Services are defined using service() functions and then injected into controllers.
- Provider: It is used by AngularJS internally to create services, factory etc during the config phase.
- Constant: These are used to pass values at the config phase.
Routing
Routing is noted in angular by this variable $route.$route is used for deep-linking URLs to controllers and views. It watches the $location.url() and tries to map the path to an existing route definition.
You have to include or install the ngRoute module. You can define routes through $routeProvider’s API. The $route service is typically used in conjunction with the ngView directive and the $routeParams service. It also Requires Dependency of $location, $routeParams.
The above is ngRoute you can also use ui-router which is a third-party module. It is very powerful it has all the features of ngRoute and it has some extra functions also.
For ui-router, you need to install or include the ui-route module and configure services like $stateProvider and $urlRouterProvider.
The ui-router allows for nested views and multiple named views. This is very useful with a larger app where you may have pages that inherit from other sections. It is an advanced way of routing.
For More about the Angularjs framework and examples please visit:-
https://www.tutorialspoint.com/angularjs/
https://docs.angularjs.org/guide
http://www.w3schools.com/angular/
Pingback: Javascript and its Frameworks and Libraries | ReviewStories