We have already seen the concept of routes and multiple views in my previous blog. Now let’s see how to implement it in code.
To implement the concept of routing in AngularJS, we need to create modules. Inside a module config, we can define routes.
File : js/modules.js
angular.module('videoModule', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/videos', {templateUrl: 'videoList.html', controller: VideoController}).
when('/videos/:videoId', {templateUrl: 'videoDetail.html', controller: VideoDetailController}).
otherwise({redirectTo: '/videos'});
}]);
Here ‘videoModule’ is the name of the module. Inside the config Api function, we inject the $routeProvider service, which is used to specify routes.
In each route, we have three things :
1. URL received (eg. ‘/videos’)
2. templateUrl – The html template to load for the url received
3. controller- The controller function that the templateUrl will use
Thus, 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.
Here is how our new module is used.
File : main.html
<!Doctype html>
<html ng-app="videoModule">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="js/modules.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<style type="text/css">
li{list-style:none;float:left;padding:20px;}
a{text-decoration:none;}
</style>
</head>
<body>
<div ng-view></div>
</body>
</html>
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 body, 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.
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.
File : js/controllers.js
function VideoController($http,$scope){
$http.get('videoList.json').success(function(videoList) {
$scope.data = videoList;
});
}
function VideoDetailController($scope,$routeParams,$http){
$http.get('video'+$routeParams.videoId+'Detail.json').success(function(videoDetail) {
$scope.data = videoDetail;
});
}
The function VideoController() will fetch list 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 list of videos.
Now, we need two templates –
1. videoList.html – To show the list of videos. When user clicks on any of the video, he will be taken to detail page for that video.
2. videoDetail.html – This will show details of the video
File : videoList.html
<div>
<ul>
<li ng-repeat="datum in data">
<a href="#/videos/{{datum.id}}">{{datum.name}}</a>
</li>
</ul>
</div>
File : videoDetail.html
<img ng-src="{{data.thumbUrl}}" />
<br />Name : {{data.name}}
<br />Id : {{data.id}}
<br />Views : {{data.views}}
<br />Comments : {{data.comments}}
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 user will be redirected to ‘main.html#/videos’. The corresponding template videoList.html will be loaded into main.html. Thus user will see a list of videos. When user 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. Thus the template ‘videoDetail.html’ is loaded into the main.html. The value of videoId can be retreived 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.
That was just a small example illustrating concept of routes and multiple views in AngularJS. I will be back with more.
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
Regards
Raj Gupta
raj.gupta@intelligrape.com
@rajdgreat007
