Loading...

AngularJs

Page Visited: 1004
Read Time:4 Minute, 30 Second

AngularJs is a google product and one of the most used javascript based open-source front-end web framework. 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 initialize application data.

Here is the example of the ng-app

Name:

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)
mvc

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 instruction 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 function 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/

About Post Author

Girish

Hello Guys I am a website developer by profession but is always keen on learning new things. I have been investing in Mutual funds, stock market for the past few years because of which I have gained good knowledge. I started my entrepreneur journey in 2019 which lead me to learn more things as I am moving forward. I always love to share whatever I learn. Always had a craze for cars from my childhood, which inspired me to start this website.
Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Also published on Medium.

Girish

Hello Guys I am a website developer by profession but is always keen on learning new things. I have been investing in Mutual funds, stock market for the past few years because of which I have gained good knowledge. I started my entrepreneur journey in 2019 which lead me to learn more things as I am moving forward. I always love to share whatever I learn. Always had a craze for cars from my childhood, which inspired me to start this website.

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

One thought on “AngularJs

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this:
Enable Notifications    OK No thanks