How to integrate angular js and twitter bootstrap?

Question

I'm trying integrate angular js and twitter bootstrap, but the file is not executed as required. I have included my angular.min.js file downloaded from https://angularjs.org/ in js folder of bootstrap. I have attached my code below.

index.html

<html ng-app="gemStore">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body ng-controller="StoreController as store">
<div class="product row">
   <h3>
      {{store.product.name}}
      <em class="pull-right">{{store.product.price}}</em>
   </h3>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="bootstrap.min.js"></script>

<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

app.js

(function(){
var gem = { name: 'Azurite', price: 2.95 };
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
    this.product=gem;
});
})();

sylwester · Accepted Answer · 2014-09-20 22:19:37Z

1

Please see here:

Bootstrap components written in pure AngularJS by the AngularUI Team

http://angular-ui.github.io/bootstrap/

(function(){
var gem = { name: 'Azurite', price: 2.95 };
var app = angular.module('gemStore', ['ui.bootstrap']);
app.controller('StoreController', function(){
    this.product=gem;
});
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<html ng-app="gemStore">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body ng-controller="StoreController as store">
<div class="product row">
   <h3>
      {{store.product.name}}
      <em class="pull-right">{{store.product.price}}</em>
   </h3>
</div>


</body>
</html>

edited Sep 20, 2014 at 22:19

answered Sep 20, 2014 at 21:22

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nrodic Over a year ago

Not directly answering question but certainly useful hint.

Dr. AxE Over a year ago

My output is {{store.product.name}} {{store.product.price}}

sylwester Over a year ago

@Dr.AxE I'm not sure for what do you need boostrap in your question but please see my update answer is shows how to add boostrap ui to your code

Dr. AxE Over a year ago

It is just a part of my code..So i need bootstrap.. thank you

Siraj · Accepted Answer · 2014-09-20 22:28:24Z

0

For your code to work, try changing the jQuery version to something above 1.9. If you are using angular 1.2.18+ then you can keep older jQuery just load angular before jQuery

Shaping up with AngularJS. Its a good course, you must go through all the videos. Here is the complete project with gulp server thrown in, Try it out. It has bootstrap running with angular https://github.com/sirajc/gemstore_codeschool_angular

edited Sep 20, 2014 at 22:28

answered Sep 20, 2014 at 21:00

Siraj

6874 silver badges7 bronze badges

4 Comments

Dr. AxE Over a year ago

the example is taken from code school angularjs video. its not working in my case

Dr. AxE Over a year ago

My output is {{store.product.name}} {{store.product.price}}

Siraj Over a year ago

AngularJS is not bootstrapping, hence the output is not evaluated, Can u see any error in console and share the error here

Dr. AxE Over a year ago

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///E:/Softwares/bootstrap-3.2.0-dist/bootstrap.min.css Failed to load resource: net::ERR_FILE_NOT_FOUND file:///E:/Softwares/bootstrap-3.2.0-dist/bootstrap.min.js Failed to load resource: net::ERR_FILE_NOT_FOUND file:///E:/Softwares/bootstrap-3.2.0-dist/angular.min.js Failed to load resource: net::ERR_FILE_NOT_FOUND file:///E:/Softwares/bootstrap-3.2.0-dist/app.js

Collectives™ on Stack Overflow

How to integrate angular js and twitter bootstrap?

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related