每当看到前端程序员在脚本、样式、表单处理逻辑中苦苦挣扎的时候,我就在想,为什么不用Angular Js 呢?
Angular Js 支持页面前端的 MVC 模式开发,在 Angular JS 的支持下,我们可以将页面前端处理的数据与页面展示进行分离,实现优雅的代码结构。
首先,我们需要到 AngularJs 的官网下载这个脚本库。
不过,这个网站经常被封,你也可以直接在这里下载: http://files.cnblogs.com/haogj/AngularJs-1.3.10.zip
1. 在页面引用 AngularJs 脚本
AngularJs 是一个独立的脚本库,许多人询问是否还需要 jQuery,答案是不需要。你只需要在页面引用 AngularJs 的脚本文件就可以了,甚至,AngularJs 还实现了一个精简版的 jQuery。不过它也可以和 jQuery 一起使用。
在 ASP.NET MVC 的页面视图中,可以直接引用,也可以通过 @section 将脚本放置到布局 Layout 的 scripts 节中。
@section scripts {
<script src="~/Scripts/angular-1.3.10.min.js"></script>
<script>
</script>
}
2. 创建 WebApp 和控制器
在 AngularJs 中,每个页面被看作一个独立的 WebApp,每个 WebApp 中可以包括多个独立的处理部分,我们称为 Controller,每个 Controller 有自己独立的处理上下文和逻辑。
AngularJs 通过指令 ng-app 来划定这个 WebApp 的作用域,通常可以将这个 ng-app 直接写在 html 标记之上,也可以写在一个元素之上,我们这里写在这个视图中的 div 标记之上。
ng-controller 用来划定 WebApp 中的控制器的作用域,通常,我们会给它起一个名字。
<div ng-app="myApp">
<div ng-controller="myController"> </div>
</div>
下面,在脚本中创建我们的 WebApp 和控制器。
<script src="~/Scripts/angular-1.2.14.min.js"></script>
<script>
var app = angular.module("myApp", []); app.controller("myController", function ($scope, $http) {
$scope.message = "Hello, Angular JS.";
});
</script>
上面的第三行创建 WebApp,注意第一个参数是应用的名称,需要与页面指令中的 WebApp 名称匹配,第二个参数数组是必须的。
第五行创建了应用中的控制器,特别需要注意的是控制器的匿名函数参数,这两个参数的名称不可以修改,在 AngularJs 中,参数的名称用来进行依赖注入。
第一个参数 $scope 就是这个控制器的上下文对象,通过它我们将模型,视图,和处理逻辑粘合在一起。
3. 创建视图
在 AngularJs 中,视图是通过标准的 HTML 实现的。
注意,我们上面代码的第 6 行,我们在上下文对象上保存了一个 message ,这就是我们的模型,我们希望这个模型中的数据,可以在页面展示出来。
在 Controller 的元素内部,创建一个新的 div 来容纳我们的内容,我们准备使用 h2 标记将这个 message 的内容显示出来。
视图怎样与我们的模型绑定在一起呢?各种模板都有自己的绑定语法,AngularJs 的方式是 {{ }}。其中可以写一个表达式。
<div ng-app="myApp"> <div ng-controller="myController"> <div>
<h2>{{message}}</h2>
</div> </div> </div>
现在运行一下程序,你应该已经在页面看到输出结果了。
4. 实现模型和视图的双向绑定
如果我们需要编辑这个 message 呢?编辑之后如何获取编辑之后的内容呢?angularjs 支持双向绑定,也就是说既可以从我们的模型获取数据,如果数据被编辑了,编辑之后的内容也通过可以被 angularjs 同步到模型上。
双向绑定实际上是 angularjs 内部支持的,我们并不需要特别的编码。在这里我们添加一个编辑框来支持编辑。
<div ng-app="myApp"> <div ng-controller="myController"> <div>
<h2>{{message}}</h2>
<input type="text" ng-model="message" />
</div> </div> </div>
注意 input 元素的 ng-model 属性,它表示我们需要双向绑定 message 到这个编辑元素上。
重新运行程序,你看到 message 的内容也同步出现在编辑框中,如果你修改编辑框中的内容,标题中的内容也将会同步变化。你的编辑结果已经同步到了模型上。
总结
angularJs 是一个比较重的脚本库,虽然内部高度复杂,注意关键的使用细节,使用起来其实非常简单。