AngularJS - Routing & Multiple Views

• Report rights infringement
• published: 10 Jan 2016
• views: 445

AngularJS For Beginner AngularJS - Routing & Multiple Views 1. What is routing in a web app Generally, web applications make use of readable URLs that describe the content that resides there. A common example could be clicking on a homepage’s link: this means that a back-end action is being executed, that results to a different view on the client-side. We often confirm similar situations after interacting in the root of a web app ( / or index.html ), by noticing a change to the browser’s url bar. 2. Today’s example’s concept In this example we will demonstrate a simple page navigation application. Suppose a homepage with two links and each one of them will redirect to a specified page. To get a better understanding of our concept, we ‘ll here implement an inline navigation. This means that we want our pages’ content to be displayed inside the initial/home page. AngularJS provides the ngView directive to implement the fore-mentioned functionality. Specifically, ngView directive complements the $route service by including the rendered template of the current route into the main layout file. That is, each time the current route changes, the included view changes with it according to the configuration of the $route service. So, keeping in mind that our index.html contains a simple sentence with two links provided, assume we want to display the rendered templates (according to the clicked links) below that sentence; As you see, the anchors’ targets are already named, so what is left, is to configure the respective routings for Angular. In AngularJS, we can use the ngRoute module for routing and deeplinking services and directives. Here are some important points before going on: In order to use the ngRoute module, you have to include angular-route.js to your app, which, obviously, has to be loaded, after including the angular.js script. The routings we need, have to be configured inside the module’s functionality, so it would be easier to define our module in a separate file, script.js. You have to provide same name for the ng-app tag (in html file that contains the Angular app) and the module’s definition. 2.1 Defining the module Now, let’s define the Angular module, by providing our app’s name (as in index.html) and declaring that it depends on the ngRoute module; the last words mean that we have to “inject” ngRoute into our module ( script.js ), like this: angular.module('RoutingApp', ['ngRoute']); That’s why we had to include the angular-route.js file in our app. In order to use ngRoute, we have to call the angular.config method: angular.module('RoutingApp', ['ngRoute']).config(function() {}); As you noticed, I also created an anonymous function inside the method, ’cause, otherwise, we ‘ll get a script error from our browser, as angular.config method requires calling it with a function. From the official documentation, we can use the $routeProvider to configure Angular’s routes, so we should pass $routeProvider as a parameter in our anonymous function: angular.module('RoutingApp', ['ngRoute']).config( ['$routeProvider', function($routeProvider) {}]); The $routeProvider‘s method to add a new route definition to the $route service is when(path, route): path corresponds to the requested from the client path. route is an object parameter and contains mapping information that have to be assigned while matching the requested route (i.e. we may want to handle the newly registered route with a specific controller; controller property is responsible for this scope). You can read about the rest of route‘s object properties, but as I fore-mentioned, here, we ‘ll implement a simple routing between two html files, so, I’ll only use the templateUrl. Please take a look at the module’s final structure: $routeProvider .when('/first', { templateUrl: 'first.html' }) .when('/second', { templateUrl: 'second.html' }) .otherwise({ redirectTo: '/' }); Now, let me explain: the first when means that when the /first is requested as a route, the first.html will be loaded. Same for the “second”. The $routeProvider‘s otherwise(params) method sets route definition that will be used on route change when no other route definition is matched. Practically, this means, that if the client requests a route that isn;t defined in the when method, this method will be executed. Imagine this as a general if-else statement. In our case, I assume we want to display just the homepage ('/'), when no route definition gets matched.