AngularJs的路由跳转配置

原创 2018年04月16日 11:32:53
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路由的理解。请大家多多指正。


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_38791717/article/details/79956376

再议EPR实施成功率为零

  编者按   2000年9月26日,本报曾经刊登过一篇名为“ERP成功几率为零”的文章,在国内工商界与软件界引起了很大反响。但这一问题的本质是什么?如何解决?时至今日仍没有一个完整的答案。目前,国内...
  • jiangtao
  • jiangtao
  • 2001-10-25 10:25:00
  • 2591

用angularJS的路由实现页面的跳转并传参

最近在解决这个问题,有没有会的???
  • Saikonoyume
  • Saikonoyume
  • 2016-11-03 11:43:14
  • 1668

angularJS 路由跳转(带参数)

如果需要从一个页面调到另一个页面,并且带参数,比如买完商品后跳转到支付页面,并且传一些用户和金额之类的参数。 从页面A跳转到页面B A的Controller里跳转部分 $state.go("app.B...
  • qq_34527715
  • qq_34527715
  • 2017-04-07 10:57:42
  • 2996

angularjs单一页面内设置跳转路由

单一页面内设置跳转路由鉴于现在很多应用的应用功能以及场景都非常简单,如果还按照以前的思路,每个页面做一个html,通过路由进行跳转,不仅在时间上会有延迟,在某些特殊的浏览器(最典型的如微信内置浏览器)...
  • xuexiiphone
  • xuexiiphone
  • 2016-07-04 18:46:36
  • 9515

angular 1.6 及以上路由无法跳转问题

angularjs1.6及后面的版本 经常在使用yeoman构建angularjs项目和没有使用yeoman构建的时候会出现路由无法跳转的问题 正确的路由应该为: 错误的路由为: ...
  • Name_CHC
  • Name_CHC
  • 2017-11-28 11:48:41
  • 425

angularJS系列之监听路由变化$location和$route实例

直接上代码 //增加路由跳转时的判断,如果是同一个页面重新刷新,则让其跳转到相应的页面。 app.run(['$rootScope', '$window', '$location',...
  • xuexiiphone
  • xuexiiphone
  • 2016-07-17 18:05:40
  • 4511

用AngularJS路由实现web页面跳转

&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt;    &amp;lt...
  • Luokaiqin520
  • Luokaiqin520
  • 2018-02-26 09:19:28
  • 40

AngularJS路由之ui-router(四)$state.go页面跳转

路由是这么定义的: ? 1 2 3 4 5 6 7 8 9 10 11 $stateProvider    .state('page1', {   ...
  • u011127019
  • u011127019
  • 2017-06-24 11:11:01
  • 4727

关于angularjs中使用路由后子锚点的链接跳转问题

2.0.1
  • cuiyong_xu
  • cuiyong_xu
  • 2016-11-01 13:23:06
  • 2348

angularjs:路由设置

mycrm项目登录后,进入index界面,设计成左边是一个菜单栏,右边作为一个详情页面,前端采用了angular后使用路由可以很好的解决这个问题; 图1-1 图1-2 具体设计看下面代码...
  • ljxbbss
  • ljxbbss
  • 2017-09-05 17:33:26
  • 526
收藏助手
不良信息举报
您举报文章:AngularJs的路由跳转配置
举报原因:
原因补充:

(最多只允许输入30个字)