6
के साथ कोणीय मैंने बूटरस्ट्रैप को शामिल करने वाले कोणीय अनुप्रयोग बनाने के लिए यमन का उपयोग किया। फिर, मैंने https://github.com/angular-ui/bootstrap पर रीडेम पर निर्देशों का उपयोग करके ui.bootstrap स्थापित करने के लिए बोवर का उपयोग किया।ui.bootstrap प्रतिपादन रिक्त पृष्ठ
अब मैं http://angular-ui.github.io/bootstrap/ पर कैरोसेल उदाहरण को अनुकूलित करने की कोशिश कर रहा हूं।
जब मैं ui.bootstrap शामिल करता हूं, तो मुझे बस एक खाली पृष्ठ मिलता है। मैंने क्रोम और फ़ायरफ़ॉक्स में पेज की कोशिश की और कंसोल में कोई त्रुटि या आउटपुट नहीं मिला।
'use strict';
angular.module('yoApp', ['ui.bootstrap'])
.controller('CatCtrl', function ($scope, $http) {
var cats = $http.get('/rt/cats.json')
.success(
function (data, status, headers, config) {
$scope.slides = data;
});
$scope.myInterval = 5000;
var slides = $scope.slides;
$scope.addSlide = function() {
var newWidth = 200 + ((slides.length + (25 * slides.length)) % 150);
slides.push({
image: 'http://placekitten.com/' + newWidth + '/200',
text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
});
};
for (var i=0; i<4; i++) {
$scope.addSlide();
}
});
मैं इस के साथ और http.get बिना की कोशिश की:
यहाँ मेरी js (cat.js) है।
html पृष्ठ:
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
<div class="row-fluid">
<div class="span6">
<ul>
<li ng-repeat="slide in slides">
<button class="btn btn-mini" ng-class="{'btn-info': !slide.active, 'btn-success': slide.active}" ng-disabled="slide.active" ng-click="slide.active = true">select</button>
{{$index}}: {{slide.text}}
</li>
</ul>
<a class="btn" ng-click="addSlide()">Add Slide</a>
</div>
<div class="span6">
Interval, in milliseconds: <input type="number" ng-model="myInterval">
<br />Enter a negative number to stop the interval.
</div>
</div>
मैं अपने मार्ग की स्थापना की है:
'use strict';
angular.module('yoApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ui.bootstrap'
])
.config(function ($routeProvider) {
$routeProvider
.when('/cat', {
templateUrl: 'views/cat.html',
controller: 'CatCtrl'
})
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
अजीब बात यह है कि जब मैं cat.js में ['ui.bootstrap'] बाहर ले, पृष्ठ के भाग वास्तव में है प्रस्तुत करता है लेकिन मुझे क्रोम में ये त्रुटियां मिलती हैं:
> TypeError: Cannot read property 'length' of undefined
at Object.$scope.addSlide (http://localhost:9000/scripts/controllers/cat.js:14:34)
at new <anonymous> (http://localhost:9000/scripts/controllers/cat.js:22:12)
at invoke (http://localhost:9000/bower_components/angular/angular.js:3000:28)
at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:3012:23)
at http://localhost:9000/bower_components/angular/angular.js:4981:24
at update (http://localhost:9000/bower_components/angular/angular.js:14509:26)
at Object.Scope.$broadcast (http://localhost:9000/bower_components/angular/angular.js:8468:28)
at http://localhost:9000/bower_components/angular/angular.js:7614:26
at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:6995:59)
at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:6995:59) angular.js:5930
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/template/carousel/slide.html
Error: Failed to load template: template/carousel/slide.html
at Error (<anonymous>)
at http://localhost:9000/bower_components/angular/angular.js:4725:17
at http://localhost:9000/bower_components/angular/angular.js:9144:11
at wrappedErrback (http://localhost:9000/bower_components/angular/angular.js:7004:57)
at http://localhost:9000/bower_components/angular/angular.js:7080:53
at Object.Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:8218:28)
at Object.Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:8077:25)
at Object.Scope.$apply (http://localhost:9000/bower_components/angular/angular.js:8304:24)
at done (http://localhost:9000/bower_components/angular/angular.js:9357:20)
at completeRequest (http://localhost:9000/bower_components/angular/angular.js:9520:7)
कोई विचार क्या मैं गलत कर सकता हूं? मैं अन्य नियंत्रकों में काम करने के लिए अन्य सुविधाएं प्राप्त करने में सक्षम हूं और बूटस्ट्रैप विषय के अंदर प्रस्तुत करने के लिए सादा पाठ प्राप्त कर सकता हूं, लेकिन किसी कारण से मैं काम करने के लिए कैरोसेल प्राप्त नहीं कर पा रहा हूं।
यहां मेरे index.html के साथ pkozlowski-opensource के सुझाव के बाद शामिल है। मैं मॉड्यूल घोषणा में ['ui.bootstrap'] छोड़कर कैरोसेल पेज को प्रस्तुत करने में सक्षम हूं, इसलिए मुझे अभी भी कुछ गलत करना होगा।
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/bootstrap.css">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="yoApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- Add your site or application content here -->
<div class="container" ng-view=""></div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- build:js scripts/plugins.js -->
<!-- // <script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-alert.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-dropdown.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-tooltip.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-modal.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-transition.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-button.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-popover.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-typeahead.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-carousel.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-scrollspy.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-collapse.js"></script> -->
<!-- // <script src="bower_components/bootstrap-sass/js/bootstrap-tab.js"></script> -->
<!-- endbuild -->
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- build:js scripts/modules.js -->
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="//localhost:35729/livereload.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/cat.js"></script>
<!-- endbuild -->
</body>
</html>
क्या आपने रीडमे में संकेत के अनुसार ui-bootstrap-tpls-0.60.min.js (और केवल यह फ़ाइल) शामिल किया था? त्रुटि को देखते हुए (त्रुटि: टेम्पलेट लोड करने में विफल: टेम्पलेट/कैरोसेल/slide.html) ऐसा लगता है कि आपने एम्बेडेड टेम्पलेट्स के बिना फ़ाइल शामिल की है या एकाधिक फाइलें शामिल की हैं। –
धन्यवाद। मैंने tpls फ़ाइल जोड़ा। हालांकि, मैं केवल ['ui.bootstrap'] को छोड़कर पृष्ठ को प्रस्तुत करने के लिए प्राप्त कर सकता हूं। 'केवल' से आपका क्या मतलब है? क्या मैं bower_components जैसे जैसे अन्य को भी शामिल करता हूं? – sutee
क्या आप फ़ाइल बनाने के लिए ग्रंट का उपयोग करते हैं? यदि आप "html2js" भाग को छोड़ देते हैं तो इनलाइन टेम्पलेट्स शामिल नहीं हैं। प्रत्येक बार मुझे लगता है –