zoukankan      html  css  js  c++  java
  • AngularJS简介

    AngularJS简介

    AngularJS是一个JavaScript矿建,他是一个JavaSscript编写的库。可以通过<script>标签添加到HTML页面。

    AngularJS是通过指令扩展了HTML,且通过表达式绑定数据到HTML。

    地址:<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

    各个 angular.js 版本下载: https://github.com/angular/angular.js/releases

    AngularJS通过ng-directives扩展了HTML。

    ng-app指令定义一个AngularJS应用程序。

    ng-model指令把元素之(比如输入域的值)绑定到应用程序。

    ng-model 指令也可以:

      为应用程序数据提供类型验证(number、email、required)。

      为应用程序数据提供状态(invalid、dirty、touched、error)。

      为 HTML 元素提供 CSS 类。

      绑定 HTML 元素到 HTML 表单

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

    ng-init 指令初始化 AngularJS 应用程序变量。

    ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。

    HTML5允许扩展的(自制的)属性,以data-开头。

    AngularJS属性以ng-开头,但是您可以使用data-ng-来让网页对HTML5有效。

    什么是AngularJS?

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

    AngularJS 把应用程序数据绑定到 HTML 元素。

    AngularJS 可以克隆和重复 HTML 元素。

    AngularJS 可以隐藏和显示 HTML 元素。

    AngularJS 可以在 HTML 元素"背后"添加代码。

    AngularJS 支持输入验证。

    AngularJS 表达式

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

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

    AngularJS 将在表达式书写的位置"输出"数据。

    AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。

    实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

    AngularJS 应用

    AngularJS 模块(Module) 定义了 AngularJS 应用。

    AngularJS 控制器(Controller) 用于控制 AngularJS 应用。

    ng-app指令定义了应用, ng-controller 定义了控制器。

    AngularJS 表达式 与 JavaScript 表达式

    类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。

    与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。

    与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。

    与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。

    创建自定义的指令

    你可以使用 .directive 函数来添加自定义的指令。

    要调用自定义指令,HTML 元素上需要添加自定义指令名。

    使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

    <body ng-app="myApp">

    <runoob-directive></runoob-directive>

    <script>

    var app = angular.module("myApp", []);

    app.directive("runoobDirective", function() {

        return {

            template : "<h1>自定义指令!</h1>"

        };

    });

    </script>

    </body>

    可以通过以下方式来调用指令:元素名、属性、类名、注释

    restrict 属性设置指令只能通过某些方式来调用

    var app = angular.module("myApp", []);

    app.directive("runoobDirective", function() {

        return {

            restrict : "A",

            template : "<h1>自定义指令!</h1>"

        };

    });

    restrict 值可以是:E 作为元素名使用、A 作为属性使用、C 作为类名使用、M 作为注释使用

    restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

    CSS 类

    ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类:ng-empty、ng-not-empty、ng-touched、ng-untouched、ng-valid、

    ng-invalid、ng-dirty、ng-pending、ng-pristine

    AngularJS Scope(作用域)

    Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

    Scope 是一个对象,有可用的方法和属性。

    Scope 可应用在视图和控制器上。

    AngularJS 应用组成如下:

     View(视图), 即 HTML。

     Model(模型), 当前视图中可用的数据。

     Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。

    所有的应用都有一个 $rootScope(根作用域),它可以作用在 ng-app 指令包含的所有 HTML 元素中。

    $rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。

    AngularJS  过滤器

    过滤器可以使用一个管道字符(|)添加到表达式和指令中。

    AngularJS 过滤器可用于转换数据:

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

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

    lowercase 格式化字符串为小写。

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

    uppercase 格式化字符串为大写。

    向指令添加过滤器

    过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中。

    orderBy 过滤器根据表达式排列数组:

    <div ng-app="myApp" ng-controller="namesCtrl">

    <ul>

      <li ng-repeat="x in names | orderBy:'country'">

        {{ x.name + ', ' + x.country }}

      </li>

    </ul>

    <div>

    过滤输入

    输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。

    filter 过滤器从数组中选择一个子集:

    <div ng-app="myApp" ng-controller="namesCtrl">

    <p><input type="text" ng-model="test"></p>

    <ul>

      <li ng-repeat="x in names | filter:test | orderBy:'country'">

        {{ (x.name | uppercase) + ', ' + x.country }}

      </li>

    </ul>

    </div>

  • 相关阅读:
    开天辟地第一人---盘古
    质量管理三个概念:QC、QA和QM,你能分得清吗?
    项目管理PV、EV、AC、BAC、EAC、ETC等计算
    信息系统项目管理师考试是高级职称资格考试,可以用来评高级职称
    项目章程
    信息系统项目管理师---项目管理5大过程组十大知识域47个过程
    一句话信息系统项目管理
    信息系统项目管理师论文写作经验
    Linux系统
    什么是Redis?
  • 原文地址:https://www.cnblogs.com/DreamFather/p/11326883.html
Copyright © 2011-2022 走看看