angularjs 路由 $routeProvider

Angularjs路由描述:定义路由规则(routeProvider),然后通过不同的URL,告诉(ng-app)加载哪个页面(HTML),再渲染到(ng-app)视图(ng-view)中。

主界面index.html

<!DOCTYPE html>

<html>

  <head></head>

  <body>

    <div ng-app="routeApp">

      <h3>路由</h3>

      <div ng-view></div><!--模板将添加到此div里面-->

    </div>

    <script src="js/angular.min.js"></script><!--加载angularJS库 -->

    <script src="js/app.js"></script><!--加载app.js 库,定义路由规则写在这里 -->

    <script src="js/main.js"></script><!-- 定义控制器-->

  </body>

</html>

定义路由规则app.js

  var routeApp=angular.module("routeApp",[]);

  routeApp.config(["$routeProvider",function($routeProvider){

    $routeProvider.when("/temp1",{

      templateUrl:temp1/template1.html,

      controller:"myCtrl1"

    })

    .when("temp2",{

      templateUrl:temp2/template2.html,

      controller:"myCtrl2"

    }).

    otherwise({

      redirectTo:"/temp1";

    });

  }]);

定义控制器 main.js

  routeApp.controller("myCtrl1",["$scope",function($scope){

    //code

  }])

  .controller("myCtrl2",["$scope",function($scope){

    //code

  }]);

定义模板 template1.html 、template2.html

  

posted @ 2015-12-19 22:10  淡然の不淡  阅读(283)  评论(0编辑  收藏  举报