关于Angular.js Routing 的学习笔记(实现单页应用)
最近开始学习angular.js，发现angular.js确实很方便，也很强大。在看到 AngularJS Routing and Multiple Views 这一部分的时候，有点乱。现在通过记录一下学习过程中写的例子，让自己好好在理解一下。
第一步：
①创建一个名为“myApp”的模块，并且加载"ngRoute"作为依赖模块
②使用$routeProvider配置路由
③在这个例子中，我使用了两个路径，分别是/home和/about ;使用了一个控制器（不加控制器也行，主要是用于操作数据），为myController
js代码如下：
var myApp = angular.module("myApp", ["ngRoute"]);
myApp.config(function($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "home.html",
controller: "myController"
})
.when("/about", {
templateUrl: "about.html",
controller: "myController"
})
.otherwise({
redirectTo: "/home"
});
});
myApp.controller("myController", function($scope) {
$scope.message = "Hello World ！"
});
第二步：
编写html的template视图模板
home.html代码如下:
<h1>{{message}}</h1>
<h2 >This is home page!</h2 >
<a href="#/about">Go to about page</a>
about.html代码如下:
<h2>This is about page!</h2>
<a href="#/home">Go to home page</a>
最后一步：
①创建一个index.html文件，在所需要的标签内添加ng-app, 属性设为“myApp”,用来控制angular的适用范围
②添加ngView标签，用于存放模版视图
③导入 angular.min.js 、 angular-route.min.js 、以及自己编写的js文件
index.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS-Routing</title>
</head>
<body>
<div ng-app="myApp">
<ng-view></ng-view>
</div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
<script src="main.js"></script>
</body>
</html>
注意事项：
①在定义module的时候，记得加上“ngRoute”
②在配置路由的时候，.when() 方法有两个参数。第一个参数是浏览器访问的url路径，不需要加上“#”符号（但是在a标签设置href的时候，要把“#”符号加上）；第二个参数包括有template和controller,templateUrl的路径则是文件所在的实际路径。
参考网站：http://www.journaldev.com/6225/angular-js-routing-and-multiple-views-tutorial-example#/viewStudents
关于Angular.js Routing 的学习笔记(实现单页应用)的更多相关文章
- Angular.js之指令学习笔记
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- Angular.js之Router学习笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 【09-23】js原型继承学习笔记
js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...
- Underscore.js 源码学习笔记（下）
上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...
- Underscore.js 源码学习笔记（上）
版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}()); 这样的东西,我们应该知道这是一个 IIFE(立即执行 ...
- 浏览器中js执行机制学习笔记
浏览器中js执行机制学习笔记 RiverSouthMan关注 0.0772019.05.15 20:56:37字数 872阅读 291 同步任务 当一个脚本第一次执行的时候,js引擎会解析这段代码,并 ...
- 纯JS实现KeyboardNav(学习笔记)一
纯JS实现KeyboardNav(学习笔记)一 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 GitHub项目源码 预览地址 最终效果 KeyboardNav使用指南 ...
- 纯JS实现KeyboardNav(学习笔记)二
纯JS实现KeyboardNav(学习笔记)二 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码 ...
- lfs（systemd版本）学习笔记-第3页
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! lfs(systemd)学习笔记-第2页 的地址:https://www.cnblogs.com/renren-study-no ...
随机推荐
- 02---CSS整理
一.概述 CSS(cascading style sheet) 层叠样式表 提供比HTML更强大的页面排版.美化工具 CSS将网页内容和显示样式进行分离,提高了显示 ...
- [Effective C++ --027]尽量少做转型动作
引言 ...
- poj 1654 Area 多边形面积
/* poj 1654 Area 多边形面积 题目意思很简单,但是1000000的point开不了 */ #include<stdio.h> #include<math.h> ...
- Java基础知识强化之网络编程笔记14：TCP之多个客户端上传到一个服务器的思考（多线程改进）
1. 多个客户端上传到一个服务器的思考 通过while循环可以改进一个服务器接收多个客户端. 但是这个是有问题的.如果是这种情况,假设我还有张三,李四,王五这三个人分别执行客户端 张三:好好学习.a ...
- java与c++的访问权限的问题
转自网络:http://blog.sina.com.cn/s/blog_4bc954d30100wtxe.html 权限的理解重要理解什么是可见什么是不可见 首先声明:java中,friendly这个 ...
- windows下回车与换行符
windows下回车与换行符 从键盘输入的数据一般是ASCII码,也就是文本文件,在送到计算机内存时,回车和换行符转换成一个换行符(也就是说回车和换行符在windows文本中是两个字符),再从内存中以 ...
- JAVA_Gson_example
package cn.kjxy.GSON; import java.util.List; import cn.kjxy.JSON.HttpHelpers; import com.google.gson ...
- 关于iOS自定义返回按钮右滑返回手势失效的解决:
在viewDidLoad方法里面添加下面这一句代码即可 self.navigationController.interactivePopGestureRecognizer.delegate=(id)s ...
- c++与c不太相同的一些地方2
1.一般全局变量放到cpp 文件里面,而不是.h 里面.要不然容易乱套,这个乱几次就好了,先记住这样一种编码规范. 以为大家都引入就比较麻烦,但是实现起来就只有cpp里面才有.毕竟.h是要被包含的文件 ...
- linux命令 --> pwd命令
关于 pwd 命名前面在cd命令中已经出现过啦!!不过还是简单的说一下吧! pwd命令简单的介绍: pwd - print name of current/working directory(这... ...