最近开始学习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. C#利用lambda表达式将函数作为参数或属性跨类传递

    在编码时,由于开始是在winform下进行简单的测试开发的,后来代码多了,就想分到不同的类里边去,可是因为原来的测试是在同一个form下的,所以对于函数调用可以很方便,而一旦跨类之后,就会发现,这函数 ...

  2. 图像的稀疏表示——ScSPM和LLC的总结

    前言 上一篇提到了SPM.这篇博客打算把ScSPM和LLC一起总结了.ScSPM和LLC其实都是对SPM的改进.这些技术,都是对特征的描述.它们既没有创造出新的特征(都是提取SIFT,HOG, RGB ...

  3. java并行调度框架封装及演示样例

    參考资料:  阿里巴巴开源项目 CobarClient  源代码实现. 分享作者:闫建忠 分享时间:2014年5月7日 ---------------------------------------- ...

  4. ValueStack基础：OGNL

    ValueStack基础:OGNL 要了解ValueStack,必须先理解OGNL(Object Graphic Navigatino Language)! OGNL是Struts2中使用的一种表达式 ...

  5. 文件和目录之umask函数

    本篇博文内容摘自<UNIX环境高级编程>(第二版),仅作个人学习记录所用.关于本书可参考:http://www.apuebook.com/. umask函数为进程设置文件模式创建屏蔽字,并 ...

  6. Qt中使用QProcess备份和恢复Mysql数据库

    分类: Qt2011-02-18 21:35 1395人阅读 评论(3) 收藏 举报 qtmysql数据库windowspathcmd . 使用Qt做MySQL数据库开发,遇到需要备份.还原数据库的问 ...

  7. HDU 4259 - Double Dealing（求循环节）

    首先将扑克牌进行一次置换,然后分解出所有的循环节,所有循环节的扑克牌个数的最小公倍数即为答案 #include <stdio.h> #include <string.h> #i ...

  8. 批量除去php页面的bom，页面meta跑到body中就是这个问题

    <?php if (isset($_GET['dir'])){ //设置文件目录 $basedir=$_GET['dir']; }else{ $basedir = '.'; } $auto = ...

  9. ambassador docker container linking

    http://docs.docker.com/articles/ambassador_pattern_linking/

  10. iOS app 上架的流程与注意点

    这里整理了两个关于苹果应用商店上架方面的资料: 一个是app上架的流程,里面包含各个环节的截图,比较详细. 流程介绍链接   (提取码:52a4) 第二个是app上架的一些注意点,这里面主要说的是上架 ...