标签: angularjs-routing

我正在服务器端进行身份验证和授权.

在angularJs中,我正在使用routeProvider进行路由.

$routeProvider.
        when('/', {
            templateUrl: 'partials/_home',
            controller: 'HomeCtrl'
        }).
        when('/home', {
            templateUrl: 'partials/_home',
            controller: 'HomeCtrl'
        }).
        when('/users', {
            templateUrl: 'partials/_users',
            controller: 'UserCtrl'
        }).
        when('/users/:id', {
            templateUrl: 'partials/_userForm',
            controller: 'UserCtrl'
        }).
        otherwise({
            redirectTo: '/'
        });

这里是要解决的问题,当我得到403角度没有显示服务器页面时,它只是没有做任何事情.

有人建议如何处理这个问题吗？

我必须同时发出所有请求的队列,而不必等待angularjs中先前请求的响应.
我有一个加载函数,每当我更改url路由时显示加载div,但是在该函数中不能生成队列的arrray.

任何人都可以告诉我每次更改网址路由时在angularjs路由中调用哪个函数？
HEre是路线代码:

angular.module('myApp', ['myApp.directives', 'myApp.services', 'myApp.filters']).config(
    function($routeProvider, $locationProvider, $httpProvider) {
        $locationProvider.html5Mode(false);
        $locationProvider.hashPrefix('!');

        $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

        var loading = function (data, headersGetter) {
            $('loadingDiv').show();
            return data;
        };
        $httpProvider.defaults.transformRequest.push(loading);

        $routeProvider.
        when('/', {
            templateUrl: 'elements/home/home.html',
            controller: homeCtrl
        });
   });

我是AngularJS的新手,我正在尝试调试我的一些路线,但我不知道如何显示/查看传递给routeprovider的路线.

例如,如果我当前的路由设置如下;

reportFormsApp.config(function ($routeProvider) {
    $routeProvider
        .when("/Reporting", { templateUrl: "ReportForm/rfTemplate.html", controller: "rfController" })
        .when("/Dashboard", { templateUrl: "DashboardForm/dfTemplate.html", controller: "dfController" })
        .when("/Analysis",  { templateUrl: "AnalysisForm/afTemplate.html", controller: "afController" })
        .otherwise({ redirectTo: "/Reporting" })
});

调试时我想破解代码并在控制台日志中输入类似的东西;

$routeProvider.path

显示由".when"评估的路线.

我对Angular很新,而现在我只是试图让我的所有路线都按照我的意愿设置和工作.

设置: 当用户导航到某些页面时(/settings对于此示例),应用程序应检查是否有用户已登录.如果有照常继续.否则,用户应该转到登录页面(/login).

我想要的: 用户成功登录后,应该转到他们最初尝试访问的页面(/settings)

我的问题: 是否有"Angular方式"记住用户试图去的地方？

相关代码:

app.js

  .when('/settings', {
      templateUrl: '/views/auth/settings.html',
      controller: 'SettingsCtrl',
      resolve: {
        currentUser: function($q, $location, Auth) {
          var deferred = $q.defer();

          var noUser = function() {
            //remember where the user was trying to go
            $location.path("/login")
          };

          Auth.checkLogin(function() {
            if (Auth.currentUser()) {
              deferred.resolve(Auth.currentUser());
            } else {
              deferred.reject(noUser());
            }
          });

          return deferred.promise;
        }
      }
    })

login.js

  $scope.submit = function() {
    if(!$scope.logInForm.$invalid) {
      Auth.login($scope.login, $scope.password, $scope.remember_me)
      //go to the page the user …

我希望通过外部服务为我的路由创建一个简单的身份验证检查.

我定义了路由对象的访问要求:

$routeProvider
    .when('/', {
        templateUrl: 'src/app/views/index.html',
        controller: 'indexCtrl',
        authenticated: true
    })
    .when('/login', {
        templateUrl: 'src/app/views/login.html',
        controller: 'loginCtrl',
        anonymous:  true
    })
    .otherwise({
        redirectTo: '/'
    })
;

然后,我检查我是否在$routeChangeStart活动中获得了许可.

$rootScope.$on('$routeChangeStart', function (event, next) {
    if(next.authenticated && !$myService.isLoggedin())
        $location.path("/login");
    else if(next.anonymous && $myService.isLoggedin())
        $location.path("/secured");
});

实际上,它是有效的 -
如果未经过身份验证的用户将他移动到登录页面,如果他已经过身份验证但路由仅供匿名用户使用,则将其移至另一个页面等.

但是 - 这个重定向实际上是在加载控制器和模板之后发生的! 它导致我的控制器对我的REST API做了一些不必要的请求,即使我没有经过身份验证.

如何在处理之前处理路线？

将控制器与视图模板/部分关联的方式有两种(AFAIK):指定的路径$routeProvider和ngController指令.特别是(但不是唯一的)简单路由,是否有任何优势/效率？

我的项目目前使用$ routeProvider方法,但我已经完成了嵌套视图的任务.使用ngInclude看起来很简单,只要partial指定了它的ngController.

我目前正在通过创建一个简单的播客应用程序来学习AngularJS和Ionic.我试图使用routeParams来获取"itemId"但我收到以下错误:

Error: [$injector:unpr] Unknown provider: $routeParamsProvider <- $routeParams <- DetailsController
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24routeParamsProvider%20%3C-%20%24routeParams%20%3C-%20DetailsController
minErr/

现在这是我传递"itemId"的方式

  .state('ted', {
    url: '/ted/:itemId',
    templateUrl: 'templates/ted-talks.html',
    controller: 'DetailsController'
  })

这是我的控制器:

starter.controller("DetailsController", ["$scope", "$routeParams", "$http", function ($scope, $routeParams, $http) {
  $http.get('http://api.npr.org/query?id=57&apiKey={I've taken the ID off})
  .success(function(data, status, headers, config){
    var x2js = new X2JS();
    var jsonOutput = x2js.xml_str2json(data);
    console.log(jsonOutput);

     $scope.stories = jsonOutput.nprml.list.story;
     
     if($routeParams.itemId) {
      console.log('Single page id' + $routeParams.itemId);
     }


  })
  .error(function(data, status, headers, config){
    alert('There is a problem');
  })
}]);

是什么原因导致这个错误？我相信routeParams已经包含在离子框架中,因为它们提供的演示似乎有效,我无法弄清楚如何.

任何帮助都很受欢迎:)

我正在研究我的AngularUI项目教程.我阅读了有关状态,嵌套状态和抽象状态的所有内容.问题是我无法理解为什么以及何时应该使用抽象状态？  

我读了很多关于lazzy loading的内容,但是在使用$ routeProvider时我遇到了一个问题.

我的目标是加载一个包含控制器的javascript文件,并添加一个先前已加载的控制器的路由.

我要加载的javascript文件的内容

angular.module('demoApp.modules').controller('MouseTestCtrlA', ['$scope', function ($scope) {
    console.log("MouseTestCtrlA");
    $scope.name = "MouseTestCtrlA";
}]);

调用angular bootstap时不包含此文件.这意味着,我必须加载文件并创建到该控制器的路由.

首先,我开始编写一个必须加载Javascript文件的resolve函数.但是在路由声明中声明我的控制器参数给了我一个错误:

'MouseTestCtrlA'不是函数,未定义

这是我要设置的电话:

demoApp.routeProvider.when(module.action, {templateUrl: module.template, controller: module.controller, resolve : {deps: function() /*load JS file*/} });

从我读到的,控制器参数应该是一个注册的控制器

controller - {(string | function()=} - 如果作为字符串传递,则应与新创建的作用域或已注册控制器的名称相关联的控制器fn.

所以我写了一个工厂,应该能够加载我的文件,然后(承诺风格!)我试图宣布一个新的路线.

它给了我类似下面的东西,其中依赖是一个javascript文件的加载路径数组:

用法

ScriptLoader.load(module.dependencies).then(function () {
    demoApp.routeProvider.when(module.action, {templateUrl: 'my-template', controller: module.controller});
});

脚本加载器

angular.module('demoApp.services').factory('ScriptLoader', ['$q', '$rootScope', function ($q, $rootScope) {
        return {
            load: function (dependencies)
            {
                var deferred = $q.defer();
                require(dependencies, function () {
                    $rootScope.$apply(function () {
                        deferred.resolve();
                    }); …

我有两个抽象的状态parent,并parent.child和一个可激活的状态parent.child.grand.

我想parent将承诺解决之前parent.child.grand得到它做出决议执行.为什么？因为它来自于从决心Ajax请求的特定数据parent在需要parent.grand.child.

这是一个要点

是否可以在不使用控制器的情况下顺序将父级的承诺链接到子状态？

(parent解决开始 - >完成ajax请求 - >解析promise - > parent.child.grand解决启动 - >完成ajax请求 - >解析promise