Angular.js入门教程

简单介绍

AngularJS是为了克服HTML在构建应用上的不足而设计的。首先Html是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。

通常,我们可以通过以下技术来解决决静态网页技术在构建动态应用上的不足:

1.类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。例如jQuery等

2.框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:Knockout、sproutcore、EasyUi等。

AngularJS使用了不同的方式,去尝试补足HTML本身在构建应用方面的缺陷。。它通过使用一些内部约定好的结构,让浏览器能够识别新的语法。例如:

  1.使用{{}}双大括号实现双向绑定

  2.使用DOM控制结构来实现迭代或者隐藏DOM片段

  3.支持表单和表单的验证

  4.能将逻辑代码关联到相关的DOM元素上

  5.能将HTML封装成可重用的组件

它提供了怎样的解决方案

AngularJS试图成为WEB应用中的一种端对端的解决方案。通俗点理解前端对后端。这样让AngularJS在构建一个CRUD程序时,仍能灵活变动。它的一些出众之处表现为:

构建Web应用可能用到的全部内容有:

  1.功能方面:数据绑定、基本模版标识符、表单验证、Url路由、深度链接、组建重用、依赖注入

  2.测试方面:单元测试、端对端测试、模拟和自动化测试框架

AngularJS下载地址:

https://angularjs.org/

第一个AngularJS程序,创建经典应用程序Hello Word:

 1 <!doctype html>
 2 <!--1.0ng-app告诉AngularJS处理整个HTML页并引导应用-->
 3 <html ng-app>
 4 <head>
 5     <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
 6     <title>HelloWorld</title>
 7 </head>
 8 <body>
 9 <!--2.0ng-model指的是绑定到yourname的模型变量(viewModel)-->
10 Your name: <input type="text" ng-model="yourname" placeholder="World">
11 <hr>
12 <!--3.0{{}}是将yourname绑定到文本-->
13 Hello {{yourname||‘World‘}}!
14 </body>
15 </html>

你可以尝试在输入框输入你的名称,你键入的名称将会立即更新到问候语中。这就是双向绑定的概念。

AngularJS的三个组成部分

模版(TemTemplates)

模板是您用HTML和CSS编写的文件,展现应用的视图。 您可给HTML添加新的元素、属性标记,作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的,这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记!

应用程序逻辑(Logic)和行为(Behavior)

应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同,您不需要另外编写侦听器或DOM控制器,因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。

数据(Data)

模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型,这都不重要,重要的是,他们都属于AngularJS作用域对象。

AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变,AngularJS会立即刷新反映在视图界面中,反之亦然。

此外,它还提供了一些有用的特性:

  1.底层服务包括依赖注入,XHR、缓存、URL路由和浏览器抽象服务。

  2.可以扩展和添加自己特定的应用服务。

  3.这些服务可以让您非常方便的编写WEB应用。

时间: 2024-10-10 08:26:58

Angular.js入门教程的相关文章

Web视频合成器Seriously.js入门教程

Web视频合成器Seriously.js入门教程 作者:云荒杯倾 Seriously.js是一个实时的,基于节点(node)的(注意:不是基于nodejs)web视频合成器.受after affects和nuke等专业软件的启发,Seriously.js能渲染高质量的可交互的视频动态效果. 下载Seriously.js库 git clone https://github.com/brianchirl... 加载Seriously.js脚本 和其他js库一样,使用Seriously.js的第一步是

Node.js 入门教程 (二):模块

由于新工作要做前端,作为前端小白而且能尽快学习,所以选择慕课网的node.js的入门教程.博客只做自己学习的记录. JavaScript缺少模块管理机制,容易出现变量被覆盖,方法被替代的情况(既被污染).特别是存在依赖关系时,容易出现错误.采用命名空间的方式,把变量和函数限制在某个特定的作用域内,人肉约定一套命名规范来限制代码,保证代码安全运行. CommonJs是一套规范,包括了modules,system,encodings,unit test等等来约定JavaScript应该怎么去组织和编

Ember.js入门教程、博文汇总

第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properties) Ember.js 入门指南——观察者(observer) Ember.js 入门指南——绑定(bingding) Ember.js 入门指南——枚举(enumerables) Ember.js 入门指南之七第一章对象模型小结 第二章 模板 Ember.js 入门指南——handlebars基

angular.js 入门基础

1 angular.js 由google 开发,目前最新版本 2.0版: 2 angular.js 在原有HTML 语法基础上 允许扩展.   使用 {{}} 语法对数据进行动态绑定 3 搭建开发 angular.js 开发环境 在Angular 的官方网站  http://angularjs.org 中下载 最新版本的Angular 文件库 4开发简单的Angular应用 引用Angular 库 <script src="Scripts/angular-1.4.0-rc.2/angula

Angular.js入门(1)

1.Angular优点     1. 模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令:    2. 是一个比较完善的前端MVC框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能:    3. 自定义Directive,比jQuery插件还灵活,但是需要深入了解Directive的一些特性.    4. ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助,我们的项目从上线到目前,UI变

Angular 4入门教程系列 1 运行在Docker中的HelloWorld

Angular作为目前前端的一个重要选择,加之背后站着google,得到了越来越多的开发者的青睐.但是发现没有按照由浅入深地实例化的教程,虽然官网的教程已经不错,但是初始入门的细节没有提到,再加之网络等问题,决定把官网的教程替大家做一遍给大家留个笔记.同时可能会结合docker进行使用,当然没有安装docker也完全没有关系,同样执行就可以了. 事前准备 OS [root@angular docker]# uname -a Linux angular 3.10.0-514.el7.x86_64

网页3D引擎“Babylon.JS”入门教程翻译总结

使用三个月的业余时间把官方教程的入门部分译为中文并上传到github,在下一步编程前做一个总结. 历程: 最早接触游戏编程是在大三下学期,用汇编语言和实验室里的单片机.触摸屏.电机(提供声效)编的打地鼠程序.后来因为大四的毕业设计与三维空间模拟有关,又自学了MFC编程和NEHE的OpenGL教程(国人翻译版)(C++3D编程的复杂会给任何参与者留下深刻的印象,向先驱者们致敬).工作后自学了JavaScript语言和前端知识,感觉js与C++相比极其简单易用,如果能以js代替C++进行3D开发可以

前端框架React Js入门教程【精】

现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~ 一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用

Node.js入门教程

http://www.nodebeginner.org/index-zh-cn.html#a-basic-http-server Node入门 作者: Manuel Kiessling翻译: goddyzhao & GrayZhang & MondayChen 关于 本书致力于教会你如何用Node.js来开发应用,过程中会传授你所有所需的“高级”JavaScript知识.本书绝不是一本“Hello World”的教程. 状态 你正在阅读的已经是本书的最终版.因此,只有当进行错误更正以及针对