1、Hello World 入门

源代码

  1. <!doctype html>
  2. <html ng-app>
  3.     <head>
  4.         <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
  5.     </head>
  6.     <body>
  7.         Hello {{'World'}}!
  8.     </body>
  9. </html>
  1. <html ng-app> 中的 ng-app 表示告诉AngularJS处理整个HTML页面并引导引用。
  1. <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> 运行载入AngularJS的脚本（初次运行，有点慢）
  1. Hello {{'World'}}  使用双大括号标记{{}}的内容是问候语中绑定的表达式，这个表达式是一个简单的字符串‘World’。
  3. 2、AngularJS双向绑定数据
    源代码
  1. <!doctype html>
  2. <html ng-app>
  3.     <head>
  4.         <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
  5.     </head>
  6.     <body>
  7.         Your name: <input type="text" ng-model="yourname" placeholder="World">
  8.         <hr>
  9.         Hello {{yourname || 'World'}}!
  10.     </body>
  11. </html>

其中：

（1）、文本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量，placeholder默认值。

（2）、双大括号标记将yourname模型变量添加到问候语文本。

（3）、你不需要为该应用另外注册一个事件侦听器或添加事件处理程序！

运行程序，在文本框中输入字符将显示出来。

3、AngularJS应用的解析

本节描述AngularJS应用程序的三个组成部分，并解释它们如何映射到模型-视图-控制器设计模式：

模板（Templates）

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

应用程序逻辑（Logic）和行为（Behavior）

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

模型数据（Data）

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

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

此外，AngularJS还提供了一些非常有用的服务特性：

  1. 底层服务包括依赖注入，XHR、缓存、URL路由和浏览器抽象服务。
  2. 您还可以扩展和添加自己特定的应用服务。
  3. 这些服务可以让您非常方便的编写WEB应用。
  1.  
  1.  

Angular 入门学习的更多相关文章

  1. angular入门学习文档之一

    一.数据双向绑定 angular(下面统一简称ng)强大的地方莫过于它内置的数据双向绑定功能,下面我们通过一个简单的例子来演示ng强大的双向绑定数据的能力. 代码如下: 1.dom结构: 1.< ...

  2. Angular【学习笔记】

    1.angular入门网站 感谢@菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 学习笔记:

  3. ReactJS入门学习一

    ReactJS入门学习一 阅读目录 React是什么? React如何制作组件? 理解组件属性props 理解页面中如何渲染数据的 理解从服务器端获取数据及理解state的 回到顶部 React是什么 ...

  4. 适合我胃口的angular.js学习资料

    断断续续弄了半年的ANGULAR.JS学习资料,网上下载了N多资料,测试了很多次. 现在只能算是入门,因时间问题,现在要转入其它领域. 如果以后要拾起来,下面这个PDF比较对我胃口. <Angu ...

  5. Angular入门笔记

    AngularJS(下面简称其为ng)是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足,其通过使用指令(directives)结构来扩展HTML词汇,使开发 ...

  6. vue入门学习（基础篇）

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  7. Hadoop入门学习笔记---part4

    紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...

  8. Hadoop入门学习笔记---part3

    2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...

  9. PyQt4入门学习笔记（三）

    # PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...

随机推荐

  1. Java中的继承

    我们在以前的学习中,我们会了C#中的继承,今天我们来了解了解Java中的继承,其实都大同小异啦! 1.语法 修饰符 SubClass extends SuperClass(){ //类定义部分 } e ...

  2. phpcms—— 内容中的附件调用和添加远程地址的调用

    phpcms中几个地址调用的方法 1,CSS路径有{CSS_PATH}2,图片路径有{IMG_PATH}3,JS路径有{JS_PATH} 4,那么附件的路径如何调用,使用下面的方式可以得到附件的路径前 ...

  3. PHP 操作socket 实现简易聊天室

    <?php $socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP ); socket_bind($socket ,'127.0.0.1', ...

  4. android:ellipsize实现跑马灯效果总结（转）

      最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说 ...

  5. [WCF REST] Web消息主体风格（Message Body Style）

    对于Web HTTP编程模型来说,服务契约中作为操作的方法无须应用OperationContractAttribute特性,只需要根据需要应用WebGetAttribute与WebInvokeAttr ...

  6. miniSipServer简单而不简单，轻松落地，实现电脑对固话、手机通讯

    最近沉迷于SIP通讯,网内通讯全免费,落地也就几分钱,而且无漫游全国拨打,想想真是心动呢,只要有网落就ok!. 对于sipserver,现在的市场上软件很多,免费的.收费的应有尽有,这里不一一例举.综 ...

  7. Ieditor

    Interfaces Description IActiveViewEvents (esriCarto) Provides access to events that occur when the s ...

  8. 异步get请求之代理方法

    #import "ViewController.h" #import "Header.h" @interface ViewController ()<NS ...

  9. iOS 杂笔－20（UIView和CALayer的区别与联系）

    iOS 杂笔-20(UIView和CALayer的区别与联系) 每个 UIView 内部都有一个 CALayer 在背后提供内容的绘制和显示,并且 UIView 的尺寸样式都由内部的 Layer 所提 ...

  10. 【转】Xcode托管代码到oschina中的教程

    本文的以下内容较旧,常常会出现第一次配置成功可以用,但关机重启后就一直提示“username or password”不正确的bug,所以建议弃ssh方式转向https方式,更加稳定.传送门:点我. ...