All geek questions in one place

AngularJS "Controller As" in Templates

I am new to the AngularJS world and I am trying to customize the laravel / angular JWT base script after this tutorial .

What I would like to do is use the syntax "Controller As" instead of $scope , as indicated in the tutorial. So far, here is what I have:

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

input controller

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

admin view

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

registration template

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

The problem is that it does nothing. Can I use a controller for each template?

If I put the <ng-controller="LoginController as login"> directive in the view body instead of the template, everything will display correctly.

Is it good to define a controller on one template? Since the login template should be as general as possible, therefore, it can be loaded in any view if the user is not authenticated, so I believe that the login () action in the controlelr processing the administrator view is incorrect.

Can anyone advise me on best practices to have here?

+5
source share
2 answers

To use the controllerAs syntax with routeProvider , you need to declare an additional property in the route configuration:

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

Then you need to clear the login template by deleting everything except the actual template, for example. no HTML, body tags, etc. You also do not need the additional ngController directive in the partial template:

 <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>
+2
source 
  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.
0
source

Source: https://habr.com/ru/post/1212694/

More articles:


All Articles