(一)
  模型——视图——控制器
    端对端的解决方案,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. Git读档

    $ git config --global user.name "meng kai" $ git config --global user.email 363255751@qq.c ...

  2. 《Unity Shader入门精要》读书笔记(1)

    主要是对第二章的整理 渲染流水线:由一个三维场景出发,生成(渲染)一张二维图像. 渲染流程:应用阶段.几何阶段.光栅化阶段. 应用阶段: 1. 把数据加载到显存中 渲染所需数据从硬盘,到内存,再到显存 ...

  3. CSS设计模式之三权分立模式篇 ( 转)

    转自 海玉的博客 市面上我们常常会看到各种各样的设计模式书籍,Java设计模式.C#设计模式.Ruby设计模式等等.在众多的语言设计模式中我唯独找不到关于CSS设计模式的资料,即使在网上找到类似内容, ...

  4. 超简便的ListView中Adapter的写法

    对于 ListView 的使用,他有两个重点的部分,一个是下拉刷新和加载更多,这个今天我们不讲,另外一个是 BaseAdapter 的使用,这个是今天的主角,BaseAdapter 中又有 ViewH ...

  5. matlab练习程序(旋转、径向模糊)

    还记得过去写过径向模糊,不过当时效果似乎不好. 这次效果还可以,程序中用的算法是: 1.求当前处理点和图像中心点之间的距离r与角度ang; 2.通过对r的修改得到径向模糊. 3.通过对ang的修改得到 ...

  6. 浅谈SQL Server中的事务日志(四)----在完整恢复模式下日志的角色

    简介 生产环境下的数据是如果可以写在资产负债表上的话,我想这个资产所占的数额一定不会小.而墨菲定律(事情如果有变坏的可能,无论这种可能性有多小,它总会发生)仿佛是给DBA量身定做的.在上篇文章介绍的简 ...

  7. ExecutorService的invokeAny方法

    一.此方法获得最先完成任务的结果,即Callable<T>接口中的call的返回值,在获得结果时,会中断其他正在执行的任务 示例代码: import java.util.ArrayList ...

  8. maven学习(五)插件和自定义插件

    插件是可以配置在settings.xml和pom.xml中的 插件目标: 在了解插件和生命周期的绑定关系之前,先来说一下插件目标.在实际项目构建的过程中,需要经历编译.打包等等许许多多的操作,为每个操 ...

  9. Java—集合框架 Collections.sort()、Comparable接口和Comparator接口

    Collentions工具类--java.util.Collections Collentions是Java集合框架中,用来操作集合对象的工具类,也是Java集合框架的成员,与List.Map和Set ...

  10. Siebel 集成中的“发布-订阅”与“阅读”

    将 Siebel 应用程序中存储的数据提供给企业中的其他应用程序时,通常需要遵循以下两种基本模式之一: 发布-订阅 阅读 “发布-订阅”是一种机制,根据该机制,一个系统(发布者)将更改或更新的数据提供 ...