已经了解了angular的基础知识以后,我们继续开始了解angular的基础模块,首先在写angular应用时需要引入angularjs

在使用angular时必须为它定义边界(angular的作用范围)

1、如果想构建angular应用只需要

<html ng-app="应用名">

2、如果需要angular操作部分区域的数据,则将相应的ng-app写到对应的标签上

<html>
....... <body>
.......
<!--angular处理区域-->
<div ng-app>
</div>
<!--结束-->
.......
....
</body>
</html>

模块:

 1、数据显示

    可以使用{{}}或ng-bind

  

<p>{{txt}}</p> 

<p ng-bind="txt"></p>

    两者的却别在于html没有加载完毕{{txt}}回直接显示到页面,直到angular渲染该绑定数据(这种行为有可能将{{binding}}让用户看到);而ng-bind则是在angular渲染完毕后将数据显示

    2、ng-controller

    该命令用户管理视图和模型之间的关系的控制器(单页面中可以根据复杂程度引入多个控制器)

  3、ng-model

  将值绑定到表单元素上

  

<form >
<input type='checkbox' ng-model='value'/>
</form>

4、ng-watch

    用户监听一个表达式的变化,调用相应的回调

<div ng-controller='testController'>
<input ng-model='start_value'/>
<label>{{end_value}}</label>
</div>
<script>
var app = angular.module('myapp', []);
 app.controller('testController', function($scope) {
$scope.start_value =1;
function change_value() {
$scope.end_value = $scope.start_value;
}
$scope.$watch('start_value', change_value);
});
</script>

  5、angular提供了一系列命令与原生的浏览器事件相对应,包括ng-change、ng-click、ng-submit、ng-dbclick等

  6、ng-repeat

    用于数据迭代

<html ng-app='myapp'>
<script src='angular.js'></script>
<body>
  <table ng-controller='tableController'>
   <tr ng-repeat='repeat in repeat_list'>
<td >{{repeat.name}}</td>
   </tr>
  </table>
  <script>
var app = angular.module('myapp', []);
app.controller('tableController', function($scope) {
$scope.repeat_list = [
{name:'test01'},
{name:'test02'}
]; });
  </script>
</body>
</html>

  6、ng-show、ng-hide

    用于显示或隐藏绑定元素,行为相反,ng-show为true时显示,false隐藏

    

<div ng-controller='testController'>
<label ng-show='label_show'>哈哈</label>
<button ng-click="toggle_label()">切换</button>
</div>
<script type="text/javascript">
function testController($scope) {
$scope.label_show = false;
$scope.toggle_label = function () {
$scope.label_show = !$scope.label_show;
}
}
</script>

  7、ng-css、ng-style

    用于在应用中动态设置样式,接受一个表达式,表达式的取值方式

      (1)一个表示css类名的字符串

      (2)css类名数组

      (3)类名到布尔值的映射

<div ng-controller='testController'>
<label ng-class='test'>哈哈</label>
   <label ng-class='{selected: true, on:false}'>哈哈</label>
</div>
<script type="text/javascript">
function testController($scope) {
$scope.test = 'selected on';//方式1
$scope.test = ['selected', 'on'];//方式2
}
</script>

  8、ng-src、ng-link

用于img、a加载内容,有的时候img或a进行简单的<img src={{binding}}/>数据绑定,angular没有机会拦截请求。因此使用ng-src属性

基本上就这些了

