天天看點

AngularJs(3)

<!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='你好';

</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>

<code>&lt;</code><code>br</code><code>&gt;</code>

本文轉自 沉迷學習中 51CTO部落格,原文連結:http://blog.51cto.com/12907581/1933205,如需轉載請自行聯系原作者

繼續閱讀