-
What is routing?
It allows us to have in one single page the area, where we can show different html-templates.
So we can implement a single page app, where only parts of page will be changed.
Normally, by clicking one link, the browser opens the site specified in href.
Routing lets us prevent this, and specify, which template to load in a special div:
<div ng-view></div>.
So we have a single page with a part, where we show different templates.
-
How to provide routing
-
Load the module
<script src=some_path/angular-route.js"></script>
in the main page.
-
Declare module-dependency to ngRoute:
var myApp = angular.module('someApp',
['ngRoute']); in the app-module declaration,
-
Define 'config' with $routeProvider injection:
myApp.config(function($routeProvider) {...})
Use there routeProvider.when(path, route).when(...). One when for each path.
-
path --> route Mapping
path is defined in a html-link: <a href='#/Book/AngularJS/ch/1'>
route is defined in our config:
when('/Book/:bookId/ch/:chapterId', {...}
So, we see, that the keys "Book" and "ch" in the path and in the route-mapping are identically.
And ngRoute can map:
href='#/Book/AngularJS' --> when('/Book/:bookId')
href='#/Book/AngularJS/ch/1' --> when('/Book/:bookId/ch/:chapterId'
-
Parameter: Names and Values
The route consist of Parameter-Names and Values. Values are parts, which begins with ":".
So, if we map '/Book/AngularJS/ch/1' to '/Book/:bookId/ch/:chapterId', we get actually two
parameters: Book=AngularJs & ch=1
Examples:
books
phones