我的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);}});
     类似Rails,PHP,JSP和ASP等之类的Html字符串和数据混合起来，然后再发给用户并显示
 
     代码片段：

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

</html>
      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>
 
      当然几种方式各有千秋,但是相信各位看官也能看出来，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

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

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>
 

当前Angular应用的Controller，

function MyController($scope) {

    $scope.username = 'World!';

    $scope.sayHello = function () {

        $scope.greeting = 'Hello,' + $scope.username;

    };

}

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

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

<html ng-app>

 .........

</html>

ng-model 是绑定了controller 的customer 的name 属性,这个指令是双向绑定,如果你使用过Silverlight或者WPF应该很容易理解.

{{ greeting | titleCase}} 这是也是绑定数据,是单向的，即只负责显示。

跑起来看看效果吧!

好,第一个AngularJs程序跑起来了!!!

不急，你在改改textbox中内容试试,

是的,你修改了name值，然后userMame副本的值也变化了，而你没有写多余的代码,这就是双向绑定机制!

时间关系，暂时到这了...后面继续和大家交流！

参考资料:

http://angularjs.cn/

《用AngularJS 开发下一代Web应用》

转载请注明出处:http://www.cnblogs.com/lucky_hu

我的AngularJS 学习之旅的更多相关文章

  1. AngularJS学习之旅—AngularJS 模块(十五)

    一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...

  2. AngularJS学习之旅

    开篇 最近由于项目上可能需要用到AngularJS,公司将技术学习.调研的任务安排了下来,因此开始了我的AngularJS学习之路. 在这之前没写过技术博客,主要是由于太懒,另外自愧文笔不好,因此一直 ...

  3. 我的AngularJS 学习之旅(二)

    记得某位大神说过,"时间就像海绵里的水,挤挤总是有的.".大多时候,与其说我是很忙而没时间去做自己想做的事, 倒不如说是懒得去做罢了. 废话不多说,接前一篇继续吧 3.3 指令(D ...

  4. angularJS学习之旅（1）

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. AngularJS学习之旅—AngularJS 表单(十六)

    一.AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button ...

  6. AngularJS学习之旅—AngularJS 事件(十四)

    1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...

  7. AngularJS学习之旅—AngularJS HTML DOM(十三)

    1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据 ...

  8. AngularJS学习之旅—AngularJS Table(十一)

    1.AngularJS 表格 1. ng-repeat 指令可以完美的显示表格 AngularJS 实例 <!DOCTYPE html> <html> <head> ...

  9. AngularJS学习之旅—AngularJS Select(十)

    1.AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. ng-option:创建一个下拉列表,列表项通过对象和数组循环输出 eg: <div ...

随机推荐

  1. CSS3动画里的过渡效果

    过渡效果中有: 1平滑效果 2线性过渡 3由慢到快 4由快到慢 5慢-快-慢  等等 具体参考 w3chool 例如: <body> <div class="out&quo ...

  2. 互联网+下PDA移动智能手持POS超市收银开单软件

    是一套专为中小超市.专卖店设计的收银管理软件,广泛应用于中小超市(百货商店).化妆品店.婴幼儿用品店.玩具店.保健品店.茶叶店. 电器.文具图书.手机通讯器材店等行业的中小型店面店铺.该系统具有完善的 ...

  3. jquery cookie的用法

    http://www.cnblogs.com/qiantuwuliang/archive/2009/07/19/1526663.html jQuery cookie是个很好的cookie插件,大概的使 ...

  4. 单元测试 逃不开的Done 与约定

    关注单元测试有一段时间了,也做了些尝试然后就停了下来,寻找框架.方法.各种尝试 看得多,尝试的少, 关于框架分为两类,1是自动化测试工具类,1是js单元测试框架 关于自动化测试工具我尝试了http:/ ...

  5. 【DP】HDU 1176

    HDU 1176 免费馅饼 题意:中文题目不解释. 思路:因为是从中间出发所以思路卡了许久,还在之前做了道HIHO入门的题.能想到的点,从时间思考,然后初始化1s的时候,4,5,6,的数值要特别赋值. ...

  6. ZeroMQ接口函数之 ：zmq - 0MQ 轻量级消息传输内核

    官方网址:http://api.zeromq.org/4-0:zmq zmq(7) 0MQ Manual - 0MQ/3.2.5 Name zmq – ØMQ 轻量级消息传输内核 Synopsis # ...

  7. 两个多项式相加 ( C++ )

    实现两个多项式进行相加 不开辟空间 ( 这要求实现进行相加,代价为两个原链表将被修改) 分析: this>other 就把other当前结点放置在this之前 this<other 就th ...

  8. this用法（ryf)

    this是javascript语言的一个关键字 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用,比如: function test(){ this.x = 1; } 随着函数使用场合的不 ...

  9. PHP编程效率的20个要点

    用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则 不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的“函数” 用 单引号代替双引 ...

  10. jQuery的封装方式与JS中new的实现原理

    function jQuery() { return new jQuery.fn.init(); } jQuery.fn = jQuery.prototype = { init: function() ...