gpt4 book ai didi

dependency-injection - 我怎样才能让 AngularJS 模块路由使用它自己的 Controller ?

转载 作者:行者123 更新时间:2023-12-04 08:20:49 27 4
gpt4 key购买 nike

我正在尝试学习 AngularJS 的 View 和路由机制,关注 AngularJS' own tutorial .

我的问题是教程在全局范围内声明了它的所有 Controller ,我认为这是一种不好的做法,因为我们在添加更多 Controller 时污染了它。

这是我能够按照上述教程构建的快速工作页面(有 a fiddle, too ):

<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js"></script>
<script>
"use strict";

var MyFirstController = function ($scope) {
// Do something here.
};

var MySecondController = function ($scope) {
// Do something here.
};

var myModule = angular.module("MyModule", []);

myModule.config(["$routeProvider", function ($routeProvider) {
$routeProvider.when("/first-page", {
template: "<p>My first controller.</p>",
controller: MyFirstController
});

$routeProvider.when("/second-page", {
template: "<p>My second controller.</p>",
controller: MySecondController
});
}]);

$(document).ready(function () {
angular.bootstrap(document, ["MyModule"]);
});
</script>
</head>
<body>
<h1>Test</h1>
<div data-ng-view></div>
<p><a href="#/first-page">Click me!</a></p>
<p><a href="#/second-page">Click me too!</a></p>
</body>
</html>

由于天真,我尝试将 Controller 移动到模块内:

myModule.config(["$routeProvider", function ($routeProvider) {
$routeProvider.when("/first-page", {
template: "<p>My first controller.</p>",
controller: MyFirstController
});

$routeProvider.when("/second-page", {
template: "<p>My second controller.</p>",
controller: MySecondController
});
}]);

myModule.controller("MyFirstController", ["$scope", function ($scope) {
// Do something here.
}]);

myModule.controller("MySecondController", ["$scope", function ($scope) {
// Do something here.
}]);

唉,它(显然)不起作用,抛出一个 ReferenceError: MyFirstController is not defined 异常。

如何让 AngularJS 模块在其自己的路由配置中使用自己的 Controller ?

最佳答案

一旦您知道了解决方案,它就非常简单:只需将 Controller 指定为字符串而不是对象:

myModule.config(["$routeProvider", function ($routeProvider) {
$routeProvider.when("/first-page", {
template: "<p>My first controller.</p>",
controller: "MyFirstController"
});

$routeProvider.when("/second-page", {
template: "<p>My second controller.</p>",
controller: "MySecondController"
});
}]);

这样 AngularJS 会将 Controller 名称解析为您在模块中定义的名称。

而且它的缩小也是安全的!

我创建了 a fiddle demonstrating it .

关于dependency-injection - 我怎样才能让 AngularJS 模块路由使用它自己的 Controller ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15290915/

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