angular入门学习文档之一

一、数据双向绑定

angular(下面统一简称ng)强大的地方莫过于它内置的数据双向绑定功能,下面我们通过一个简单的例子来演示ng强大的双向绑定数据的能力。

代码如下:

1、dom结构:

1.<!DOCTYPE html>2.<html lang="en" ng-app="myApp">3.<head>4.    <meta charset="UTF-8">5.    <title>Document</title>6.    <script src="js/angular.js"></script>7.</head>8.<body>9.    <form ng-controller="userInfoCtrl">10.        <input type="text" ng-model="userInfo.name">11.        {{userInfo.name}}12.        <p ng-bind="userInfo.age"></p>13.    </form>14.15.</body>16.</html>

2、js代码:

1.var app = angular.module(‘myApp‘,[]);2.    app.controller(‘userInfoCtrl‘,function($scope){3.        $scope.userInfo = {4.            name: ‘张三‘,5.            age: ‘18‘ 6.        }7.    })8.    app.controller(‘userInfoCtrl‘,[‘$scope‘,function($scope){9.        $scope.userInfo = {10.            name: ‘张三‘,11.            age: ‘19‘ 12.        }13.    }])

上面的例子简单的实现了ng的双向绑定功能,那么到底是怎么实现的呢?

1、先加载angular.js文件;

2、在根节点html上(也可以是其他任何一个节点,在哪里添加,ng的边界就在哪里产生)添加ng-app指令,它会告诉浏览器,从这个地方开始,里面的内容都用ng去解析渲染;

3、给form添加ng-controller,这是添加控制器(也可以叫作用域)的指令,它的作用是创建一个隔离的$scope对象,什么是$scope?

提到$scope,还得先从$rootscope说起,$rootScope是ng中最接近全局作用域的对象。在$rootScope上附加太多业务逻并不是好主意,这与污染JavaScript的全局作用域是一样的。$scope对象就是一个普通的JavaScript对象,我们可以在其上随意修改或添加属性。

4、给input添加ng-model指令,值等于变量userInfo.name。ng-model就是实现ng数据双向绑定的指令。ng-model指令用来将input、 select、 textarea或自定义表单控件同包含它们的作用域中的属性进行绑定。(这是第一种绑定方法);

5、{{ }}语法是AngularJS内置的模板语法,它会在内部$scope和视图之间创建绑定。基于这个绑定,只要$scope发生变化,视图就会随之自动更新。(这是第二种绑定方法);

6、尽管可以在视图中使用{{ }}模板语法(ng内置的方式),我们也可以通过ng-bind
指令实现同样的行为。

接下来是Js代码部分的实现

7、ng允许我们使用angular.module()方法来声明模块,这个方法能够接受两个参数,第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表。接下来,就可以在angular.module(‘myApp’)返回的对象上创建我们的应用了。

8、通过ng-controller创建一个作用域,并对作用域中的$scope对象进行操作;

9、在userInfoCtrl这个作用域中,添加控制器逻辑处理的代码。

10、总结:在ng中,通过controller控制器连接了视图与逻辑层,任何一方发生变化都会引起另一方的变化,而实现这个功能的方法则可以通过:ng-model、{{ }}或者ng-bind。

二、常见的几种页面判断

1.ng-switch

ng-switch用来判断输入框的值和预定义的值是否匹配,如果匹配,则显示预定义的视图,反之则显示默认的视图。这个指令和ng-switch-when及on=”propertyName”一起使用,可以在propertyName发生变化时渲染不同指令到视图中。在下面的例子中,当person.name是Ari时,文本域下面的div会显示出来,并且这个人会获得胜利:

1.<input type="text" ng-model="person.name"/>2.<div ng-switch on="person.name">3.  <p ng-switch-default>And the winner is</p>4.  <h1 ng-switch-when="Ari">{{ person.name }}</h1>5.</div>
2.ng-if

使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false,那对应的元素将会从DOM中移除,否则对应元素的一个克隆将被重新插入DOM中。

1.<div ng-if="2+2===5">2.  Won‘t see this DOM node, not even in the source code3.</div>

因为2+2并不等于5,所以表达式为false,最后这个div会被移除。

3.ng-show、ng-hide

ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的
值为false时元素会被隐藏。类似地,当赋值给ng-hide指令的值为true时元素也会被隐藏。

1.<div ng-show="2 + 2 == 4">2.  2 + 2 is 4, do show3.</div>4.<div ng-hide="2 + 2 == 5">5.  2 + 2 isn‘t 5, don‘t hide6.</div>

从结果上来看,ng-if和ng-show/ng-hide似乎效果差不多,但两者的最大区别在于,前者会移除dom结构,而后者不会移除dom结构,只是通过样式的display:none和display:block来控制。

