(一)
　　模型——视图——控制器
　　　　端对端的解决方案，AngularJS 试图成为WEB 应用中的一种段对端的解决方案。AngylarJS 的出众
　　　　　　之处如下：数据绑定，基本模板标识符，表单验证，路由，深度连接，组件重用，依赖注入。测试包括
　　　　　　单元测试，段对端测试，模拟和自动化测试框架。

　　Hello World
　　　　<Doctype html>
　　　　<html ng-app>
　　　　　　<head lang="en">
　　　　　　　　<meta charset="UTF-8">
　　　　　　　　<title></title>
　　　　　　　　<script src="angular.min.js"></script>
　　　　　　</head>
　　　　　　<body>
　　　　　　　　Hello {{'World'}}
　　　　　　</body>
　　　　</html>
　　　　当加载页面的时候，标记ng-app 告诉AngularJS处理整个HTML页并引导应用。
　　　　　　<html ng-app>
　　　　　　　　注意，使用双大括号标记{{}}的内容是问候语中绑定的表达式，这个表达式是一个简单的字符串‘World。
　Hello {{'World'}}
　　　　Hello AngularJS World
　　　　　　<Doctype html>
　　　　　　<html ng-app>
　　　　　　　　<head lang="en">
　　　　　　　　　　　<meta charset="UTF-8">
　　　　　　　　　　　<title></title>
　　　　　　　　　　　<script src="angular.min.js"></script>
　　　　　　　　</head>
　　　　　　　　<body>
　　　　　　　　　　Your name:<input type="text" ng-model="yourname" placeholder="world">
　　　　　　　　　　<hr>
　　　　　　　　　　Hello {{yourname || 'World'}}!
　　　　　　</body>
　　　　</html>
　　　　　　文本输入指令<input ng-model="yourname"/> 绑定到一个叫 yourname 的模型变量
　　　　　　双大括号标记将yourname 模型变量添加到问候语文本。
　　AngularJS 应用的解析
　　　　模板(Templates)
　　　　　　模板是您用HTML 和 CSS 编写的文件，展现应用的视图。您给HTML天机新的元素，属性标记，作为AngularJS
　　　　　　编译器的指令，Angular JS编译器是完全可扩展的。这意味着通过AngularJS 编译器是完全可扩展的，这意味着
　　　　　　AngularJS您可以在HTML 中构建自己的HTML标记！

　　　　应用程序逻辑（Logic）和行为（Behavior）
　　　　　　应用程序逻辑和行为是您用JavaScrip 定义的控制器。AngularJS与标准的AJAX应用的程序不同，您不需要
　　　　　　另外编写监听器或者DOM 控制器，因为他们已经内置到AngularJS 中了，这些功能使您的应用程序逻辑
　　　　　　很容易编写，测试，维护和理解。
　　　　模型数据（Data）
　　　　　　模型是从AngularJS 作用域对象的属性引申的，模型中的数据可能是Javascript对象，数组或基本类型
　　　　　　这都不重要，重要的是，他们都属于AngularJS 作用域对象。

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

　　　　　　此外，AngularJS 还提供了一些非常有用的服务特性：
　　　　　　　　1，底层服务保留依赖注入，XHR，缓存，URL路由和浏览器抽象服务。
　　　　　　　　2，您还可以扩展和添加自己特性的应用服务。
　　　　　　　　3，这些服务可以让您非常方便的编写WEB应用。

　　　　ng-app指令
　　　　　　<html lang="en" ng-app>
　　　　　　　　ng-app 指令标记了AngularJS 脚本的作用域，在<html>都是AngularJS脚本作用域，开发者也在
　　　　　　　　局部使用ng-app 指令，如<div ng-app>,则AngurJS 脚本仅在该<div>中运行。
　　　　Angular JS 脚本标签：
　　　　　　　　<script src="lib/angular/angular.js"></script>
　　　　　这行代码加载angular.js 脚本，当浏览器将整个HTML页面载入晚班后将会执行该angular.js脚本，angular.js
　　　　　脚本运行后将会寻找含有ng-app 指令的HTML标签，该标签即定义了AngularJS 应用的作用域。
　　　　双大括号绑定的表达式：
　　　　　　<p>Nothing here {{'yet'+'!'}}</p>
　　　　这行代码演示了AngularJS模板的核心功能——绑定，这个绑定由双大括号{{}}和表达式'yet' + '!'组成。
　　　　这个绑定告诉AngularJS需要运算其中的表达式并将结果插入DOM中，接下来的步骤将看到，DOM
　　　　可以随意表达运算结果的改变而事实更新。

　　引导AngularJS 应用
　　　　　　通过ngApp指令来自动引导AngularJS应用是一种简洁的方式，适合大多数情况。
　　AngularJS应用引导过程有3个重点：
　　　　1.注入器(injector)将用于创建此应用程序的依赖注入（dependency injection）
　　　　2.注入器将会创建根作用域中的DOM，
　　　　3.AngularJS将会连接跟作用域中的DOM，从用ngApp标记的HTML 标签开始，逐步处理DOM中的指令和捆绑。

