Question

我正在写一个网站，我需要两个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">

但如果我这样做，它就行不通。我看不到任何东西。

Answer 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">

Answer 2

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

未捕获错误：[$ injector：modulerr]由于以下原因无法实例化模块allApps：错误：[$ injector：modulerr]由于以下原因无法实例化模块ngRoute：错误：[$ injector：nomod]模块＆＃39; ngRoute＆＃39;不可用！

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

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

Answer 3

这是你的working example。我根据您的需要使用最佳实践分离了应用程序。正如您将看到的那样，我没有使用app变量作为不考虑它的最佳实践。无论你在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>

Angularjs多个模块

3 个答案: