AngularJS "Controller as" 在模板中

Question

我是 AngularJS 世界的新手，我正在尝试在 this tutorial.

之后设置基本的 laravel/angular JWT 身份验证

我想做的是使用 "Controller As" 语法而不是教程中所述的 $scope 语法。现在，这是我所拥有的：

app.js

var app = angular.module('app', ['ngRoute']);
app.run(function () {});
app.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/', {
        templateUrl: 'js/templates/login.html',
        controller: 'LoginController'
    });
});

登录控制器

angular.module('app')

    .controller('LoginController', function ($scope) {
        this.title='toto';
        this.data = {};
        this.submit = function () {
            console.log(this.data);
        };
    });

管理员查看

<!doctype html>
<html lang="en">
    <head>
        <title>Blog Administration</title>
        <!--css-->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>

        <!--js-->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

        <!--angular-->
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-route.js"></script>
        <script src="js/app.js"></script>
        <script src="js/controllers/loginController.js"></script>
    </head>
    <body ng-app="app">
        <div id="wrapper">
            <div class="container" id="view" ng-view>

            </div>
        </div>
    </body>
</html>

登录模板

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body ng-controller="LoginController as login">
    <div class="container">
      <div id="login" class="col-md-4 col-md-offset-4">
        <div id="login-form">
          <h4>{{ login.title }}</h4>

          <form ng-submit="login.submit()"><!--username-->
            <div class="form-group">
              <input id="username" type="text" ng-model="login.data.username"/>
            </div>
            <!--password-->
            <div class="form-group">
              <input id="password" type="password" ng-model="login.data.password"/>
            </div>
            <!--submit-->
            <div class="form-group">
              <button class="btn btn-primary" type="submit">Login</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>

问题是什么都没有呈现。是否可以为每个模板使用一个控制器？

如果我将 <ng-controller="LoginController as login"> 指令而不是模板放在视图主体中，一切都会正确呈现。

为每个模板定义一个控制器是一种好习惯吗？因为登录模板应该尽可能通用，所以如果用户未通过身份验证，它可以在任何视图中加载，这就是为什么我认为将 login() 操作放在处理管理视图的 controlr 中是错误的。

有人可以建议我这里的最佳做法吗？

Answer 1

为了在 routeProvider 中使用 controllerAs 语法，您需要在路由配置中声明额外的属性：

$routeProvider.when('/', {
    templateUrl: 'js/templates/login.html',
    controller: 'LoginController',
    controllerAs: 'login'
});

然后您需要清理登录模板，删除除实际模板之外的所有内容，例如没有 HTML、正文标签等。您也不需要在部分模板中使用额外的 ngController 指令：

<div id="login" class="col-md-4 col-md-offset-4">
    <div id="login-form">
        <h4>{{ login.title }}</h4>

        <form ng-submit="login.submit()">
            <!--username-->
            <div class="form-group">
                <input id="username" type="text" ng-model="login.data.username" />
            </div>
            <!--password-->
            <div class="form-group">
                <input id="password" type="password" ng-model="login.data.password" />
            </div>
            <!--submit-->
            <div class="form-group">
                <button class="btn btn-primary" type="submit">Login</button>
            </div>
        </form>
    </div>
</div>

Answer 2

 Question 1: Is it possible to use a controller per template ?
 Ans: Yes. Its very simply. How, is shown in next answer.

 Question 2: Is it a good practice to define a controller per template ?
 Ans: As per the AngularJs shown rules, Its good practice. Now see the 2
 different way of defining the controller for the template.

a. Directly into the template like: <div ng-controller="myCtrl">Whole template
   data goes inside this div.</div>

b. from the app.js where we load the template like this:

        .state('app.products.all', {
            url: '/all',
            templateUrl: 'tpl/products/blocks/thumb.html',
            controller: 'ProductsAllCtrl'
        })

 Here i have also shown the controller with the template path. Second way is
 more better then the first.

AngularJS "Controller as" 在模板中

AngularJS "Controller as" in templates

javascript

binding

angularjs