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. 前台checkbox复选框提交到后台处理

    前台 <input type="hidden" id="tempString" name="tempString" /> < ...

  2. Java transient关键字使用小记

    哎,虽然自己最熟的是Java,但很多Java基础知识都不知道,比如transient关键字以前都没用到过,所以不知道它的作用是什么,今天做笔试题时发现有一题是关于这个的,于是花个时间整理下transi ...

  3. 使用css3 实现太阳升起落下效果

    <!DOCTYPE html><html style="overflow: hidden"><head> <meta http-equiv ...

  4. 解决： Sudamod/CM-13.0 源代码出现 Fatal: duplicate project .....问题

    初始化代码库的时候出现如下错误: fatal: manifest ‘default.xml‘ not available fatal: duplicate project CyanogenMod/an ...

  5. 菜鸟初识python request属性及方法说明

    if  request.REQUEST.has_key('键值'): HttpRequest对象的属性 参考: 表 H-1. HttpRequest对象的属性 属性 描述 path 表示提交请求页面完 ...

  6. 【Beta】第五次任务发布

    PM #100 日常管理&dev版宣传&设计报告管理后台. 后端 #101 完成收藏功能 完成管理员权限表的生成和接入(按位压缩权限表) 验收条件:收藏功能能够正常使用.能够区分常规用 ...

  7. Easymake

    Easymake太好用了,偷懒神器,强力推荐. 一.根目录下的easymake.mk就是makefile模板,我们自定义的makefile只需要包含这个模板即可 include ../../easym ...

  8. JDBC ODBC区别

    一.JDBC(Java DataBase Connectivity standard) 1.JDBC,它是一个面向对象的应用程序接口(API), 通过它可访问各类关系数据库. 2. 驱动程序(JDBC ...

  9. R语言爬虫初尝试-基于RVEST包学习

    注意:这文章是2月份写的,拉勾网早改版了,代码已经失效了,大家意思意思就好,主要看代码的使用方法吧.. 最近一直在用且有维护的另一个爬虫是KINDLE 特价书爬虫,blog地址见此: http://w ...

  10. nyoj 218 Dinner（贪心专题）

    Dinner 时间限制:100 ms  |  内存限制:65535 KB 难度:1   描述 Little A is one member of ACM team. He had just won t ...