我的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 学习之旅,布布扣,bubuko.com

时间: 2024-10-08 10:03:57

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

AngularJS学习之旅

开篇 最近由于项目上可能需要用到AngularJS,公司将技术学习.调研的任务安排了下来,因此开始了我的AngularJS学习之路. 在这之前没写过技术博客,主要是由于太懒,另外自愧文笔不好,因此一直以来羞于提笔.但想来做技术好多年,不能再是碎片式学习了,得更系统地学习,将自己对于技术的理解记录下来,敢于呈现给大家并接受大家的指正. 闲言碎语不多说,还是直接开始我的AngularJS学习之旅吧. 学习足迹 AngularJS入门 (1)认识AngularJS

我的AngularJS 学习之旅(二)

记得某位大神说过,"时间就像海绵里的水,挤挤总是有的.".大多时候,与其说我是很忙而没时间去做自己想做的事, 倒不如说是懒得去做罢了. 废话不多说,接前一篇继续吧 3.3 指令(Directives) Angular  最强大的功能之一就是,你可以把模板编写成HTML的形式. [备注:Angular引入了一款强大的DOM转换引擎,可用它来扩展HTML的语法] 常用的内置指令; {{ greeting }}    单向数据绑定 ng-model          双向绑定 3.4 过滤器

angularJS学习之旅(1)

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <title></title> </head> &

AngularJS学习之旅—AngularJS 表达式(二)

1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙. AngularJS 将在表达式书写的位置"输出"数据. AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字.运算符和变量. 实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }} eg: 1

AngularJS学习之旅—AngularJS 模型(四)

1.AngularJS ng-model 指令 1.ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. 2.ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定. 双向绑定:双向绑定,在修改输入域的值时, AngularJS 属性的值也将修改 验证用户输入: eg: <form ng-app="" name="myForm"> Email: <input t

AngularJS学习之旅—AngularJS 过滤器(七)

1.AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式. filter 从数组项中选择一个子集. lowercase 格式化字符串为小写. orderBy 根据某个表达式排列数组. uppercase 格式化字符串为大写. 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-

AngularJS学习之旅—AngularJS 服务(八)

1.AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务.2.什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 多个服务. 有个 $location 服务,它可以返回当前页面的 URL 地址. 注意 $location 服务是作为一个参数传递到 controller 中.如果要使用它,需要在 controller 中定义. var app = angular

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

1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input,select,textarea,触发事件:失去焦点): ng-focus(适用标签 : a,input,select,textarea,触发事件:获取焦点): ng-change(适用标签 : a,input,select,textarea,触发事件:model更新): ng-keydown(适用标

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

1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. ng-show 指令:ng-show 指令隐藏或显示一个 HTML 元素. ng-hide 指令:ng-hide 指令用于隐藏或显示 HTML 元素. <!DOCTYPE html> <html> <head> <meta