这一次主要的学习内容是 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. node.js自动化测试断言包assert的方法说明

    参考以下文档 http://yijiebuyi.com/blog/ca2c0edf447624bd4d527490c9fce369.html http://www.cnblogs.com/softlo ...

  2. Javascript 中的严格模式

    原文:http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html 一.概述 除了正常运行模式,ECMAscript 5添加了第 ...

  3. 发现 OpenStack: 架构、功能和交互

    原文:http://www.ibm.com/developerworks/cn/cloud/library/cl-openstack-overview/index.html OpenStack 是由 ...

  4. extjs学习资料

    ExtJs 入门教程 1.Extjs5.1.0教程云盘地址 http://pan.baidu.com/s/1qYhHiEw 2.Extjs3.x如下:   ExtJs 入门教程一[学习方法] ExtJ ...

  5. Vsphere初试——基本安装

    现有工具: 一台Dell PowerEdge R820服务器 VMware-VMvisor-Installer-5.5.0.update01-1623387.x86_64(ESXi).iso VMwa ...

  6. 微软准备开源PowerShell

    微软有计划在近期内开源PowerShell 近日微软再次在向开源投出橄榄枝, PowerShell是面向Windows和Windows Server的自动化平台和脚本语言,帮助用户简化系统的管理.在纳 ...

  7. selenium自动化-java-封装断言

    封装的断言. 1 package com.baidu.www; import org.testng.Assert; /* * 封装断言 */ public class assertion { stat ...

  8. linux系统下的权限知识梳理

    下面对linux系统下的有关权限操作命令进行了梳理总结,并配合简单实例进行说明.linux中除了常见的读(r).写(w).执行(x)权限以外,还有其他的一些特殊或隐藏权限,熟练掌握这些权限知识的使用, ...

  9. Xcode8与iOS10那些事

    一.证书管理 用Xcode8打开工程后,比较明显的就是下图了,这个是苹果的新特性,可以帮助我们自动管理证书.建议大家勾选这个Automatically manage signing(Ps.但是在bea ...

  10. AngularJS之开发组件的一些思路

    欢迎大家指导与讨论 : ) 一 .前言 由于笔者水平有限,在这里只是分享自己开发组件的一些思路~ 摘要:无UI组件类.有UI组件类.有UI组件类型2.欢迎拍砖吐槽 O(∩_∩)O 二 .无UI组件类 ...