Angularjs基础(八)

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

Bootstrap
　　　　你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 元素中添加如下代码:
　　　　 　　　　以下是一个完整的 HTML 实例,使用了 AngularJS 指令和 Bootstrap 类。

　　　　
　　　　
　　　　　　　　　　　　
　　　　
　　　　

指令解析
　　　　　　 　　　　 　　　为 元素定义一个应用(未命名)
　　　　　　 　　　　 为元素定义一个控制器
　　　　　　 　　　　　　 循环users 对象数组，每个user 对象放在 　　　　　　 　　　　　　 当点击元素时调用函数editUser()
　　　　　　

　　　　　　　　 如果edit = true 显示

元素
　　　　　　

　　　　　　　　 如果edit = true 隐藏

元素
　　　　　　 　　　　　　 为应用程序绑定 元素
　　　　　　

　　　　 如果发生错误或者ncoplete= true 禁用 元素

Bootstrap 类解析
　　　　

　　　　 　　container 　　 　　内容容器
　　　　 　　　　 　　　　

　　　　 btn 　　　　　　 按钮
　　　　　　　　　btn-success 　　　成功按钮
　　　　 　　　　 glyphicon 字形图标
　　　　 　　 glyphicon-pencil 铅笔图标
　　　　 　　　　 glyphicon-user 用户图标
　　　　 　　　　 glyphicon-save 保存图标
　　　　

　　　　 form-horizontal 水平表格
　　　　

　　　　　　form-group 表单组
　　　　 　　　　 control-label 控制器标签
　　　　 　　　　 col-sm-2 跨越 2 列
　　　　

col-sm-10 跨越 10 列

JavaScript 代码
　　　　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;
　　　　　　　　　　}
　　　　　　　　　　};

　　　　　　　　});

JavaScript 代码解析
　　　　　　$scope.fName 　　　　 模型变量(用户名)
　　　　　　$scope.IName 　　　　模型变量(用户姓)
　　　　　　$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 包含
　　　　在AngularJS 中，你可以在HTML中包含HTML文件。

　　　　在HTML中包含HTML 文件
服务端包含
　　　　大多服务脚本都支持包含文件功能

客户端包含
　　　　通过 JavaScript 有很多种方式可以在 HTML 中包含 HTML 文件。
　　　　通常我们使用 http 请求 (AJAX) 从服务端获取数据，返回的数据我们可以通过 使用 innerHTML 写入到 HTML 元素中。

　　　　

　　　　　　　　

　　　　　　　　

　　　　

创建 HTML 列表
　　　　

　　　　　　 　　　　　　
　　　　　　
　　　　　　
　　　　　　
　　　　　　 　　　　　　 　　　　　　　　 　　　　　　　　  Edit
　　　　　　
　　　　　　 　　　　　　 　　　　　　 　　　　　　
　　　　

AngularJS 动画
　　　　AngularJS 提供了动画效果，可以配合css 使用
　　　　AngularJS 使用动画需要引入angular-animate.min.js
　　　　

Edit	First Name	Last Name