CODEWITHSUNDEEP
htmlangularjstwitter-bootstrap
Dr. AxE
Dr. AxE

Reputation: 13

How to integrate angular js and twitter bootstrap?

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

Upvotes: 0

Views: 400

Answers (2)

Siraj
Siraj

Reputation: 687

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

Upvotes: 0

sylwester
sylwester

Reputation: 16498

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>

Upvotes: 1

Related Questions