Angular ngroute：控制器不起作用

Question

I want to use ngroute module to route my application with different themes, in the same page, using this example: 我想使用ngroute模块通过以下示例在同一页面中路由具有不同主题的应用程序：

 <html> <head> <title>Angular JS Views</title> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = "mainApp"> <p><a href = "#addStudent">Add Student</a></p> <p><a href = "#viewStudents">View Students</a></p> <div ng-view></div> <script type = "text/ng-template" id = "addStudent.htm"> <h2> Add Student </h2> {{message}} </script> <script type = "text/ng-template" id = "viewStudents.htm"> <h2> View Students </h2> {{message}} </script> </div> <script> var mainApp = angular.module("mainApp", ['ngRoute']); mainApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/addStudent', { templateUrl: 'addStudent.htm', controller: 'AddStudentController' }). when('/viewStudents', { templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController' }). otherwise({ redirectTo: '/addStudent' }); }]); mainApp.controller('AddStudentController', function($scope) { console.log("adssadsd"); $scope.message = "This page will be used to display add student form"; }); mainApp.controller('ViewStudentsController', function($scope) { $scope.message = "This page will be used to display all the students"; }); </script> </body> </html>

In this example route different themes in the same pages: 在此示例中，在同一页面中路由不同的主题：

In this way. 通过这种方式。 Trying it in my application: html file: 在我的应用程序中尝试它：html文件：

 <!DOCTYPE html> <!-- saved from url=(0066)https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/signin/ --> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script> <script type="application/javascript"></script> <script src="scripts/login-controller.js"></script> <script src="scripts/rest-services.js"></script> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="images/puzzle.png" /> <title>Login</title> <!-- Bootstrap core CSS --> <link href="./styles/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="./styles/signin.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy this line! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body ng-app="StaffManagement" ng-controller="LoginController" ng-fa> <div class="container"> <script type = "text/ng-template" id = "addStudent.htm"> <h2> Add Student </h2> {{message}} </script> <script type = "text/ng-template" id = "viewStudents.htm"> <h2> View Students </h2> {{message}} </script> <form class="form-signin" role="form" ng-controller="LoginController" ng-submit="submitCredentials()" novalidate> <h2 class="form-signin-heading">Hai bisogno di autenticarti</h2> <input type="email" class="form-control" placeholder="Email address" required="" autofocus="" id="email" ng-model="staffLoginForm.email"> <input type="password" class="form-control" placeholder="Password" required="" id="password" ng-model="staffLoginForm.pass"> <label class="checkbox"> <input type="checkbox" value="remember-me"> Ricordami </label> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> </form> </div> <!-- /container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> </body></html>

js associated file: js关联文件：

 //'use strict'; //questo mi da informazione sull'errore var app = angular.module("StaffManagement", ['ngRoute']); app.controller("LoginController", function($scope, $http, restService) { $scope.stafflogins = []; $scope.staffLoginForm = { email: "", pass: "" }; $scope.tokenStaffForm = { idtokenstaff: -1, tokenstaff: "" }; $scope.staffForm = { idstaff : -1, staffType: { idstaffType: -1, type: "" }, name: "", surname: "", birthDate: "", phone: "", gender: true, working: true, staffLogin: { idstaffLogin: -1, email: "", pass: "" } }; //8njae3j4b54fpoapftc8aofbfs //admin: l5qsngh3v9a5f2v9p55ar4h083 $scope.submitCredentials= function() { restService.login($scope.staffLoginForm, _logsuccess, _logerror); //$location.url('edit_employee.html'); // console.log($scope.staffLoginForm); /* $http({ method : 'POST', url : 'http://localhost:8080/FoodDrinkDispener/rest/tokenstaff', data : angular.toJson($scope.staffLoginForm), }).then(function successCallback(response) { if (typeof response.data === 'object'){ _logsuccess(response) return response.status; } else _logerror(response); },function (response) { console.log($scope.tokenStaffForm); _logerror(response); } );*/ } /* function _SetToken(CurrentToken) { sessionStorage.setItem("token", (CurrentToken === null) ? null : JSON.stringify(CurrentToken)); //console.log(CurrentToken); } */ function _logsuccess(response) { console.log("Loggato correttamente"); console.log(response.status); var CurrentToken = response.data; // _SetToken(CurrentToken); } function _logerror(response) { console.log("Login fallito"); console.log(response.status); // _SetToken(null); } /* $http({ method : 'GET', url : 'http://localhost:8080/FoodDrinkDispener/rest/stafflogin/byemail/'+$scope.staffLoginForm.email }).then(function successCallback(response) { $scope.stafflogins = response.data; }, function errorCallback(response) { console.log(response.statusText); }); if(MD5($scope.stafflogins.pass)==$scope.staffLoginForm.pass)*/ // console.log(sessionStorage.getItem.toString); }); app.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/sessionexpired', { templateUrl: 'addStudent.htm', controller: 'AddStudentController' }). when('/viewStudents', { templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController' }). otherwise({ redirectTo: '/addStudent' }); }]); app.controller('AddStudentController', function($scope) { console.log("ciao"); $scope.message = "This page will be used to display add student form"; }); app.controller('ViewStudentsController', function($scope) { console.log("ciao"); $scope.message = "This page will be used to display all the students"; });

In js file I put my controllers, and my config: 在js文件中，我放入了控制器和配置：

 app.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/sessionexpired', { templateUrl: 'addStudent.htm', controller: 'AddStudentController' }). when('/viewStudents', { templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController' }). otherwise({ redirectTo: '/addStudent' }); }]); app.controller('AddStudentController', function($scope) { console.log("ciao"); $scope.message = "This page will be used to display add student form"; }); app.controller('ViewStudentsController', function($scope) { console.log("ciao"); $scope.message = "This page will be used to display all the students"; });

I also tryed to console.log("ciao"); 我也尝试了console.log("ciao"); , but when I try this url: file:///C:/Users/Giacomo%20B/Desktop/progetto%20mainetti/prove%20angular/fddWebapp/login.html#/viewStudents nothing appears, neither the console.log: ，但是当我尝试使用以下网址时：file：/// C：/Users/Giacomo%20B/Desktop/progetto%20mainetti/prove%20angular/fddWebapp/login.html#/viewStudents没有出现任何内容，也没有console.log：

Where are the problem? 问题出在哪里？ Why my controllers doesn't work? 为什么我的控制器不起作用？

Answer 1

I see several issues: 我看到几个问题：

You don't have <div ng-view></div> tag in your html page 您的html页面中没有<div ng-view></div>标签
You have redirect to '/addStudent' , but you don't have this route configured (I guess '/sessionexpired' should be renamed to it) 您已重定向到'/addStudent' ，但未配置此路由（我想应将'/sessionexpired'重命名为该路由）
You have declared ng-controller="LoginController" twice, I guess the last one is enough. 您已经两次声明了ng-controller="LoginController" ，我想最后一个就足够了。

Angular ngroute：控制器不起作用

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-12-16 23:39:43

Angular ngroute：控制器不起作用

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-12-16 23:39:43

解决方案1
2 已采纳 2016-12-16 23:39:43