路由 $routeProvider

路由參數(shù)

  1. template:
    如果我們只需要在 ng-view 中插入簡單的 HTML 內(nèi)容，則使用該參數(shù)：
    .when('/computers',{template:'這是電腦分類頁面'})
  2. templateUrl:
    如果我們只需要在 ng-view 中插入 HTML 模板文件，則使用該參數(shù)：
    $routeProvider.when('/computers', {
    templateUrl: 'views/computers.html',
    });
    以上代碼會從服務(wù)端獲取 views/computers.html 文件內(nèi)容插入到 ng-view 中。
  3. controller:
    function、string或數(shù)組類型，在當前模板上執(zhí)行的controller函數(shù)，生成新的scope。
  4. controllerAs:
    string類型，為controller指定別名。
  5. redirectTo:
    重定向的地址。
  6. resolve:
    會在路由成功前執(zhí)行，并注入到當前控制器中。
    • 用于預(yù)加載,防止UI抖動
    • 可以幫助重用控制器
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>

<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route,user) { 
        $scope.$route = $route;
        $scope.name=user.name;
        $scope.age=user.age;
        $scope.email=user.email;
        $scope.user=user;
})
.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController',
            resolve:{
                user:['$scope',function($scope){
                    return {
                        name:"perter",
                        email:"826415551@qq.com",
                        age:"18"
                    }
                }]
            }
    }).
    otherwise({
        redirectTo: '/home'
    });
});
</script>

  
</head>

<body ng-app="ngRouteExample" class="ng-scope">
  <script type="text/ng-template" id="embedded.home.html">
      <h1> Home </h1>
  </script>

  <script type="text/ng-template" id="embedded.about.html">
      <h1> About </h1>
  </script>

  <div> 
    <div id="navigation">  
      <a href="#/home">Home</a>
      <a href="#/about">About</a>
    </div>
      
    <div ng-view="">
    </div>
  </div>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容