AngularJSAngularjs基础(一)

(一)
  模型——视图——控制器
    端对端的化解方案,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更新。

  引导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”>标记内部的
      数据绑定有效。

相关文章