　　一旦AngularJS 应用引导完毕，他讲继续侦听浏览器的HTML触发事件，如鼠标点击数事件，按键事件，HTTP
　　　　传入响应等改变DOM模型的事件，这类事件一旦发生，AngularJS 将会自动检测变化，并作出相应的处理更新。
　　模型和控制器
　　　　在PhoneListCtrl 控制器里面初始化了数据模型（这里只不过是一个包含了数组的函数，数组中存储的对象是手机数据列表）
　　　　　　　　function PhoneListCtrl($scope){
　　　　　　　　　　$scope.Phones = [
　　　　　　　　　　　　　　　　{"name":"Nexus S","snippet":"Fast just got faster with Nexus S."
　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　{"name":"Motorola XOOM with Wi - Fi","snippet":"The Next,Next Generation tablet."
　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　{"name":"MOTOROLA XOOM","snippet":"The Next, Next Generation tablet"
　　　　　　　　　　　　　　}
　　　　　　　　　　　　];
　　　　　　　　　　}
　　　　　　PhoneListCtrl——控制器方法的名字，（在JS文件controllers.js中）和<body>标签里面的ngController指令的值相匹配。
　　　　　　手机的数据此时与注入到我们控制器函数的作用域（$scope）相关联。当应用启动之后，会有一个跟作用域创建出来，
　　　　　　而控制器的作用域的一个典型后继。这个控制器的作用域对所有的<body ng-controller="PhoneListCtrl">标记内部的
　　　　　　数据绑定有效。

Angularjs基础(一)的更多相关文章

  1. AngularJS基础入门初探

    一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...

  2. AngularJS基础知识1

    一.angularJS简介 1.什么是 AngularJS? AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.AngularJS是协助搭建单页面工程 ...

  3. AngularJS基础概念

    作用域.控制器.指令 作用域 应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文.$scope对象是定义应用业务逻辑.控制器方法和视图属性的地方. 作用域是应用状态的基础.基于动 ...

  4. AngularJs基础总结(1.4版本)

    注明:现在用的是最新的1系列1.4版本. 一.细节方面入手: 1,ng-app根节点,一般别写在html上面,最多也就写在body就行了,因为我们难免会忘记这个写在哪里,然后复制一些案例代码却总报错. ...

  5. Angularjs基础教程

    Angularjs-基础教程 一些angualr的基础概念,适合入门. 1.下载 推荐 bower 或 npm 安装. bower install angular bower install angu ...

  6. AngularJS基础总结

    w3shools    angularjs教程  wiki   <AngularJS权威教程> Introduction AngularJS is a JavaScript framewo ...

  7. Angularjs基础（学习整理）

    AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一个 AngularJS 应用程序. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. ...

  8. 3天学习完AngularJS基础内容小结

    简介:AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. 一.AngularJS大致功能模块 二.页面交互变得简单 1.示例:计算价格 <htm ...

  9. 一步一步弄懂angularJS基础

    问题1:ng-app指令的使用以及自定义指令 <!doctype html> <!--这里的ng-app的属性值就是模块的名称,也就是 angular.module("My ...

  10. AngularJS基础知识2

    一.angularJS双向数据绑定 利用双向数据绑定,不仅能把数据模型的变化同步到视图上面,还可以利用双向数据绑定的特性来做一些样式上面的控制. 双向数据绑定用处很多,不仅仅是像知识点1中的那个例子, ...

随机推荐

  1. IIS发布常见错误-HTTP 错误 404.0 - Not-Found

    错误信息:HTTP 错误 404.0 - Not-Found 错误代码:0x80070002 原 因:IIS配置错误. 解决方法:我配置IIS时漏掉了下面几项,一定要记得勾选.

  2. Linux 连接 Xshell 及网络配置

    一.准备工具 在WMware上已经装有Linux系统:WMware安装CentOS7文章. xshell连接工具: 二.修改相关配置 切换到root用户下: 配置主机名(可选): #方法一:替换原主机 ...

  3. C语言的前世今生

    1.计算机语言的发展 机器语言:其实就是二进制0和1,最小为00000000,最大为11111111,8位比特为1个字节(byte),1k=1024byte,1m=1024k,1g=1024m[第一代 ...

  4. Java内部类详解 2

    Java内部类详解 说起内部类这个词,想必很多人都不陌生,但是又会觉得不熟悉.原因是平时编写代码时可能用到的场景不多,用得最多的是在有事件监听的情况下,并且即使用到也很少去总结内部类的用法.今天我们就 ...

  5. css3总结之居中

    居中在前端布局上很常见,也很常用,也是最基本的技巧.居中效果在方向控制上基本可以分解成水平居中,垂直居中和水平垂直居中. 针对调整的元素不同,具体的处理方式上有些差异.这里我们先不讲绝对定位下的居中, ...

  6. Drupal theme_hook

    模板语言和主题引擎 用Drupal的行话来说,主题就是一组负责你站点外观的文件.你可以从http://drupal.org/project/Themes下载第 3方主题,或者你可以自己动手创建一个主题 ...

  7. ImageLoader简单使用

    效果图就是一个从网络加载的图片:在加载的时候图片的中间显示一个进度条 数据是随便找的一个网络图片的地址 导入jar包universal-image-loader-1.9.5 用来展示商品使用    在 ...

  8. 关于maven包的引入net.sf.json的问题

    最开始通过在pom.xml文件中加入 <dependency> <groupId>net.sf.json-lib</groupId> <artifactId& ...

  9. java原生文件打包

    一.背景 前端时间,自己做的项目需要打包功能,不想再引外部的jar包 便用java.util.zip做了下该功能 二.适用场景 生成多个word.excel.xml等文件,并要求打包下载的情形 例:项 ...

  10. MySQL中AddDate函数的疑惑

    无论使用哪一种RDBMS,都需要使用到其中的一些日期转换函数,在使用MySQL的AddDate函数时,遇到了点小问题,稍作记录. root@localhost:mysql3376.sock [(non ...