• 深入理解bootstrap框架之入门准备
• AngularJs bootstrap搭载前台框架——基础页面
• 基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
• 基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
• BootStrop前端框架入门教程详解

<script src="lib/angular/angular-strap.js"></script> 
<script src="lib/angular/angular-resource.js"></script> 
<script src="lib/angular/angular-cookies.js"></script> 

''use strict''; 
 
/* Services */ 
 
 
// Demonstrate how to register services 
// In this case it is a simple value service. 
var services = angular.module(''jthink.services'', [''ngResource'']). 
 value(''version'', ''1.0''); 
 
services.factory(''LoginService'', [''$resource'', function ($resource) { 
 return $resource(''fakeData/userLogin.json'', {}, { 
 login: {method: ''GET'', params: {}, isArray: false} 
 }); 
}]); 

''use strict''; 
 
/* Controllers */ 
var controllers = angular.module(''jthink.controllers'', []); 
controllers.controller(''LoginCTRL'', [''$scope'', ''LoginService'', function ($scope, LoginService) { 
 $scope.login = {}; 
 $scope.login.submit = function() { 
 console.log($scope.login.email); 
 console.log($scope.login.password); 
 // do some process, invoke the service layer 
 LoginService.login( 
  {}, 
  { 
  email: $scope.login.email, 
  password: $scope.login.password 
  }, 
  function (success) { 
  if (success.status == "success") { 
   alert(''login success''); 
  } else { 
   // error message 
  } 
  }, 
  function (error) { 
  // error message 
  } 
 ); 
 }; 
}]); 

• AngularJS bootstrap启动详解及实例代码
• AngularJs bootstrap搭载前台框架——基础页面
• AngularJs bootstrap搭载前台框架——准备工作
• 利用Angularjs和Bootstrap前端开发案例实战
• Bootstrap和Angularjs配合自制弹框的实例代码
• BootStrap+Angularjs+NgDialog实现模式对话框
• angularjs封装bootstrap时间插件datetimepicker
• 基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
• angularJS与bootstrap结合实现动态加载弹出提示内容
• AngularJS 与Bootstrap实现表格分页实例代码

<script src="lib/angular/angular.min.js"></script> 
<script src="lib/jquery/jquery-1.10.2.min.js"></script> 
<script src="lib/bootstrap/bootstrap.min.js"></script> 
<script src="js/app.js"></script> 
<script src="js/services.js"></script> 
<script src="js/controllers.js"></script> 
<script src="js/filters.js"></script> 
<script src="js/directives.js"></script> 

<span><div> 
 <div> 
  <div> 
  <div> 
   <div> 
   <ahref="#">JThink</a> 
   <ul> 
    <li><a href="#/login">login</a></li> 
    <li><a href="#/register">register</a></li> 
   </ul> 
   </div> 
  </div> 
  </div> 
  <div id="content"ng-view></div> 
 </div> 
 </div> 
 
 <div> 
 <div> 
  <p> 
  version1.0 
  </p> 
 </div> 
 </div></span> 

''use strict''; 
 
 
// Declare app level module which depends on filters, and services 
angular.module(''jthink'', [''jthink.filters'', ''jthink.services'', ''jthink.directives'']). 
 config([''$routeProvider'', function($routeProvider) { 
 $routeProvider.when(''/login'', {templateUrl: ''partials/login.html'', controller: MyCtrl2}); 
 $routeProvider.when(''/register'', {templateUrl: ''partials/register.html'', controller: MyCtrl2}); 
 $routeProvider.otherwise({redirectTo: ''/login''}); 
 }]); 

<div id="login" ng-controller="login"> 
 <form> 
 <div> 
  <labelfor="inputEmail">Login</label> 
 </div> 
 <div> 
  <labelfor="inputEmail">Email</label> 
  <div> 
  <input type="text" id="inputEmail" placeholder="Email" ng-model="login.email"> 
  </div> 
 </div> 
 <div> 
  <labelfor="inputPassword">Password</label> 
  <div> 
  <input type="password" id="inputPassword" placeholder="Password" ng-model="login.password"> 
  </div> 
 </div> 
 <div> 
  <div> 
  <label> 
   <input type="checkbox"> Remember me 
  </label> 
  <button type="button"ng-click="login.submit()">Sign in</button> 
  </div> 
 </div> 
 </form> 
</div> 

<div id="register"> 
 <form> 
 <div> 
  <labelfor="inputEmail">Register</label> 
 </div> 
 <div> 
  <labelfor="inputEmail">Email</label> 
  <div> 
  <input type="text" id="inputEmail"placeholder="Email"> 
  </div> 
 </div> 
 <div> 
  <labelfor="inputPassword">Password</label> 
  <div> 
  <input type="password" id="inputPassword"placeholder="Password"> 
  </div> 
  </div> 
 <div> 
  <labelfor="inputConfirmPassword">ConfirmPassword</label> 
  <div> 
  <input type="password" id="inputConfirmPassword" placeholder="Confirm Password"> 
  </div> 
 </div> 
 <div> 
  <div> 
  <button type="button">Register</button> 
  </div> 
 </div> 
 </form> 
</div> 

<span>/* app css stylesheet */ 
html,body { 
 height: 100%; 
} 
 
.wrap { 
 min-height: 100%; 
 height: auto !important; 
 height: 100%; 
 margin: 0 auto -80px; 
} 
 
.header { 
 height: 100%; 
 min-height: 100%; 
 height: auto !important; 
} 
 
.footer{ 
 background-color: #333; 
 color: white; 
 height: 80px; 
} 
 
.container .credit { 
 margin: 10px 0; 
} 
 
#login .title label { 
 font-size: 2em; 
 font-weight: bold; 
} 
 
#register .title label { 
 font-size: 2em; 
 font-weight: bold; 
}</span> 

• BootStrap轻松实现微信页面开发代码分享
• Bootstrap登陆注册页面开发教程
• Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
• BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
• Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
• Bootstrap页面缩小变形的快速解决办法

我使用空白的Angular FullStack(Mean)模板来构建应用程序.

当我使用Angular Bootstrap uib-dropdown中的代码时,它最终格式化不正确并且不起作用,所有其他角度引导程序组件似乎都能正常工作

<!-- Single button -->
<divuib-dropdown is-open="status.isopen">
  <button id="single-button" type="button"uib-dropdown-toggle ng-disabled="disabled">
    Button dropdown <span></span>
  </button>
  <ulrole="menu" aria-labelledby="single-button">
    <li role="menuitem"><a href="#">Action</a></li>
    <li role="menuitem"><a href="#">Another action</a></li>
    <li role="menuitem"><a href="#">Something else here</a></li>
    <li></li>
    <li role="menuitem"><a href="#">Separated link</a></li>
  </ul>
</div>

"angular-bootstrap": "~0.14.3",

然后运行：

bower install

Here is the plunker link

你可以清楚地看到,点击事件,向上箭头和向下箭头不起作用.添加一些代码让SO开心.