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. 响应式疑惑？ CSS单位研究

    各种单位要搞清楚,自己试一试,实践出真知! 2.屏幕分辨率    响应式 哦,电脑的分辨率:1440x900表示水平有1440个像素点哦! 垂直有900个像素点. 而网页在浏览器中,所以宽度是电脑的分 ...

  2. reGeorg v1.0内网流量转发

    reGeorg v1.0 git Usage $ reGeorgSocksProxy.py [-h] [-l] [-p] [-r] -u [-v] Socks server for reGeorg H ...

  3. mysql日期格式化

    DATE_FORMA T(date, format) 根据格式串format 格式化日期或日期和时间值date,返回结果串. 可用DATE_FORMAT( ) 来格式化DATE 或DATETIME 值 ...

  4. python 爬取乌云所有厂商名字，url，漏洞总数 并存入数据库

    需要:MySQLdb 下面是数据表结构: /* Navicat MySQL Data Transfer Source Server : 127.0.0.1 Source Server Version ...

  5. 洛谷P2434 [SDOI2005]区间

    题目描述 现给定n个闭区间[ai, bi],1<=i<=n.这些区间的并可以表示为一些不相交的闭区间的并.你的任务就是在这些表示方式中找出包含最少区间的方案.你的输出应该按照区间的升序排列 ...

  6. 做一个阅读管理APP

    背景 由于最近在看的书有点多,所以一直想找一个能够管理阅读进度的书(鄙人记性不是很好,两天不看就忘了)可惜Android平台上一直找不到合适的APP: 有没有读书进度管理的网站或软件啊? 有没有记录读 ...

  7. BZOJ4567[Scoi2016]背单词

    4567: [Scoi2016]背单词 Time Limit: 10 Sec Memory Limit: 256 MB Submit: 304 Solved: 114 [Submit][Status] ...

  8. 使用Nominatim进行openstreetmap地址搜索/解析

    Nominatim(来自拉丁语,意思是“名称”)是一个可以按名称和地址来搜索OSM中的数据,并生成OSM点的合成地址的工具(反向地理编码).可用在http://nominatim.openstreet ...

  9. （转）CPU Cache与内存对齐

    转自:http://blog.csdn.net/zhang_shuai_2011/article/details/38119657 原文如下: 一. CacheCache一般来说,需要关心以下几个方面 ...

  10. FineUI常见问题

    常见问题解答(必读) http://fineui.com/bbs/forum.php?mod=viewthread&tid=655