Day 2: AngularJS —— 对AngularJS的初步认识
昨晚我完爆了一天一技术的任务(完成的很好),谈的是关于Bower的一些知识,你可以在这里看一下文章,也可以去 reddit 看看大家的讨论。
今天我打算学习一下AngularJS的基本知识,并希望能用它做一个简单小应用。我也会在这篇文章里用到Bower,我不可能在一天之内学习完AngularJS,所以我打算用好几天时间来学习,每天涉及其中不同的点。
什么是AngularJS?
扩展HTML添加动态特性,因此我们可以轻松地构建现代web应用程序
以你想要的方式使用
带你回到HTML
声明方法
简单
通过双向数据绑定消除DOM操作,任何时候当模型改变时视图都会得到更新,反之亦然
你可以用它来构建单页Web应用程序。当你构建如路由,Ajax调用,数据绑定,缓存,历史记录和DOM操作这类的SPA应用时,会有很多的挑战。
AngularJS的主要组件是:
控制器:视图背后的代码
作用域:包含模型数据,粘合控制器和视图
模块:定义新的服务,或使用现有的服务、指令、过滤器等,模块可以依赖于另一个模块
指令:允许你通过定义自己项目特定的HTML指令来扩展HTML,学习HTML的新花样
为什么我会在意AngularJS?
对我而言有两个主要原因:
它是由谷歌支持,有很多开发者的大社区
全栈框架:这意味着我不需要依靠其他数百万计的脚本,它们会很好地整合在一起
前提准备
我们将使用Bower为示例应用程序安装AngularJS,如果你还没有安装bower,那么请看我前一篇博文。
安装AngularJS
在系统的任何方便的位置创建一个叫 bookshop
的目录,用下面命令来安装AngularJS和Twitter bootstrap:
$ bower install angular
$ bower install bootstrap
上面的命令会在bookshop
目录下创建一个叫bower_components
的文件夹,里边有已安装的全部组件。
开始使用AngularJS
现在创建一个名为 index.html
的html文件,它将会是一个基于AngularJS的网上书店应用。
<!doctype html>
<html>
<head><title>Bookshop - Your Online Bookshop</title><link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body><div class="container"><h2>Your Online Bookshop</h2></div><script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
</body>
</html>
如果你在浏览器打开这个文件,你会看到“你的网上书店”正在呈现,但这并不是AngularJS的厉害之处,所以接下来我们看看它真正有趣的地方:
<!doctype html>
<html ng-app>
<head><title>Bookshop - Your Online Bookshop</title><link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body><div class="container" ng-init="books=['Effective Java','Year without Pants','Confessions of public speaker','JavaScript Good Parts']"><h2>Your Online Bookshop</h2><ul class="unstyled"><li ng-repeat="book in books">{{book}}</li></ul></div><script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
</body>
</html>
上边这段代码有一些需要注意的点:
在HTML标签里边,我们已经定义了
ng-app
。这将初始化AngularJS应用程序,并告诉AngularJS要在这一部分活跃。所以,它在应用程序里是活跃整个html文件的。我们所使用的第二个Angular指令是
ng-init
。这将初始化书籍数组中的一个,我们可以将它应用在我们的应用程序中。最后一个有趣的部分,是用于遍历集合中的所有元素的
ng-repeat
指令。Angular将为每个元素增加li
元素。所以,如果我们在Web浏览器中打开它,将会看到在一个列表中有四本书。
上边是以字符串数组的形式使用数据,但也可以用存储对象的方式,如下:
<!doctype html>
<html ng-app>
<head><title>Bookshop - Your Online Bookshop</title><link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body><div class="container" ng-init="books=[{'name': 'Effective Java', 'author':'Joshua Bloch'},{'name': 'Year without Pants', 'author':'Scott Berkun'},{ 'name':'Confessions of public speaker','author':'Scott Berkun'},{'name':'JavaScript Good Parts','author':'Douglas Crockford'}]"><h2>Your Online Bookshop</h2><ul class="unstyled"><li ng-repeat="book in books"><span>{{book.name}} written by {{book.author}}</span></li></ul></div><script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
</body>
</html>
在上面的代码中,我们创建了一个书籍数组对象,其中每本书对象都有名字和作者。最后,我们在列表中同时列出作者姓名和书籍名称。
使用过滤器
Angular提供了过滤器,这有助于格式化数据。你可以使用过滤器来格式化日期、货币、大小写字符、排列顺序和基于搜索的过滤。下面就是一个教你如何利用过滤器来大写的作者姓名和按书名来排序的例子:
<!doctype html>
<html ng-app>
<head><title>Bookshop - Your Online Bookshop</title><link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body><div class="container" ng-init="books=[{'name': 'Effective Java', 'author':'Joshua Bloch'},{'name': 'Year without Pants', 'author':'Scott Berkun'},{ 'name':'Confessions of public speaker','author':'Scott Berkun'},{'name':'JavaScript Good Parts','author':'Douglas Crockford'}]"><h2>Your Online Bookshop</h2><ul class="unstyled"><li ng-repeat="book in books | orderBy :'name'"><span>{{book.name}} written by {{book.author | uppercase}}</span></li></ul></div><script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
</body>
</html>
正如你所看到的,我们在 ng-repeat
指令中使用了按顺序排列的过滤器,在显示作者姓名时用一个大写过滤器。
为了添加一个搜索过滤器,添加搜索输入的文本框,然后使用一个过滤器以搜索限制结果,如下:
<!doctype html>
<html ng-app>
<head><title>Bookshop - Your Online Bookshop</title><link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body><div class="container" ng-init="books=[{'name': 'Effective Java', 'author':'Joshua Bloch'},{'name': 'Year without Pants', 'author':'Scott Berkun'},{ 'name':'Confessions of public speaker','author':'Scott Berkun'},{'name':'JavaScript Good Parts','author':'Douglas Crockford'}]"><h2>Your Online Bookshop</h2><input type="search" ng-model="criteria"><ul class="unstyled"><li ng-repeat="book in books | filter:criteria | orderBy :'name'"><span>{{book.name}} written by {{book.author | uppercase}}</span></li></ul></div><script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
</body>
</html>
使用控制器
控制器是AngularJS的主要组件之一,它们是给视图提供动力和数据的代码。在我们的例子中,我们可以将测试数据初始化代码移到一个控制器,创建一个名为app.js
的JavaScript文件,它将容纳我们应用程序所有特定的JavaScript代码。
function BookCtrl($scope){$scope.books = [{'name': 'Effective Java', 'author':'Joshua Bloch'},{'name': 'Year without Pants', 'author':'Scott Berkun'},{ 'name':'Confessions of public speaker','author':'Scott Berkun'},{'name':'JavaScript Good Parts','author':'Douglas Crockford'}]
}
$scope
控制器和视图之间的粘合剂,而且会注入到BookCtrl
。现在我们添加书籍数组的对象到 $scope
对象,这个对象对视图是可见的。
现在改变index.html
使用BookCtrl
,如下:
<!DOCTYPE html>
<html ng-app>
<head><title>Bookshop - Your Online Bookshop</title><link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body><div class="container" ng-controller="BookCtrl"><h2>Your Online Bookshop</h2><input type="search" ng-model="criteria"><ul class="unstyled"><li ng-repeat="book in books | filter:criteria | orderBy :'name'"><span>{{book.name}} written by {{book.author | uppercase}}</span></li></ul></div><script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
今天就这些内容,这也只是冰山一角。我将会用很多天来学习AngularJS的特性,它真的是一个神奇又强大的库。
原文 Day 2: AngularJS--Getting My Head Around AngularJS
翻译 SegmentFault
from: http://segmentfault.com/a/1190000000350125
Day 2: AngularJS —— 对AngularJS的初步认识相关推荐
- angularjs 路由---angularjs 搭建前端框架
前端框架搭建:angularjs,nodejs 安装,git 安装 let toStateCache, fromStateCache, cssToBeEnableList = []export def ...
- 夺命雷公狗—angularjs—10—angularjs里面的内置函数
我们没学一门语言或者框架,几乎里面都有各自的语法和内置函数,当然,强悍的angularjs也不例外,他的方法其实常用的没多少,因为很多都可以用源生jis几乎都能完成一大部分.. <!doctyp ...
- AngularJS—模拟AngularJS之依赖注入
一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...
- [AngularJS] 理解AngularJS Directive中的Scope
默认情况下, AngluarJS不会为在一个Controller下的Directive创建一个单独的作用域(Scope). 这个Directive中的所有关于$scope的变量都是在它的Control ...
- 第二讲 html5框架+Crosswalk打包app 以及 Angularjs 基础(初步认识了解Angularjs)
第二讲 html5框架+Crosswalk打包app 以及 Angularjs 基 础(初步认识了解Angularjs) 学习要点: 1. html5框架+Crosswalk打包app 2. 什么是a ...
- 基于angularJS和requireJS的前端架构
1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来 ...
- 第二讲 html5 框架+Crosswalk 打包 app 以及 Angularjs 基础
第二讲 html5框架+Crosswalk 打包 app 以及 Angularjs 基础(初步认识了解 Angularjs) 学习要点: 1. html5 框架+Crosswalk 打包 a ...
- 【西祠日志】【17】初识AngularJS,下一代Web应用的前端
2015.08.06 周四 今天学习状态不错,就是应该这样一点点的努力:今天主要还是把asp留言板任务完善了下,然后我陷入了一种困扰,就是前端的网页耦合性太高,复用也非常不利于SEO优化,考虑如何有更 ...
- 【12】AngularJS 事件
AngularJS 事件 AngularJS 有自己的 HTML 事件指令. ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. <div ng-app=&qu ...
最新文章
- 基于tomcat5.5的数据库连接池环境设置
- html radio 默认图片替换_html,css_如何更改radio、checkbox选项框背景图?,html,css - phpStudy...
- android 如何使用Parcelable接口
- Goodbye 2020,Welcome 2021 | 沉淀 2021
- 回文_Manacher算法
- Android 系统(135)---Android anr 分析步骤总结
- Mac上Jupyter notebook代码补全
- npm 常见用法小结
- 什么是document对象?如何获取文档对象上的元素?_JavaScript DOM操作元素的方法,你还记得多少?...
- 运行maple需要java_maple:如何在启动时包含我的库
- 前端JQuery插件distpicker.js的部分操作使用
- 金融计量模型(十):协整和误差修正模型
- web前端入门到实战:CSS box-sizing属性的正确用法
- JavaScript分号使用指南
- [基本功]辛普森悖论
- 八种常见视频格式转换详解
- 那年的夏天——致毕业
- 【IoT】产品设计:结构设计之什么是堆叠设计(一)
- 服务器显示器蓝屏怎么解决
- 如何理解普吕克坐标(几何理解)
热门文章
- Debug Assert Failed 怎么办?
- 小工匠聊架构-超高并发秒杀系统设计 01_总体原则和架构演进
- Redis进阶-无所不知的info命令诊断redis
- Spring Cloud【Finchley】实战-03订单微服务与商品微服务之间的调用
- Vue2.x-03使用vue-cli搭建Vue开发环境
- 动态性是Java的特性吗_Java的动态特性有哪些?
- Js Array数组ES5/ES6常用方法
- 2021-05-21 matlab 傅里叶变换后恢复信号
- 2021-01-27 CentOS系统将UTC时间修改为CST时间方法
- 2021-01-07 python opencv调节图片亮度与对比度