AngularJs 入门系列-1 使用 AngularJs 搭建页面基本框架

时间:2022-01-01 14:32:37

每当看到前端程序员在脚本、样式、表单处理逻辑中苦苦挣扎的时候,我就在想,为什么不用Angular Js 呢?

Angular Js 支持页面前端的 MVC 模式开发,在 Angular JS 的支持下,我们可以将页面前端处理的数据与页面展示进行分离,实现优雅的代码结构。

首先,我们需要到 AngularJs 的官网下载这个脚本库。

地址:https://angularjs.org/

AngularJs 入门系列-1 使用 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>

现在运行一下程序,你应该已经在页面看到输出结果了。

AngularJs 入门系列-1 使用 AngularJs 搭建页面基本框架

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 到这个编辑元素上。

AngularJs 入门系列-1 使用 AngularJs 搭建页面基本框架

重新运行程序,你看到 message 的内容也同步出现在编辑框中,如果你修改编辑框中的内容,标题中的内容也将会同步变化。你的编辑结果已经同步到了模型上。

总结

angularJs 是一个比较重的脚本库,虽然内部高度复杂,注意关键的使用细节,使用起来其实非常简单。