AngularJS : Multiple Views, Layout Template and Routing

26 / Sep / 2012 by raj 4 comments

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. :)

Read Further on AngularJS Series


comments (4)

  1. Pingback: AngularJS : Multiple Views, Layout Template and Routing | TO THE NEW Blog | Layout

  2. Rajasekar

    I’m clear with the concept of routing, but i have some clarification.
    1. if three pages has left column, i can create a layout called index.html, in that i can show header, footer & left column & change the page use controller, if the fourth page has right column “how can change layout i.e header, footer, right column” thanks in advance


Leave a comment -