使用AngularJS和Twitter Bootstrap的组合

2 年 ago
雅, 悟
1 minute

使用Twitter Bootstrap可以实现类似的设计，非常方便。
这次我想解释一下关于如何结合使用AngularJS和Bootstrap的方法。

引导

首先，使用AngularJS和Bootstrap的最简单方法是使用yeoman在项目中生成模板。

    yeomanを使ったAngularJSプロジェクトの始め方

当执行yo命令时，会被问到以下问题。

[?] Would you like to include Twitter Bootstrap? (Y/n) 
[?] Would you like to use the SCSS version of Twitter Bootstrap with the Compass CSS Authoring Framework? (Y/n)

如果回答第一个问题是“是”，则Bootstrap将被嵌入模板中。
如果回答第二个问题是“是”，则会使用Bower安装sass-bootstrap框架，并将scss文件编译为css。如果回答“否”，则会下载bootstrap.css和图标字体。

我认为在这种情况下也可以使用这种方法，但是如果在第二个问题中选择了”No”，那么由于Bootstrap没有在bower中管理，因此在升级时需要进行繁琐的适应性调整，而且可能不包含bootstrap-theme.css（非扁平设计主题）。
所以，我认为使用bower安装Bootstrap也是一个不错的选择。

bower install bootstrap --save

UI Bootstrap 的中文解释是 用户界面引导程序。

使用Bootstrap时，提供了许多组件，但当在这些组件上执行某些操作时，需要使用JavaScript编写代码。例如，要显示一个popover，可以使用$(‘#element’).popover(‘show’)。

然而，使用jQuery进行DOM操作违背了AngularJS的原则。因此，Angular UI的UI Bootstrap将Bootstrap的组件转化为Directive，并使其能够通过AngularJS的数据绑定进行处理。

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

还有一个叫AngularStrap的类似选择，但UI Bootstrap更多一些兼容的组件，并且由Angular UI团队开发，给人一种安心感。

请立即在bower上安装并使用。
在bower上有三个包可供选择：angular-ui-bootstrap和angular-ui-bootstrap-bower。angular-ui-bootstrap只提供源码，因此我们将安装angular-ui-bootstrap-bower。
在yeoman生成的项目的根目录下执行以下命令。

bower install angular-ui-bootstrap-bower --save

有以下四个js文件，其中带有”tpls”的文件内包含了模板，带有”min”的文件则是压缩过的文件。通常情况下您可以选择带有”tpls”的文件。

    • ui-bootstrap.js

 

    • ui-bootstrap-tpls.js

 

    • ui-bootstrap.min.js

 

    ui-bootstrap-tpls.min.js

要使用UI Bootstrap，在HTML中包含以下js文件。

<script src="bower_components/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>

最后，我们需要在依赖关系中添加ui.bootstrap。

angular.module('myapp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'ui.bootstrap'
])

现在，我们可以使用UI Bootstrap了。

如果你想要使用rating，可以这样写：
由于rate是双向绑定的，所以文本框的值和rating星星的数量会保持同步。

<input type="text" ng-model="rate">
<rating value="rate"></rating>
bannerAds