AngularJs（3）

发布时间：2019-07-02 13:39:03编辑：auto阅读（1249）

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



关键字：

上一篇： Unit 3

下一篇： 作业（3）