1. 程式人生 > >AngularJs(3)

AngularJs(3)

ngroute $routeprovider

<!doctype html>

<html lang="en" ng-app=‘myApp‘ >

<head>

<meta charset="UTF-8">

<title>路由一</title>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript" src="angular-route.min.js"></script>

<script type="text/javascript">


//在模塊中的[]中引入ngRoute

var myApp = angular.module(‘myApp‘, [‘ngRoute‘])

//在配置中引入$routeProvider

myApp.config([‘$routeProvider‘,function($routeProvider){

$routeProvider

//根據哈希值確定ng-view視圖的內容

//:num獲取傳遞過來的參數

.when(‘/aaa/:num‘,{

template : ‘<p>首頁的內容</p>{{name}}‘,

controller : ‘one‘

})

.when(‘/bbb‘,{

template : ‘<p>分頁一的內容</p>{{name}}‘,

controller : ‘two‘

})

.when(‘/ccc/:num‘,{

template : ‘<p>分頁二的內容</p>{{name}}‘,

controller : ‘three‘

})

//設置默認值

.otherwise({

redirectTo :‘/aaa‘

});

}]);

myApp.controller(‘one‘,[‘$scope‘,‘$location‘,‘$routeParams‘,function($scope,$location,$routeParams){

$scope.name=‘hello‘;

$scope.$location=$location;

//可以獲取傳遞過來的參數

console.log($routeParams);

}]);

myApp.controller(‘two‘,[‘$scope‘,function($scope){

$scope.name=‘hi‘;

//$scope.$location=$location;

}]);

myApp.controller(‘three‘,[‘$scope‘,‘$routeParams‘,function($scope,$routeParams){

$scope.name=‘你好‘;

//$scope.$location=$location;

console.log($routeParams);

}]);

</script>

</head>

<body ng-controller=‘one‘>

<a href="" ng-click=‘$location.path("aaa/123")‘>首頁</a>

<a href="" ng-click=‘$location.path("bbb")‘>分頁一</a>

<a href="" ng-click=‘$location.path("ccc/333")‘>分頁二</a>

<div ng-view></div>

</body>

</html>



本文出自 “12897581” 博客,請務必保留此出處http://12907581.blog.51cto.com/12897581/1933205

AngularJs(3)