AngualrJs路由

ImagineDranges

于 2017-08-14 17:26:01 发布

阅读量363

点赞数

分类专栏： web前端文章标签： anjularjs

本文链接：https://blog.csdn.net/ImagineDranges/article/details/77164223

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JS代码：

// Define `myApp` module
var app = angular.module('myApp', ['ui.router']);
//声明把$stateprovider路由引擎作为函数参数传人,为应用程序配置路由
app.config(function($stateProvider , $urlRouterProvider) {
    $urlRouterProvider.when("", "/home");
    $stateProvider
        .state("home", {
            url: "/home",
            views: {
                "": {
                    template: "<h1>HELLO!</h1>"
                },
                "test": {
                    templateUrl:'http://localhost:8080/king/userController/display2',
                }
            }
        })
        .state('page1', { 
            url: '/Page1',
            templateUrl:'http://localhost:8080/king/userController/display2',
            controller: function($scope, $state) {
                $scope.change = function() {
                    $state.go('detail');
                }
            }
        })
        .state('detail', { 
            url: '/detail',
            templateUrl:'../static/views/nestedViews/htmls/1/detail.html',
            controller: function($scope, $state) {
                    $scope.change = function() {
                        $state.go('1');
                    }
                }
        })
        .state('page2', {
            url: '/Page2',
            templateUrl: '../static/views/nestedViews/htmls/2/Page2.html',
            controller: function($scope, $state) {
                $scope.change = function() {
                    $state.go();
                }
            }
        })
        .state('page3', {
            url: '/Page3',
            templateUrl: '../static/views/nestedViews/htmls/3/Page3.html',
        })
        .state('3.child', {
        views: {
            'A' : {
                templateUrl:'../static/views/nestedViews/htmls/3/a.html'
            },
            'B' : {
                templateUrl:'../static/views/nestedViews/htmls/3/b.html'
            }
        }
        })
});
app.controller('MainController', function($scope , $http) {
    $scope.ulList = [
        {
            sref: "page1",
            name: "我的页",
        },
        {
            sref: "page2",
            name: "第二页",
        },
        {
            sref: "page3",
            name: "第三页",
        }
    ];
    $scope.headName = "老詹的小破酒馆";
    $scope.titleName = "小詹的篮球梦";
});

app.directive("header",function(){
    return{
        restrict: 'EAC',
        transclude: true,
        templateUrl:'../static/views/nestedViews/htmls/pa/head.html'
    }
});
app.directive("nav",function(){
    return{
        restrict: 'EAC',
        transclude: true,
        templateUrl:'../static/views/nestedViews/htmls/pa/nav.html'
    }
});
app.directive("footer",function(){
    return{
        restrict: 'EAC',
        transclude: true,
        templateUrl:'../static/views/nestedViews/htmls/pa/footer.html'
    }
});

html:

<body ng-controller="MainController">
        <!--头部  -->
        <header></header>
        <!--左侧栏  -->
        <nav></nav>
        <!--主内容  -->
        <div ui-view="test"></div>
        <!--底部内容  -->
        <footer></footer>   
</body>

注意的一点是： templateUrl不能是web-inf文件夹下的。（把那些限制访问的资源（比如说jsp源代码）放到Web应用的WEB-INF目录下，对于/web-INF/及其子目录，不允许直接的公共访问，所以就可以起到保护这些代码未经授权的访问和窥视，更好的保护了源代码。）

ImagineDranges

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngualrJs路由

JS代码：// Define `myApp` modulevar app = angular.module('myApp', ['ui.router']);//声明把$stateprovider路由引擎作为函数参数传人,为应用程序配置路由app.config(function($stateProvider , $urlRouterProvider) { $urlRouterProvid
复制链接

扫一扫

专栏目录