AngularJS(16)-路由
AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由。 AngularJS 路由允许我们通过不同的 URL 访问不同的内容。 通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。 通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如： http://runoob.com/#/first http://runoob.com/#/second http://runoob.com/#/third 当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://runoob.com/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路由</title>
<script src="angular-1.4.1/angular.min.js"></script>
<script src="angular-1.4.1/angular-route.min.js"></script><!--载入实现路由的js文件-->
<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute']) //包含了ngRoute模块作为主应用模块的依赖模块
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) { //AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider
// 注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则
$routeProvider.
when('/home', {
templateUrl: 'embedded.home.html', //第一个参数是URL或者URL正则规则 第二个参数是路由配置对象
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'embedded.about.html',
controller: 'AboutController'
}).
otherwise({
redirectTo: '/home'
});
});
</script>
</head>
<body ng-app="ngRouteExample" class="ng-scope"> <!--当当前页面为embedded.home.html时就输出一个Home页面-->
<script type="text/ng-template" id="embedded.home.html">
<h1> Home页面 </h1>
</script>
<!--当当前页面为embedded.about.html时就输出一个About页面-->
<script type="text/ng-template" id="embedded.about.html">
<h1> About页面 </h1>
</script> <div>
<div id="navigation">
<a href="#/home">Home</a>
<a href="#/about">About</a>
</div> <div ng-view=""><!--该div内的HTML内容会根据路由的变化而变化 --> </div>
</div>
</body>
</html>
运行结果：
AngularJS(16)-路由的更多相关文章
- AngularJS的路由、模块、依赖注入
AngularJS的路由在实际应用中更多是由另外封装好的angular-ui-router.js实现的! 为什么不用Ajax而要用前端路由?
- AngularJs ui-router 路由的介绍
AngularJs ui-router 路由介绍 野兽之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Ang ...
- AngularJS笔记---路由视图
最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我 ...
- AngularJs ng-route路由详解
本篇基于ng-route来讲下路由的使用...其实主要是 $routeProvider 搭配 ng-view 实现. ng-view的实现原理,基本就是根据路由的切换,动态编译html模板. 更多内容 ...
- 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转
还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...
- AngularJs ui-router 路由的简单介绍
之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router ...
- [AngularJS] “多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程
这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 1.AngularJS路由嵌套 Angularjs本身自带路由模块,可以满足通过不同 ...
- angularJS的路由！
angularJS 路由:(分发需求) angularJS 中路由是单独提供的功能模块,ngRoute 也是一个单独发行的文件 可以通过 npm 去安装这个包:angular-route <s ...
- 关于angularjs中路由页面强制更新的问题
有这么一个问题,在页面内路由页面跳转时,第一次跳入路由页面时是正常的,但是第二次会记住第一次时的状态,有时候并不想这样,想强制更新这个路由页面. 有一种方式就是使用 ui-sref-opts功能,我试 ...
随机推荐
- DM 之 全解析
一.设计模式的分类 二十三大设计模式,分为三大类: 1. 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 2. 结构型模式,共七种:适配器模式.装饰器模式.代理模式. ...
- URL请求过程
一.URL(Uniform Resource Locator)统一资源定位符,是可以从互联网上得到的资源的位置和访问方法的一种简洁表示,是互联网上标准资源的地址.互联网上的每一个文件都有一个唯一的UR ...
- 阿里云 OCS SDK for NodeJS介绍
阿里云 OCS SDK for NodeJS介绍 阿里云技术团队:熊亮 阿里云 SDK for NodeJS 是为 NodeJS 开发者提供使用阿里云各项服务的统一入口,由阿里云UED团队负责开发维护 ...
- Ultra Edit常用正则表达式
一.怎样可以删除包含特殊字符的行? 你可以用正则表示式全部替换命令替换行中包含的字符.要执行这个操作,你应该先进行查找: 查找: %*YOUR STRING*^p 替换为: (随便什么文字) 帮助文件 ...
- 【Android Api 翻译4】android api 完整翻译之Contacts Provider （学习安卓必知的api，中英文对照）
Contacts Provider 电话簿(注:联系人,联络人.通信录)提供者 ------------------------------- QUICKVIEW 快速概览 * Android's r ...
- centos（linux） 下如何查看端口占用情况及杀死进程
使用这个命令:netstat -nap [root@Jaosn sphinx]# netstat -nap Active Internet connections (servers and estab ...
- 给力的轻量级JavaScript动画框架 - jsMorph
jsMorph 是一个独立的轻量级 JavaScript 动画框架,可以用它来操纵多个 HTML 元素的样式,实现动画效果.此框架会自动检测起始位置.转换单位.调整渲染的速度,以此来获得更流畅的渲染体 ...
- Phd之导师的作用
1.研究技巧(专业知识,研究方向,方法论,写作技巧和演讲技巧) 当导师手下的学生少时,他可能会手把手的叫你一些知识,导师手下的学生多时,他会让你自己去学习某个领域的知识.当你掌握了一定专业知识后,导师 ...
- 9种CSS3炫酷图片展开预览展示动画特效
详细内容请点击 在线预览立即下载 这是一组共9款CSS3炫酷图片预览展示动画特效插件.css的新特性可以让我们制作出各种炫酷的动画效果.该图片预览展示动画特效就是一个很好的例子,该效果开始时图片堆叠在 ...
- django 学习-12 Django表单 初步
1.先创建项目和应用 django.admin.py startproject cs cd cs django.admin.py startapp blog 2.vim setti ...