Angularjs_routes_and_dependency_injection

Introduction to AngularJS

Angularjs is a very simple and easy to learn java script framework, it has very less learning curve with people aware of the MVC framework.

JQuery is the framework which is used to dynamically change the dom element, but angular do much more than that, and supports the SPA apps i.e. single page applications.

Basic components of AngularJs and its working is too simple to understand.

AngularJS framework is used to develop the Web 2.0 or rather web 3.0 apps very easily and modular way. And even devs can write the unit test cases in JS (karma, jasmin) to test the code they have written.

 

Basic components and patterns

1. Module

2. Configs

3. Routes

4. Controllers

5. Views or templates

6. Scope (page or application)

7. Directives or taglibs

8. Services or factories

9. Dependency injections

10. MVW

11. Templating

12. TLDs

13. Listeners or Watchers

14. Etc etc…

 

First App, AngularJS

Include Angular JS JavaScript in our HTML document.

 

And that’s pretty much it. Now define your HTML page like below.

 

 

Just write your name or some text in above demo and see how the value after “Hi” changes because of two binding i.e. you change it UI it will get updated in JS object inside current scope and vice versa.

Live Demo

ng-app

This is the bootstrap of angular js app and first thing that will be noticed in angular app is an attribute ng-app within <html> tag. This attribute tells the Angular to be active in this portion of the page i.e. you can give ng-app to specific div or span as well.

If you are writing app that also works with IE7, add id=”ngapp”. For example:

 

ng-model and Two way data binding

ng-model attribute in input textbox as ng-model=”enterText” is binding the state of textbox with model value in JS object.

Thus when the textbox value changes, Angular automatically changes the model enterText with that value. This is called Two way data binding.

This is possible due to the watches that a watch or a observer which observe the state of a model both way form UI element as well as JS object.

So the code you need to write in Jquery or other framework will optimized a lot as you don’t need to do

Get element by id or name then get its value and then create a json object and add that value to json object attribute. This entire stuff will taken care by angularjs.

{{ enterText }}

This tells Angular to bind the value of model enterText in place holder of {{ enterText }} in the HTML dom element.

So any change in enterText model value changes the text inside <h1> tag.

 

Naming and Dependencies

As we are developing app using a framework, a component or a module may depend on other module i.e. one module will call api, method of other module and also a framework will never provide all the api and functionality a developer may want, it will provide the core functionality but not some advance one, so there are some third party libraries come into the picture on which you can depend on.

Just for example include php or import in java and then creating new object of class and then calling method of that class.

Angualar js suppor the Dependency injections pattern, i.e. you can inject the dependencies in code whrer ever it require also you need to give a suitable name to the ng-app lets see how to do that.

 

Here we have given suitable name as myApp and injected the dependencies such as cookies, translate for internationalisation or multi language support, loading bar some beautiful loading status when ajax call is made.

We also need to include the js file which include the above module code. These js are available in the sample code below.

 

 

AngularJS Configs

As we have said that angular js is SPA i.e. a single page application i.e. html page or index page will load only at one time i.e. at the start of the app loading in the browser and then after only part of the page will get refreshed and not all (ajax calls), so for that it need to define the routes i.e. change in url will not go to the server so it uses # before route and if route change what to do.

 

 

Rotes image here…

 

These routes are nothing but whenever the part of the url after # changes then this route will observe it and

It will load the template url i.e. the html page come from the server as a ajax get call response and put it as inner html to the div with attribute named as ng-view.

and

Load the controller with given controller name and bind the ng-model in html UI place holder to the object inside the scope in the current controller.

 

 

So in the above code it it adding a config to the myApp global var.

 

 

$routeProvider and constantValues is dependencies that are injected to the config part.

 

So where there is route like #/home i.e. like index.php#/home index.jsp#/home or index.asp#/home or just index#/home

 

then the controller with name homePageCtrl will be loaded

 

 

and in the ng-view part of the page of the div with attribute ng-view will have

 

as its inner html and there will be two way bindings between the scope variables in the controller and the place holders on the templateUrl i.e. the html using attribute ng-model.

 

Now only part remaing is

 

Resolve

In angular js the ajax call is made using module $http which is like xhr ajax call is js or $ajax in jquery. And as we are aware of this will call some restful apis on the server or cloud over internet.

So when we make ajax calls we can not give guarantee that the response will come in miliseconds, 2 seconds, 5seconds or even more, so the call is deferred as it’s a asynchronous call.

So in this scenario if the page or the ng-view can load first and then the data in placeholders {{}} will load later.

So it will be some what weird as page and placeholders comes first and data comes later, so to handle this situation they used resolve.

In the above code, dashboardData is resolved that the ajax calls going to get data form the homeService.userDashboard(); will be resolved first i.e. the Jason data will come first, it will assigned to scope inside controller and then the template url will load. So html will display data in place holders rather than just place holders.

Route provider otherwise

 

This indicates that when the route is changes manually or given some thing wrong which is not provided in routes config then default route for all such scenarios is /home.

Angularjs Basic Routes and Dependency injections
Tagged on:         

Leave a Reply

Your email address will not be published. Required fields are marked *