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 是一个比较重的脚本库，虽然内部高度复杂，注意关键的使用细节，使用起来其实很是简单。