AngularJSAngularjs基础(一)

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

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

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

    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’

  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>
AngularJS,        <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标记!

  • ‘!’组成。
        那几个绑定告诉AngularJS需求运算其中的表明式并将结果插入DOM中,接下去的步子将见到,DOM
        可以随便发挥运算结果的变更而事实更新。

      其它,AngularJS 还提供了部分老大管用的劳务特色:
        1,底层服务保留珍惜注入,XHR,缓存,URL路由和浏览器抽象服务。
        2,您还足以增添和拉长自己特点的应用服务。
        3,那一个劳动可以让你越发便利的编制WEB应用。

    应用程序逻辑(Logic)和表现(Behavior)
      应用程序逻辑和行事是你用JavaScrip
定义的控制器。AngularJS与正统的AJAX应用的次序分化,您不须求
      此外编写监听器或者DOM 控制器,因为他们一度松手到AngularJS
中了,这个意义使您的应用程序逻辑
      很简单编写,测试,维护和透亮。
    模型数据(Data)
      模型是从AngularJS
功效域对象的特性引申的,模型中的数据或许是Javascript对象,数组或骨干类型
      那都不紧要,紧要的是,他们都属于AngularJS 功能域对象。

  引导AngularJS 应用
      通过ngApp指令来机关引导AngularJS应用是一种简单的艺术,适合大部分状态。
  AngularJS应用指点进度有3个重大:
    1.注入器(injector)将用以成立此应用程序的看重注入(dependency
injection)
    2.注入器将会创设根效率域中的DOM,
    3.AngularJS将会延续跟效用域中的DOM,从用ngApp标记的HTML
标签开首,逐步处理DOM中的指令和捆绑。

相关文章