AngularJS : Multiple Views, Layout Template and Routing

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.

Routing
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

• AngularJS : A “Write Less Do More” JavaScript Framework
• AngularJS : Updating a Label Dynamically with User Input
• AngularJS : Adding Items to a JavaScript List and updating corresponding DOM Dynamically
• AngularJS : Text Suggestions
• AngularJS : Sorting objects on various attributes
• AngularJS : Fetching data from the server
• AngularJS : Multiple Views, Layout Template and Routing
• AngularJS : Implementing Routes And Multiple Views
• Building Intuitive Frontend Interfaces with AngularJS