AngularJS 的首选样式表是 Bootstrap。

可以在 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 <head>元素中添加如下代码:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：

<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">

实例：

HTML代码：

 <!DOCTYPE html>

<html>

<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

<body ng-app="myApp" ng-controller="userCtrl">

<div class="container">

<h3>Users</h3>

<table class="table table-striped">

  <thead><tr>

    <th>Edit</th>

    <th>First Name</th>

    <th>Last Name</th>

  </tr></thead>

  <tbody><tr ng-repeat="user in users">

    <td>

      <button class="btn" ng-click="editUser(user.id)">

      <span class="glyphicon glyphicon-pencil"></span>  Edit

      </button>

    </td>

    <td>{{ user.fName }}</td>

    <td>{{ user.lName }}</td>

  </tr></tbody>

</table>

<hr>

<button class="btn btn-success" ng-click="editUser('new')">

  <span class="glyphicon glyphicon-user"></span> Create New User

</button>

<hr>

<h3 ng-show="edit">Create New User:</h3>

<h3 ng-hide="edit">Edit User:</h3>

<form class="form-horizontal">

<div class="form-group">

  <label class="col-sm-2 control-label">First Name:</label>

  <div class="col-sm-10">

    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">

  </div>

</div>

<div class="form-group">

  <label class="col-sm-2 control-label">Last Name:</label>

  <div class="col-sm-10">

    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">

  </div>

</div>

<div class="form-group">

  <label class="col-sm-2 control-label">Password:</label>

  <div class="col-sm-10">

    <input type="password" ng-model="passw1" placeholder="Password">

  </div>

</div>

<div class="form-group">

  <label class="col-sm-2 control-label">Repeat:</label>

  <div class="col-sm-10">

    <input type="password" ng-model="passw2" placeholder="Repeat Password">

  </div>

</div>

</form>

<hr>

<button class="btn btn-success" ng-disabled="error || incomplete">

  <span class="glyphicon glyphicon-save"></span> Save Changes

</button>

</div>

<script src = "myUsers.js"></script>

</body>

</html>

指令解析：

 AngularJS 指令 描述
<html ng-app 为 <html> 元素定义一个应用(未命名)
<body ng-controller 为 <body> 元素定义一个控制器
<tr ng-repeat 循环 users 对象数组，每个 user 对象放在 <tr> 元素中。
<button ng-click 当点击 <button> 元素时调用函数 editUser()
<h3 ng-show 如果 edit = true 显示 <h3> 元素
<h3 ng-hide 如果 edit = true 隐藏 <h3> 元素
<input ng-model 为应用程序绑定 <input> 元素
<button ng-disabled 如果发生错误或者 ncomplete = true 禁用 <button> 元素

bootstrap类解析：

元素  Bootstrap 类 定义
<div> container 内容容器
<table> table 表格
<table> table-striped 带条纹背景的表格
<button> btn 按钮
<button> btn-success 成功按钮
<span> glyphicon 字形图标
<span> glyphicon-pencil 铅笔图标
<span> glyphicon-user 用户图标
<span> glyphicon-save 保存图标
<form> form-horizontal 水平表格
<div> form-group 表单组
<label> control-label 控制器标签
<label> col-sm-2 跨越 2 列
<div> col-sm-10 跨越 10 列

JS代码：

AngularJS 教程

AngularJS 教程

AngularJS 简介

AngularJS 表达式

AngularJS 指令

AngularJS 模型

AngularJS Scope(作用域)

AngularJS 控制器

AngularJS 过滤器

AngularJS Service

AngularJS Http

AngularJS Select

AngularJS 表格

AngularJS SQL

AngularJS HTML DOM

AngularJS 事件

AngularJS 模块

AngularJS 表单

AngularJS 输入验证

AngularJS API

AngularJS Bootstrap

AngularJS 包含

AngularJS 动画

AngularJS 依赖注入

AngularJS 路由

AngularJS 应用

AngularJS 实例

AngularJS 实例

AngularJS 参考手册

AngularJS 参考手册

← AngularJS API

AngularJS 包含 →

AngularJS Bootstrap

AngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。

查看 Bootstrap教程。

Bootstrap

你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 <head>元素中添加如下代码:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：

<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">

以下是一个完整的 HTML 实例, 使用了 AngularJS 指令和 Bootstrap 类。

HTML 代码

<!DOCTYPE html>

<html>

<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

<body ng-app="myApp" ng-controller="userCtrl">

<div class="container">

<h3>Users</h3>

