angularjs表单验证 | 易学教程

angularJS 小记

阅读更多关于 angularJS 小记

刚刚接触angularJS，网上学习了一遍菜鸟教程（http://www.runoob.com/angularjs/angularjs-tutorial.html），做了些基础知识的笔记。 AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。 AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 语法：双括号{{ …. }} 根元素 : ng-app=”” ：初始化应用程序初始化数据：ng-init:”a=4; b=5; ”(不常用) 字符串c=’alison’；对象：person={a:”1”,b:”2”} 数组：array={1,2,3} 显示数据：直接使用表达式{{ a+b }} 绑定数据：ng-bind=”a+b” (不常用) ng-model:”a+b” （3）循环元素 : ng-repeat: //放入列表 <div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'},

AngularJS内置指令集合

阅读更多关于 AngularJS内置指令集合

ng-model 将表单控件和当前作用域的属性进行绑定代码如下: <input type="text" ng-model="someModel.someProperty" /><br> {{someModel.someProperty}} ng-init 该指令被调用时会初始化内部作用域。这个指令一般会出现在比较小的应用中，比如给个demo什么的... 代码如下: <div ng-init="job='fighter'"> I'm a/an {{job}} </div> 除了ng-init，我们还有更多更好的选择。 ng-app 每一次用AngularJS都离不开这个指令，顺便说下$rootScope。声明了ng-app的元素会成为$rootScope的起点，而$rootScope是作用域链的根，通常声明在<html>你懂的。也就是说根下的作用域都可以访问它。但是，不建议过度使用$rootScope，免得全局变量满天飞，效率又差又难管。下面是一个例子: 代码如下: <html ng-app="myApp"> <body> {{ someProperty }} </body> <script> var myApp = angular.module('myApp', []) .run(function($rootScope) { $rootScope

使用AngularJS构建大型Web应用

阅读更多关于使用AngularJS构建大型Web应用

AngularJS 是由Google创建的一种JS框架，使用它可以扩展应用程序中的HTML词汇，从而在web应用程序中使用HTML声明动态内容。在该团队工作的软件工程师 Brian Ford 近日撰写了一篇 blog ，分享了如何使用AngularJS构建大型Web应用的经验。这些经验对于使用其他JS框架构建大型应用的开发者也极具借鉴意义。 AngularJS的官方网站上给出了这个框架的基本使用方法，如：如何引入AugularJS，从而让你的web应用使用该框架如何添加控件，并对其进行数据绑定如何进行表单验证如何与服务器通信如何创建可重用的组件如何对组件进行本地化如何让应用可嵌入、可注入和可测试另外，网站上还给出了一系列教程，跟随这些内容，我们可以从深入浅出地逐渐对AngularJS的各种特性和用法有很好的了解，进而很好地开始使用这一框架。但是，正如Brian Ford所说，官方文档中并没有告诉开发者，当应用逐渐增长，其中包含上万甚至几十万行代码的时候，应该如何组织和管理它，而他的blog正是对这些内容以及最佳实践的总结。这篇 blog 特别关注的是大型应用程序，作者首先给出的建议是，尽量不要让应用变得太巨大。而应该编写小型、功能专注的、模块化的部分，然后逐渐把它们组合起来，变得越来越大，从而构成你的应用。接下来，Brian

对AngularJs的简单了解

阅读更多关于对AngularJs的简单了解

一、简单介绍 AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。 AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令 (directives)的结构，让浏览器能够识别新的语法。例如：使用双大括号{{}}语法进行数据绑定；使用DOM控制结构来实现迭代或者隐藏DOM片段；支持表单和表单的验证；能将逻辑代码关联到相关的DOM元素上；能将HTML分组成可重用的组件。二、AngularJs的核心 AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。三、AngularJs的理解 AngularJS

jQuery开发者眼中的AngularJS

阅读更多关于 jQuery开发者眼中的AngularJS

文章来源：http://blog.jobbole.com/76265/ AngualrJS是一个很贴心的web应用框架。它有很不错的官方文档和示例；经过在现实环境中的测试著名的TodoMVC project ，它在海量的框架中脱颖而出；而且网上到处都是很不错演示或者展示。但是对于一个没有接触过和AngularJS相似的框架而且还是几乎都在使用像jQuery这样的JavaScript类库的开发者来讲，要从jQuery的思想转变成AngularJS的思想是有点困难的。至少对于我来说是这样的，所以我想要分享一些学习笔记希望帮到一些开发者。 Ng不是一个库(library) 要理解AngularJS，第一件要做得事情就是要明白这是一个根本上就和jQuery不一样的工具。jQuery是一个库而AngularJS是一个框架。使用库是指，你的代码决定什么时候从库中调用一个特定的方法；使用框架则是，你实现了一些回调方法，到了特定的时候框架会去调用这些方法。当你思考下在runtime的时候会发生什么以后你就可以理解这个不同点了。jQuery在与runtime的时候会发生什么？大部分情况下，什么时候都不会发生。jQuery代码的执行是作为触发了DOM事件上绑定的jQuery方法的响应。在加载的时候，Angular会将你的DOM树和JavaScript转向一个angular app

使用AngularJS构建大型Web应用

阅读更多关于使用AngularJS构建大型Web应用

