最近开始学习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. git reset and git checkout

    git reset --hard <commit>: 1.替换引用的指向.引用指向新的提交ID; 2.替换暂存区.替换后,暂存区的内容和引用指向的文件夹树一致; 3.替换工作区.替换后,工 ...

  2. android136 360 拖拽

    差补器原理: 图标拖拽:     activity_drag_view.xml <?xml version="1.0" encoding="utf-8"? ...

  3. 转--23种设计模式的搞笑解释(后续放逐一C++解释版本)

    创建型模式 1.FACTORY —追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说“来四个鸡翅”就行了.麦当劳和肯德 ...

  4. 谈谈MVVM和链式网络请求架构

    前言 前一段时间一直在学习iOS的架构.为什么呢? 公司的架构一直是MVC,当我们正式上线的时候,项目已经有了超十万行代码.主要的VC一般都有2000行代码以上. 关键是,目前版本我们只做了三分之一的 ...

  5. GoF的23个经典设计模式

    以文本和思维导图的方式简明扼要的介绍了GoF的23个经典设计模式,可当成学习设计模式的一个小手册,偶尔看一下,说不定会对大师的思想精髓有新的领悟. GoF(“四人帮”,又称Gang of Four,即 ...

  6. 比较js中创建对象的几种方式

    1.工厂模式 function createObj(name, sex){ var obj = new Object(); obj.name = name; obj.sex = sex; obj.sa ...

  7. Android NDK调试方式之一： adb logcat

    查看程序执行过程中所打印的log信息,用于辅助调试排除代码错误. 一.采用NDK安装包下Samples/hello-jni工程做实验 1)修改jni/hello-jni.c文件 #include &l ...

  8. Pester: Unit Testing for PowerShell

    Pester is a BDD inspired testing framework for PowerShell just like Jasmine is on the JavaScript sid ...

  9. [转]div里table居中的问题 Div与body顶部间隙

    本文转自:http://www.cnblogs.com/jinhui/archive/2008/09/24/1297729.html 将div的text-align设为center,然后将table的 ...

  10. jQuery 判断div是否shown

    // Checks for display:[none|block], ignores visible:[true|false] $(element).is(":visible") ...