<table class="table table-striped">

  <thead><tr>

    <th>Edit</th>

    <th>First Name</th>

    <th>Last Name</th>

  </tr></thead>

  <tbody><tr ng-repeat="user in users">

    <td>

      <button class="btn" ng-click="editUser(user.id)">

      <span class="glyphicon glyphicon-pencil"></span>  Edit

      </button>

    </td>

    <td>{{ user.fName }}</td>

    <td>{{ user.lName }}</td>

  </tr></tbody>

</table>

<hr>

<button class="btn btn-success" ng-click="editUser('new')">

  <span class="glyphicon glyphicon-user"></span> Create New User

</button>

<hr>

<h3 ng-show="edit">Create New User:</h3>

<h3 ng-hide="edit">Edit User:</h3>

<form class="form-horizontal">

<div class="form-group">

  <label class="col-sm-2 control-label">First Name:</label>

  <div class="col-sm-10">

    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">

  </div>

</div>

<div class="form-group">

  <label class="col-sm-2 control-label">Last Name:</label>

  <div class="col-sm-10">

    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">

  </div>

</div>

<div class="form-group">

  <label class="col-sm-2 control-label">Password:</label>

  <div class="col-sm-10">

    <input type="password" ng-model="passw1" placeholder="Password">

  </div>

</div>

<div class="form-group">

  <label class="col-sm-2 control-label">Repeat:</label>

  <div class="col-sm-10">

    <input type="password" ng-model="passw2" placeholder="Repeat Password">

  </div>

</div>

</form>

<hr>

<button class="btn btn-success" ng-disabled="error || incomplete">

  <span class="glyphicon glyphicon-save"></span> Save Changes

</button>

</div>

<script src = "myUsers.js"></script>

</body>

</html>

尝试一下 »

指令解析

AngularJS 指令 	描述

<html ng-app 	为 <html> 元素定义一个应用(未命名)

<body ng-controller 	为 <body> 元素定义一个控制器

<tr ng-repeat 	循环 users 对象数组，每个 user 对象放在 <tr> 元素中。

<button ng-click 	当点击 <button> 元素时调用函数 editUser()

<h3 ng-show 	如果 edit = true 显示 <h3> 元素

<h3 ng-hide 	如果 edit = true 隐藏 <h3> 元素

<input ng-model 	为应用程序绑定 <input> 元素

<button ng-disabled 	如果发生错误或者 ncomplete = true 禁用 <button> 元素

Bootstrap 类解析

元素 	Bootstrap 类 	定义

<div> 	container 	内容容器

<table> 	table 	表格

<table> 	table-striped 	带条纹背景的表格

<button> 	btn 	按钮

<button> 	btn-success 	成功按钮

<span> 	glyphicon 	字形图标

<span> 	glyphicon-pencil 	铅笔图标

<span> 	glyphicon-user 	用户图标

<span> 	glyphicon-save 	保存图标

<form> 	form-horizontal 	水平表格

<div> 	form-group 	表单组

<label> 	control-label 	控制器标签

<label> 	col-sm-2 	跨越 2 列

<div> 	col-sm-10 	跨越 10 列

JavaScript 代码

myUsers.js

angular.module('myApp', []).controller('userCtrl', function($scope) {

$scope.fName = '';

$scope.lName = '';

$scope.passw1 = '';

$scope.passw2 = '';

$scope.users = [

{id:1, fName:'Hege', lName:"Pege" },

{id:2, fName:'Kim',  lName:"Pim" },

{id:3, fName:'Sal',  lName:"Smith" },

{id:4, fName:'Jack', lName:"Jones" },

{id:5, fName:'John', lName:"Doe" },

{id:6, fName:'Peter',lName:"Pan" }

];

$scope.edit = true;

$scope.error = false;

$scope.incomplete = false;

$scope.editUser = function(id) {

  if (id == 'new') {

    $scope.edit = true;

    $scope.incomplete = true;

    $scope.fName = '';

    $scope.lName = '';

    } else {

    $scope.edit = false;

    $scope.fName = $scope.users[id-1].fName;

    $scope.lName = $scope.users[id-1].lName;

  }

};

$scope.$watch('passw1',function() {$scope.test();});

$scope.$watch('passw2',function() {$scope.test();});

$scope.$watch('fName', function() {$scope.test();});

$scope.$watch('lName', function() {$scope.test();});

$scope.test = function() {

  if ($scope.passw1 !== $scope.passw2) {

    $scope.error = true;

    } else {

    $scope.error = false;

  }

  $scope.incomplete = false;

  if ($scope.edit && (!$scope.fName.length ||

  !$scope.lName.length ||

  !$scope.passw1.length || !$scope.passw2.length)) {

     $scope.incomplete = true;

  }

};

});

