Angular 中每个页面的显示都需要三个要素: 页面的代码, 控制器和页面的 URL; 当要在同一个页面上呈现不同的视图时, 这就需要配置路由啦; angular.JS 已经为我们封装了一个独立的路由工具 ng-route;ng-route 是靠 URL 来改变显示的视图的.
angular 实现前端页面跳转的方法如下:
1, 首先在主页面中, 嵌入模板视图: 为当前路由把对应的视图模板载入到布局模板中:
- <body>
- <div ng-view> </div>
- </body>
同时, 在主页中定义一个 Angular.JS 应用程序, 以订餐大师为例:
ng-App = "order_master_app"; //''号里为应用程序的名字;
2, 引入文件和依赖: 因为 ng-route 模块包含在一个独立的文件中, 所以要在引入文件页面中引入该文件, 如下:
- <script src="http://code.angularjs.org/1.2.5/angular.min.js">
- </script>
- <script src="http://code.angularjs.org/1.2.5/angular-route.min.js">
- </script>
3, 配置路由:
1) 声明一个基本的 Angular App, 并引入 ngRoute:
var App = angular.module('order_master_app',['ngRoute']);
2)Angular JS 中应用的路由通过 $routeProvider 来声明, 它是 $route 服务的提供者:
- App.config(function ($routeProvider){
- $routeProvider
- .when('/',{
- templateUrl:'html/order_meals.html',
- controller:'OrderMealsCtrl'
- })
- });
上述代码中,$routeProvider 定义了一个 URL 映射:'/'使用 HTML/order_meals.HTML 作为模板, OrderMealsCtrl 作为控制器;
3)route 的控制器: 设置控制器, 可以动态的修改模板中的代码, 那么如何配置控制器呢, 如下所示:
- App.controller('OrderMealsCtrl',function($scope, $location){
- $scope.choose_order = function(){
- $location.path('choose_order_meals');
- };
- })
以上代码所示, 点击跳转事件 choose_order(), 有控制器 OrderMealsCtrl 控制跳转到 choose_order_meals 这一个页面, 从而实现了页面的跳转功能.
来源: http://www.css88.com/qa/angular-js/10778.html