最近开始学习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 的学习笔记(实现单页应用)的更多相关文章

  1. Angular.js之指令学习笔记

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  2. Angular.js之Router学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 【09-23】js原型继承学习笔记

    js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...

  4. Underscore.js 源码学习笔记（下）

    上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...

  5. Underscore.js 源码学习笔记（上）

    版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}());  这样的东西,我们应该知道这是一个 IIFE(立即执行 ...

  6. 浏览器中js执行机制学习笔记

    浏览器中js执行机制学习笔记 RiverSouthMan关注 0.0772019.05.15 20:56:37字数 872阅读 291 同步任务 当一个脚本第一次执行的时候,js引擎会解析这段代码,并 ...

  7. 纯JS实现KeyboardNav(学习笔记)一

    纯JS实现KeyboardNav(学习笔记)一 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 GitHub项目源码 预览地址 最终效果 KeyboardNav使用指南 ...

  8. 纯JS实现KeyboardNav(学习笔记)二

    纯JS实现KeyboardNav(学习笔记)二 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码 ...

  9. lfs（systemd版本）学习笔记-第3页

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! lfs(systemd)学习笔记-第2页 的地址:https://www.cnblogs.com/renren-study-no ...

随机推荐

  1. Java Annotations: Explored & Explained--转载

    原文地址:http://www.javacodegeeks.com/2012/08/java-annotations-explored-explained.html One of the many w ...

  2. Making the impossible: 3 nodes intercontinental replication--转载

    原文:http://www.percona.com/blog/2012/01/11/making-the-impossible-3-nodes-intercontinental-replication ...

  3. Day03 - Python 函数

    1. 函数简介 函数是组织好的,可重复使用的,用来实现单一或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.Python提供了许多内建函数,比如print():也可以自己创建函数,这 ...

  4. 在IOS中 NSRange类详解

    NSRange的定义 typedef struct _NSRange { NSUInteger location; NSUInteger length; } NSRange; NSRange是一个结构 ...

  5. 通过代码设置button中文字的对齐方式

    // button.titleLabel.textAlignment = NSTextAlignmentLeft; 这句无效 button.contentHorizontalAlignment = U ...

  6. 写实例学习html5 WebSocket

    WebSocket简介  WebSocket是html5的重要特性.它是HTML5一种新的协议,实现了浏览器与服务器全双工通信(full-duplex).使服务器可以主动传送数据给客户端,对构建实时w ...

  7. Centos7 安装mongodb3.2.9 过程

    1:wget --no-check-certificate  https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-amazon-3.2.9.tg ...

  8. oracle学习总结1

    1:解锁用户alter user 用户名 account unlock; 2:获取系统时间.随机数select sysdate, sys_guid() from dual; 3:起别名,使可读性更强, ...

  9. 让ubuntu开启ssh服务以及让vi/vim正常使用方向键与退格键

    VIM 修复方法: 安装vim full版本,在full版本下键盘正常,安装好后同样使用vi命令.ubuntu预装的是vim tiny版本,而需要的是vim full版本.执行下面的语句安装vim f ...

  10. HTTPS协议学习总结

    目录 一:什么是HTTPS协议?二:客户端与服务端如何建立HTTPS协议连接?三:证书.加密协议.信息摘要.签名算法概念解释与关系梳理四:低版本操作系统作为客户端发送HTTPS失败分析五:参考资料   ...