AngularJs的路由跳转配置

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_38791717/article/details/79956376
1.页面导航搭建
显示层//<li ng-class="{'active':curNav=='user'}">指向的是控制层
          <a href="#/userList">指向的是配置层
     <i class="material-icons">dashboard</i>      <p>管理员列表</p>      </a>     </li>

控制层//
//添加依赖注入$translate是添加翻译依赖(当页面有翻译需要的时候,比如中英文转换)
关于$rootScope和$scope的区别:$rootScope是针对全局作用域有效,而$scope只针对当前的controller有效

  $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据

$window是提供窗口对象,实现一系列对窗口的操作


app.controller('userListCtrl',function($translate,$rootScope,$scope,$http,$window,commonService){
$rootScope.curNav='user'
}
//通过工厂模式创建自定义服务,这里定义的是接口相关信息
app.factory('commonService',function($rootScope,$http,$translate,$window) {
    $rootScope.token = sessionStorage.token;
    $rootScope.commonUrl = JSON.parse(sessionStorage.commonUrl);
    $rootScope.commonRequest = function (method, url, data) {
        data.companyCode = sessionStorage.companyCode;
        data.languageCode = sessionStorage.lang;
        return $http({
            method: method,
            url: url,
            data: data,
            headers: {Authorization: $rootScope.token}
        }).success(function (res) {
            if (res.Code == '401') {
                var code = getQueryString('code');
                delCookie(code);
                localStorage.code = "";
                $window.location.href = JSON.parse(sessionStorage.commonUrl).adminLogin;
            }
        })
    };
    return {
        alertError: function (data) {
            $translate(['tip-title', 'btn-ok', 'systemError'])
                .then(function (ts) {
                    var btn = [ts['btn-ok']];
                    data = data || ts['systemError'];
                    layer.alert(data, {title: ts['tip-title'], btn: btn}, function () {
                        layer.closeAll();
                    });
                });
        },
        getAdminUserList: function (data) {
            var url = $rootScope.commonUrl.companyNext + "/GetAdminUserList";
            return $rootScope.commonRequest('post', url, data);
        }
    }
});

配置层(路由)

//创建模型

var app=angular.module('adminApp',['pascalprecht.translate','ngRoute','adminIndexCtrls']);
app.config(function($translateProvider){
    $translateProvider.useStaticFilesLoader({
        prefix: '/nextCompany/lang-',
        suffix: '.json?v=2018040901'
    });
    var lang=sessionStorage.lang;
    $translateProvider.preferredLanguage("zh-Hans");
});

app.config(function($routeProvider){
    $routeProvider.when('/userList',{
        templateUrl:getTemplateUrl("/nextCompany/template/adminUserGrid.html"),//指向本地页面路径
        controller:"userListCtrl"//指向控制层的controller
    })
});

以上就是我对angular路由的理解。请大家多多指正。


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页