侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

AngularJS 路由的理解

2024-05-15 星期三 / 0 评论 / 0 点赞 / 86 阅读 / 2622 字

大漠老师的路由理解 首先新建一个基础的html,其中有些内容是固定的,固定的内容的可以有如<a ui-serf="home">home</a>的超链接, 有些是可以插入模板如含有ui-view的di

大漠老师的路由理解


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

广告 广告

评论区