Angularjs Несколько модулей

Я пишу веб-сайт, и мне нужны два модуля AngularJs: ngRoute и ui.bootstrap.Angularjs Несколько модулей

Теперь, мой сценарий для 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">

но если сделаете, все не работает. Я ничего не вижу.

источник

2016-03-03 Anonymous

'myApp2' не указан нигде в вашем коде выше. Какая ошибка вы получаете? – Dalorzo

mybad ... myApp2 = bootstrapApp (я неправильно скопировал) –

у вас есть plnkr или что-то в этом роде? – CodeArtist

Определите угловой модуль со всеми необходимыми зависимостями.

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

Затем с помощью вар app определить контроллеры.

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

HTML

<html ng-app="allApps">

источник

2016-03-03 15:13:16 ddepablo

Я действительно сделал это, но не сделал работа https://plnkr.co/edit/6huuIOfqmyM61gVqWTVp?p=preview –

https://plnkr.co/edit/ugo0sHAXLhmWYP0Hk0NV?p=preview – ddepablo

user3130401 правильно, вот правильный способ сделать это, однако, вы не включили ngRoute в вашей HTML странице. Запуск вашей plunkr консоль печатает:

Uncaught Ошибка: [$ Инжектор: modulerr] Не удалось создать экземпляр модуля allApps из-за: Error: [$ инжекторной: modulerr] Не удалось создать экземпляр модуля ngRoute из-за: Ошибка: [$ инжектор: nomod] Модуль 'ngRoute' недоступен!

Как только вы добавите код маршрута ng, он отлично работает.

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

источник

2016-03-03 15:36:01 M21B8

Адрес working example. Я отделил приложения так, как вам хотелось, используя лучшие практики. Как вы увидите, я не использую переменную app, так как не считаю ее лучшей практикой. Все, что вы размещаете в файле javascript вне функции iffy, становится общедоступным. Вот почему я предпочитаю использовать функции iffy и помещать все угловые определения вместе в конце файла.

Также обратите внимание на index.html заказ i поместить сценарии.

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

индекс.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>

источник

2016-03-04 12:14:16 CodeArtist

ответ

Смежные вопросы