这一次主要的学习内容是 ng-route(本次的项目由于种种原因吧,我们采用了ui-router,而不是原生的ng-route)

* 配置路由。
 * 注意这里采用的是ui-router这个路由,而不是ng原生的路由。
 * ng原生的路由不能支持嵌套视图,所以这里必须使用ui-router。

1、那么,首先我们得 依赖一下ui-router 这个库。代码如下

var routerApp = angular.module('routerApp',['ui.router']);

2、下面我们就开始配置我们的 路由以及状态设置

//配置路由、状态
routerApp.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.when("", "/PageTab"); $stateProvider
.state("PageTab", {
url: "/PageTab",
templateUrl: "./tpls/PageTab.html"
})
.state("PageTab.Page1", {
url:"/Page1",
templateUrl: "./tpls/Page1.html"
})
.state("PageTab.Page2", {
url:"/Page2",
templateUrl: "./tpls/Page2.html"
})
.state("PageTab.Page3", {
url:"/Page3",
templateUrl: "./tpls/Page3.html"
});
});

然后再 创建新的 模板文件。从而实施 最基本的 router 的操作。

关于学习angularJS 的 心里路程(二)的更多相关文章

  1. 具备 jQuery 经验的人如何学习AngularJS(附:学习路径)

    这是一个来自stackoverflow的问答,三哥直接把最佳回答搬过来了. 都说AngularJS的学习曲线异常诡异~~~ Q: “Thinking in AngularJS” if I have a ...

  2. 学习AngularJs:Directive指令用法(完整版)

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  3. Java菜鸟学习笔记--数组篇(三):二维数组

    定义 //1.二维数组的定义 //2.二维数组的内存空间 //3.不规则数组 package me.array; public class Array2Demo{ public static void ...

  4. JavaScript学习笔记之数组(二)

    JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...

  5. 学习Angularjs向数据库添加数据

    今天学习angularjs向数据库添加数据. 学习此篇,得从以往几篇开始,因为那还有创建数据表等演示. 现在来创建一个添加的存储过程: SET ANSI_NULLS ON GO SET QUOTED_ ...

  6. 学习Spring Boot:(二十五)使用 Redis 实现数据缓存

    前言 由于 Ehcache 存在于单个 java 程序的进程中,无法满足多个程序分布式的情况,需要将多个服务器的缓存集中起来进行管理,需要一个缓存的寄存器,这里使用的是 Redis. 正文 当应用程序 ...

  7. 深度学习课程笔记(十二) Matrix Capsule

    深度学习课程笔记(十二) Matrix Capsule with EM Routing  2018-02-02  21:21:09  Paper: https://openreview.net/pdf ...

  8. vue2.0学习笔记之路由(二)路由嵌套+动画

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

  9. vue2.0学习笔记之路由(二)路由嵌套

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

随机推荐

  1. [转]【无私分享:ASP.NET CORE 项目实战(第九章)】创建区域Areas,添加TagHelper

    本文转自:http://www.cnblogs.com/zhangxiaolei521/p/5808417.html 目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 在Asp ...

  2. 针对github权限导致hexo部署失败的解决方案

    hexo deplay出错,没有反应 今天想在自己的另一个博客地址(链接地址)上更新一下博客,没想到hexo deplay没有反应,以下是解决过程:(更新于 2016-12-24 11:17:43) ...

  3. 骨骼蒙皮动画算法(Linear Blending Skinning)

    交互式变形是编辑几何模型的重要手段,目前出现了许多实时.直观的交互式变形方法.本文介绍一种利用线性混合蒙皮(Linear Blending Skinning,LBS)技术来实现网格变形的方法,线性混合 ...

  4. PHP数组操作

    PHP数组 1.数字索引数组 1.1创建一个数组 php中最常用的两个类型是:数组,字符串.数组也分为两种,一种是数字索引,一种是关键是索引,关键字索引有点像python中字典的意思.数字索引类型的数 ...

  5. [No000075]有没有安全的工作?

    如果你经常使用互联网,可能知道有一种东西叫做Flash. 它是一种软件,用来制作网页游戏.动画,以及视频播放器.只要观看网络视频,基本都会用到它. 七八年前,它是最热门的互联网技术之一.如果不安装Fl ...

  6. http、tcp、udp、OAUTH2.0网络协议区别

                    一.先来一个讲TCP.UDP和HTTP关系的 1.TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层. 在网络层有IP协议.ICMP协议.ARP协议.RAR ...

  7. [CareerCup] 2.5 Add Two Numbers 两个数字相加

    2.5 You have two numbers represented by a linked list, where each node contains a single digit. The ...

  8. 《Java学习笔记(第8版)》学习指导

    <Java学习笔记(第8版)>学习指导 目录 图书简况 学习指导 第一章 Java平台概论 第二章 从JDK到IDE 第三章 基础语法 第四章 认识对象 第五章 对象封装 第六章 继承与多 ...

  9. 使用html2canvas实现浏览器截图

    最近做项目为了解决全局异常信息记录,研究了一下浏览器全屏截图功能,方便用户发现异常时能够快速截图发给管理员.最终记录的异常信息如下,上面的[截图报告管理员]就是使用html2canvas前端插件实现的 ...

  10. FineUI(专业版)实现百变通知框(无JavaScript代码)!

    博客园已经越来越不公正了,居然说我这篇文章没有实质的内容!! 我其实真的想问哪些通篇几十个字,没任何代码和技术分享,嚷嚷着送书的文章的就能雄霸博客园首页几天,我这篇文章偏偏就为管理员所容不下. 其实我 ...