Question

我试图让this article中描述的小身份验证应用变成一个工作示例，大致类似于this ember version。

连接在一起的文章片段使得：

// app.js

app.config(function ($httpProvider) {

  $httpProvider.interceptors.push(function ($timeout, $q, $injector) {
    var loginModal, $http, $state;

    // this trick must be done so that we don't receive
    // `Uncaught Error: [$injector:cdep] Circular dependency found`
    $timeout(function () {
      loginModal = $injector.get('loginModal');
      $http = $injector.get('$http');
      $state = $injector.get('$state');
    });

    return {
      responseError: function (rejection) {
        if (rejection.status !== 401) {
          return rejection;
        }

        var deferred = $q.defer();

        loginModal()
          .then(function () {
            deferred.resolve( $http(rejection.config) );
          })
          .catch(function () {
            $state.go('welcome');
            deferred.reject(rejection);
          });

        return deferred.promise;
      }
    };
  });

});

// LoginModalCtrl.js

app.controller('LoginModalCtrl', function ($scope, UsersApi) {

  this.cancel = $scope.$dismiss;

  this.submit = function (email, password) {
    UsersApi.login(email, password).then(function (user) {
      $scope.$close(user);
    });
  };

});

// loginModal.js

app.service('loginModal', function ($modal, $rootScope) {

  function assignCurrentUser (user) {
    $rootScope.currentUser = user;
    return user;
  }

  return function() {
    var instance = $modal.open({
      templateUrl: 'views/loginModalTemplate.html',
      controller: 'LoginModalCtrl',
      controllerAs: 'LoginModalCtrl'
    });

    return instance.result.then(assignCurrentUser);
  };

});

// routes.js

app.config(function ($stateProvider) {

  $stateProvider
    .state('welcome', {
      url: '/welcome',
      // ...
      data: {
        requireLogin: false
      }
    })
    .state('app', {
      abstract: true,
      // ...
      data: {
        requireLogin: true // this property will apply to all children of 'app'
      }
    })
    .state('app.dashboard', {
      // child state of `app`
      // requireLogin === true
    });

});

但是，我不知道如何正确实例化app，也不知道HTML中包含哪些内容或如何为Angular识别它。

Here is the JSbin I started with the above code我添加了以下内容：

ng-app="authApp"代码的html属性
包含原作者表格的ng-controller="LoginModalCtrl" div
JS顶部的var app = angular.module("authApp", []);。

控制台出现了我不明白的吐痰错误。有人能告诉我将这个Angular应用程序变为现实的步骤吗？

Answer 1

<强> tldr;

你的第一行应该是

var app = angular.module("authApp", ['ui.router']);

您需要下载并包含UI路由器模块，例如：

<script src="app/js/angular-ui/angular-ui-router.min.js"></script>

更详细一点：

JSbin上出现第一个控制台错误：

Error: [$injector:unpr] Unknown provider: $stateProvider

建议你在一个角度不知道$ stateProvider是什么的地方调用$ stateProvider。 $ stateProvider来自Angular UI Router模块。您需要在应用中包含该模块才能在线上调用它。

您需要下载UI路由器模块（https://github.com/angular-ui/ui-router），将其加载到html文件中，例如

  <script src="app/js/angular-ui/angular-ui-router.min.js"></script>

然后通过将第一行更改为：

，将模块包含在应用程序中

var app = angular.module("authApp", [
    'ui.router',
]);

这将淘汰你的第一个错误。看起来你之后会有更多的错误，UsersApi没有被定义为wickY26提及。

简单的角度身份验证

1 个答案: