AngularJS 初探
AngularJS,诞生于2009年,由Misko Hevery等人创建,后为Google所收购。这是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。
通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足:
类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等
框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。
AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。例如:
使用双大括号{{}}语法进行数据绑定;
使用DOM控制结构来实现迭代或者隐藏DOM片段;
支持表单和表单的验证;
能将逻辑代码关联到相关的DOM元素上;
能将HTML分组成可重用的组件。
【来自百度百科】
实话实说,上面的句子我也看的不太明白,对于码农来说,最直接的表述莫过于看代码了。
前期准备:
需要安装Node.js和Testacular来运行本项目,请到Node.js官方网站下载并安装最新版,然后把node可执行程序路径添加到系统环境变量PATH中,完成后在命令行中运行一下命令可以查看是否安装成功:
node -version
然后安装Testacular单元测试程序,请运行如下命令:
npm install -g testacular
Hello AngularJS World!
【代码1】
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
你好 {{'码农'}}!
</body>
</html>
【代码2】
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
你的名字: <input type="text" ng-model="name" placeholder="World">
<hr>
你好 {{name || '码农'}}!
</body>
</html>
有了它,你不用再“直接”操控DOM,只要给你的DOM注上metadata(即AngularJS里HTML的扩展属性),然后让AngularJS来帮你操纵DOM。同时,AngularJS不依赖(也不妨碍)任何其他的框架。你甚至可以基于其它的框架来开发AngularJS应用。
AngularJS官网已被墙,相关资源没有整合,尽力搜索中!
此文为AngularJS初探,如有不妥,多多指正!
AngularJS 初探的更多相关文章
- 沉淀,再出发:AngularJS初探
沉淀,再出发:AngularJS初探 一.前言 知识的学习需要形成一个闭环,在这个闭环之内可以自圆其说,从而触类旁通,加以理想创造,从而产生灵感.关于前端的知识,我已经写得差不多了,但是还有一个知识点 ...
- 1.AngularJS初探
1.需要什么前端开发环境 1)代码编辑工具 webstorm 2)断点调试工具 chrome插件Batarang 3)版本管理 tortoiseGit 4)代码合并和混淆工具 grunt-contri ...
- AngularJS初探:搭建PhoneCat项目的开发与测试环境
AngularJS官方网站提供了一个用于学习的示例项目:PhoneCat.这是一个Web应用,用户可以浏览一些Android手机,了解它们的详细信息,并进行搜索和排序操作. 对于PhoneCat项目的 ...
- 3.1 AngularJS必备知识
AngularJS是一个WEB应用框架. 本节我们会学习控制器(控制数据),会学习作用域(连接控制器和用户界面),用户界面又叫做视图,通过模板和作用域来创建交互视觉效果.另外,我们还会学习其他的特性比 ...
- 搭建PhoneCat项目的开发与测试环境
AngularJS官方网站提供了一个用于学习的示例项目:PhoneCat.这是一个Web应用,用户可以浏览一些Android手机,了解它们的详细信息,并进行搜索和排序操作. 获取源代码 PhoneCa ...
- 初探AngularJS
一.前言 早已听说AngularJS的大名,并在很久前也编写过些小demo,但是都没有系统学习过.由于,在下个版本项目中用到了AngularJS,so,那就一起再来研究研究呗. 说到,这个Angula ...
- AngularJS基础入门初探
一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...
- 初探AngularJs框架(三)
一.实现todoList的demo 功能很简单,提供一个文本框,用户输入回车后添加新条目.每个条目可以在待处理和处理中两个区域间切换,每个条目都可以被删除,大致的界面如下图所示: 二.处理逻辑 首先将 ...
- 初探AngularJs框架(二)
一.创建Components组件 直接使用AngularCLI即可很方便的创建component组件,使用如下指令: ng g component components/news 这样就会在compo ...
随机推荐
- 点击HTML页面问号出现提示框
本demo的功能:点击页面按钮在其边缘出现提示信息,点击页面任何一处则消失. 如下图: 1.所需插件: jquery插件: layer插件: 2.HTML内容: ==注意==: class=" ...
- 【微信开发】LINUX-windows下用navicat远程链接虚拟机Linux下MySQL数据库
今天想用navicat远程连接虚拟机中的MySQL数据库,一直连不上,在网上搜索了一下,发现原因是MySQL对远程用户登陆的授权问题. MySQL登陆:mysql -h主机地址 -u用户名-p用户 ...
- Unity 游戏框架搭建 2018 (二) 单例的模板与最佳实践
Unity 游戏框架搭建 2018 (二) 单例的模板与最佳实践 背景 很多开发者或者有经验的老手都会建议尽量不要用单例模式,这是有原因的. 单例模式是设计模式中最简单的也是大家通常最先接触的一种设计 ...
- java web项目用cookie记住用户名、密码
1.jsp页面: <% String flag = (String)session.getAttribute("flag")==null?"":(Stri ...
- vue+element-ui中的图片获取与上传
vue+element-ui中的图片获取与上传 工作上接触了一下图片的处理,图片的格式是文件流, 记录如下. 请求图片 请求图片的时候,带上{ responseType: 'blob' }, 否则图片 ...
- 断言assert()与调试帮助
列表内容assert()是一种预处理宏(preprocessor marco),使用一个表达式来作为条件,只在DEBUG模式下才有用. assert(expr); 对expr求值,如果expr为假,则 ...
- JsonCpp在vs中使用
Jsoncpp是c++生成和解析Json数据的跨平台开源库.下面简介如何在vs中使用. 1.官网下载.https://sourceforge.net/projects/jsoncpp/解压文件得到js ...
- Ubuntu之C++开发环境的搭建
初学Linux,今天反复卸载与重装微软商店的Ubuntu好几次,终于解锁了在Ubuntu上搭建C++开发环境的正确姿势, 搭建了一个非常简单的开发环境:简单到什么地步呢?只是简单地配置了一下编辑器,安 ...
- H5混合开发进阶之inspect调试
h5界面嵌套在原生app内部的时候,需要调用原生的方法,传递数据.中间难以调试代码,. 用google的 inspect调试.查看数据的传输方式. 1.adb连接正常,打开手机USB调试 2.第一次使 ...
- Spring Security学习笔记(三)
之前提到过认证后怎么存放用户信息,令牌token是一种方式,session是另一种方式,这里介绍使用spring session data redis存储httpSession. 添加了以上依赖后,我 ...