最近开始学习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在windows下clone、pull或者push内存溢出的解决办法

    发现国内使用git来真正管理源码的人不多,特别是大数据量的源码,今天使用git clone android的源码时突然出现remote out of memery,解决办法: git config - ...

  2. C# 创建、安装和卸载Windows服务程序

    1.新建一个windows服务程序. 2.点击这个服务类,从工具箱中加入一个Timer控件,右键这个Timer控件 命名为 timerOrderDeductionDetailJob,Enable设为T ...

  3. net.ipv4.tcp_tw_recycle

    原创 2016-03-07 CFC4N 运维帮 本文为翻译英文BLOG<Coping with the TCP TIME-WAIT state on busy Linux servers> ...

  4. valgrind 生成mysqld调用图之 select now()跟踪

    1.mysqld起动方式: 1.mysqld以root用户运行 valgrind --tool=callgrind --separate-threads=yes  --trace-children=y ...

  5. perl指针引用

    http://bbs.chinaunix.net/forum-viewthread-tid-570031.html

  6. 数据库通用Jdbc操作

    public class JdbcUtil { /** * 关闭一个数据库链接 * @param conn */ public static void closeConnection(Connecti ...

  7. mysql的数据导入导出

    1.Navicat for Mysql XML导出导入格式支持二进制数据:虽然同步数据人眼看不出区别,但是java尝试读取数据时,报datetime字段取出的值为“0000-00-00 00:00:0 ...

  8. Elasticsearch aggregations API

    聚合能力 Aggregation API 类似 SQL 中的 GROUP BY 语句,可以以某个字段来进行分组. Aggregation API 支持分级分组,多级的分组过程是由外到里的. Aggre ...

  9. C语言中 指针与结构体

    就像数组一样,指向结构体的指针存储了结构体第一个元素的内存地址.与数组指针一样,结构体的指针必须声明和结构体类型保持一致,或者声明为void类型. 1 2 3 4 5 6 7 8 9 10 11 12 ...

  10. Oracle报错：ORA-01747: user.table.column, table.column 或列说明无效

    1.检查sql书写正确性 2.如果sql书写正确,则是由于数据库列名起的不好引起的,名字用到了数据库的关键字. 如果列很多,又不好确定是哪个列名使用了关键字,以下建议可供参考: 我用以下方法定位 se ...