angularjs

AngularJs is a google product and one of the most used java script based 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 model, respected view is updated and vice versa. When app data changes, so does the UI, and vice versa. It is a two-way process.

It is an extraordinary feature in java script framework. AngularJs needs to use ng-model directive for two-way data binding.

Angular directives

It gives option to extend HTML attributes by the use of Angular directives. Extending HTML with AngularJS is very simple, one can use standard AngularJS directive or develop a custom directive and mount it on any div.

There are some inbuilt directive in angularjs like ng-app, ng-model, ng-init. The ng-app directive initialize the angular application and ng-model binds with value of HTML elements like input, select, text area and ng-init initialize application data.

Here is the example of the ng-app

Name:

{{firstname}}


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 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 model and controller which is displayed in 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 angularjs
MVC(Model-View-Controller) is popular software design pattern for web based application.

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 controller to update itself.

View : It is the last level pattern which displays all or some data to the user. View gets the variable from controller which contains the respective data. It displays the data like this {{data}}.

Controller : It is the code which controls interaction between Model and View, this code gets the data from model and stores 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 other dependency.

    • Value :

It is simple java script object and it is used to pass values to controller during config phase.

    • Factory :

It is a function which 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 config phase.

    • Constant :

These are used to pass values at config phase.

Rounting

Routing is noted in angular by this variable $route.$route is used for deep-linking URLs to controllers and views. It watches $location.url() and tries to map the path to an existing route definition.

You have to include or install 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.

This 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 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 larger app where you may have pages that inherit from other sections. It is advanced way of routing.

For More about Angular js and examples please visit:-
https://www.tutorialspoint.com/angularjs/
https://docs.angularjs.org/guide
http://www.w3schools.com/angular/


Also published on Medium.

SHARE
Previous articleCrafts Paper
Next articleStock Market Tips
Hello Guys I am a freelance website developer and digital marketer, I have over 4 years of experience. I create websites using PHP, Wordpress, angular js, HTML, CSS, Jquery, Javascript. I also create an eCommerce website, using Magento, open cart, woo-commerce, Shopify, big commerce. The platform is selected according to client needs. I will also help you create your native mobile app which will work on both android and IOS which is created using PWA for your new website or existing website. I also have a digital marketing team, which fulfills all your needs related to creating or enhancing digital presence.

1 COMMENT

LEAVE A REPLY

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