首页 > Web开发 > 详细

angularjs 路由 $routeProvider

时间:2015-12-19 23:12:16      阅读:365      评论:0      收藏:0      [点我收藏+]

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

  

angularjs 路由 $routeProvider

原文:http://www.cnblogs.com/webuserlast/p/5059908.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!