1

我刚刚开始在 AngularJs/Bootstrap 中构建原型。我是 Angular 的新手，但它似乎很有趣，可以评估一些即将到来的网络项目。第 1 步是获取一些简单的登录表单来处理硬编码的值，而不必费心与后端服务进行通信。

但是，我阅读了一堆教程但无法使路由正常工作，无论我传递多少次，神秘的变量 $location 总是未定义。也许它的使用是老式的？我尝试了该站点上的一些示例，但没有一个有效，$location 似乎不再在我们中间了？我试过的最后一个例子：

angular.module('myApp.controllers', []).
controller('loginController', ['$scope', function($scope, $route, $routeParams, $location) {
      $scope.auth = function() {
          //check something useful
          $location.url('/view2');
      };
}])

如果有人有一个使用路由到另一个部分的表单和控制器的简单且有效的示例（或可信信息源的 url），我会很高兴。

问候

4

2 回答 2

8

我一直在努力解决同样的问题。我发布了这个问题。答案提供了一些启示。然后我能够强制用户登录，然后他们才能访问导航栏上的其他链接。然后我遇到了导航栏在登录屏幕上可见的问题。所以我创建了一个解决方法：

1）我拆分页面：默认情况下使用ng-include我能够加载login.html。login.html并且index.html没有ng-view。

2）一旦用户通过身份验证，ng-view必须包括在内，以便导航所需的所有视图都可以工作

索引.html

   <html ng-app="plunker">

      <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <link rel="stylesheet" href="style.css" />
        <script src="angular.min.js"></script>
        <script src="angular-route.min.js"></script>
        <script src="app.js"></script>
      </head>

      <body ng-controller="AppCtrl">
        <div ng-include="template.url"></div>
      </body>

</html>

登录.html

<h1>Login Page</h1>

<form ng-submit="login(username, password)">
  <label>User name</label>
  <input type="text" ng-model="username" class="ng-pristine ng-valid">
  <label>Password</label>
  <input type="password" ng-model="password" class="ng-pristine ng-valid">
  <br/>
  {{loginError}}  {{loggedUser}}
  <br/><br/>
  <button class="btn btn-success" ng-click="">Submit</button>
  <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</form>

然后，如果身份验证通过，我会更改模板 ( ng-include) 并制作home.html默认页面

app.controller('AppCtrl', function($scope, authentication) {
  $scope.templates =
  [
    { url: 'login.html' },
    { url: 'home.html' }
  ];
    $scope.template = $scope.templates[0];
  $scope.login = function (username, password) {
    if ( username === 'admin' && password === '1234') {
        authentication.isAuthenticated = true;
        $scope.template = $scope.templates[1];
        $scope.user = username;
    } else {
        $scope.loginError = "Invalid username/password combination";
    };
  };

};

Home.html 具有ng-view通常的功能，并且用户可以访问其他页面。

这是我到目前为止所拥有的，这是一个工作示例，希望对您有所帮助。

于 2013-11-12T09:11:08.933 回答
2

这会起作用：

controller('loginController', ['$scope', '$route', '$routeParams', '$location', function($scope, $route, $routeParams, $location) {
      $scope.auth = function() {
          //check something useful
          $location.url('/view2');
      };
}])

您要注入控制器的每个资源都应作为数组中的字符串传递。

于 2013-11-12T09:02:38.323 回答