【问题标题】:ui.router state not working as expectedui.router 状态未按预期工作
【发布时间】:2017-01-31 19:03:51
【问题描述】:

我正在使用ui.router 来检测 Angular App 中的状态变化。但是控制器没有在加载时被调用。

下面是我的app.js 代码。

 var admin = angular.module('admin',['admin.core']);
    angular.module('admin.core', ['ui.router', 'satellizer', 'ngMaterial']);

    admin.config(function($mdThemingProvider, $stateProvider, 
                          $urlRouterProvider, $authProvider, $locationProvider){
    $mdThemingProvider.theme('default').primaryPalette('light-blue', {
        'default': '700',
        'hue-1' : 'A200',
    }).accentPalette('blue');

    // Satellizer configuration that specifies which API route the JWT should be retrieved from
    $authProvider.loginUrl = '/api/authenticate';

    // Redirect to the auth state if any other states are requested other than users
    $urlRouterProvider.otherwise('/admin/login');
    console.log($stateProvider)
    $stateProvider
        .state('login', {
            url: '/admin/login',
            name: 'login',
            controller: 'AuthController as auth',
        })
        .state('users', {
            url: '/admin/users',
            controller: 'UserController as user'
        });
       $locationProvider.html5Mode(true);
    });

    admin.controller('AuthController', AuthController);

    function AuthController($auth, $state, $scope) {
    console.log("Called");
    var vm = this;

    vm.login = function() {
        var credentials = {
            email: vm.email,
            password: vm.password
        }
        console.log(credentials);
        // Use Satellizer's $auth service to login
        $auth.login(credentials).then(function(data) {
            // If login is successful, redirect to the users state
            $state.go('users', {});
        });
    }

  }

当我的状态为login时,不会调用AuthController。

【问题讨论】:

  • 为什么是 url:'users',而不是 '/users'?并添加名称:'users'
  • @PiotrPęczek .. 更正
  • 您的根应用 html 中是否有 ui-view?
  • 是的。在我的主 html 中,应用程序已初始化。我有 ui-view 那里
  • 检查控制台是否有任何错误

标签: angularjs angular-ui-router-extras


【解决方案1】:

使用$locationProvider.html5Mode(true); 时,您必须提供一个基本的href 位置。它会将您的状态解析 url 解析为 http://localhost:8001/admin/#/login 并且应该可以解决您的问题。

尝试将<base href="/" /> 添加到主索引文件的<head /> 部分,以指定应用程序的基本路径。

https://docs.angularjs.org/api/ng/provider/$locationProvider

还在您的服务器上提供一个.htaccess 文件,以始终将特定请求重定向到邮件索引页面。您可能需要稍微调整一下以适应您的结构。

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

请注意,必须在我的 apache 服务器上启用 mod_rewrite。经过 默认是禁用的。

【讨论】:

  • 因为我是管理员,所以我的基本 URL 将是 &lt;base href="/admin" /&gt; 对吗?而且它只在第一次工作.. 意思是说如果我访问http://localhost:8001/admin 然后 stateprovider 使它成为http://localhost:8001/admin/login 但现在如果我将使用刷新然后控制器不会被调用...
  • 所以这解决了您最初的问题?现在在“F5”/页面刷新时出现了一个新问题?对吗?
  • 您是否将.htaccess 添加到您的服务器?请参阅上面的更新答案。
  • 我将把这个.htaccess 放在我的 laravel 根目录中.. 我应该把它映射到 admin 文件夹吗?
  • 将 .htaccess 放在应用程序根目录(你的 AngularJS 应用程序根目录)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-08-19
  • 2018-01-12
  • 2020-02-18
  • 2018-08-01
  • 2021-05-12
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多