x的区别。控制器和范式

I have a main app.js file which has the defined code as below:

我有一个主app.js文件，定义代码如下:

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

I'm wondering why for some of my js controller files, I can use app.controller while others I have to write angular.module(){} etc to use .controller instead? app.controller doesn't work for the second case.

我想知道为什么对于我的一些js控制器文件，我可以使用app.controller，而另一些我必须编写angular.module(){}等来使用.controller ?控制器对第二种情况不起作用。

For example. app.controller works for my posting controller.

为例。app.controller为我的post控制器工作。

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

But doesn't work in other js files like factory, so i have to type it as below

但是在其他js文件(如factory)中不能工作，所以我必须如下所示输入它

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

Doesn't work in the post view or dummy controller too, postview controller below

在后视图或虚拟控制器中也不工作，下面是后视图控制器

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

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

Can someone enlighten me how to use app.controller and .controller, and if the latter, what should I consider typing in the angular.module("", [])?

谁能指点我如何使用app.controller和。controller，如果是后者，我应该考虑输入角度。模块(" ",[])?

I have read angular tutorials and do understand that angular.module("", []) defines the module while angular.module("") uses that defined module. However, been getting many errors that I'm unable to resolve the issues proper and understand how this works.

我读过有关角度的教程，也确实理解这个角度。模块(“”，[])定义模块，而angular.module(“”)使用该定义的模块。但是，我有很多错误，我无法正确地解决问题，也无法理解它是如何工作的。

2 个解决方案

#1

It all depends on whether the main app definition file is already loaded and is in scope by the time you reach a view requiring PostViewCtrl. If it's already been loaded and is available to the DOM, it means you can use the app.controller syntax, obviously since you've already declared it and it's dependencies. If it's not available to the DOM, then you need to do what you're already doing, which is a pain and terrible from a best practices point of view. For example if you have a main page which has a script containing your app definition, the other views hosted within that shell page could have controllers declared by app.controller, but if you have say, server side views, and the main app definition script is not included in your master page (the ASP.NET concept) then you need to re-declare your app definition whenever you want to create a controller inside each of those server side views.

这完全取决于是否已经加载了主应用程序定义文件，并且在到达需要PostViewCtrl的视图时，该文件已经处于作用域。如果它已经被加载并对DOM可用，这意味着您可以使用app.controller语法，显然，因为您已经声明了它，并且它是依赖项。如果DOM不可用，那么您需要做您已经在做的事情，从最佳实践的角度来看，这是一件痛苦和可怕的事情。例如如果你有一个主页包含您的应用程序定义的脚本,壳牌页面中所承载的其他视图控制器由app.controller宣布,但是如果你有说,服务器端视图和主应用程序定义脚本不包括在你的主页(ASP。然后，当您想在每个服务器端视图中创建一个控制器时，您需要重新声明您的应用程序定义。

For example, say you have 2 pages, Home and About. Each have separate controller definitions in separate files: app.js looks like this:

例如，假设你有两页，Home和About。它们在不同的文件中都有各自的控制器定义:app.js如下:

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

That needs to be loaded upfront and needs to be around whenever you navigate to any other pages, since your other pages are part of the same app, and also need services define on that app.

因为你的其他页面都是同一个应用的一部分，而且你还需要在这个应用上定义服务。

HomeCtrl.js:

HomeCtrl.js:

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

amd AboutCtrl.js:

amd AboutCtrl.js:

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

Now in Home.html:

现在在home。

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

and About.html:

和About.html:

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

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

And Svc1.js looks like this:

和Svc1。js是这样的:

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

Long story short, the app and appServicesvariables, referencing your app modules, need to be in scope when you declare services or controllers on your app otherwise you have to redefine your app all the time.

长话短说，应用程序和appServicesvariables，引用你的应用程序模块，当你在你的应用中声明服务或控制器时，需要在范围内，否则你必须一直重新定义你的应用程序。

#2

You are on right track in namespacing your various objects, you need to define modules for each of your constructs.

在对各种对象进行命名空间设置时，您正走在正确的道路上，您需要为每个构造定义模块。

Here's an example

这里有一个例子

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

#1