Fatal编程技术网
  • angularjs/
  • Angularjs requirejs&x27；似乎没有注册控制器/服务/等

Angularjs requirejs&x27；似乎没有注册控制器/服务/等

angularjs requirejs installation

Angularjs requirejs&x27；似乎没有注册控制器/服务/等,angularjs,requirejs,installation,demo,Angularjs,Requirejs,Installation,Demo,我有一个非常简单的requirejs和angular演示应用程序。当我运行代码时，就好像angular没有注册homeController（即使文件运行并输出“Hello from home controller”）。对于如何解决这个问题，几乎没有调试信息是令人沮丧的。任何帮助都将不胜感激 在本地计算机上，我收到以下错误消息： "Error: [ng:areq] Argument 'HomeController' is not a function, got undefined" 在Plnkr

我有一个非常简单的requirejs和angular演示应用程序。当我运行代码时，就好像angular没有注册homeController（即使文件运行并输出“Hello from home controller”）。对于如何解决这个问题，几乎没有调试信息是令人沮丧的。任何帮助都将不胜感激

在本地计算机上，我收到以下错误消息：

"Error: [ng:areq] Argument 'HomeController' is not a function, got undefined"
在Plnkr上，我得到了一个不同的信息：

Error: [ng:areq]
这是plnkr链接

index.html

  <body ng-app="app">
      <div ng-controller="HomeController">
        {{message}}

    </div>
    <script src="http://requirejs.org/docs/release/2.1.14/minified/require.js" data-main="main.js"></script>
  </body>

<html>
  <head>
    <script src="http://requirejs.org/docs/release/2.1.14/minified/require.js" data-main="main.js"></script>
  </head>
  <body>
      <div ng-controller="HomeController">
        {{message}}
    </div>
  </body>
</html>
app.js

require.config({
    paths: {
        "jquery": '//code.jquery.com/jquery-2.1.1.min',
        "angular": '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min',
        "angular.route": '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min'
    },
    shim: {
        "angular": { deps: ["jquery"], exports: "angular" },
        "angular.route": { deps: ["angular"], exports: "angular.route" },
    },
    deps: ["app", "routes"]
});

//kickoff the app
require(["app", "routes" ]);

define(["angular"], function () {
    $("body").append("hello from app<br/>");
    return angular.module("app", ['ngRoute']);
});

define("routes", ["app", "angular.route", "homeController"], function(app) {
    $("body").append("hello from angular.route<br/>");

    app.config(function($routeProvider, $locationProvider) {
        $("body").append("$routeProvider<br/>");
        $locationProvider.html5Mode(true);
        $routeProvider.when("/", {
                templateUrl: "home/home.html",
                controller: "HomeController"
            })

    });
});

define("homeController", ["app"], function (app) {

    $("body").append("hello from home controller<br/>");
    app.controller("HomeController", function ($scope) {
        $("body").append("hello from home controller body<br/>");
        $scope.message = "message from home controller";
    });
});

//kickoff the app
require(["app", "routes" ], function(){
   angular.bootstrap(document, ["app"]);
});

define（[“angular”]、function（）{
$（“body”）.append（“hello from app
”）；
返回角度.module（“app”、['ngRoute']）；
});
routes.js

require.config({
    paths: {
        "jquery": '//code.jquery.com/jquery-2.1.1.min',
        "angular": '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min',
        "angular.route": '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min'
    },
    shim: {
        "angular": { deps: ["jquery"], exports: "angular" },
        "angular.route": { deps: ["angular"], exports: "angular.route" },
    },
    deps: ["app", "routes"]
});

//kickoff the app
require(["app", "routes" ]);

define(["angular"], function () {
    $("body").append("hello from app<br/>");
    return angular.module("app", ['ngRoute']);
});

define("routes", ["app", "angular.route", "homeController"], function(app) {
    $("body").append("hello from angular.route<br/>");

    app.config(function($routeProvider, $locationProvider) {
        $("body").append("$routeProvider<br/>");
        $locationProvider.html5Mode(true);
        $routeProvider.when("/", {
                templateUrl: "home/home.html",
                controller: "HomeController"
            })

    });
});

define("homeController", ["app"], function (app) {

    $("body").append("hello from home controller<br/>");
    app.controller("HomeController", function ($scope) {
        $("body").append("hello from home controller body<br/>");
        $scope.message = "message from home controller";
    });
});

//kickoff the app
require(["app", "routes" ], function(){
   angular.bootstrap(document, ["app"]);
});

定义（“路线”、[“应用程序”、“角度路线”、“家庭控制器”]、功能（应用程序）{
$（“body”）.append（“hello from angular.route
”）；
app.config（函数（$routeProvider，$locationProvider）{
$（“正文”）。追加（$routeProvider
）；
$locationProvider.html5Mode（true）；
$routeProvider.when（“/”{
templateUrl:“home/home.html”，
控制器：“家庭控制器”
})
});
});
homeController.js

require.config({
    paths: {
        "jquery": '//code.jquery.com/jquery-2.1.1.min',
        "angular": '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min',
        "angular.route": '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min'
    },
    shim: {
        "angular": { deps: ["jquery"], exports: "angular" },
        "angular.route": { deps: ["angular"], exports: "angular.route" },
    },
    deps: ["app", "routes"]
});

//kickoff the app
require(["app", "routes" ]);

define(["angular"], function () {
    $("body").append("hello from app<br/>");
    return angular.module("app", ['ngRoute']);
});

