AngularJS 路由的理解
AngularJS 路由的理解
tianyawhl 发表于1年前
AngularJS 路由的理解
  • 发表于 1年前
  • 阅读 72
  • 收藏 2
  • 点赞 0
  • 评论 4
摘要: AngularJS 路由 非常方便的切换页面,AngularJS自带的路由比较有局限性,angular-ui路由比较灵活可以嵌套

大漠老师的路由理解


首先新建一个基础的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'
            }
        }
    });

共有 人打赏支持
粉丝 2
博文 155
码字总数 58542
评论 (4)
大漠穷秋
我去,我居然看到了引用。。。ng自带路由的核心缺陷是:不能嵌套路由。。。在ng2里面已经做了改进,ng2的路由是基于Component的路由,理论上可以支持无限嵌套。
大漠穷秋
噢,我祝你幸福。。。
tianyawhl
大漠老师你课讲的真好,好像ng2又变成单向绑定了,是ng1好还是ng2好呢,我刚接触ng1
骑着猪上高速

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

噢,我祝你幸福。。。
好,祝你幸福44
×
tianyawhl
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: