AngularJS初探
来源:互联网 发布:云协作软件 编辑:程序博客网 时间:2024/05/16 16:14
前言
现在前端的技术发展是如此之快,各种框架层出不穷,AngularJS无疑是十分耀眼的一个。仅以此篇博文开启学习AngularJS之门,共勉。
正文
一、AngularJS特性
AngularJs是一个用于设计动态web应用的结构框架,其有很多优秀的特性,如模板机制、数据绑定、模块、指令、依赖注入、路由,这里暂且不对其原理做深入探究,毕竟还不知道怎么用这些高级的功能。
二、基础知识
在这篇文章的最后我要写一个常见的应用—Todo,下面是一些必要的准备知识。
1、指令:指令是ng为HTML补充的语法扩展,用于增强HTML的表现力。2、模板与数据的绑定:通过ng-model实现。何为双向绑定,通俗讲就是两者将随时保持同步,最新的数据会实时显示在页面中,页面中用户修改的数据也会实时被记录在数据模型中。3、循环输出:ng-repeat实现4、事件:ng-event实现
不多说了,还是结合例子来看吧,更容易明白。
三、Todo
1、可以先简单的将AngularJS视为MVC框架。那么模板是什么?我理解为:包含ng-controller指令的标签内(包括其自身)的html内容。
<div ng-controller="Todo"> <input type="text" ng-model="data.item" ng-keyup="add($event)"> <ul> <li ng-repeat="o in data.list"> <span>{{o.content}}</span> <a href="javascript:;" ng-click="del($index)">删除</a> </li> </ul></div>
- 首先把input内的输入内容与数据中的data.item绑定,随着输入内容的变化data.item自动发生改变。 - 在键盘抬起的时候会触发add方法,且参数为event事件。 - data.list在数据中是一个数组,通过ng-repeat指令可以做到循环输出。 - 在点击删除的时候触发del方法,其参数$index代表的是当前循环的索引。
2、下面是MVC中的M,即model。这里的model是跟C即控制器是对应的,每个控制器下面会有一个作用域$scope。模板中用到的数据以及方法都需要挂载在$scope下面才可以被找到。
var app = angular.module("MyApp",[]);app.controller('Todo',function($scope){ $scope.data = { 'item' : '', 'list' : [] }; $scope.add = function(e){ if(e.keyCode==13){ $scope.data.list.push({'content':$scope.data.item}); $scope.data.item = ''; } }, $scope.del = function(index){ $scope.data.list.splice(index,1); }});
- 首先可以看到,抬起回车键就会向data.list内加入一条数据,model的变化可以实时的展现在view上。 - 点击删除时会根据索引删除掉data.list内的一条数据
结语
AngularJS可以很大程度上简化我们的工作,并且有很多很酷的特性,值得我们去深入探索。
0 0
- AngularJS初探
- AngularJS初探
- AngularJS初探
- AngularJS初探
- AngularJS初探(一)
- AngularJS基础入门初探
- 初探angularJS 一
- 初探angularJS 二
- angularJs 个人初探笔记
- angularJs 个人初探笔记
- angularJs 个人初探笔记
- angularJs 个人初探笔记
- angularJs 个人初探笔记
- angularJs 个人初探笔记
- AngularJS 初探(一)
- AngularJS 初探(二)
- AngularJS初探:搭建PhoneCat项目的开发与测试环境
- AngularJS初探:搭建PhoneCat项目的开发与测试环境
- Object-C之基本数据类型
- Android之IntentService
- 微信小程序 - 开发工具快捷键
- Oracle DML触发器
- python解析html tag
- AngularJS初探
- jmeter 参数化的五种方法
- poj1330Nearest Common Ancestors(暴力与倍增)
- 【python】numpy数组(array)扩充(复制)方法repeat和tile的使用
- 是时候学习ReJava了
- Parameter server anatomy (1)
- HttpClient4.x使用中出现的几个问题及解决方法
- 文章标题
- MP4封装格式详解