码迷,mamicode.com
首页 > Web开发 > 详细

angularjs 路由 $routeProvider

时间:2015-12-19 23:13:49      阅读:296      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!