• 【AngularJS探索之旅】入门篇


            AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS完全使用JavaScript编写的客户端技术.同其他历史悠久的Web技术(HTML、CSS和JavaScript)配合使用,使Web应用开发比以往更简单、更快捷.


    什么是 AngularJS?

    AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。
    AngularJS 把应用程序数据绑定到 HTML 元素。
    AngularJS 可以克隆和重复 HTML 元素。
    AngularJS 可以隐藏和显示 HTML 元素。
    AngularJS 可以在 HTML 元素"背后"添加代码。
    AngularJS 支持输入验证。


    AngularJS 指令

    ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者".
    ng-model 指令把输入域的值绑定到应用程序变量 name.
    ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML.

    ng-init 指令初始化应用程序数据

    ng-repeat 指令会重复一个 HTML 元素


    实例讲解:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
    
    <div ng-app="">
      <p>名字 : <input type="text" ng-model="name"></p>
      <h1>Hello {{name}}</h1>
    </div>
    
    </body>
    </html>


    1.当网页加载完毕,AngularJS自动开启
    2.ng-app指令如果在div区域内,则表示管理的是页面的一部分
    3.AngularJS 表达式写在双大括号内:{{ expression }},AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。AngularJS 将在表达式书写的位置"输出"数据。
    4.双向绑定,在修改输入域的值时,AngularJS 属性的值也将修改.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
    </head>
    <body>
    
    <div data-ng-app="" data-ng-init="names=['陈','晓','婵']">
      <p>使用 ng-repeat 来循环数组</p>
      <ul>
        <li data-ng-repeat="x in names">
          {{ x }}
        </li>
      </ul>
    </div>
    
    </body>
    </html>
    


    ng-repeat指令可以用在一个HTML元素或者是对象数组上.


    优点:

    1.动态视图:js可以扩展HTML的属性它替我们静态的HTML加了很多扩展性功能,有一种让HTML由死变活的感觉.
    2.完善:是一个比较完善的前端MVVW框架,包含模板,数据双向绑定,路由,模块化,服务,依赖注入等所有功能,模板功能强大丰富,并且是声明式的,自带了丰富的 Angular 指令.
    3.Google维护:AngularJS有Google来维护,无疑有了一个强大的后台,社区也非常活泼,能够很好促进它的发展.

  • 相关阅读:
    [bzoj2038] [2009国家集训队]小Z的袜子
    浅谈莫队
    [bzoj2754] [SCOI2012]喵星球上的点名
    [bzoj3676] [APIO2014]回文串
    [bzoj5472] 数列
    [bzoj5457] 城市
    [bzoj1023] [SHOI2008]cactus仙人掌图
    [bzoj2125] 最短路
    [bzoj5473] 仙人掌
    读《深入理解Elasticsearch》点滴-查询评分
  • 原文地址:https://www.cnblogs.com/chenxiaochan/p/7237552.html
Copyright © 2020-2023  润新知