Angular 路由route实例代码
AngularJS 路由 routing
能够从页面的一个视图跳转到另外一个视图,对单页面应用来讲是至关重要的。当应用变得越来越复杂时,我们需要一个合理的方式来管理用户在使用过程中看到的界面。AngularJS的做法是将视图分解成布局和模板视图,并且根据用户当前访问的URL来展示对应的视图。
本文对 AngularJS routing 做一简单示例,并提及其涉及的一些概念。
一、布局页面
引用scripts:
<script src="../Scripts/jquery-1.9.1.min.js"></script> <script src="../Scripts/angular.min.js"></script> <script src="../Scripts/angular-route.min.js"></script>
页面的布局比较简单:
<div> <ul> <li><a href="#page1">go page 1</a></li> <li><a href="#page2">go page 2</a></li> <li><a href="#other">to other page</a></li> </ul> </div> <div ng-view></div>
ng-view是由ngRoute模块提供的一个特殊指令,其告诉AngularJS把模板渲染到何处。这个例子中,我们将需要渲染的内容放到 下面的 div 中。上面的三个 a 链接分别指向了三个视图view。
二、模板页面
创建两模板页面,分别叫 Subpage_1.html 和 Subpage_2.html。
3、路由规则 routing config
angular.module("myRouteApp", ["ngRoute"]) .config(['$routeProvider', function ($routeProvider) { $routeProvider .when("/page1", { templateUrl: "Subpage_1.html" }) .when("/page2", { templateUrl: "Subpage_2.html" }) .otherwise({ redirectTo: "/" }); }]);
把 ngRoute 模块在我们的应用中当作依赖加载进来。用 config 函数在模块或应用中定义路由,使用AngularJS提供的when和otherwise两个方法来定义应用的路由。
templateUrl:
应用会根据 templateUrl 属性所指定的路径通过XHR读取视图(或者从$templateCache中读取)。如果能够找到并读取这个模板,AngularJS将模板的内容渲染到具有ng-view指令的DOM元素中。
redirectTo:
如果redirectTo属性的值是一个字符串,那么路径会被替换成这个值,并根据这个目标路径触发路由变化。如果redirectTo属性的值是一个函数,那么路径会被替换成函数的返回值,并根据这个目标路径触发路由变化。
运行结果
点击 go page 1
点击 go page 2
以上这篇Angular 路由route实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- Windows Route 路由表命令整理
- rails "No route matches" 错误的解决方法
- angular.element方法汇总
- 深入学习JavaScript的AngularJS框架中指令的使用方法
- 仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
- Angular用来控制元素的展示与否的原生指令介绍
- 使用angular写一个hello world
- vue,angular,avalon这三种MVVM框架优缺点
- 使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
- AngularJS页面访问时出现页面闪烁问题的解决
- 利用CSS3在Angular中实现动画
- 初识angular框架后的所思所想
- 实例剖析AngularJS框架中数据的双向绑定运用
- 理解Angular数据双向绑定
- Angular中的Promise对象($q介绍)
- Angular实现form自动布局
- 在AngularJS中使用jQuery的zTree插件的方法
- 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
- angular简介和其特点介绍
- AngularJS使用angular-formly进行表单验证