Angularjs基础(八)

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

Bootstrap     你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码:     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">     以下是一个完整的 HTML 实例, 使用了 AngularJS 指令和 Bootstrap 类。

     <!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>&nbsp;&nbsp;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>

指令解析

	      <html ng-app >          为<html> 元素定义一个应用(未命名)
	      <body ng-controller>	       为<body>元素定义一个控制器
	      <tr ng-controller>	      	      循环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>	         如果发生错误或者ncoplete= true 禁用 <button>元素

Bootstrap 类解析

	    <div>	    	  container	  	  内容容器
	    <table>	      table	    	  表格
	    <table>	    	 table-striped	   带条纹背景的表格
	    <button>	    	btn	         按钮
	    <btton>      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 代码

    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 元素中。

    <div class="container">
          <div ng-include="'myUsers_List.htm'"></div>
          <div ng-include="'myUsers_Form.htm'"></div>
    </div>

创建 HTML 列表

	    <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>&nbsp;&nbsp;Edit
      		      </button>
    		      </td>
    		      <td>{{ user.fName }}</td>
    		      <td>{{ user.lName }}</td>
  		      </tr></tbody>
	    </table>

AngularJS 动画     AngularJS 提供了动画效果,可以配合css 使用     AngularJS 使用动画需要引入angular-animate.min.js     <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>     还需要在应用中使用模型 ngAnimate:     <body ng-app="ngAnimate">

什么是动画?     动画是通过改变HTML元素产生的动态变化效果。     勾选复选框隐藏DIV 实例:     <body ng-app="ngAnimate">         隐藏DIV <input type="checkbox" ng-model="myCheck">         <div ng-hide="myCheck"></div>     </body>     应用中动画不宜太多,但合适的使用动画可以增加页面的丰富性,也可以更易让用户理解。

ngAnimate 做了什么?     ngAnimate模型可以添加或移除calss.     ngAnimate 模型并不能使用HTML 元素产生动画,但是ngAnimate 会检测事件,类似隐藏显示HTML元素     如果事件发生ngAnimate 就会使用预定义的class来设置HTML元素的动画。       AngularJS 添加/移除class指令         ng-shwo         ng-hide         ng-class         ng-view         ng-include         ng-repeat         ng-if         ng-switch     ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。     其他指令会在进入 DOM 会添加 ng-enter 类,移除 DOM 会添加 ng-leave 属性。     当 HTML 元素位置改变时,ng-repeat 指令同样可以添加 ng-move 类 。     此外, 在动画完成后,HTML 元素的类集合将被移除。例如: ng-hide 指令会添加一下类:     ng-animate         ng-hide-animate         ng-hide-add (如果元素将被隐藏)         ng-hide-remove (如果元素将显示)         ng-hide-add-active (如果元素将隐藏)         ng-hide-remove-active (如果元素将显示)

使用CSS动画       我们可以使用 CSS transition(过渡) 或 CSS 动画让 HTML 元素产生动画效果,

CSS过渡       CSS 过渡可以让我们平滑的将一个 CSS 属性值修改为另外一个:         实例:

		          <style>
			              div {
			                  transition:all linear 0.5s;
			                  background-color:lightblue;
			                  height:100px
			              }
			            .ng-hide{
				                  height:0;
			            }
		        </style>

css 动画     CSS 动画允许你平滑的修改 CSS 属性值:     在 DIV 元素设置了 .ng-hide 类时, myChange 动画将执行,它会平滑的将高度从 100px 变为 0:    

<style>
      @keyframes myChange {
              from {
                      height: 100px;
                } to {
                      height: 0;
                }
        }
      div {
              height: 100px;
              background-color: lightblue;
      }
      div.ng-hide {
                animation: 0.5s myChange;
      }
    </style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coder修行路

jQuery

jQuery基础 1、    jQuery其实就是一个类库,集成了DOM/BOM/JavaScript的类库 http://jquery.cuishifen...

48850
来自专栏liulun

riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法

基本要求 一个riot标签,就是展现和逻辑的组合(也就是html和JS) 以下是编写riot标签最基本的规则: 先撰写HTML,再撰写JS,JS代码可以写在<s...

26360
来自专栏达摩兵的技术空间

css3媒体查询简介

<link rel="stylesheet" media="min-width=900" />

9050
来自专栏web前端-

浏览器对象BOM

      2 window的属性和方法:window.属性 和window.方法  (可省略window对象)

14130
来自专栏vue学习

23、一看就懂父子组件之间的传值

通过"props down , events up"我们就简单的实现了父子组件之间的双向传值,这是很基本的知识点,其它还有$invoke等等方法,大家可以去官网...

94530
来自专栏前端黑板报

小程序--Canvas文字居中

注意红色划线的解释:对齐方式是以 X 的值为基点,然后在看看官网的 setTextAlign 最下面的图:

42920
来自专栏抠抠空间

html基础

HTML简介 超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。 本质上是浏览器可识别的规则,我们按...

433110
来自专栏Google Dart

AngularDart Material Design 工具提示 顶

工具提示卡的目标可以是任何元素,例如按钮,输入,链接等。目标也可以是help_outline图标,其充当实际目标的代理。

11320
来自专栏葡萄城控件技术团队

Spread for Windows Forms高级主题(3)---单元格的编辑模式

理解单元格的编辑模式 通常情况下,当终端用户双击单元格时,编辑控件将允许用户在该单元格中输入内容。在一个单元格中编辑的能力被称为编辑模式。一些属性和方法可以用来...

23560
来自专栏非著名程序员

android:descendantFocusability用法简析

导语 由于今天比较忙,今天就来介绍一下,我之前在博客中写过的东西吧,今天我们就来介绍一下android:descendantFocusability这个属性。...

22650

扫码关注云+社区

领取腾讯云代金券