我的AngularJS 学习之旅

时间：2014-08-20 01:11:55 阅读：284 评论：0 收藏：0 [点我收藏+]

标签：style blog http color java 使用 os io

我的AngularJS 学习之旅

基础篇

1、Angular的起源

2、比较Web 页面实现的几种方式

3、一些基本术语

4、Angular与其他框架的兼容性

5、总结

6、综合实例

很早之前就听朋友说起AngularJs，但由于各种原因，一直没去研究。最近正好有同事也对这个框架比较感兴趣，大家一起讨论，于是终于“名正言顺”地开始研究了。

本文的目的是记录一下自己这两周的学习点滴，算是学习笔记吧，如果对初学的朋友有一点帮助，那也算是一件好事。嘿嘿

1、Angular的起源

关于Angular 的起源，可以追溯到2009 年的Google Feedback 项目。当时,团队中的一个成员Misko Hevery 做出了一个大胆的宣言：利用他自己业余时间所开发的一个开源库，他可以在两周之内把目前所有东西重写一遍。三个星期之后,他所开发的新应用的代码量从原来的17000 行压缩到了1500 行。是的,Misko Hevery 就是Angular之父.他和他的同事决定，围绕他所提倡的理念组建一个团队，这个简单的理念就是：简化对web 开发者的经验要求。最后,越来越多的开发者在他们的日常生活中以来Angular，并且发展成了一个优质的支持者网络。

2、比较几种不同的Web 实现

我相信大家使用过很多Js库,如JQuery库，Extjs之类的JS库,把Html模板字符串和数据混合起来，然后把获得的结果插入Dom中。

代码片段:

   <tr>
            <td>
                <input id="Access" type="button" value="Access" />
            </td>
            <td>
                <div id="browser">
                </div>
            </td>
    </tr>

$.ajax({type: ‘GET‘,url: ‘/Home/Get_Page‘,success: function (data) {$("#browser").text(data);}});

View Code

类似Rails,PHP,JSP和ASP等之类的Html字符串和数据混合起来，然后再发给用户并显示

代码片段：

<html><head><title>First program</title></head><body><?php  echo "hello, worldn";?></body>
</html>

View Code

AngularJS等数据绑定方式

代码片段:

<div class="row-fluid">
        <input type="text" ng-model="query" class="form-control" placeholder="请输入标题" />
        <input type="button" ng-click="search()" value="Search" class="btn btn-primary" />
 </div>

View Code

当然几种方式各有千秋,但是相信各位看官也能看出来，Angular Web呈现上的独特之处,没有对于的东西,后面还会看到它是怎么讲UI呈现和业务逻辑隔离开的。

3、一些基本术语

在创建第一个应用程序之前，你需要理解Angular中的一些概念。稍后，通过一个简单的例子，你可以快速接触Angular中所有重要的部分。但是，我不会花时间去解释细节，而是着重于帮助你建立一个全局性的“概观”。

3.1 MVC

MVC背后的核心理念是：你应该把管理数据的代码(model)、应用逻辑代码(controller)、以及向用户展示数据的代码(view)清晰的分离开。

视图会从模型中获取数据，然后展示给用户。当用户通过鼠标点击或者键盘输入与应用进行交互的时候，控制器会做出相应并修改模型中的数据。

最后，模型会通知视图数据已经发生了变更，这样视图就可以刷新其中显示的内容。

在Angular应用中，视图就是Document Object ModelO(DOM,文档对象模型),控制器就是JavaScript类,而模型数据则被存储在对象的属性中。

3.2 $scope

何为作用域(Scope)?

作用域 (Scope)

是一个存储应用数据模型的对象,为表达式提供了一个执行上下文,作用域的层级结构对应于 DOM 树结构。

作用域可以监听表达式的变化并传播事件

注：其实可以很简单地理解为有以下两个链条关系：

控制器 --> 作用域 --> 视图（DOM）

指令 --> 作用域 --> 视图（DOM）

先来看一个例子吧

工欲善其事,必先利器,我们需要从官网下载Angular包,这里使用的是AngularJS v1.1.4

bubuko.com,布布扣

如上图,普通的使用只,需引入这个库就可以了.

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html ng-app>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/angular/angular.min.js"></script>
    <script src="~/Scripts/app/hello2/hello.js"></script>
</head>

<body>
    <div ng-controller="Ctrl">
        Your name:
        <input type="text" ng-model="customer.name">
        <button ng-click=‘sayHello()‘>greet</button>
        <p>{{ greeting | titleCase}}</p>
        <div my-customer></div>
    </div>
</body>
</html>

View Code

当前Angular应用的Controller，

function MyController($scope) {

    $scope.username = ‘World!‘;
    $scope.sayHello = function () {
        $scope.greeting = ‘Hello,‘ + $scope.username;
    };
}

这里需要解释一下,ng-app指令告诉Angular应用管理页面中的那一块.如果你正在构建一款纯Angualr应用,

那么你该把 ng-app指令写在<html>标签中,如下: