CODEWITHSUNDEEP
angularjsangularjs-module
user5880775
user5880775

Reputation:

Angularjs Multiple modules

I am writing a website and I need two AngularJs modules: ngRoute and ui.bootstrap.

Now, my script for ngRoute is

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

while for bootstrap is

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

Now I suppose I could combine the two

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

and into the HTML I can write

<html ng-app="allApps">

but if I do, it doesn't work. I can't see anything.

Upvotes: 0

Views: 839

Answers (3)

CodeArtist
CodeArtist

Reputation: 5684

Here is your working example. I separated the apps as you wanted using best practices. As you will see i'm not using the appvariable as a don't consider it best practice. Whatever you place in a javascript file outside of an iffy function is made public. That's why i prefer to use iffy functions and place all angular definitions together at the end of the file.

Also note in index.html the order i place the scripts.

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

Upvotes: 0

M21B8
M21B8

Reputation: 1887

user3130401 is correct, thats the proper way to do it, however, you haven't included ngRoute in your html page. Running your plunkr the console prints:

Uncaught Error: [$injector:modulerr] Failed to instantiate module allApps due to: Error: [$injector:modulerr] Failed to instantiate module ngRoute due to: Error: [$injector:nomod] Module 'ngRoute' is not available!

As soon as you add the ng-route code, it works fine.

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

Upvotes: 0

ddepablo
ddepablo

Reputation: 677

Define an angular module with all the dependences you need.

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

Then use var appto define controllers.

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

html

<html ng-app="allApps">

Upvotes: 3

Related Questions