文档章节

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
粉丝 2
博文 214
码字总数 108462
作品 0
常州
前端工程师
加载中

评论(4)

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

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

噢,我祝你幸福。。。
好,祝你幸福44
tianyawhl
tianyawhl
大漠老师你课讲的真好,好像ng2又变成单向绑定了,是ng1好还是ng2好呢,我刚接触ng1
大漠穷秋
大漠穷秋
噢,我祝你幸福。。。
大漠穷秋
大漠穷秋
我去,我居然看到了引用。。。ng自带路由的核心缺陷是:不能嵌套路由。。。在ng2里面已经做了改进,ng2的路由是基于Component的路由,理论上可以支持无限嵌套。
Angular.js 相关记录

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

彭博
2014/04/25
0
2
理解AngularJS ngRoute

一般来说,我们认为AngularJS是一套前端的MVC框架。那么,为了实现视图的中转,肯定会涉及到路由的概念。这里我们就来说说有关AngularJS的路由——ngRoute。 序 个人了解到AngularJS,是由于...

maweitao
2014/08/27
0
0
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
06/02
0
0
7本学习AngularJS的免费电子书

电子书可以给我们一个有结构有组织的方式学习新的知识。学习 AngularJS也一样。现在最棒的事情莫过于电子书中提供大量实践练习,帮助我们理解各种方面。 让我们度下面7本书探究 AngularJS 吧...

咲晚杍
2015/01/28
0
0
AngularJS 常见面试问题

问题来源:如何衡量一个人的 AngularJS 水平? ng-if 跟 ng-show/hide 的区别有哪些? 第一点区别是, 在后面表达式为 true 的时候才创建这个 dom 节点, 是初始时就创建了,用 和 来控制显示...

阿K1225
2017/10/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

各种开源汇编、反汇编引擎的非专业比较

由于平时业余兴趣和工作需要,研究过并使用过时下流行的各种开源的x86/64汇编和反汇编引擎。如果要对汇编指令进行分析和操作,要么自己研究Intel指令集写一个,要么就用现成的开源引擎。自己...

simpower
27分钟前
3
0
(4)添加vue-router

(4)添加vue-router 1 安装vue-router cnpm install vue-router --save 2 页面准备 新建目录/src/views/common,此目录下面建立4个组件404.vue、home.vue、login.vue、theme.vue。每个文件...

neumeng
30分钟前
2
0
高可用性系统在大众点评的实践与经验

背景 所谓高可用性指的是系统如何保证比较高的服务可用率,在出现故障时如何应对,包括及时发现、故障转移、尽快从故障中恢复等等。本文主要以点评的交易系统的演进为主来描述如何做到高可用...

Skqing
37分钟前
3
0
Network protocols

The network stack does serveral seemingly-impossible things. It does reliable transmission over our unreliable networks, usually without any detactable hiccups. It adapts smooth......

nao
39分钟前
1
0
Android 生命周期方法

1,onCreate(); 2,onStart(); 3,onResume(); //打开页面,前三个方法自动执行 4,onPause(); 5,onStop(); //打开其他页面,前一个页面执行这俩方法 6,onRestart(); //onStart(),onResume //当关闭...

lanyu96
46分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部