AngularJS应用程序主要有三个组成部分：

模板（Templates）

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

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

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

模型数据（Data）

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

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

举个例子：

<!doctype html>

<html ng-app>

    <head>

        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

    </head>

    <body>

        Your name: <input type="text" ng-model="yourname" placeholder="World">

        <hr>

        Hello {{yourname || 'World'}}!

    </body>

</html>

ng-app指令标记了AngularJS脚本的作用域，在<html>中添加ng-app属性即说明整个<html>都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令，如<div ng-app>，则AngularJS脚本仅在该<div>中运行。

通过script标签载入angular.js脚本时，angular监听了DOMContentLoaded事件，当浏览器将整个HTML页面载入完毕后将会执行该angular.js脚本，angular.js脚本运行后将会寻找含有ng-app指令的HTML标签，该标签即定义了AngularJS应用的作用域。

输入框<input ng-model="yourname" />元素绑定到一个叫yourname的模型中。

双大括号标记将yourname模型添加到页面中。双大括号{{}}实现绑定的效果，告诉AngularJS需要运算其中的表达式并将结果插入DOM中。AngularJS表达式是一种类似于JavaScript的代码片段，AngularJS表达式仅在AngularJS的作用域中运行，而不是在整个DOM中运行。

现在你试着在输入框中键入您的名称，您键入的名称将立即更新显示在页面中。 这就是AngularJS双向数据绑定的概念。 输入框的任何更改会立即反映到模型变量（一个方向），模型变量的任何更改都会立即反映到页面中（另一方向）。

我们再来看一个稍微复杂点的例子：

<html ng-app>

<head>

  ...

  <script src="lib/angular/angular.js"></script>

  <script>
　　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."}

  　　　 ];

　　}
　</script>

</head>

<body ng-controller="PhoneListCtrl">

  <ul>

    <li ng-repeat="phone in phones">

      {{phone.name}}

    <p>{{phone.snippet}}</p>

    </li>

  </ul>

</body>

</html>

这里我们使用ngRepeat指令和两个双大括号包裹起来的AngularJS表达式——{{phone.name}}和{{phone.snippet}}。

在<li>标签里面的ng-repeat="phone in phones"语句是一个AngularJS迭代器。这个迭代器告诉AngularJS用第一个<li>标签作为模板，为模型列表phones中的每一部手机创建一个<li>元素。

包裹在phone.name和phone.snippet周围的双大括号标识着数据绑定。和常量计算不同的是，这里的表达式实际上是一个数据模型的引用，这些数据模型我们在PhoneListCtrl控制器里面定义就好了。

在PhoneListCtrl控制器里面初始化了数据模型，尽管控制器看起来并没有起到什么控制的作用，但是它在这里起到了至关重要的作用。通过给定我们数据模型的定义，控制器允许我们建立模型和视图之间的数据绑定。

我们是这样把表现层，数据模型联系在一起的：PhoneListCtrl——控制器方法的名字,和<body>标签里面的ngController指令的值相匹配。手机模型的数据此时与注入到我们控制器函数的作用域（$scope）相关联。这个控制器的作用域对所有<body ng-controller="PhoneListCtrl">标记内部的数据绑定有效。

AngularJS的作用域理论非常重要：一个作用域可以视作模板、模型和控制器协同工作的粘接器。AngularJS使用作用域，同时还有模板中的信息，数据模型和控制器，帮助模型和视图分离。

加油！

AngularJS入门讲解1：angular基本概念的更多相关文章

  1. AngularJS入门讲解4：多视图，事件绑定，$resource服务讲解

    上一课,大家知道,手机详细模板我们没有写出来,使用的是一个占位模板. 这一课,我们先实现手机详细信息视图,这个视图会在用户点击手机列表中的一部手机时被显示出来. 为了实现手机详细信息视图,我们将会使用 ...

  2. AngularJS入门讲解3：$http服务和路由讲解

    上一课的例子中,我们的模型数据是硬编码的,也就是说,我们的数据不是从服务器请求回来的. 这里,我们先讲解,如何从服务器获取数据: function PhoneListCtrl($scope, $htt ...

  3. AngularJS入门讲解2：过滤器和双向绑定

    我们在上一课做了很多基础性的训练,接下来,我们讲一些难点的知识点,首先,讲一下如何实现一个全文检索功能: <html ng-app> <head> ... <script ...

  4. AngularJS入门心得4——漫谈指令scope

    上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...

  5. AngularJS入门心得2——何为双向数据绑定

    前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...

  6. 【转载】图灵AngularJS入门教程

    摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...

  7. 跟我学AngularJs:AngularJs入门及第一个实例

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...

  8. AngularJS入门篇

    AngularJS是一个JavaScript框架,它通过指令扩展了HTML,且通过表达式绑定数据到 HTML.顺便一提,什么是框架?比如struts2.spring.hibernate.thinkph ...

  9. AngularJS入门心得3——HTML的左右手指令

    在<AngularJS入门心得1——directive和controller如何通信>我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文 ...

随机推荐

  1. input和React-Native的TextInput的输入限制，只能输入两位小数（阻止0开头的输入），类似价格限制

    一.背景: 想要实现一功能: 1. 最多只能输入两位小数,类似的价格限制 2. 实时监听限制输入,禁止输入不符合规范的字符(当输入违禁字符,进行删除操作) 这样做的优点: 1. 在用户输入时直接进行限 ...

  2. leetcode 62 不同的路径

    描述: m*n的矩阵,从左上角走到右下角,只能向下或向右走. 解决: 简单dp,dp[i][j]表示到i,j这点总共多少种路径. dp[i][j] = dp[i][j - 1] + dp[i - 1] ...

  3. iOS下nil 、NULL、 Nil 、NSNull的区别

    1.nil,定义一个空的实例,指向OC中对象的空指针. 示例代码: NSString *someString = nil; NSURL *someURL = nil; id someObject = ...

  4. sqlserver select 查询字段if判断用法

    SELECT TOP 1000 [id],      case when group_id>1 then 'vip'           else '普通会员'           end  F ...

  5. 第七章 资源在Windows编程中的应用 P157 7-8

    资源在基于SDK的程序设计中的应用实验 一.实验目的 1．掌握各种资源的应用及资源应用的程序设计方法.   二.实验内容及步骤 实验任务 1.熟悉菜单资源的创建过程: 2.熟悉位图资源的创建: 3.熟 ...

  6. 界面设计中如何增强CTA按钮召唤力？

    以下内容由Mockplus(摹客)团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 网页和软件应用之类数字产品的有效交互系统一般是由拥有各种任务和功能的小元素构成.而为创建更加 ...

  7. 判断字符串是否为回文 python

    回文正序和逆序一样的字符串,例如abccba 方法一 def is_palindrome1(text): l = list(text) l.reverse() t1 = ''.join(l) if t ...

  8. task:scheduled cron 合法

    http://www.quartz-scheduler.org/documentation/quartz-2.x/tutorials/crontrigger.html task:scheduled o ...

  9. Hadoop-2.7.2分布式安装手册

    目录 目录 1 1. 前言 3 2. 特性介绍 3 3. 部署 5 3.1. 机器列表 5 3.2. 主机名 5 3.2.1. 临时修改主机名 6 3.2.2. 永久修改主机名 6 3.3. 免密码登 ...

  10. Linux上编译hadoop-2.7.1的libhdfs.so和libhdfs.a

    hadoop提供了CMake来编译libhdfs,因此在编译之前需要先安装好CMake工具. 然后进入libhdfs的源代码目录,如:/data/hadoop-2.7.1-src/hadoop-hdf ...