Angularjs 多个模块答案

【问题标题】：Angularjs Multiple modulesAngularjs 多个模块
【发布时间】：2016-03-03 14:53:49
【问题描述】：

我正在写一个网站，我需要两个 AngularJs 模块：ngRoute 和 ui.bootstrap。

现在，我的 ngRoute 脚本是

var ngRouteApp=angular.module('ngRouteApp',["ngRoute"]);
ngRouteApp.config(['$routeProvider', function($routeProvider){
    $routeProvider
     ... some stuff here ...
}]);

而对于引导是

var bootstrapApp = angular.module('bootstrapApp', ['ui.bootstrap']);
bootstrapApp.controller('CarouselCtrl', CarouselCtrl);
function CarouselCtrl($scope){
      ...some stuff here...
};

现在我想我可以将两者结合起来

angular.module("allApps", ["ngRouteApp", "bootstrapApp"]);

进入我可以编写的 HTML

<html ng-app="allApps">

但如果我这样做，它就不起作用。我什么都看不到。

【问题讨论】：

myApp2 未在上述代码中的任何位置声明。您遇到了什么错误？
mybad... myApp2 = bootstrapApp（我复制错误）
你有 plnkr 什么的吗？
控制台显示什么？
["ngRouteApp", "bootstrapApp"]?你是说["ngRoute", "ui.bootstrap"]？

标签： angularjs angularjs-module

【解决方案1】：

定义一个包含所有你需要的依赖的角度模块。

var app = angular.module('allApps',['ngRoute', 'ui.bootstrap'])
    .config(['$routeProvider', function($routeProvider){
        $routeProvider
            ... some stuff here ...
    }]);

然后使用 var app来定义控制器。

app.controller('CarouselCtrl', [ '$scope', function ($scope){
        ...some stuff here...
}]);

html

<html ng-app="allApps">

【讨论】：

我确实做到了，但没有用plnkr.co/edit/6huuIOfqmyM61gVqWTVp?p=preview

【解决方案2】：

user3130401 是正确的，这是正确的方法，但是，您没有在 html 页面中包含 ngRoute。运行你的 plunkr 控制台打印：

未捕获的错误：[$injector:modulerr] 无法实例化模块 allApps，原因如下：错误：[$injector:modulerr] 无法实例化模块 ngRoute，原因是：错误：[$injector:nomod] 模块“ngRoute”不可用！

只要你添加了 ng-route 代码，它就可以正常工作了。

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>

【讨论】：

【解决方案3】：

这是您的working example。我使用最佳实践根据您的需要分离了应用程序。如您所见，我没有使用appvariable 作为不认为它的最佳实践。您在 iffy 函数之外的 javascript 文件中放置的任何内容都会公开。这就是为什么我更喜欢使用 iffy 函数并将所有角度定义放在文件末尾的原因。

还要在 index.html 中注明我放置脚本的顺序。

<script src="ngRouteApp.js"></script>
<script src="app.js"></script>

app.js

(function(angular) {
    "use strict";

    function carouselDemoCtrl($scope) {
        var vm = $scope;
        vm.myInterval = 3000;
        vm.noWrapSlides = false;
        vm.activeSlide = 0;
        vm.slides = [{
            image: 'http://lorempixel.com/400/200/'
        }, {
            image: 'http://lorempixel.com/400/200/food'
        }, {
            image: 'http://lorempixel.com/400/200/sports'
        }, {
            image: 'http://lorempixel.com/400/200/people'
        }];
    }

    carouselDemoCtrl.$inject = ["$scope"];

    angular
        .module("allApps", ["ngRoute", "ui.bootstrap"])
        .controller("carouselDemoCtrl", carouselDemoCtrl);
})(angular);

ngRouteApp.js

(function(angular) {
    "use strict";

    function configs($routeProvider) {
        $routeProvider
            .when('/', {
                template: ''
            })
            .when('/gallery', {
                templateUrl: 'pages/gallery.html'
            })
            .when('/actorBio', {
                templateUrl: 'pages/actorBio.html'
            })
            .when('/contatti', {
                templateUrl: 'pages/contatti'
            })
            .otherwise({
                redirectTo: '/'
            });
    }

    configs.$inject = ["$routeProvider"];

    angular
        .module("ngRouteApp", ["ngRoute"])
})(angular);

index.html

<!doctype html>
<html ng-app="allApps">

<head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>

    <script src="ngRouteApp.js"></script>
    <script src="app.js"></script>
</head>

<body>
    <div>
        Write your name here
        <input type="text" ng-model="name"> Hi {{name}} Those are your photos:
        <div ng-controller="carouselDemoCtrl" id="slides_control">
            <div>
                <uib-carousel active="active" interval="myInterval">
                    <uib-slide ng-repeat="slide in slides" index="$index">
                        <img ng-src="{{slide.image}}" style="margin:auto;">
                        <div class="carousel-caption">
                            <h4>Slide {{$index+1}}</h4>
                        </div>
                    </uib-slide>
                </uib-carousel>
            </div>
        </div>
    </div>
</body>

</html>

【讨论】：