打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

虽然这个例子不怎么有趣,但它展示了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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

在这个例子中,相比每秒钟都更新$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();};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
AngularJs路由:ngRoute
AngularJS 路由:ng-route与ui-router
AngularJS开发指南04:核心概览 | AngularJS中文社区
AngularJS环境设置
AngularJS教程之二 双向数据绑定
跟我学AngularJs:Service、Factory、Provider依赖注入使用与区别
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服