Javascript AngularJS“；控制器为；在模板中_Javascript_Angularjs_Binding

Javascript AngularJS“；控制器为；在模板中

javascript angularjs binding

Javascript AngularJS“；控制器为；在模板中,javascript,angularjs,binding,Javascript,Angularjs,Binding,我是AngularJS世界的新手，我正在尝试建立一个基本的laravel/angular JWT auth 我想做的是使用“Controller As”语法，而不是教程中所述的$scope。现在，我有： app.js var app = angular.module('app', ['ngRoute']); app.run(function () {}); app.config(function ($routeProvider, $locationProvider) { $routePr

我是AngularJS世界的新手，我正在尝试建立一个基本的laravel/angular JWT auth

我想做的是使用“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>


{{login.title}
登录

问题是什么也没有呈现。是否可以使用每个模板的控制器

如果我将

指令放在视图主体中而不是模板中，则所有内容都会正确呈现

为每个模板定义一个控制器是一种好的做法吗？因为登录模板应该尽可能通用，所以如果用户没有经过身份验证，它可以在任何视图中加载，这就是为什么我认为将login（）操作放在处理Admin视图的controlelr中是错误的

有人能告诉我这里的最佳做法吗？

为了使用

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>


{{login.title}
登录

问题1：每个模板是否可以使用控制器？
答：是的。这很简单。如何，在下一个答案中显示。
问题2：为每个模板定义一个控制器是一种好的做法吗？
答：根据AngularJs的规则，这是一个很好的实践。现在看第2页
为模板定义控制器的不同方式。
A.直接进入模板，如：整个模板
数据进入这个分区。
B从app.js加载模板，如下所示：
.state（'app.products.all'{
url:“/all”，
templateUrl:'tpl/products/blocks/thumb.html'，
控制器：“ProductsAllCtrl”
})
这里我还展示了带有模板路径的控制器。第二种方法是
比第一个更好。

谢谢，效果很好！处理模板及其数据的角度是否足够？是的，这是处理管线和局部视图的典型角度方法。

 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.