現在、Webアプリを単一ページのWebアプリに変更しています。 私はこれからチュートリアルに従いました。リンク
これはサンプルのscript.jsです
// script.js
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var scotchApp = angular.module("scotchApp", ["ngRoute"]);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when("/", {
templateUrl : "pages/home.html",
controller : "mainController"
})
// route for the about page
.when("/about", {
templateUrl : "pages/about.html",
controller : "aboutController"
})
// route for the contact page
.when("/contact", {
templateUrl : "pages/contact.html",
controller : "contactController"
});
});
// create the controller and inject Angular"s $scope
scotchApp.controller("mainController", function($scope) {
// create a message to display in our view
$scope.message = "Everyone come and see how good I look!";
});
scotchApp.controller("aboutController", function($scope) {
$scope.message = "Look! I am an about page.";
});
scotchApp.controller("contactController", function($scope) {
$scope.message = "Contact us! JK. This is just a demo.";
});
私のコントローラーは大きくて数が多いので、それらを個々のファイルに分けました。
しかし、今ではコントローラーが認識されません。
回答：
回答№1については9分離されたコントローラーとhtmlビューで更新されました。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>
<script type="text/javascript" src="./app.js"></script>
<script type="text/javascript" src="./HomeController.js"></script>
<script type="text/javascript" src="./AboutController.js"></script>
<script type="text/javascript" src="./ContactController.js"></script>
</head>
<body ng-app="myAPP">
<div>
<div id="navigation">
<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">Contact</a>
</div>
<div ng-view></div>
</div>
</body>
</html>
app.js
"use strict";
var myAPP = angular.module("myAPP", [ "ngRoute" ]);
myAPP.config(["$routeProvider",
function (
$routeProvider
) {
$routeProvider.
when("/home", {
templateUrl: "pages/home.html",
controller: "HomeController"
}).
when("/about", {
templateUrl: "pages/about.html",
controller: "AboutController"
}).
when("/contact", {
templateUrl: "pages/contact.html",
controller: "ContactController"
}).
otherwise({
redirectTo: "/home"
});
}]);
HomeController.js
angular.module("myAPP")
.controller("HomeController", function ($scope) {
// create a message to display in our view
$scope.message = "Everyone come and see how good I look!";
});
AboutController.js
angular.module("myAPP")
.controller("AboutController", function ($scope) {
$scope.message = "Look! I am an about page.";
});
ContactController.js
angular.module("myAPP")
.controller("ContactController", function ($scope) {
$scope.message = "Contact us! JK. This is just a demo.";
});
pages / About.html
<h1> About </h1>
{{message}}
pages / Contact.html
<h1> Contact </h1>
{{message}}
pages / Home.html
<h1> Home </h1>
{{message}}
フォルダビュー：
結果：
回答№2の場合は0
私の意見では、インデックスファイルにコントローラーを含めるのを忘れない限り、それは機能するはずです...