走进AngularJS
前 言
xiaoq
AngularJS 通过新的属性和表达式扩展了 HTML。
使用起来非常方便。
1. AngularJS的指令与表达式 |
1.1AngularJS表达式
1.2AngularJS的常用指令
2. AngularJS中的MVC与作用域 |
2.1MVC三层架构
Model(模型层):应用程序中用于处理数据的部分。(包括将数据保存或修改到数据库、变量、文件中)
2.2创建模块
2.3AngularJS中的作用域
3. AngularJS中的过滤器 |
angular.module("app",[]) .controller("ctrl",function($scope){ $scope.classes=[ {name:"张三",age:12,score:78}, {name:"李四",age:12,score:66}, {name:"二麻子",age:12,score:98}, {name:"小刘",age:12,score:54}, {name:"八万",age:12,score:75}, ] }) /* * 自定义过滤器 */ .filter("showHello",function(){ return function(text){ return "Hello AngularJS"; } }) .filter("reverse",function(){ return function(text){ return text.split("").reverse().join(""); } }) /* * 自定义过滤器,同时需要传递过滤参数 * 调用过滤器示例:<p>{{12345678901| hideTel:4}}</p> * 传入的参数4,将被过滤函数的num形参所接受 */ .filter("hideTel",function(){ return function(text,num){ num=num>0&&num<11?num:3; text=text+""; var newText=text.substring(0,11-num) +text.substring(11-num,11).replace(/\d/g,"*"); return newText; } }) /* * 自定义过滤器,实现根据姓名筛选数据的功能。 * >>> 调用示例: * 请输入姓名:<input type="text" ng-model="name"/> * <tr ng-repeat="item in classes | filterByName:name"> */ .filter("filterByName",function(){ return function(items,search){ if(!search) return items; var arr=[]; for (var i=0;i<items.length;i++) { var index=items[i].name.indexOf(search); if (index>-1) { arr.push(items[i]); } } return arr; } })
4. AngularJS中的service & factory & provider |
4.1service
4.1.1 内置服务:
angular.module("app",[]) .controller("ctrl",function($scope,$location,$timeout,$interval,hexafy){ $scope.local = $location.$$host; $timeout(function(){ $scope.time="我是两秒钟之后出现!"; },2000); $scope.num=0; $interval(function(){ $scope.num++; },1000); $scope.gongneng=hexafy.gongneng; $scope.num1=hexafy.func(10); })
.service("hexafy",function(){ this.gongneng="将十进制数转化为16进制"; this.func=function(num){ return num.toString(16); } }) /*使用过滤器实现同样功能*/ .filter("filter1",function(){ return function(num){ return num.toString(16); } }) /* 在过滤器中调用服务!! * 也必须在声明过滤器的外层构造函数中,注入服务名称!! */ .filter("filter2",function(hexafy,$location){ return function(num){ return hexafy.func(num); } })
4.2factory
angular.module("app",[]) .controller("ctrl",function($scope,hexafy){ $scope.gongneng=hexafy.gongneng; $scope.num1=hexafy.func(11); }) .factory("hexafy",function(){ var obj={ gongneng:"将十进制数转化为16进制", func:function(num){ return num.toString(16); } } return obj; })
4.3provider
.provider("hexafy",function(){ this.$get=function(){ var obj={ gongneng:"333" } return obj; } })
4.3.3 在三种服务中,provider服务是唯一一个可以写进config配置阶段的服务。
angular.module("app",[]) /*.config()表示配置阶段,在声明controller之前执行。可以用于声明一些在controller中 * 需要使用的全局变量、方法、服务等 */ .config(function($provide){ // 在配置阶段声明provider服务,需要在config中注入系统对象$provide $provide.provider("hexafy",function(){ this.$get=function(){ var obj={ gongneng:"444" } return obj; } }); }) .controller("ctrl",function($scope,hexafy){ $scope.gongneng=hexafy.gongneng; })
5. AngularJS中的select和表格 |
5.1使用数组作为数据源
<select ng-model="site2" ng-options="item.site for item in sites"></select> <!-- 这种写法,默认生成的option效果如下: <option value="http://www.google.com">Google</option> -->
5.2以对象作为数据源
<select ng-model="site3" ng-options="key for (key,value) in sitess"> <!-- <option value="value">key/value(取决for前面的内容)</option> --> </select>
<tr ng-repeat="item in options"> <!-- ng-repeat遍历是,$index 表示当前的行索引! --> <td>{{$index + 1}}</td> <td>{{item}}</td> </tr>
6. AngularJS中的表单和输入验证 |
6.1表单中,常用的验证操作
6.2验证
<div class="container" style="width: 500px;margin: 50px auto;padding: 0px;"> <div class="panel panel-primary"> <div class="panel-heading"> <div class="panel-title text-center"> 用户注册 </div> </div> <div class="panel-body"> <form class="form-horizontal" name="form" novalidate> <div class="row"> <div class="col-xs-3">用户名</div> <div class="col-xs-9"> <input type="text"class="form-control"name="name" ng-model="user.name" ng-minlength="6" ng-maxlength="12"/> <p style="margin: 0px; color: red;" ng-show="form.name.$invalid && form.name.$dirty"> <span ng-show="form.name.$error.required">用户名必须填写</span> <span ng-show="form.name.$error.minlength">用户名长度最小为6位</span> <span ng-show="form.name.$error.maxlength">用户名长度最大为16位</span> </p> </div> </div> <div class="row"> <div class="col-xs-3">邮箱:</div> <div class="col-xs-9"> <input type="email" class="form-control" name="email" ng-model="user.email" required/> <p style="margin: 0px;color: red;" ng-show="form.email.$invalid && form.email.$dirty"> <span ng-show="form.email.$error.required">邮箱必须填写</span> <span ng-show="form.email.$error.email">邮箱不合法</span> </p> </div> </div> <div class="row"> <div class="col-xs-3" >密码:</div> <div class="col-xs-9"> <input type="password"class="form-control"name="pwd" ng-model="user.pwd" pattern="^\w{6,18}$" required/> <p style="margin: 0px; color: red;" ng-show="form.pwd.$invalid && form.pwd.$dirty"> <span ng-show="form.pwd.$error.pattern">密码只能由6-18位的字母、数字、下划线</span> </p> </div> </div> <div class="row"> <div class="col-xs-3" >确认密码:</div> <div class="col-xs-9"> <input type="password"class="form-control" name="repwd" ng-model="user.repwd" required/> <p style="margin: 0px; color: red;" ng-show="user.pwd!=user.repwd && form.repwd.$dirty"> 两次密码输入不一致 </p> </div> </div> <div class="row"> <div class="col-xs-5"> <input type="submit" value="注册" class="btn btn-success" ng-disabled="form.$invalid||user.pwd!=user.repwd"/> </div> <div class="col-xs-5"> <input type="reset" value="重置" class="btn btn-warning"/> </div> </div> </form> </div> </div> </div>
走进AngularJS的更多相关文章
- 走进AngularJs(一)angular基本概念的认识与实战
一.前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,作为一名业界新秀,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.当听到AngularJs这个名字并知道是google在维 ...
- 走进AngularJs 表单及表单验证
年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...
- 走进AngularJs(六) 服务
今天学习了一下ng的service机制,作为ng的基本知识之一,有必要做一个了解,在此做个笔记记录一下. 一.认识服务(service) 服务这个概念其实并不陌生,在其他语言中如java便有这样的概念 ...
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- 走进AngularJs(九)表单及表单验证
年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...
- 走进AngularJs(八) ng的路由机制
在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而a ...
- 走进AngularJs(五)自定义指令----(下)
自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...
- 走进AngularJs(三)自定义指令-----(上)
一.有感而发的一些话 在学习ng之前有听前辈说过,angular上手比较难,初学者可能不太适应其语法以及思想.随着对ng探索的一步步深入,也确实感觉到了这一点,尤其是框架内部的某些执行机制,其复杂程度 ...
- 走进AngularJs(七) 过滤器(filter) - 吕大豹
时间 2013-12-15 16:22:00 博客园-原创精华区 原文 http://www.cnblogs.com/lvdabao/p/3475426.html 主题 AngularJS 过滤器 ...
随机推荐
- python之路第二天 随便记记 今天主要很郁闷
为何要有操作系统 为了让程序员更轻松的完成命令电脑工作而存在的,控制硬件,服务于软件. 操作系统的位置 操作系统位于软件和硬件之间.操作系统由内核(运行于内核态,控制硬件)和系统调用(运行于用户态,为 ...
- vue.js之获取当前点击对象(其实是套着vue的原生javascript吧,笑😊)
转载请注明出处:http://www.cnblogs.com/meng1314-shuai/p/7455575.html 熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴, ...
- 通过H5的新标签canvas做出一个时钟的全过程,希望对初学者有帮助
最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去. ...
- Nginx学习之HTTP/2.0配置
哎呀,一不小心自己的博客也是HTTP/2.0了,前段时间对网站进行了https迁移并上了CDN,最终的结果是这酱紫的(重点小绿锁,安全标示以及HTTP/2.0请求). 科普 随着互联网的快速发展,HT ...
- Java基础---多态、内部类、异常、包
第一讲 多态 多态可以理解为事物存在的多种体现形态. 例:动物中猫,狗.猫这个对象对应的类型是猫类型,如:猫 x = new猫(); 同时猫也是动物中的一种,也可以把猫称为动物.动物 y = ...
- 简述C/C++调用lua中实现的自定义函数
1.首先说下目的,为什么要这么做 ? 正式项目中,希望主程序尽量不做修改,于是使用C/C++完成功能的主干(即不需要经常变动的部分)用lua这类轻量级的解释性语言实现一些存在不确定性的功能逻辑:所以, ...
- linux Module驱动开发-一切刚刚开始
linux内核是可以高度定制的,通过配置编译选项达到定制的目的. 在配置kernel编译选项时驱动程序的编译选项一般有三种,不编译.编译为内核驱动.编译为模块驱动.所以linux驱动一般分为两类,内核 ...
- 通过css控制超链接不显示下划线
“页面属性”——“链接”——“下划线样式”——“始终无下划线” <style type="text/css"> a:link { text-decoration: no ...
- C++ Concept 和Java 接口
C++ Concept 和Java 接口 Concept及接口 我会用Java写个case来解释什么是C++的Concept.Concept可以理解为接口,它是一种广义的接口.不同于Java的Inte ...
- ABP从入门到精通(6):快速重命名解决方案
SolutionRenamer SolutionRenamer 是一个解决方案快速重命名工具.经测试重命名一个全新asp.net zero core项目(ABP asp.net zero,.net c ...