首页 > 技术文章 > AngularJS 菜鸟

cxying93 2016-11-28 17:50 原文

AngualrJS是 JavaScript框架。

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

AngularJS扩展了html

AngularJS通过ng-directives扩展了html:比如:

ng-app指令定义了一个angular的应用程序。

ng-model指令把元素值绑定到应用程序。

ng-bind指令把应用程序数据绑定到html视图。

什么是 AngularJS?

AngularJS 使得开发现代的单页面应用程序(SPAs:Single Page Applications)变得更加容易。

  • AngularJS 把应用程序数据绑定到 HTML 元素。
  • AngularJS 可以克隆和重复 HTML 元素。
  • AngularJS 可以隐藏和显示 HTML 元素。
  • AngularJS 可以在 HTML 元素"背后"添加代码。
  • AngularJS 支持输入验证。

AngularJS 表达式

  AngularJS 表达式写在双大括号内:{{ expression }}。

  AngularJS 表达式把数据绑定到 HTML,这 ng-bind 指令有异曲同工之妙。或用{{}}或用ng-bind

  AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

  <div ng-init="x=1;y=5">
            <p>总价:{{x*y}}</p>    
            <p ng-bind="x*y"></p>
      </div>

  带有对象的表达式、带有数组的表达式……

  <div ng-init="person={name:'li',age:'18'}">
            {{person.age}}
        </div>

AngularJS 过滤器

  currency 格式化数字为货币格式。

  filter 从数组项中选择一个子集。

  lowercase 格式化字符串为小写。

  orderBy 根据某个表达式排列数组。

  uppercase  格式化字符串为大写。

 

推荐阅读