时间: 2024-10-13 01:32:31

angular入门学习文档之一的相关文章

Activit最入门学习文档,从如何创建项目开始共20章,看完,任何Java项目集成无压力

Activit流程引擎 本人水平,刚自学java一个多月,然后看视频做的笔记,全部傻瓜式截图教程,反正我学习之前没在网上搜索到任何小白教程, Activit官方的教程真心看不懂,因为都是文字 没具体创建步奏,所以对新手来说很无奈, 然后吧,就把自己的学习经验贡献出来啦 最小白的文档,看完之后,集成到任何java项目中都无压力,我最后的是做了个Jfinal集成,估计这是网上搜到最全的容易懂的入门学习文档,本人自学java一个月,反正我看官方例子什么的都看不懂,然后各搜素也没收到教程视频,还好有别人

Apache Pig入门学习文档(一)

1,Pig的安装    (一)软件要求    (二)下载Pig      (三)编译Pig 2,运行Pig    (一)Pig的所有执行模式    (二)pig的交互式模式    (三)使用pig脚本执行模式 3,Pig  Latin语句的声明     (一)加载数据     (二)使用和处理数据    (三)存储中间数据 (四)存储最终数据 (五)调试Pig Latin语言 4,Pig的属性值管理 5,Pig一些注意事项 1,Pig的安装 (一)软件安装 必须配置: (1)hadoop 下载地

2013 最新的 play web framework 版本 1.2.3 框架学习文档整理

Play framework框架学习文档 Play framework框架学习文档 1 一.什么是Playframework 3 二.playframework框架的优点 4 三.Play FrameWork开发入门 5 1.准备工作 5 2.新建项目 5 3.环境变量配置 7 4.MVC模型 8 app/controllers 9 app/models 9 app/views 9 5.应用程序布局 9 app目录 9 .class文件在哪儿? 9 public目录 10 conf目录 10 l

Mybatis学习文档

Mybatis学习文档 Mybatis是持久层框架类似于Hibernate的orm持久层框架 1.JDBC访问数据库存在的问题 频繁创建和打开.关闭数据链接,太消耗资源 Sql语句存在硬编码,不利于维护 Sql参数设置硬编码,不利于维护 结果集获取与遍历复杂,存在硬编码,不利于维护,期望查询后返回一个java对象 2.Mybatis介绍 前身是apache下的开源项目,2010有aspache software foundation 迁移到了google code ,并且改名为Mybatis,2

mfc学习---文档视图架构

MFC的AppWizard可以生成三种类型的应用程序:基于对话框的应用.单文档应用(SDI)和多文档应用(MDI). 一般情况下,采用文档/视结构的应用程序至少应由以下对象组成:       1.应用程序是一个CwinApp派生对象,它充当全部应用程序的容器.应用程序沿消息映射网络分配消息给它的所有子程序.       2.框架窗口是一CfrmeWnd派生对象.       3.文档是一个CDocument派生对象,它存储应用程序的数据,并把这些信息提供给应用程序的其余部分.       4.视

NodeJS-001-Nodejs学习文档整理(转-出自http://www.cnblogs.com/xucheng)

Nodejs学习文档整理 http://www.cnblogs.com/xucheng/p/3988835.html 1.nodejs是什么: nodejs是一个是javascript能在后台运行的平台,具体来时只是使code javascript能在后台运行,因为不在浏览器中运行所以不涉及到document等对象.(Mozilla 则指出 JavaScript 由Core JavaScript 和 Client JavaScript 组成.) 2.nodejs如何运行javascript: n

Openstack python api 学习文档

Openstack python api 学习文档 转载请注明http://www.cnblogs.com/juandx/p/4953191.html 因为需要学习使用api接口调用openstack,所以上一篇写了一些使用openstack的纯api调用的方法, 但是openstack还提供了更好的python的api,只需要python的包即可,感觉更好使用. 对于compute的api,包是放在了/usr/lib/python2.7/site-packages/novaclient/目录,

solr学习文档之高亮

在<solr学习文档之添加分词词库>一文中,我们学习了如何对一个词组进行分词提取,这一章我们将会使用到分词词库,并介绍如何进行高亮展现 在此之前,我们先了解一下高亮的几个参数 hl:是否开启高亮组件,true为开启,false为不开启 hl.fl:需要开启的高亮字段,多个可用逗号隔开 hl.simple.pre:高亮字段前缀 hl.simple.post:高亮字段后缀 (其他的暂不介绍,想知道的可自行百度) 想要进行高亮站下,需要在schema.xml中将你的字段名(如topicContent

tika入门--获得文档内容和元数据

package com.wangchao.tika.demo; import java.io.BufferedReader;import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.IOException;import java.io.Reader; import org.apache.tika.Tika;import org.apache.tika