define("routes", ["app", "angular.route", "homeController"], function(app) {
    $("body").append("hello from angular.route<br/>");

    app.config(function($routeProvider, $locationProvider) {
        $("body").append("$routeProvider<br/>");
        $locationProvider.html5Mode(true);
        $routeProvider.when("/", {
                templateUrl: "home/home.html",
                controller: "HomeController"
            })

    });
});

define("homeController", ["app"], function (app) {

    $("body").append("hello from home controller<br/>");
    app.controller("HomeController", function ($scope) {
        $("body").append("hello from home controller body<br/>");
        $scope.message = "message from home controller";
    });
});

//kickoff the app
require(["app", "routes" ], function(){
   angular.bootstrap(document, ["app"]);
});

define（“家庭控制器”、[“应用程序”]、函数（应用程序）{
$（“body”）.append（“来自主控制器的您好”
）；
应用控制器（“家庭控制器”，功能（$scope）{
$（“body”）.append（“来自主控制器body的您好”
）；
$scope.message=“来自主控制器的消息”；
});
});
github演示：

我已经解决了这个问题，希望这个答案能帮助其他人

问题是，当dom就绪时，angular将解析html并尝试将HomeController绑定到ng控制器指令，甚至在requirejs加载HomeController文件之前

因此，我最终做的是从中删除ng app指令 index.html。这防止了Angle在加载页面时自动绑定到指令（稍后我们将以编程方式将应用程序绑定到页面）

因为我从Html中删除了ng应用程序。我需要以编程方式将应用程序绑定到html。 我在Main.js中使用了

require.config({
    paths: {
        "jquery": '//code.jquery.com/jquery-2.1.1.min',
        "angular": '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min',
        "angular.route": '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min'
    },
    shim: {
        "angular": { deps: ["jquery"], exports: "angular" },
        "angular.route": { deps: ["angular"], exports: "angular.route" },
    },
    deps: ["app", "routes"]
});

//kickoff the app
require(["app", "routes" ]);

define(["angular"], function () {
    $("body").append("hello from app<br/>");
    return angular.module("app", ['ngRoute']);
});

define("routes", ["app", "angular.route", "homeController"], function(app) {
    $("body").append("hello from angular.route<br/>");

    app.config(function($routeProvider, $locationProvider) {
        $("body").append("$routeProvider<br/>");
        $locationProvider.html5Mode(true);
        $routeProvider.when("/", {
                templateUrl: "home/home.html",
                controller: "HomeController"
            })

    });
});

define("homeController", ["app"], function (app) {

    $("body").append("hello from home controller<br/>");
    app.controller("HomeController", function ($scope) {
        $("body").append("hello from home controller body<br/>");
        $scope.message = "message from home controller";
    });
});

//kickoff the app
require(["app", "routes" ], function(){
   angular.bootstrap(document, ["app"]);
});
我做的最后一件事是将require.js移到头部，而不是将其保留在身体中（不确定这是否必要）。这是修改后的index.html

  <body ng-app="app">
      <div ng-controller="HomeController">
        {{message}}

    </div>
    <script src="http://requirejs.org/docs/release/2.1.14/minified/require.js" data-main="main.js"></script>
  </body>

<html>
  <head>
    <script src="http://requirejs.org/docs/release/2.1.14/minified/require.js" data-main="main.js"></script>
  </head>
  <body>
      <div ng-controller="HomeController">
        {{message}}
    </div>
  </body>
</html>


{{message}}
是的，我也花了很长时间才弄明白

这主要是因为requirejs不会注册所有控制器 由于应用程序正在延迟加载文件和 控制器

您需要做的事情是，如果您想调用任何控制器，您需要手动向模块注册。所以你不会明白这个问题

示例

       app.config(function($routeProvider, $locationProvider,$controllerProvider) {

            //To register the controller which will be load on demand (which will be loaded lazily)
            app.registerController = $controllerProvider.register;

            // To register the following which will be loaded lazily later for future use
            // * Constant   -   app.regiser.value     -   To register constant
            // * Factory    -   app.regiser.factory   -   To register factory
            // * service    -   app.regiser.service   -   To register service
            app.$register = $provide;

            // To register filter
            app.registerFilter = $filterProvider.register;

            // To register directive which will be loaded lazily
            app.registerDirective = $compileProvider.directive;
        }


        app.registerController("HomeController", function ($scope) {
                $("body").append("hello from home controller body<br/>");
                $scope.message = "message from home controller";
            });

var app = angular.module("app");

        app.$register.factory('appService',function(){

        });

app.config（函数（$routeProvider、$locationProvider、$controllerProvider）{
//注册将按需加载的控制器（将延迟加载）
app.registerController=$controllerProvider.register；
//注册以下将在以后延迟加载以供将来使用的内容
//*常量-app.regizer.value-注册常量
//*工厂-app.regizer.Factory-注册工厂
//*服务-app.regizer.service-注册服务
应用程序$register=$provide；
//注册过滤器
app.registerFilter=$filterProvider.register；
//注册将延迟加载的指令
app.registerDirective=$compileProvider.directive；
}
应用程序注册表控制器（“HomeController”，功能（$scope）{
$（“body”）.append（“来自主控制器body的您好”
）；
$scope.message=“来自主控制器的消息”；
});
var app=角度模块（“app”）；
app.$register.factory（'appService'，function（））{
});
或 你可以使用一些第三方插件，比如AngularAMD，$couchPotatoProvider