Angular ngroute：控制器不起作用
[英]Angular ngroute: controllers doesnt's work
問題描述
我想使用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>
在此示例中，在同一頁面中路由不同的主題：
通過這種方式。 在我的應用程序中嘗試它：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關聯文件：
//'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"; });
在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"; });
我也嘗試了console.log("ciao"); ，但是當我嘗試使用以下網址時：file：/// C：/Users/Giacomo%20B/Desktop/progetto%20mainetti/prove%20angular/fddWebapp/login.html#/viewStudents沒有出現任何內容，也沒有console.log：
問題出在哪里？ 為什么我的控制器不起作用？
1 個解決方案
解決方案1
2 已采納 2016-12-16 23:39:43
我看到幾個問題：
- 您的html頁面中沒有
<div ng-view></div>標簽 - 您已重定向到
'/addStudent'，但未配置此路由（我想應將'/sessionexpired'重命名為該路由） - 您已經兩次聲明了
ng-controller="LoginController"，我想最后一個就足夠了。
為什么ngRoute現在無法工作並破壞所有其他Angular功能？
[英]Why wont ngRoute now work and breaks all other Angular functionality?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.