AngularJS自学之路——初识AngularJS和数据绑定

AngularJS 是什么

AngularJS的官方文档是这样介绍它的。完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术(HTML、CSS和JavaScript)配合使用,使Web应用开发比以往更简单、更快捷。

AngularJS主要用于构建单页面Web应用。它通过增加开发人员和常见Web应用开发任务之间的抽象级别,使构建交互式的现代Web应用变得更加简单。

AngularJS的开发团队将其描述为一种构建动态Web应用的结构化框架。

AngularJS使开发Web应用变得非常简单,同时也降低了构建复杂应用的难度。它提供了开发者在现代Web应用中经常要用到的一系列高级功能,例如:

  • 解耦应用逻辑、数据模型和视图
  • Ajax服务
  • 依赖注入
  • 浏览历史(使书签和前进、后退按钮能够像在普通Web应用中一样工作)
  • 测试
  • 更多功能

AngularJS是开源的

最近在玩github,看到了有些项目license是MIT,我还以为是MIT(麻省理工学院),一问我同事,才知道MIT意味着你可以为AngularJS贡献代码,使其变得更加优秀。关于贡献代码的更多内容可以在AngularJS的官网中查看“贡献代码”部分。不知道AngularJS官网的,可以百度(我从来不记官网,都是百度的)。

第一个AngularJS程序——Hello World

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Simple app</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
    </script>
</head>
<body>
    <input ng-model="name" type="text" placeholder="Your name">
    <h1>Hello {{ name }}</h1>
</body>
</html>

虽然这个例子不怎么有趣,但它展示了AngularJS最基本也最令人印象深刻的功能之一:数据绑定。

AngularJS则采用了完全不同的解决方案。它创建实时模板来代替视图,而不是将数据合并进模板之后更新DOM。任何一个独立视图组件中的值都是动态替换的。这个功能可以说是AngularJS中最重要的功能之一,也是让我们只用10行代码,并且在没有任何JavaScirpt的情况下就可以写出Hello World的关键。

要实现这个功能,只要在HTML页面中引用angular.js,并在某个DOM元素上明确设置ng-app属性即可。ng-app属性声明所有被其包含的内容都属于这个AngularJS应用,这也是我们可以在Web应用中嵌套AngularJS应用的原因。只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响。

自动数据绑定使我们可以将视图理解为模型状态的映射。当客户端的数据模型发生变化时,视图就能反映出这些变化,并且不需要写任何自定义的代码,它就可以工作。

在MVC(Model View Controller,模型?视图?控制器)的世界里,控制器可以不必担心会牵扯到渲染视图的工作。这样我们就不必再担心如何分离视图和控制器逻辑,并且也可以使测试变得既简单又令人愉悦。

数据绑定的最佳实践

由于JavaScript自身的特点,以及它在传递值和引用时的不同处理方式,通常认为,在视图中通过对象的属性而非对象本身来进行引用绑定,是Angular中的最佳实践。

<!doctype html>
<html ng-app>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
</head>
<body>
    <div ng-controller="MyController">
        <h1>Hello {{ clock.now }}!</h1>
    </div>
    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

在这个例子中,相比每秒钟都更新$scope.clock,更新clock.now的值会是更好的选择。

// 在app.js中
function MyController($scope) {
    $scope.clock = {
        now: new Date()
    };
    var updateClock = function() {
        $scope.clock.now = new Date()
    };
    setInterval(function() {
        $scope.$apply(updateClock);
    }, 1000);
    updateClock();
};
时间: 03-29

AngularJS自学之路——初识AngularJS和数据绑定的相关文章

AngularJS自学之路(二)——模块和作用域

模块 使用模块带来的好处 1. 保持全局命名空间的清洁: 2. 编写测试代码更容易,并能保持其清洁,以便更容易找到互相隔离的功能: 3. 易于在不同应用间复用代码: 4. 使应用能够以任意顺序加载代码的各个部分. AngularJS允许我们使用angular.module()方法来声明模块,这个方法能够接受两个参数, 第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表. //这个方法相当于AngularJS模块的setter方法,是用来定义模块的. angular.modu

AngularJS自学之路(三)——控制器和表达式

控制器 控制器在AngularJS中的作用是增强视图. AngularJS中的控制器是一个函数,用来向视图的作用域中添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在页面上创建一个新的控制器时,AngularJS会生成并传递一个新的$scope给这个控制器.可以在这个控制器里初始化scope.由于AngularJS会负责处理控制器的实例化过程,我们只需编写构造函数即可.下面的例子展示了控制器初始化: function FirstController($scope)

4.AngularJS四大特征之二: 双向数据绑定

AngularJS四大特征之二: 双向数据绑定 (1)方向一:把Model数据绑定到View上--此后不论何时只要Model发生了改变,则View中的呈现会立即随之改变!实现方法: {{ }}.ngBind.ngRepeat.ngIf.ngSrc.ngStyle...都实现了方向1的绑定. (2)方向二:把View(表单控件)中修改绑定到Model上--此后不论任何时候,只要View中的数据一修改,Model中的数据会自动随之修改.实现方法:  只有ngModel指令. 提示:可以使用$scop

初识Angularjs示例

初识Angularjs使用了官方的示例代码 模板: <html ng-app>    <head>       <script src="/angular/angular.js"></script>       <script src="/angular/controllerjs/controllers.js"></script>   </head>   <body ng-co

Angular系列---- AngularJS入门教程03:AngularJS 模板(转载)

是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.,你可以到GitHub去看完整的差别. 视图

Angular系列----AngularJS入门教程01:AngularJS模板 (转载)

是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.,你可以到GitHub去看完整的差别. 视图

[转载]AngularJS入门教程02:AngularJS模板

是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.,你可以到GitHub去看完整的差别. 视图

我的web前端自学之路-心得篇:我为什么要学习web前端?

时光如流水,转眼间,自己已经是大三的学长了,看着一个个学弟学妹,心中有种莫名的感觉,很怀念大学的前两年时光,但也很憧憬着自己的未来,自己将要去经历很多从未经历的事.我是我们学校信科院的一名学生,在编程方面,一开始只是接触到了C语言,但是c语言对于我来说并不友好,也并不是那么的好学,所以自己对程序不是很有兴趣,但一个偶然的机会,我接触到了web前端,看着我的一个大牛同学用前端 所涉及的语言写出了一些很棒的程序,于是就产生了一种很想学习前端的想法和很想把前端做的完美的渴望,于是,就开始了我的前端之路

AngularJS开发指南7:AngularJS本地化,国际化,以及兼容IE低版本浏览器

AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的文字和其他因地区而异的数据从应用中抽离出来. 本地化意味着为这些抽离的数据和文字提供翻译和转变成本地的格式. 目前,AngularJS支持日期,数字和货币的国际化和本地化. 另外,AngularJS还通过ngPluralize指令支持本地多元化. 所有的AngularJS本地化组件都依赖于$loca