2013-03-18 2 views
2

Все очень «свежо» прямо сейчас. У меня есть проект углового семени, и я использую страницу индекса async. Когда я добавляю ссылку для углового бутстрапа, он взрывается. Этого не происходит, когда я не загружаю асинхронный стиль.Загрузка AngularUI bootstrap асинхронно

Как использовать загрузку AngularUI с загрузчиком $ script?

Ошибки я получаю являются:

Uncaught TypeError: Object #<Object> has no method 'controller' ui-bootstrap-0.2.0.js:9 
(anonymous function) ui-bootstrap-0.2.0.js:9 

Uncaught Error: No module: ui.bootstrap.collapse new-job-order:18 
(anonymous function) new-job-order:18 
d new-job-order:18 
(anonymous function) new-job-order:18 
(anonymous function) angular.js:2754 
forEach angular.js:133 
loadModules angular.js:2750 
(anonymous function) angular.js:2755 
forEach angular.js:133 
loadModules angular.js:2750 
(anonymous function) angular.js:2755 
forEach angular.js:133 
loadModules angular.js:2750 
(anonymous function) angular.js:2755 
forEach angular.js:133 
loadModules angular.js:2750 
createInjector angular.js:2692 
bootstrap angular.js:959 
(anonymous function) new-job-order:45 
o new-job-order:29 
e.onload.e.onerror.e.(anonymous function) new-job-order:29 

Update

Мой код действительно только шаблон семян, используя индекс-async.html файл. Затем я добавил (или попытался) bootstrap-ui. Соответствующие части:

<script> 
    // include angular loader, which allows the files to load in any order 
    /* 
    AngularJS v1.0.0rc1 
    (c) 2010-2012 AngularJS http://angularjs.org 
    License: MIT 
    */ 
    'use strict';(function(i){function d(c,a,e){return c[a]||(c[a]=e())}return d(d(i,"angular",Object),"module",function(){var c={};return function(a,e,f){e&&c.hasOwnProperty(a)&&(c[a]=null);return d(c,a,function(){function b(a,b,d){return function(){c[d||"push"]([a,b,arguments]);return g}}if(!e)throw Error("No module: "+a);var c=[],d=[],h=b("$injector","invoke"),g={_invokeQueue:c,_runBlocks:d,requires:e,name:a,provider:b("$provide","provider"),factory:b("$provide","factory"),service:b("$provide","service"), 
    value:b("$provide","value"),constant:b("$provide","constant","unshift"),filter:b("$filterProvider","register"),directive:b("$compileProvider","directive"),config:h,run:function(a){d.push(a);return this}};f&&h(f);return g})}})})(window); 

    // include a third-party async loader library 
    /*! 
    * $script.js v1.3 
    * https://github.com/ded/script.js 
    * Copyright: @ded & @fat - Dustin Diaz, Jacob Thornton 2011 
    * Follow our software http://twitter.com/dedfat 
    * License: MIT 
    */ 
    !function(a,b,c){function t(a,c){var e=b.createElement("script"),f=j;e.onload=e.onerror=e[o]=function(){e[m]&&!/^c|loade/.test(e[m])||f||(e.onload=e[o]=null,f=1,c())},e.async=1,e.src=a,d.insertBefore(e,d.firstChild)}function q(a,b){p(a,function(a){return!b(a)})}var d=b.getElementsByTagName("head")[0],e={},f={},g={},h={},i="string",j=!1,k="push",l="DOMContentLoaded",m="readyState",n="addEventListener",o="onreadystatechange",p=function(a,b){for(var c=0,d=a.length;c<d;++c)if(!b(a[c]))return j;return 1};!b[m]&&b[n]&&(b[n](l,function r(){b.removeEventListener(l,r,j),b[m]="complete"},j),b[m]="loading");var s=function(a,b,d){function o(){if(!--m){e[l]=1,j&&j();for(var a in g)p(a.split("|"),n)&&!q(g[a],n)&&(g[a]=[])}}function n(a){return a.call?a():e[a]}a=a[k]?a:[a];var i=b&&b.call,j=i?b:d,l=i?a.join(""):b,m=a.length;c(function(){q(a,function(a){h[a]?(l&&(f[l]=1),o()):(h[a]=1,l&&(f[l]=1),t(s.path?s.path+a+".js":a,o))})},0);return s};s.get=t,s.ready=function(a,b,c){a=a[k]?a:[a];var d=[];!q(a,function(a){e[a]||d[k](a)})&&p(a,function(a){return e[a]})?b():!function(a){g[a]=g[a]||[],g[a][k](b),c&&c(d)}(a.join("|"));return s};var u=a.$script;s.noConflict=function(){a.$script=u;return this},typeof module!="undefined"&&module.exports?module.exports=s:a.$script=s}(this,document,setTimeout) 

    // load all of the dependencies asynchronously. 
    $script([ 
     'lib/angular/angular.js', 
     'lib/angular/angular-resource.js', 
     'lib/angular-ui/ui-bootstrap-0.2.0.js', 
     'js/app.js', 
     'js/services.js', 
     'js/controllers.js', 
     'js/filters.js', 
     'js/directives.js' 
    ], function() { 
     // when all is done, execute bootstrap angular application 
     angular.bootstrap(document, ['myApp']); 
    }); 
    </script> 

Тогда в app.js я:

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngResource', 'ui.bootstrap']). 
    config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { 
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: MyCtrl1}); 
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: MyCtrl2}); 
    $routeProvider.otherwise({redirectTo: '/view1'}); 
    $locationProvider.html5Mode(true).hashPrefix('!'); 
    }]); 
+0

Вам нужно показать код. – ProLoser

+1

Вы, случайно, нашли решение этой проблемы? Я просто столкнулся с той же проблемой в своем проекте. –

ответ

2

Я не думаю, что она непосредственно связана с проектом начальной загрузки, на данный момент AngularJS просто не позволяет асинхронные нагрузки модулей, проверьте эту тему: How is modularity mitigated in AngularJS?.

В основном все модули AngularJS должны быть загружены до того, как приложение загрузится. Поэтому вам нужно убедиться, что все модули, от которых вы зависите, полностью загружены до вашего запуска приложения AngularJS.

Хотел бы помочь больше, но основанный только на коде ошибки, это почти невозможно сказать больше.

+0

Я обновил сообщение, чтобы включить соответствующий код. Я думал, что часть $ script.js настроена так, что она загружает все файлы, а затем увеличивает угол наклона так, чтобы он мог использовать async. –

+0

@ user45763 Я действительно не уверен, что здесь происходит ... Единственное, что стоит изучить, это тот факт, что вы включаете файл dist без встроенных шаблонов. Попробуйте изменить 'ui-bootstrap-0.2.0.js' на' ui-bootstrap-tpls-0.2.0.js'. Больше информации здесь: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files –

+0

Страница рефинансирования github заставляет ее звучать так, как будто я не смогу использовать свои собственные пользовательские части, если Я использую библиотеку с встроенной библиотекой. Я хочу иметь возможность настроить это. –

0

Оказывается, это ошибка загрузчика $ скрипта, вот вопрос GitHub объяснения проблемы: https://github.com/angular/angular-seed/issues/40

Чтобы решить эту проблему, просто захватить обновленный до последней версии загрузки сценария здесь: https://github.com/DemonShi/angular-seed/blob/2a8b3465574e9fad208b64050ad30e9c45df4ac9/app/index-async.html

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