已经了解了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. 使用celery之了解celery（转）

    原文  http://www.dongwm.com/archives/shi-yong-celeryzhi-liao-jie-celery/   前言 我想很多做开发和运维的都会涉及一件事:cront ...

  2. modelform动态显示select标签的对象范围

    既根据当前登录人,动态显示对象相关的的select的选项,例如 A登录,只显示A的客户,B登录,只显示B自己的客户 先了解form的ModelChoiceField字段(这个表格没意义,就是引出参数q ...

  3. java-mybaits-009-mybatis-spring-使用，SqlSessionFactoryBean、事务

    一.版本限制 参看地址:http://www.mybatis.org/spring/ 二.使用入门 2.1.pom <dependency> <groupId>org.myba ...

  4. Python常用模块（logging&re&时间&random&os&sys&shutil&序列化&configparser&&hashlib）

    一. logging(日志模块) 二 .re模块 三. 时间模块 四. random模块 五. os模块 六. sys模块 七. shutil模块 八. 序列化模块(json&pickle&a ...

  5. 如何使用OpenCart 2.x Event事件系统

    如何使用OpenCart 2.x Event事件系统 OpenCart 2.x 包含很多新特性,其中之一就是专为开发者提供的事件系统,Event System.它允许你在不修改原有系统代码的基础上( ...

  6. SQL Server 一些使用小技巧

    1.查询的时候把某一个字段的值拼接成字符串 以下是演示数据. 第一种方式:使用自定义变量 ) SET @Names='' -- 需要先赋值为空字符串,不然结果会是 null SELECT @Names ...

  7. VS2010/MFC编程入门之二十一（常用控件：编辑框Edit Control）

    鸡啄米上一节讲了静态文本框,本节要讲的编辑框(Edit Control)同样是一种很常用的控件,我们可以在编辑框中输入并编辑文本.在前面加法计算器的例子中已经演示了编辑框的基本应用.下面具体讲解编辑框 ...

  8. zoj3820 树的直径+二分

    这题是个遗憾 !!!!!当时一直不敢相信两个站一定在直径上,赛后想想自己真的是脑袋抽风, 如果其中一个站不在直径上就反向的说明了这条不是直径.可以很明白我们可以肯定的是有一个点一定在直径上假如另外一个 ...

  9. 利用ssh-copy-id复制公钥到多台服务器

    http://www.cnblogs.com/panchong/p/6027138.html?utm_source=itdadao&utm_medium=referral # 连接新主机时,不 ...

  10. double、float等多字节数据处理

    一.常规的多字节: 有2,4,8字节 float和double是具有自身算法的数据类型,和其他整型不一样[整型数据,可以直接通过移位来进行计算值的大小,float和double不行] 值 = 尾数x ...