如何集成angular js和twitter bootstrap

我正在尝试集成angular js和twitter引导程序，但该文件没有按要求执行。我已经包含了我的angular.min.js文件，下载自https://angularjs.org/在bootstrap的js文件夹中。我在下面附上了我的代码。

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

请参阅此处：

AngularUI团队用纯AngularJS编写的引导组件

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>

要使代码正常工作，请尝试将jQuery版本更改为1.9以上。如果你使用的是angular 1.2.18+，那么你可以让旧的jQuery在jQuery 之前只加载angular

与AngularJS一起成型。这是一门很好的课程，你必须看完所有的视频。这是一个完整的项目，包含了gullow服务器，请尝试一下。它具有带角度的引导运行https://github.com/sirajc/gemstore_codeschool_angular

相关内容

最新更新

热门标签：