关于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 ...
随机推荐
- Redis缓存 ava-Jedis操作Redis，基本操作以及 实现对象保存
源代码下载: http://download.csdn.net/detail/jiangtao_st/7623113 1.Maven配置 <dependency> <groupId& ...
- android 基站定位
package cn.LocationStation; import java.io.BufferedReader; import java.io.InputStream; import java.i ...
- 【C/C++多线程编程之六】pthread相互排斥量
多线程编程之线程同步相互排斥量 Pthread是 POSIX threads 的简称,是POSIX的线程标准. Pthread线程同步指多个线程协调地,有序地同步使用共享 ...
- offsetTop和scrollTop的差别
近期想写个组件,结果被这两个属性搞的有点晕,查了下文档和资料,对这两个属性总结例如以下: 一直以来对offsetLeft,offsetTop,scrollLeft,scrollTop这几个方法非常迷糊 ...
- [原创]如何写好SqlHelper
所有写数据库应用的都会遇到SqlHelper.每个人实现的也不同,网上现成的例子也很多.但在实际操作中,大部分都不实用.什么样的才是实用的?答:适合应用场景的! 下面来介绍下我写的一个关于Oracle ...
- MySQL（1）：启动MySQL服务，客户端连接服务
1.安装完毕mysql之后,在windows中找到服务,启动MySQL服务(服务端)(mysqld.exe) 2.接下来启动客户端(mysql.exe) 这里参数中: -hlocalhost 表示主机 ...
- CSS3 动态魔方的展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于运行SWT程序遇到的一个错误的总结
具体的错误信息如下: Exception in thread "main" java.lang.SecurityException: SHA1 digest error for o ...
- uva - 133 The Dole Queue（成环状态下的循环走步方法）
类型:循环走步 #include <iostream> #include <sstream> #include <cstdio> #include <cstr ...
- JavaScript - Base64 编码解码
以下代码摘自:http://cryptojs.altervista.org/encoding/Base64.html function base64_encode(str) { if (window. ...