angular学习笔记二的更多相关文章

  1. angular学习笔记(二十八-附2)-$http,$resource中的promise对象

    下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...

  2. angular学习笔记(二十九)-$q服务

    angular中的$q是用来处理异步的(主要当然是http交互啦~). $q采用的是promise式的异步编程.什么是promise异步编程呢? 异步编程最重要的核心就是回调,因为有回调函数,所以才构 ...

  3. angular学习笔记(二十七)-$http(5)-使用$http构建RESTful架构

    在angular中有一个特别为RESTful架构而定制的服务,是在$http的基础上进行了封装. 但是为了学习,我们先看看用直接$http是如何构建RESTful架构的: 假设有一个银行卡的列表.需要 ...

  4. angular学习笔记(二)-创建angular模块

    如果在页面的html标签(或任意标签)中添加ng-app,表示对整个页面应用angular来管理. 他是一个模块. 模块有助于把东西从全局命名空间中隔离. 今天学习如何自定义创建模块: <!DO ...

  5. angular学习笔记(二十八-附1)-$resource中的资源的方法

    通过$resource获取到的资源,或者是通过$resource实例化的资源,资源本身就拥有了一些方法,$save,$delete,$remove,可以直接调用来保存该资源: 比如有一个$resour ...

  6. angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构

    ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入 ...

  7. angular学习笔记(二十六)-$http(4)-设置请求超时

    本篇主要讲解$http(config)的config中的timeout项: $http({ timeout: number }) 数值,从发出请求开始计算,等待的毫秒数,超过这个数还没有响应,则返回错 ...

  8. angular学习笔记(二十五)-$http(3)-转换请求和响应格式

    本篇主要讲解$http(config)的config中的tranformRequest项和transformResponse项 1. transformRequest: $http({ transfo ...

  9. angular学习笔记(二十四)-$http(2)-设置http请求头

    1. angular默认的请求头: 其中,Accept 和 X-Requested-With是$http自带的默认配置 Accept:application/json,text/plain       ...

  10. angular学习笔记(二十三)-$http(1)-api

    之前说到的$http.get和$http.post,都是基于$http的快捷方式.下面来说说完整的$http: $http(config) $http接受一个json格式的参数config: conf ...

随机推荐

  1. 数据库SQL优化大总结之百万级数据库优化方案(转)

    add by zhj: 作者没有指定是哪个数据库,这只是一个近似通用的总结.对于某个特定的数据库,有些条目可能并不适用. 原文:http://www.cnblogs.com/yunfeifei/p/3 ...

  2. Scala使用JUnit4单元测试

    在项目开发中在很多地方都要做单元测试,在做Spark项目时使用Scala开发.所以总结一下Scala中的单元测试: 在Maven pom文件中添加依赖: <dependency> < ...

  3. [py][mx]实现按照课程机构排名,按照学习人数排名

    原型是 实现效果 因为要按照这两个指标排名, 模型中现在还没有这2个字段(整数),所以需要修改模型. 修改模型,添加2个排序指标的字段 class CourseOrg(models.Model): . ...

  4. python 操作 mysql 数据库 datetime 属性字段为 0000-00-00 00:00:00 的问题

    撇开 sqlalchemy, 先讲 MySQLdb 和 pymysql mysql 版本 mysql  Ver 14.14 Distrib 5.1.73 新建一个测试表 test, 结构如下: mys ...

  5. 从getApplicationContext和getApplication再次梳理Android的Application正确用法

    原文地址http://blog.csdn.net/ly502541243/article/details/52105466 原文地址http://blog.csdn.net/ly502541243/a ...

  6. Linux系统——DNS

    DNS系统的作用1. DNS服务器Internet中,大部分网站.邮件服务等服务器都使用了域名形式的地址,这种地址形式要比使用IP地址形式更加直观,更加容易被用户记住.FQDN格式(完整域名格式):在 ...

  7. EditPlus 4.3.2477 中文版已经发布(11月3日更新)

    新的版本修复了之前版本文本库和自动完成功能中的“^!”符号在填充项前面时不能正常工作的问题.

  8. Python: 使用生成器创建新的迭代模式

    使用一个生成器函数来定义一个函数模式. def frange(start, stop, increment): x = start while x < stop: yield x x += in ...

  9. 实现Vue-MVVM-step1

    一个利用defineProperty实现的MVVM双向数据绑 <!DOCTYPE html> <html lang="en"> <head> & ...

  10. bzoj1621 / P2907 [USACO08OPEN]农场周围的道路Roads Around The Farm

    P2907 [USACO08OPEN]农场周围的道路Roads Around The Farm 基础dfs,按题意递归即可. #include<iostream> #include< ...