{"id":8907,"date":"2012-09-26T23:53:42","date_gmt":"2012-09-26T18:23:42","guid":{"rendered":"https:\/\/2thenew.online\/blog\/?p=8907"},"modified":"2017-08-03T14:05:51","modified_gmt":"2017-08-03T08:35:51","slug":"angularjs-multiple-views-layout-template-and-routing","status":"publish","type":"post","link":"https:\/\/2thenew.online\/blog\/angularjs-multiple-views-layout-template-and-routing\/","title":{"rendered":"AngularJS : Multiple Views, Layout Template and Routing"},"content":{"rendered":"

Need For Multiple Views<\/strong><\/p>\n

In all previous examples which I used on AngularJS<\/a>, 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.<\/p>\n

Layout Template<\/strong>
\nWhen 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.<\/p>\n

Routing<\/strong>
\nIn 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.<\/p>\n

How services are injected?<\/strong>
\nIn 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.<\/p>\n

In future blogs, we will see how these features are implemented in code to support multiple views in AngularJS.
\nHave Fun. \ud83d\ude42<\/p>\n

Read Further on AngularJS Series<\/span><\/p>\n