JS代码解析：

 Scope 属性 用途
$scope.fName 模型变量 (用户名)
$scope.lName 模型变量 (用户姓)
$scope.passw1 模型变量 (用户密码 1)
$scope.passw2 模型变量 (用户密码 2)
$scope.users 模型变量 (用户的数组)
$scope.edit 当用户点击创建用户时设置为true。
$scope.error 如果 passw1 不等于 passw2 设置为 true
$scope.incomplete 如果每个字段都为空(length = 0)设置为 true
$scope.editUser 设置模型变量
$scope.watch 监控模型变量
$scope.test 验证模型变量的错误和完整性

AngularJS Bootstrap的更多相关文章

  1. Play1+angularjs+bootstrap ++ (idea + livereload)

    我的web开发最强组合:Play1+angularjs+bootstrap ++ (idea + livereload) 时间 2012-12-26 20:57:26  Freewind.me原文   ...

  2. AngularJS -- Bootstrap(启动器)(转载)

    AngularJS -- Bootstrap(启动器)   点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Bootstrap(初始化) ...

  3. AngularJS进阶(六)AngularJS+BootStrap实现弹出对话框

    AngularJS+BootStrap实现弹出对话框 参考资料: http://angular-ui.github.io/bootstrap/#/modal https://www.zybuluo.c ...

  4. 【17】AngularJS Bootstrap

    AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架. Bootstrap 你 ...

  5. Salesforce + AngularJS + Bootstrap

    也可以分成三步: 1. 添加css和js引用: <apex:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3. ...

  6. 前端MVC学习总结（四）——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

    这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...

  7. AngularJs+bootstrap搭载前台框架——准备工作

    1.关于什么是AngularJs以及什么是bootstrap我就不多说了,简单说下,AngularJs是一个比较强大前台MVC框架,bootstrap是Twitter推出的一个用于前端开发的开源工具包 ...

  8. 前端MVC学习笔记（四）——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

    这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...

  9. AngularJS -- Bootstrap(启动器)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Bootstrap(初始化) 这章介绍了Angular的初始化过程,以及如何在必要的时候 ...

随机推荐

  1. Android开发环境的演变

    之前安装过eclipse,给我的感觉是,好生麻烦.刚开始自己装花了好多时间.隐约还记得有两个小tips: 1)打开时出现 “failed to load the JNI shared library ...

  2. 高性能集群软件Keepalived(1)

    1介绍 Keepalived是linux下一个轻量级的高可用解决方案,与HeartBeat,RoseHA实现的功能类似,但是还是有差别.HeartBeat是一个专业的功能完善的高可用软件,它提供了HA ...

  3. C#中中文编码的问题（StreamWriter和StreamReader默认编码）

    在使用StreamWriter和StreamReader时产生了这样的疑问,在不指定的情况下,他们使用什么编码方式? 查看MSDN,请看下图: 注意红色区域  这让我以为构造函数参数不同时使用不一样的 ...

  4. jQuery 教程

    jQuery 教程 W3School H-ui前端框架 html标签

  5. BZOJ 1078: [SCOI2008]斜堆

    1078: [SCOI2008]斜堆 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 770  Solved: 422[Submit][Status][ ...

  6. js 数据类型 typeof的测试

    , t2 = ', t3 = null, t4 = NaN, t5 = undefined, t6 = function() {}, t7 = true, t8 = window, t9 = docu ...

  7. CodeForces 165C Another Problem on Strings（组合）

    A string is binary, if it consists only of characters "0" and "1". String v is a ...

  8. 触发器运用示例---laobai

    1 触发器 概念:trigger.逻辑对象的一种.当dml的增删改语句执行时,自动触发一系列动作. 分类:dml触发器.ddl触发器(很少见) sql:ddl,dml,dcl 按触发的时间分: 语句执 ...

  9. Git 学习笔记参考

    1.参考学习资料 网上资料: http://www.cnblogs.com/aoguren/p/4189086.html http://www.liaoxuefeng.com/wiki/0013739 ...

  10. tyvj1198 最优矩阵连乘

    描述    一个n*m矩阵由n行m列共n*m个数排列而成.两个矩阵A和B可以相乘当且仅当A的列数等于B的行数.一个N*M的矩阵乘以一个M*P的矩阵等于一个N*P的矩阵,运算量为nmp.   矩阵乘法满 ...