对于一般的使用者来说，AngularJS的ng-app都是手动绑定到某个dom元素。但是在一些应用中，这样就显得很不方便了。
绑定初始化
通过绑定来进行angular的初始化，会把js代码侵入到html中，但是对于新手使用来说，还是足够了！
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&script src=&/libs/angular.js/1.2.16/angular.min.js&&&/script&
&body ng-app=&myApp&&
&div ng-controller=&myCtrl&&
{{ hello }}
&script type=&text/javascript&&
var myModule = angular.module(&myApp&,[]);
myModule.controller(&myCtrl&,function($scope){
$scope.hello = &hello,angular!&;
运行后，会显示hello,angular!
手动初始化
Angular中也提供了手动绑定的api——bootstrap，它的使用方式如下：
angular.bootstrap(element, [modules], [config]);
其中第一个参数element:是绑定ng-app的dom元素；
modules：绑定的模块名字
config：附加的配置
简单的看一下代码：
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&script src=&/libs/angular.js/1.2.16/angular.min.js&&&/script&
&body id=&body&&
&div ng-controller=&myCtrl&&
{{ hello }}
&script type=&text/javascript&&
var app = angular.module(&bootstrapTest&,[]);
app.controller(&myCtrl&,function($scope){
$scope.hello = &hello,angular from bootstrap&;
// angular.bootstrap(document.getElementById(&body&),['bootstrapTest']);
angular.bootstrap(document,['bootstrapTest']);
值得注意的是：
angular.bootstrap只会绑定第一次加载的对象。
后面重复的绑定或者其他对象的绑定，都会在控制台输出错误提示。
阅读(...) 评论()angular-ui-bootstrap-datepicker - AngularJS Modules, Plugins and Directives
Extension for angular ui-bootstrap with possibily of showing more than 1 month in daypicker
1 person uses it
Submitted by:
Please enable JavaScript to view the
This page was last updated almost 3 years ago.里面可以复制你想要的样式组件，官方有介绍怎么使用，不过本人稍微修改了下
使用ngx-bootstrap的步骤
1、npm install ngx-bootstrap –save
2、npm install bootstarap –save-dev
3、在angular-cli.json文件中添加bootstrap为全局样式
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
4、根据官方文档中你需要使用什么样式就要在app.module.ts注入
import { AccordionModule,AlertModule,ButtonsModule } from 'ngx-bootstrap';
@NgModule({
declarations: [
AppComponent
imports: [
BrowserModule,
FormsModule,
HttpModule,
AccordionModule.forRoot(),
AlertModule.forRoot(),
ButtonsModule.forRoot()
5、直接官网复制代码
6、运行效果
本文已收录于以下专栏：
相关文章推荐
一、效果图
1、上面form表单点击提交可以在下面创建一个卡片(前提是输入不能为空)
2、使用局部变量获取输入框的值
3、使用ponent.ts做数据层
4、使用排序
5 、使用...
angular-cli bootstrap4 使用模态框时，遇到了这2个问题
模态框 不显示
模态框显示后不在最上层
模态框 不现实的问题这个是纠结最久的问题，明明和官方文档例子一...
程序员升职加薪指南！还缺一个“证”！
CSDN出品，立即查看！
摘要：本文将介绍在 Angular4 项目中配置 ng-bootstrap
相较于angularjs中的ng-translate, angular2也有适合自己的国际化模块，就是ngx-translate。
项目地址：/ngx-trans...
自定义组件的标签，用于匹配元素。
指定组件的输入属性。
一、使用高效的css选择器.reader p.list div{
//省去代码
我们看css选择器是从左边到右边看的，实际上css解析的时候是从右边到左边解析的:1、css引擎是先查找...
一、学单词:angular路由中涉及到很多新单词词汇
配置路由，保存URL对应的组件，以及在哪个RouterOutlet中展现
* Created by 何欣澄 on
import {Observable} from 'rxjs/Observable';
import {Inj...
SpringBoot 的一些补充
关于 @SpringBootApplication 的主程序入口
Springboot 的程序入口类，即main方法执行的类是有一些需要注意的地方的，它的路径应当在...
响应式编程就是一种异步数据流和变化传播的编程规范,可以简单的理解为是观察者模式与Rxj的开发模式,在流的操作中通过一些特定的操作符，从旧的流转换为新的流，然后监听变化
一、rxjs的基本使用及基本术语...
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;
欢迎您订阅我们的技术周刊
我们会向您分享我们精心收集整理的，最新的行业资讯，技术动态，外文翻译，热点文章;
我们使用第三方邮件列表向您推送，我们不保存您的任何个人资料，注重您的隐私，您可以随时退订,
欢迎分享您的观点，经验，技巧，心得
让我们一起找寻程序员的快乐，探索技术, 发现IT人生的乐趣;
本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG，请即时告知我们： ourjs(
订阅邮件周刊
将BootstrapJS和AngularJS结合使用以及为什么不用jQuery
注意 转载须保留原文链接，译文链接，作者译者等信息。&&
&和 &都是人们大量使用的工具。在很多项目中，它们需要一起使用。为什么不呢？他们已经改变了CSS和JS的开发方式，让前端既成为令人难以置信的工具。但是，把它们放在一起使用还有一些问题，特别是当你试图在Angular的项目中引入Bootstrap JavaScript组件时，会是一个问题。当建立了Angular的项目，##你不应该添加完整的jQuery库##。 jQlite已经包含在Angular中的，所有jQuery必要的功能它都有。这是因为把jQuery添加到Angular的项目将很难让你完全掌握Angular的核心优势和数据绑定的力量。比如你想在某种程度上改变View视图，一个很好的做法是通过Angular所绑定的data数据来改变。我们写这篇文章的目标就是为了，学习用jQuery和Angular通过不同的手段达到相同的目的。Bootstrap JavaScript和Angular问题这个问题可以追溯到，你不应该在你的Angular项目中使用jQuery的原则。jQuery操作视图的方法与Angular操纵数据的方法会起冲突。为什么你不应该使用jQuery您使用jQuery操作数据抓住并注入到DOM的方式基本上基于事件。当我们使用Bootstrap JavaScript组件时，比如一个按钮，我们需要“单击此按钮时，设置此按钮为激活状态”。并将这种设置添加入新加的按钮中。通过添加 .active 类和检查input（如果你的按钮是一个input）为实现。在Angular中，操纵数据不是通过抓取和注入。一般通过数据绑定来实现，野蛮抓取注入数据。也能够改变每个组件的状态，不过在切换时就会暴露出问题。这就是为什么我们不能直接用Bootstrap的JavaScript。它依赖于jQuery我们不希望jQuery的破坏我们的Angular项目。如果我们试图绑定变量到组件，它无法工作。解决方案： UI Bootstrap那么该如何解决？我们从Angular得知，我们需要将数据绑定到一个特定的组件，我们应该建立一个&指令。这将让我们的Angular网站，更关注数据的变化。该解决方案是一种被称为&的项目。这是由Angular UI团队开发的，增加了许多Angular的扩展组件。UI Bootstrap不使用jQ 它为每个Bootstrap JS组件添加了内置指令（directives）。对于UI Bootstrap（非BootstrapJS）的要求是：没有jQuery的依赖依赖Angular依赖Bootstrap CSS文件就是这样。现在，我们要如何将它集成到我们的项目？我们的Angular应用让我们来看看我们需要些什么设置。如果你已经看过JavaScript代码，你会看到我们创建了一个Angular模块和控制器。然后，我们创建的按钮和折叠的变量。为此，下一步就是要拿到UI Bootstrap的文件，放到我们的项目中。那么我们能够在我们的Angular模块中导入ui.bootstrap。就这样，我们就能够获取需要模仿BootstrapJS组件的指令（directives ）！// 创建 angular app 导入 ui.bootstrapangular.module('app', ['ui.bootstrap']).controller('mainController', function($scope) {&&& // BUTTONS ======================& // 设置数据& $scope.bigData = {};&&& $scope.bigData.breakfast =& $scope.bigData.lunch =& $scope.bigData.dinner =&&& // COLLAPSE =====================& $scope.isCollapsed =&&});现在，正确的使用方式是，当按下按钮时调整这些变量的值。使用UI Bootstrap按钮指令(Directive)通过文档 ，使用复选框按钮正确的方法是添加 ng-model 的定义对象，并添加 btn-checkbox 属性。下面是我们按钮的代码：&div class="btn-group" data-toggle="buttons"&& & &label class="btn btn-primary" ng-model="bigData.breakfast" btn-checkbox&& & & Breakfast& & &/label&& & &label class="btn btn-primary" ng-model="bigData.lunch" btn-checkbox&& & & Lunch& & &/label&& & &label class="btn btn-primary" ng-model="bigData.dinner" btn-checkbox&& & & Dinner& & &/label&&/div&现在，当我们点击按钮时，我们可以看到该模型的变化，就像我们希望的那样。使用UI Bootstrap折叠指令对于折叠，我们将基于isCollapsed变量的值打开和关闭面板。因此，我们将使用 ng-click="isCollapsed=!isCollapsed"。这将触发我们的isCollapsed变量从而切换面板。&div class="panel panel-default"&& & &div class="panel-heading"&& & & &h4 class="panel-title"&& & & & &a href="#" ng-click="isCollapsed = !isCollapsed"&& & & & & Collapsible Group Item #1& & & & &/a&& & & &/h4&& & &/div&& & &div collapse="isCollapsed"&& & & &div class="panel-body"&Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.& & & &/div&& & &/div&&/div&现在，我们两个组件都可以工作了！在美丽时尚的Angular中，设置一个变量，看着它影响一些视图。在线示例: 相关阅读：
原文地址：
&热门文章 - 分享最多
&相关阅读 - 大话编程
&关键字 - 分享
&欢迎订阅 - 技术周刊
我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私，您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐，探索技术, 发现IT人生的乐趣;
我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