AngularJS "Controller come" nei modelli

Sono nuovo nel mondo AngularJS e sto cercando di impostare un'autenticazione JWT laravel/angolare di base dopo this tutorial.AngularJS "Controller come" nei modelli

Quello che mi piacerebbe fare, è usare la sintassi "Controller As" invece del $scope come indicato nel tutorial. Per ora, ecco quello che ho:

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' 
    }); 
});

regolatore login

angular.module('app') 

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

vista amministratore

<!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>

modello login

<!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>

Il problema è che nulla rende. È possibile utilizzare un controller per modello?

Se inserisco la direttiva <ng-controller="LoginController as login"> nel corpo della vista anziché nel modello, tutto viene visualizzato correttamente.

È buona norma definire un controller per modello? Poiché il modello di accesso dovrebbe essere il più generico possibile, in modo che possa essere caricato in qualsiasi vista se l'utente non è autenticato, è per questo che penso che l'azione login() nel controlelr che gestisce la vista Admin sia errata.

Qualcuno può consigliarmi sulle migliori pratiche da avere qui?

fonte

2015-02-05 kitensei

Per poter utilizzare la sintassi controllerAs con routeProvider è necessario dichiarare proprietà aggiuntiva in configurazione percorso:

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

allora avete bisogno di ripulire modello di accesso, cancellando tutto tranne modello attuale, per esempio no HTML, tag body, ecc Inoltre non è necessario ulteriore direttiva ngController nel modello parziale:

<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>

fonte

2015-02-05 10:21:58 dfsq

ringraziamento, funziona benissimo! Questo è * il modo * angolare * di trattare i template e i loro dati? – kitensei

Sì, questo è il tipico approccio angolare per la gestione di percorsi e viste parziali. – dfsq

ok, grazie per avermi guidato :) – kitensei

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.

fonte

2015-02-05 10:29:42 rahul

AngularJS "Controller come" nei modelli

risposta

Problemi correlati