Question

我有一个主app.js文件，其中包含以下定义的代码：

var app = angular.module('Funapp', [
  'Funapp.controllers', 
  'Funapp.services', 
  ])

我想知道为什么我的一些js控制器文件，我可以使用app.controller，而其他我必须写angular.module（）{}等来使用.controller而不是？ app.controller不适用于第二种情况。

例如。 app.controller适用于我的发布控制器。

'use strict';
app.controller('PostsCtrl', function ($scope, Post) { ...etc

但是没有像工厂那样在其他js文件中工作，所以我必须输入如下所示

'use strict';
angular.module('Funapp.services', [])
.factory('Post', function ($firebase, FIREBASE_URL) {....etc

在后视图或虚拟控制器中也不起作用，

下面的后视图控制器

'use strict';
//angular.module('Funapp') --> Doesnt work currently, neither does Funapp.controller

app.controller('PostViewCtrl', function ($scope, $routeParams, Post) { ...etc

有人可以告诉我如何使用app.controller和.controller，如果是后者，我应该考虑输入angular.module（＆＃34;＆＃34;，[]）？

我已阅读角度教程，并了解angular.module（＆＃34;＆＃34;，[]）定义模块，而angular.module（＆＃34;＆＃34;）使用该定义的模块。但是，我遇到了很多错误，我无法正确解决问题并了解其工作原理。

Answer 1

这完全取决于主应用程序定义文件是否已加载，并且在您到达需要PostViewCtrl的视图时处于范围内。如果它已经被加载并且可用于DOM，则意味着您可以使用app.controller语法，显然因为您已经声明了它并且它是依赖项。如果它不适用于DOM，那么你需要做你已经在做的事情，从最佳实践的角度来看，这是一个痛苦和可怕的事情。例如，如果您的主页面包含包含您的应用程序定义的脚本，则该shell页面中托管的其他视图可能具有app.controller声明的控制器，但如果您说，服务器端视图和主应用程序定义脚本未包含在您的母版页（ASP.NET概念）中，那么只要您想在每个服务器端视图中创建一个控制器，就需要重新声明您的应用程序定义。

例如，假设您有2个页面，Home和About。每个文件都有单独的控制器定义： app.js看起来像这样：

var app = angular.module("demoApp", ['demoApp.services']);
var appServices = angular.module('demoApp.services', []);

这需要预先加载，并且每当您导航到任何其他页面时都需要存在，因为您的其他页面是同一个应用程序的一部分，并且还需要在该应用程序上定义服务。

HomeCtrl.js：

app.controller("homeCtrl", function ($scope) {
    $scope.msg = "Home!";
});

amd AboutCtrl.js：

app.controller("aboutCtrl", function ($scope,svc1) {
    $scope.msg = "About!";
    svc1.sayHi();
});

现在在Home.html：

<divng-controller="homeCtrl">
    <h1>{{msg}}</h1>
</div>

和About.html：

<script src="~/app/Svc1.js"></script>
<script src="~/app/AboutCtrl.js"></script>

<div ng-controller="aboutCtrl">{{msg}}</p>

Svc1.js看起来像这样：

appServices.service("svc1", function () {
    return {
        sayHi: function () {
            alert("hi");
        }
    };
});

长话短说，引用您的应用模块的app和appServices变量需要在您的应用上声明服务或控制器时在范围内，否则您必须始终重新定义您的应用

Answer 2

您在命名各种对象时正处于正确的轨道上，您需要为每个构造定义模块。

这是一个例子

<!doctype html>
<html ng-app="Funapp">
<head>
   <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="PostsCtrl">

<div class="well">
    <h1>{{message}}</h1>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<script>

angular.module('Funapp.services', [])
    .service('PostService', [function () {
        return {
            doSomething: function() {
                    return "I posted something";
            }   
        }

    }]);

angular.module('Funapp.controllers', ['Funapp.services'])
    .controller('PostsCtrl', ['$scope', 'PostService', function ($scope, Post) {    
        $scope.message = Post.doSomething();
        console.log("I'm a Post Controller");
    }
    ]);

angular.module('Funapp', [
  'Funapp.controllers'
]);

</script>
</body>
</html>

x.controller和.controller之间的区别

2 个答案: