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

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

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

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

地址：https://angularjs.org/

不过，这个网站经常被封，你也可以直接在这里下载: 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 和控制器。

1 <script src="~/Scripts/angular-1.2.14.min.js"></script>
2 <script>
3     var app = angular.module("myApp", []);
4 
5     app.controller("myController", function ($scope, $http) {
6         $scope.message = "Hello, Angular JS.";
7     });
8 </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 是一个比较重的脚本库，虽然内部高度复杂，注意关键的使用细节，使用起来其实非常简单。