带你走进AngularJS的大门
时间：2023-03-14 22:28:45
科技观察
简介这是我写的第一篇关于Angular.js的文章，但相信看完这篇文章后，对你理解Angular.js的基础知识会有很大的帮助。首先，我们需要指出什么是angularjs。其实angularjs是javascript的一个类库。我们可以使用这个类库轻松地创建网页。双向绑定是angularjs的一个重要特性，这也是angularjs相对于其他Javascript类库的一个非常重要的特性。双向绑定是指当你修改任意一个属性的值时，关联的html元素也会随之改变，你不需要另外修改。Angularjs也为我们提供了MVVM（ModelViewViewModel）的模型。MVVM的意思是Model是一个真实的对象，我们使用这个对象来创建页面需要展示的模型，并调用视图模型。View（视图）就是我们需要输出的页面。背景如果不使用angularjs或者其他类似angularjs功能的库，比如knockout.js，那么我们在写代码的时候，会写出越来越复杂的代码。所以使用angularjs编写应用程序速度更快，效率更高，而且比其他库更容易管理。代码使用下面我们通过一个简单的例子来逐步了解angularjs。为了更好的理解angularjs的知识，我们使用asp.net作为后台应用，实现简单的增删改查操作，本例中我们使用静态列表形式展示增删改查和查询操作。数据模型中有5个属性，UserName、Address、Salary、IsMarried和Email。这些属性的记录在视图中列出，每条数据后面都有一个删除和修改按钮。通过这些按钮我们可以创建、修改和删除静态列表。现在先让我们了解下例子中使用的属性的含义data-ng-app-表示这是angular要处理的元素data-ng-controller-指定用来处理这个元素的angular控制器
data-ng-bind——指定元素绑定到模型中的哪个属性（上面列出的UserName，Address,Salary,IsMarriedorEmail)
例如UserName是Model的一个属性，将这个属性绑定到定义的元素data-ng-repeat——使用来指定要循环的数据使用上面的语法，我们循环遍历angular对象属性UserData，取出里面的数据。limitTo:20表示最多循环20次，是angular中的一个过滤器。当然angular.js中也可以使用其他的过滤器，比如大写、小写、货币等。data-ng-click——用于绑定点击事件$index——表示循环中索引data-ng-model——将angular模型应用到htmldom中，也就是说当input输入框中的值被修改时，相应模型中的属性也会随之改变data-ng-disabled——通过该属性的值禁用一个元素或者不禁用让我们看看下面的代码varangularuserApp=angular.module("userApp",[]);angularuserApp.controller("userAppCtrl",function($scope,$http,$interval,$window,$timeout){})***行代码创建一个对象，由htmldom中的data-ng-app指定.另一行代码创建一个控制器，由data-ng-controller指定。$http用于指定服务器地址；$interval和$timeout类似于jquery中的interval和timeout。本例只定义了这两个变量，没有使用，其工作原理与jquery中相同；$window的定义与Javascript中的window对象相同。使用这个变量来实现你想用窗口对象实现的效果。下面是所有HTML代码| 用户名 | 地址 | 邮箱 | 工资 | 已婚 |
|---|
| </span> | | | | | |
EditUserInformation
| 用户名： | |
| 地址： | |
| Email: | |
| 薪水： | |
| 已婚： | |
|
/表格> 下面是控制器的现实代码publicclassUserController:Controller{////GET:/User/publicActionResultUsers(){returnView();}publicJsonResultGetData(){List
