Wie kann ich eckigen Bootstrap korrekt in eine angularjs App injizieren?Warum wird kein eckiger Bootstrap injiziert?
Bei der manuellen ich Remote-Versionen der Bibliotheken mit dem folgenden Code enthalten in index.html, Winkel Bootstrap arbeitet:
<!-- start manual dependencies for testing purposes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js" data-semver="1.5.0" data-require="[email protected]"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-touch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-cookies.js"></script>
<link data-require="[email protected]" data-semver="0.13.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="0.13.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap-tpls.js"></script>
<!-- end manual dependencies for testing purposes -->
jedoch die App hält Kompilieren (was bedeutet, dass Sie JavaScript nicht funktioniert Alles und nur HTML wird an den Browser geliefert) wenn ich versuche, die Abhängigkeiten automatisch verwaltet werden.
las ich this other posting on the same topic und versuchte, seine Vorschläge wie folgt, so ist dies kein Duplikat Posting:
[[email protected] client]$ bower install angular-bootstrap
bower cached git://github.com/angular-ui/bootstrap-bower.git#1.2.5
bower validate 1.2.5 against git://github.com/angular-ui/bootstrap-bower.git#*
[[email protected] client]$
Bower erzeugt dann die folgende Liste der in index.html enthält, die das Handbuch ersetzen beinhaltet oben gezeigt:
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
<!-- endbuild -->
Und bower.json beinhaltet folgende Leistungen:
{
"name": "client",
"version": "0.0.0",
"dependencies": {
"angular": "^1.4.0",
"bootstrap-sass-official": "^3.2.0",
"angular-animate": "^1.4.0",
"angular-aria": "^1.4.0",
"angular-cookies": "^1.4.0",
"angular-messages": "^1.4.0",
"angular-resource": "^1.4.0",
"angular-route": "^1.4.0",
"angular-sanitize": "^1.4.0",
"angular-touch": "^1.4.0",
"angular-bootstrap": "^1.2.5"
},
"devDependencies": {
"angular-mocks": "^1.4.0"
},
"appPath": "app",
"moduleName": "clientApp",
"overrides": {
"bootstrap": {
"main": [
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
]
}
}
}
Da die App kompiliert und läuft richtig JavaScript, wenn die http oben enthält verwendet, die Sie wirklich brauchen nicht zu wissen, wie ich ui.bootstrap in die App-Module am Injektion, aber ich bin auch für Gründlichkeit folgt:
angular
.module('app', ['ngAnimate', 'ngRoute', 'ngTouch',
'auth', 'home', 'secure', 'public1', 'navigation',
'ui.bootstrap' ])
Welche spezifischen Änderungen müssen an den obigen vorgenommen werden, um eckigen Bootstrap aus den lokalen Bower-Ordnern erfolgreich in die App zu injizieren?
Sind alle in der gleichen Reihenfolge aufgelisteten Dateien nach wie vor zu den Anwendungscode einschließlich relativ? Kann Ihr Browser auch Ihr Bower-Verzeichnis finden? – tyler
@tyler Der Browser ist sicherlich in der Lage, das Bower-Verzeichnis zu finden, da die eckige App mit dem automatisierten Build arbeitet, bis ich versuche, angular-bootstrap hinzuzufügen. Die Aufträge sind genau so wie im OP angezeigt. Gibt es eine Zusatzdatei, die ich posten sollte? – CodeMed
@estus Diese App verwendet kein Kabel. Das Setup umfasst node.js, yeoman, Grunt und bower. – CodeMed