gpt4 book ai didi

angularjs - ngRoute - 单独文件中的多个 Controller

转载 作者:行者123 更新时间:2023-12-02 05:41:08 24 4
gpt4 key购买 nike

我现在正在将我的网络应用程序更改为单页网络应用程序。我遵循了这个教程。 link

这是一个示例 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.';
});

因为我的 Controller 很大而且数量较多,所以我将它们分成了单独的文件。

但现在 Controller 无法识别..

最佳答案

Updated with separated controllers and html views.

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

Folder view:

enter image description here

Result:

enter image description here

关于angularjs - ngRoute - 单独文件中的多个 Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35152008/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com