最近开始学习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. Ajax防止重复提交

    转:http://www.cnblogs.com/jinguangguo/archive/2013/05/20/3086925.html 谈谈防止重复点击提交   首先说说防止重复点击提交是什么意思. ...

  2. java_jdbc_batch处理_主键id获取

    //create1 速度较慢,create2较快,但是要根据数据库不同来决定 //ps = conn.prepareStatement(sql, Statement.RETURN_GENERATED_ ...

  3. 转--object-C 与lua使用wax交互

    [51CTO独家译文]2011年6月的编程语言排行榜Lua语言一军突起,一举进入前十名.这与一年前苹果决定在iOS系统上使用Lua语言密不可分.但是,你了解如何用Lua语言在iOS上开发应用吗?51C ...

  4. UNIX V6内核源码剖析——unix v6 全貌

    1. UNIX V6 运行硬件环境——PDP-11/40 PDP-11/40指令和数据都是以16比特为单位.对它而言,一个字的宽度为16比特. PDP-11/40以及周边设备的寄存器被映射到内存最高位 ...

  5. 实现虚拟机上面的linux系统和windows主机的通信

    一:配置静态ip 1:使用startx命名切换到图形化用户界面: 2:在“开始”——“系统设置”——“网络”——eth0 将通过dchp自动获取ip改为静态绑定ip ip地址:填入你要给的ip,需要与 ...

  6. Activiti 工作流会签开发设计思路

    http://man1900.iteye.com/blog/1607753 在流程业务管理中,任务是通常都是由一个人去处理的,而多个人同时处理一个任务,这种任务我们称之为会签任务.这种业务需求也很常见 ...

  7. ASP伪静态页面(不需要通过iis+ISAPI_Rewrite)

    很简单的教程,献给喜欢SEO的朋友们. 不需要通过iis+ISAPI_Rewrite做基于IIS的url rewrite 一.数据库很简单使用ACCESS,Data.mdb建立一个表Article,三 ...

  8. 《JAVA核心技术卷 卷1 基础知识》

    第一卷 关键字:体系结构中立,可移植性,高性能,多线程 体系机构中立:通过解释字节码实现,优点是,让JAVA能在很多机器上运行.缺点是运行速度很慢. 可移植性:因为JAVA的基本数据类型有固定的大小. ...

  9. 对象创建型模式------Builder(生成器）

    本文系转载,转载地址http://blog.sina.com.cn/s/blog_59b6af690100zj3l.html,只供自己学习使用. 假设现在有三种产品,是玩具,都是由三部分组成,头,身体 ...

  10. C# IO操作（四）大文件拷贝（文件流的使用）、文件编码

         大文件拷贝(文件流的使用).文件编码 首先说一下大文件拷贝和文件流,因为计算机的内存资源是有限的,面对几个G甚至更大的文件,需要通过程序来完成拷贝,就需要用到文件流(因为我们无法做到把文件一 ...