AngularJS 是由Google创建的一种JS框架，使用它可以扩展应用程序中的HTML词汇，从而在web应用程序中使用HTML声明动态内容。在该团队工作的软件工程师 Brian Ford 近日撰写了一篇 blog ，分享了如何使用AngularJS构建大型Web应用的经验。这些经验对于使用其他JS框架构建大型应用的开发者也极具借鉴意义。 AngularJS的官方网站上给出了这个框架的基本使用方法，如：如何引入AugularJS，从而让你的web应用使用该框架如何添加控件，并对其进行数据绑定如何进行表单验证如何与服务器通信如何创建可重用的组件如何对组件进行本地化如何让应用可嵌入、可注入和可测试另外，网站上还给出了一系列教程，跟随这些内容，我们可以从深入浅出地逐渐对AngularJS的各种特性和用法有很好的了解，进而很好地开始使用这一框架。但是，正如Brian Ford所说，官方文档中并没有告诉开发者，当应用逐渐增长，其中包含上万甚至几十万行代码的时候，应该如何组织和管理它，而他的blog正是对这些内容以及最佳实践的总结。这篇blog特别关注的是大型应用程序，作者首先给出的建议是，尽量不要让应用变得太巨大。而应该编写小型、功能专注的、模块化的部分，然后逐渐把它们组合起来，变得越来越大，从而构成你的应用。接下来，Brian Ford首先讲述了如何组织应用的结构

AngularJS从入门到实践（一）

阅读更多关于 AngularJS从入门到实践（一）

前言前端　 AngularJS是为了克服 HTML 在构建应用上的不足而设计的。（引用百度百科）　　AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令 (directives)的结构，让浏览器能够识别新的语法。（引用百度百科）　　　　　　例如：　　　　　　　　使用双大括号{{}}语法进行数据绑定；　　　　　　　　使用DOM控制结构来实现迭代或者隐藏DOM片段；　　　　　　　　支持表单和表单的验证；　　　　　　　　能将逻辑代码关联到相关的DOM元素上；　　　　　　　　能将HTML分组成可重用的组件。本篇学习主要有两个部分： ①【AngularJS 常用指令】 ②【AngularJS 的 mvc 】　　　　　　　　　　　 1、AngularJS 常用指令【常用指令】　　1.na-app:声明angularjs所管辖的区域，一般写在body或者HTML上原则一个一面只写一个 <body ng-app=""> </body> 2.ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 <input type="text" id="input" ng-model="name"/> 3.ng-bind 指令把应用程序数据绑定到 HTML 视图。 ①<div id="div" ng

使用AngularJS构建大型Web应用

阅读更多关于使用AngularJS构建大型Web应用

AngularJS的官方网站上给出了这个框架的基本使用方法，如：如何引入AugularJS，从而让你的web应用使用该框架如何添加控件，并对其进行数据绑定如何进行表单验证如何与服务器通信如何创建可重用的组件如何对组件进行本地化如何让应用可嵌入、可注入和可测试另外，网站上还给出了一系列教程，跟随这些内容，我们可以从深入浅出地逐渐对AngularJS的各种特性和用法有很好的了解，进而很好地开始使用这一框架。但是，正如Brian Ford所说，官方文档中并没有告诉开发者，当应用逐渐增长，其中包含上万甚至几十万行代码的时候，应该如何组织和管理它，而他的blog正是对这些内容以及最佳实践的总结。这篇 blog 特别关注的是大型应用程序，作者首先给出的建议是，尽量不要让应用变得太巨大。而应该编写小型、功能专注的、模块化的部分，然后逐渐把它们组合起来，变得越来越大，从而构成你的应用。接下来，Brian Ford首先讲述了如何组织应用的结构，然后对性能、测试、工具、服务器和构建过程做了简要的总结。在应用的组织结构方面，Brian Ford针对各个方面给出如下建议：目录：建议在根目录中只放置index.html一个文件，然后根据需要创建scripts、styles、views等目录，在scripts目录下，首先会存放app.js文件，然后在之下又可以创建多个子目录

AngularJS快速入门指南04：指令

阅读更多关于 AngularJS快速入门指南04：指令

/*--> */ /*--> */ 　　AngularJS通过指令将HTML属性进行了扩展。 AngularJS指令　　AngularJS指令是带有 ng- 前缀的扩展HTML属性。　　 ng-app 指令用来初始化AngularJS application。　　 ng-init 指令用来初始化application数据。　　 ng-model 指令用来将HTML控件（如input，select，textarea等）的值绑定到application数据。 <div ng-app="" ng-init="firstName='John'"> <p>Name: <input type="text" ng-model="firstName"></p> <p>You wrote: {{ firstName }}</p> </div> 运行　　 ng-app 指令同时也告诉AngularJS，它所在的<div>元素是AngularJS application的根元素，即作用域。数据绑定　　在上面的示例中，{{ firstName }}是一个AngularJS数据绑定表达式。　　在AngularJS数据绑定中，AngularJS表达式使用AngularJS数据进行同步更新。　　 {{ firstName }} 通过 ng-model="firstName" 同步更新数据。

Angularjs之directive指令学习笔记（二）

阅读更多关于 Angularjs之directive指令学习笔记（二）

1.Directive的五个实例知道driective作用、其中字段restrict、template、 replace、transclude、link用法参考文章链接地址： http://damoqiongqiu.iteye.com/blog/1917971 1.指令（directive）的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签 ,如同博客中的自定义的<hello>标签 2.directive中几个属性的介绍： ①restrict：表明指令的声明方式，选项E(元素Element)，A（属性Attribute），C（样式类Class），M（注释Comment） ②template/templateUrl:替换自定义元素的html的标签及内容 ③replace:true/false :决定自定义标签的显示及隐藏 ④transclude:true决定自定义标签内子标签的内容的显示处理,此时<hello>标签里的内容保持不变 ⑤link:一些事件需要绑定到某个元素上，那么你需要提供一个link函数 http://www.cnblogs.com/jimmychange/p/3498906.html compile：在directive中如果需要对DOM元素进行处理，基本都是在这个函数中进行。仔细看这个函数，compile并不能访问scope， link

订阅 angularjs表单验证