这一次主要的学习内容是 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. android edittext属性说明

    将EditText内容转换为字符串: EditText.getText().toString() <EditText android:id="@+id/edt_month" ...

  2. linux中tar之解压和压缩常用

    我们知道在windows中解压和压缩有两个非常强大的工具winRar和国产的好压工具,在linux中也有一款强大的解压和压缩工具.那就是大名鼎鼎的tar.我们首先看看tar命令的使用格式 语法:tar ...

  3. struts2的拦截器(Interceptor)与过滤器(Filter)

    一.拦截器与过滤器的区别: 1.filter基于回调函数,我们需要实现的filter接口中doFilter方法就是回调函数,而interceptor则基于Java本身的反射机制,这是两者最本质的区别. ...

  4. Vector3.forward

    这里我要说的就是Vector3.forward ,它等价与 new Vector3(0,0,1):它并不是一个坐标,它是一个标准向量,方向是沿着Z轴向前.这样平移一次的距离就是1米, 如果 Vecto ...

  5. 2016中国·西安“华山杯”WriteUp- SeeSea

    题目打包下载:https://yunpan.cn/ckyrKxHJDPAIN (提取码:bbaf) Web 1.签到(10) 扫码回复 hs_ctf拿flag, 套路题. flag_Xd{hSh_ct ...

  6. mybatis 使用经验小结

    一.多数据源问题 主要思路是把dataSource.sqlSesstionFactory.MapperScannerConfigurer在配置中区分开,各Mapper对应的包名.类名区分开 <? ...

  7. jQuery旋转木马仿3D效果的图片切换特效代码

    用jQuery实现的一款仿3D效果的图片切换特效代码,类似旋转木马一样,幻灯图片以三维视觉上下滑动切换,效果很酷炫,兼容IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜 ...

  8. Apache Shiro系列一,概述 —— 初识

    一.什么是Shiro Apache Shiro是一个强大.灵活.开源的安全框架,它支持用户认证.权限控制.企业会话管理以及加密等. Apache Shiro的第一个也是最重要的一个目标就是易于使用和理 ...

  9. golang使用yaml格式解析构建配置文件

    现在主流的配置文件格式有这么几种,xml.yaml.config…  xml就算了,太挫了,太土, 太繁琐… config 就是mysql,apache my.cnf的那种格式,这个格式适合功能分层, ...

  10. url 中 # ? & 的作用

    1. # 10年9月,twitter改版.一个显著变化,就是URL加入了"#!"符号.比如,改版前的用户主页网址为http://twitter.com/username改版后,就变 ...