{"id":9050,"date":"2012-10-12T13:05:21","date_gmt":"2012-10-12T07:35:21","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=9050"},"modified":"2017-08-03T14:04:40","modified_gmt":"2017-08-03T08:34:40","slug":"angularjs-implementing-routes-and-multiple-views","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/angularjs-implementing-routes-and-multiple-views\/","title":{"rendered":"AngularJS: Implementing Routes And Multiple Views"},"content":{"rendered":"

We have already seen the concept of routes and multiple views in my previous blog<\/a>. Now let’s see how to implement it in code.<\/p>\n

To implement the concept of routing in AngularJS<\/a>, we need to create modules. Inside a module config, we can define routes.<\/p>\n

[javascript]
\nFile : js\/modules.js
\nangular.module(‘videoModule’, []).
\n config([‘$routeProvider’, function($routeProvider) {
\n $routeProvider.
\n\twhen(‘\/videos’, {templateUrl: ‘videoList.html’, controller: VideoController}).
\n\twhen(‘\/videos\/:videoId’, {templateUrl: ‘videoDetail.html’, controller: VideoDetailController}).
\n \totherwise({redirectTo: ‘\/videos’});
\n}]);
\n[\/javascript]<\/p>\n

Here ‘videoModule’ is the name of the module. Inside the config API function, we inject the $routeProvider service, which is used to specify routes.
\nIn each route, we have three things:
\n1. URL received (eg. ‘\/videos’)
\n2. TemplateUrl – The HTML template to load for the URL received
\n3. Controller- The controller function that the templateUrl will use
\nThus, the first route in the module defined in line 5 above states that, when the relative URL ‘\/videos’ is received, load the videoDetail.html template into the layout page(main.html) and use the properties and methods defined in the controller function VideoController.<\/p>\n

Here is how our new module is used.<\/p>\n

[html]
\nFile : main.html
\n<!Doctype html>
\n<html ng-app="videoModule">
\n<head>
\n<script type="text\/javascript" src="https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.0.1\/angular.min.js"><\/script>
\n<script type="text\/javascript" src="js\/modules.js"><\/script>
\n<script type="text\/javascript" src="js\/controllers.js"><\/script>
\n<style type="text\/css">
\n\tli{list-style:none;float:left;padding:20px;}
\n\ta{text-decoration:none;}
\n<\/style>
\n<\/head>
\n<body>
\n\t<div ng-view><\/div>
\n<\/body>
\n<\/html>
\n[\/html]<\/p>\n

We tell the application to use our new module by using ng-app=”videoModule”. Then we included the modules.js file and controllers.js(will show later) file by using the script tag. In the\u00a0body, we use ng-view attribute. It allows the appropriate template to be inserted into place when a particular URL is received. The template to be inserted is decided by the routing that we have defined in our module. For example, as per routes defined by ‘videoModule’, if URL ‘main.html\/videos’ is received, template videoList.html is rendered inside the div containing the ng-view attribute.<\/p>\n

We will also need two controller functions- VideoController and VideoDetailController. It’s a good idea to put all our controller functions in a separate file.<\/p>\n

[javascript]
\nFile : js\/controllers.js
\nfunction VideoController($http,$scope){
\n\t$http.get(‘videoList.json’).success(function(videoList) {
\n\t\t$scope.data = videoList;
\n\t});
\n}<\/p>\n

function VideoDetailController($scope,$routeParams,$http){
\n\t$http.get(‘video’+$routeParams.videoId+’Detail.json’).success(function(videoDetail) {
\n\t\t$scope.data = videoDetail;
\n\t});
\n}
\n[\/javascript]<\/p>\n

The function VideoController() will fetch the\u00a0list of videos from a json file and assign that list to a local variable. The template videoList.html then uses that local variable to show the list of videos.<\/p>\n

Now, we need two templates –
\n1. videoList.html – To show the list of videos. When a\u00a0user clicks on any of the videos, he will be taken to the\u00a0detail page for that video.
\n2. videoDetail.html – This will show details of the video<\/p>\n

[html]
\nFile : videoList.html
\n<div>
\n\t<ul>
\n\t\t<li ng-repeat="datum in data">
\n\t\t\t<a href="#\/videos\/{{datum.id}}">{{datum.name}}<\/a>
\n\t\t<\/li>
\n\t<\/ul>
\n<\/div>
\n[\/html]<\/p>\n

[html]
\nFile : videoDetail.html
\n<img ng-src="{{data.thumbUrl}}" \/>
\n<br \/>Name : {{data.name}}
\n<br \/>Id : {{data.id}}
\n<br \/>Views : {{data.views}}
\n<br \/>Comments : {{data.comments}}
\n[\/html]<\/p>\n

When the application starts, the page main.html is loaded. According to route definitions specified in videoModule, it will match the route ‘otherwise’ and thus a\u00a0user will be redirected to ‘main.html#\/videos’. The corresponding template videoList.html will be loaded into main.html. Post this a user will see a list of videos. When a\u00a0user clicks on a video, for example, video with id 2, the resulting URL will be ‘main.html#\/videos\/2’. This URL corresponds to route ‘\/videos\/:videoId’, where the value of videoId=2.<\/p>\n

Thus the template ‘videoDetail.html’ is loaded into the main.html. The value of videoId can be retrieved from route ‘\/videos\/:videoId’ by using the $routeParams.videoId as shown in the videoDetailController function. This function simply fetches data of the selected video from its json file and assigns it to a local variable, which is then used by the videoDetail.html template to show details of video. For example, if videoId=2, then the json file from which data will be fetched is video2Detail.json.<\/p>\n

That was just a small example illustrating concept of routes and multiple views in AngularJS. I will be back with more.<\/p>\n

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