文档章节

AngularJS 路由的理解

tianyawhl
 tianyawhl
发布于 2016/06/24 11:39
字数 325
阅读 77
收藏 2

大漠老师的路由理解


首先新建一个基础的html,其中有些内容是固定的,固定的内容的可以有如<a ui-serf="home">home</a>的超链接,

有些是可以插入模板如含有ui-view的div <div ui-view=""></div>

如果是home页面,只要加入home页面的模板即可如下
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'tpls2/home.html'
    })

如进入home页面后还有子页面,即在home页面某处点击进入子页面,以list为例:在home模板的页面上也有些固定的内容,也有可插入模板<div ui-view=""></div>的div,home模板的链接要写成
<a ui-sref=".list" class="btn btn-primary">List</a>

    .state('home.list', {
        url: '/list',
        templateUrl: 'tpls2/home-list.html',
        controller: function($scope) {
            $scope.topics = ['Butterscotch', 'Black Current', 'Mango'];
        }
    })
//list页面即是在home模板的基础上加载home-list模板

关于about页面,about模板,about模板里面又含有左列和右列的模板,当about模板及内嵌的左列和又列的模板都加进去后才是一个完整的about页面

    .state('about', {
        url: '/about',
        views: {
            '': {
                templateUrl: 'tpls2/about.html'
            },
            'columnOne@about ': {
                template: '这里是第一列的内容'
            },
            'columnTwo@about ': {
                templateUrl: 'tpls2/table-data.html',
                controller: 'Controller'
            }
        }
    });

© 著作权归作者所有

共有 人打赏支持
tianyawhl
粉丝 3
博文 225
码字总数 114742
作品 0
常州
前端工程师
私信 提问
加载中

评论(4)

骑着猪上高速
骑着猪上高速

引用来自“大漠穷秋”的评论

噢,我祝你幸福。。。
好,祝你幸福44
tianyawhl
tianyawhl
大漠老师你课讲的真好,好像ng2又变成单向绑定了,是ng1好还是ng2好呢,我刚接触ng1
大漠穷秋
大漠穷秋
噢,我祝你幸福。。。
大漠穷秋
大漠穷秋
我去,我居然看到了引用。。。ng自带路由的核心缺陷是:不能嵌套路由。。。在ng2里面已经做了改进,ng2的路由是基于Component的路由,理论上可以支持无限嵌套。
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
使用 AngularJS 的路由和模板实现单页应用 (Single Page)

概述 单页应用现在越来越受欢迎。模拟单页应用程序行为的网站都能提供手机/平板电脑应用程序的感觉。Angular可以帮助我们轻松创建此类应用 简单应用 我们打算创建一个简单的应用,涉及主页,...

oschina
2014/06/20
20.7K
1
Angular 1 vs. Angular 2 深度比较

AngularJS 2 尽管还在Alpha阶段,但主要功能和文档已经发布。让我我们了解下Angular 1 和 2 的区别,以及新的设计目标将如何实现。 Angular 2 当前仍处于 Alpha/开发预览阶段,但是主要功能和...

oschina
2015/10/14
41.2K
36
Angular 2.0 调查:43% 选择 Webstorm 编辑器

这是 Jeff Whelpley 和 Patrick Stapleton 发布的博客,他们并不是全职的 Angular 团队成员,是 Angular 社区值得称赞的贡献者。本文是对所有用户都想知道的,关于 Angular 的一些总结。 几周...

oschina
2015/09/03
8.5K
14

没有更多内容

加载失败,请刷新页面

加载更多

中学生读《皮囊》有感相关体会4300字[图]

中学生读《皮囊》有感相关体会4300字[图]: 我们时常知道从哪里来,但很少知道自己要到哪里去,因为我们经常不认识自己,又怎能看见自己皮囊下最真实的面目?——题记 满怀欣喜去迎接五一,应...

原创小博客
15分钟前
2
0
java_集合

非并发集合 并发集合

grace_233
17分钟前
1
0
正则表达式匹配不包含

^((?!xxx).)*$

安小乐
28分钟前
1
0
python Windows tkinter应用开发3 列出目录的所有文件

在本章中,我们将编写程序来执行此操作。 1)选择文件夹。 2)在UI的标签部分打印该文件夹中的所有文件名(带文件扩展名)。 首先,修改selectFile函数以打开文件夹。主文件如下: from tki...

python测试开发人工智能安全
30分钟前
2
0
使用Laya引擎开发微信小游戏(上)

  使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏。      img      作者:马晓东,腾讯前端高级工程师。      微信小游戏的推出也快一年时间了,...

SEOwhywhy
35分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部