Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Routing </title>
<script src= "Angular.min.js" ></script>
<!--introduce routing files--
<script src= "Https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js" ></script>
<body ng-app= ' Routedemo ' >
<!--left column--
<div id= "navigator" style= "width:20%;d isplay:inline-block;background-color:red;height:400px;float:left" >
<!--menu--
<ul>
<li><a href= "#/home" > Home </a></li>
<li><a href= "#/woman" > Women </a></li>
<li><a href= "#/man" > Mens </a></li>
<li><a href= "#/life" > Daily necessities </a></li>
<li><a href= "#/cook" > Kitchen Products </a></li>
</ul>
</div>
<!--right Column--
<div style= "width:80%;d isplay:inline-block;background-color:green;height:400px;float:right" >
<div ng-view= "" ></div>
</div>
</body>
<script type= "Text/ng-template" id= "index.home.html" >
</script>
<script type= "Text/ng-template" id= "index.woman.html" >
</script>
<script type= "Text/ng-template" id= "index.man.html" >
</script>
<script type= "Text/ng-template" id= "index.life.html" >
</script>
<script type= "Text/ng-template" id= "index.cook.html" >
</script>
<script type= "Text/javascript" >
Angular.module (' Routedemo ', [' Ngroute '])
. Controller (' HomeController ', function ($scope, $route) {
$scope. $route = $route;
})
. Controller (' Womancontroller ', function ($scope, $route) {
$scope. $route = $route;
})
. Controller (' Womancontroller ', function ($scope, $route) {
$scope. $route = $route;
})
. Controller (' Mancontroller ', function ($scope, $route) {
$scope. $route = $route;
})
. Controller (' Lifecontroller ', function ($scope, $route) {
$scope. $route = $route;
})
. Controller (' Cookcontroller ', function ($scope, $route) {
$scope. $route = $route;
})
Configure $routeprovider to define routing rules
$routeProvider give us the When (Path,object) & Other (object) function defines all routes in order, the function contains two parameters:
@param1: URL or url regular rule
@param2: Routing Configuration Objects
. config (function ($routeProvider) {
$routeProvider.
When ('/home ', {
Templateurl: Inserting a ng-view HTML template file
Templateurl: ' index.home.html ',
Controller: ' HomeController '
}).
When ('/woman ', {
Templateurl: ' index.woman.html ',
Controller: ' Womancontroller '
}).
When ('/man ', {
Templateurl: ' index.man.html ',
Controller: ' Mancontroller '
}).
When ('/life ', {
Templateurl: ' index.life.html ',
Controller: ' Lifecontroller '
}).
When ('/cook ', {
Templateurl: ' index.cook.html ',
Controller: ' Cookcontroller '
})
})
</script>：
ANGULARJS Routing for single page jumps
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
