AngularJS : Multiple Views, Layout Template and Routing

AngularJS : Multiple Views, Layout Template and Routing

Posted by: Nhan Chau | September 26, 2012

Need For Multiple Views

In all previous examples which I used on AngularJS, there was only a single view, i.e. the view displaying the list of youtube videos. Now let’s say we wan’t to display a detail page when a video is clicked. On the detail page, we will display more details about the video like author name, comments etc. In this blog, we will see, how we can use the concept of multiple views in AngularJS.

Layout Template

When we talk about multiple views, we will definitely come across various resources that are used by all the views. For example the AngularJS library will be used by all the views. Thus, we collect all such resources which will be shared by all the views and put them in a file called “layout template”. Grails users can think it as equivalent to main.gsp file.


In AngularJS, routing is provided by $routeProvider which provides the $route service. We use this service to wire the requested url with the controller and view. For a particular url, we can specify which controller and corresponding view would be used by using this service.

How services are injected?

In AngularJS, there are module definitions that contain service providers. These providers are responsible for instantiating the services. When an application starts, all the AngularJS modules are loaded and all service providers contained in these modules are registered. When we ask for a service(eg. $route) by mentioning it as an argument in the controller function, AngularJS delegates our request to its dependency injector. The injector then inject the requested service into the controller function after it is instantiated by the corresponding service provider.
In future blogs, we will see how these features are implemented in code to support multiple views in AngularJS.
Have Fun.
Source From tothenew
Read Further on AngularJS Series
Get image dimensions with ng-flow
Get a base64 encoded image using ng-flow in AngularJS
How to trigger a method with the keyboard shortcut in AngularJS
Moving a page element without affecting its scope in AngularJS
Launch Ionic app with a web or email link
Braintree and Angular.JS drop in integration
Minification safe Angular.js
AngularJS : Multiple Views, Layout Template and Routing
AngularJS: Implementing Routes And Multiple Views
AngularJS : Fetching data from the server
Building Intuitive Frontend Interfaces with AngularJS – An Overview!