• Angularjs基础(一)


    (一)
      模型——视图——控制器
        端对端的解决方案,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">标记内部的
          数据绑定有效。

  • 相关阅读:
    2.1 String的特性
    sql语句对列进行操作
    java 集合排序
    C#抽象类及其方法的学习
    haproxy+keepalived实现高可用负载均衡
    RPC框架简易实现
    WCF中的ServiceHost初始化两种方式
    C# Stopwatch与TimeSpan详解
    HBase入门篇
    nginx+tomcat+redis完成session共享
  • 原文地址:https://www.cnblogs.com/nmxs/p/5391550.html
Copyright © 2020-2023  润新知