文档章节

AngularJS“路由”的定义概念、使用详解——AngularJS学习资料教程

小熊一乐
 小熊一乐
发布于 2017/07/27 09:20
字数 858
阅读 4
收藏 0

这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的

以下内容仅供参考,请慎重使用学习

AngularJS“路由”的定义概念

AngularJS最近真的很火,很多同事啊同学啊朋友都在用,这不推荐我学习,听到这个名字就十分火热的去了

什么是AngularJS就不做说明了,这个东西还是很有趣的

在这里推荐一下学习网站,菜鸟教程,虽然里面的教程很多都很浅显,而且好多也没有说明,但是对于入门确实很不错的选择

1.什么是AngularJS的路由呢?

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。通过 AngularJS 可以实现多视图的单页Web应用

1 http://mibear.com/#/first
3 http://mibear.com/#/second
5 http://mibear.com/#/third

上面是它的展现形式,# 号之后的内容是不是像服务端请求的样子呢,其实在请求的时候是会被浏览器忽略掉的。 而我们需要的就是在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

2.路由的配置实例

 

 1 <html>
 2 <head>
 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 4 
 5 <!--导入angular以及路由文件angular-route.js-->
 6 <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
 7 <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
 8 
 9     <script type="text/javascript">
10         //把元素值(比如输入域的值)绑定到应用程序。
11  angular.module('ngRouteExample', ['ngRoute']) 12  .controller('a1', function ($scope, $route) { $scope.$route = $route;}) 13  .controller('a2', function ($scope, $route) { $scope.$route = $route;}) 14  .config(function ($routeProvider) { 15  $routeProvider. 16  when('/a1', { 17  templateUrl: 'a1.html', 18  controller: 'a1'
19  }). 20  when('/a2', { 21  templateUrl: 'a2.html', 22  controller: 'a2'
23  }). 24  otherwise({ 25  redirectTo: '/a2'
26  }); 27  }); 28 </script>
29 
30   
31 </head>
32 
33     <body ng-app="ngRouteExample" class="ng-scope">
34           <script type="text/ng-template" id="a1.html">
35               <h1> Home </h1>
36           </script>
37     
38           <script type="text/ng-template" id="a2.html">
39               <h1> About </h1>
40           </script>
41     
42           <div> 
43             <div id="navigation">  
44               <a href="#/a1">这是a1</a>
45               <a href="#/a2">这是a2</a>
46             </div>
47               
48             <div ng-view="">
49             </div>
50           </div>
51     </body>
52 </html>

 

3.解析

1 //包含了ngRoute 模块的 2 angular.module('routingDemoApp',['ngRoute'])
1 //使用 ngView 指令,用来显示路由切换的页面 2 <div ng-view></div>
 1 //路由配置设置其中之一  2 .config(function ($routeProvider) {  3  $routeProvider.  4  when('/a1', {  5  templateUrl: 'a1.html',  6  controller: 'a1'  7  }).  8  when('/a2', {  9  templateUrl: 'a2.html', 10  controller: 'a2' 11  }). 12  otherwise({ 13  redirectTo: '/a2' 14  }); 15  }); 16 
17 //templateUrl,在 ng-view 中插入 HTML 模板文件的地址
18 //controller,function、string或数组类型,在当前模板上执行的controller函数,生成新的scope。
20 //redirectTo,重定向的地址,可以是你想最开始加载的页面

 

1  <script type="text/ng-template" id="a1.html">
2               <h1> Home </h1>
3           </script>
4     
5           <script type="text/ng-template" id="a2.html">
6               <h1> About </h1>
7           </script>
8 //这里的加载内容可以使本地的HTML文件链接,然后删掉这部分js就好

本地的HTML文件直接建立两个为a1.html,a2.html就好了,路径要正确(这里是放在同目录下)

 

4. 效果样式

那么最后的样子是如何的呢

点击不同的标签,下面的<div ng-view="">就会加载不同的页面,这里的页面可以是本地页面。

 

 

 

 

© 著作权归作者所有

小熊一乐
粉丝 0
博文 23
码字总数 42672
作品 0
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
204
0
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
15个学习 AngularJS 最好的网站

AngularJS 是一款优秀的前端JS开发框架,在你开发应用的时候可以帮你快速提示自己的能力并简化代码。掌握 AngularJS 可以帮你提示你的应用的可用性、实现其他一些在科技界认为不可能的功能。...

Specs
09/29
0
0
学习 AngularJS (一)

进一步看入 kityminder-editor 部分了, 打开示例文件 index.html, 开头就是引入三个著名 js 开源库: jQuery.js, bootstrap.js, angular.js 这意味着我又得学习了解这些库都是干什么的了. 略知...

刘军兴
2015/12/04
235
0
成为优秀Angular开发者所需要学习的19

一款to-do app基本等同于前端开发的“Hello world”。虽然涵盖了创建应用程序的CRUD方面,但它通常只涉及那些框架或库也能做到的皮毛而已。 Angular看起来似乎总是在改变和更新 - 但实际上,...

京东云技术新知
07/02
54
0

没有更多内容

加载失败,请刷新页面

加载更多

x002-语言元素

变量命令规则 硬性规则: 变量名由字母(广义的Unicode字符,不包括特殊字符)、数字和下划线构成,数字不能开头。 大小写敏感(大写的a和小写的A是两个不同的变量)。 不要跟关键字(有特殊...

伟大源于勇敢的开始
今天
4
0
nginx反向代理配置

nginx配置文件位置/usr/local/nginx/conf/nginx.conf 配置文件修改: # cd /usr/local/nginx/conf # vim nginx.conf server {listen 80;server_name localhost;#charset k......

行者终成事
今天
5
0
OSChina 周日乱弹 —— 这是假的,和我之前的不一样

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑推荐:《男孩》-梁博 / 陶孟童 / 肖和东 / 高誉容 《男孩》-梁博 / 陶孟童 / 肖和东 / 高誉容 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
8
0
Rust学习笔记一 数据类型

写在前面 我也不是什么特别厉害的大牛,学历也很低,只是对一些新语言比较感兴趣,接触过的语言不算多也不算少,大部分也都浅尝辄止,所以理解上可能会有一些偏差。 自学了Java、Kotlin、Python、...

MusiCodeXY
今天
5
0
Java 脚本引擎入门

Java Script Engine Java 脚本引擎可以将脚本嵌入Java代码中,可以自定义和扩展Java应用程序,自JDK1.6被引入,基于Rhino引擎,JDK1.8后使用Nashorn引擎,支持ECMAScript 5,但后期还可能会换...

阿提说说
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部