zoukankan      html  css  js  c++  java
  • angularjs笔记(1)

    https://github.com/angular/angular.js/blob/master/src/ng/q.js

    1、ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。
    2、ng-model 指令把输入域的值绑定到应用程序变量 name。
    3、ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
    4、ng-init 指令初始化 AngularJS 应用程序变量。

    ng-app 指令定义一个 AngularJS 应用程序。
    ng-model 指令把元素值(比如输入域的值)绑定到应用程序
    ng-bind 指令把应用程序数据绑定到 HTML 视图。

    四大特性:
    mvc
    模块化和依赖注入
    双向数据绑定
    指令


    注意:
    ng-bind 在标签内绑定
    {{}}直接绑定

    5、
    AngularJS 表达式 与 JavaScript 表达式
    类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。
    与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。
    与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。
    与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。


    ng-repeat="x in names" 对内容循环迭代

    一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。

    ng-app 如何通过一个值(比如 ng-app="myModule")连接到代码模块。

    6、应用状态
    ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

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

    8、AngularJS 过滤器
    过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。

    currency 格式化数字为货币格式。
    filter 从数组项中选择一个子集。
    lowercase 格式化字符串为小写。
    orderBy 根据某个表达式排列数组。
    uppercase 格式化字符串为大写。

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

    8、服务
    $location 本地服务
    $http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求,应用响应服务器传送过来的数据。
    AngularJS $timeout 服务对应了 JS window.setTimeout 函数。
    AngularJS $interval 服务对应了 JS window.setInterval 函数。

    使用自定义的的服务 hexafy 将一个数字转换为16进制数: 启动自定义服务

    当你创建了自定义服务,并连接到你的应用上后,你可以在控制器,指令,过滤器或其他服务中使用它。

    9、
    AngularJS $http 是一个用于读取web服务器上数据的服务。
    $http.get(url) 是用于读取服务器数据的函数。

    $http.get() 从web服务器上读取静态 JSON 数据。

    前面实例我们使用了数组作为数据源,以下我们将数据对象作为数据源。

    10、表格
    表格显示序号可以在 <td> 中添加 $index:
    使用 $even 和 $odd

    ng-if="$odd
    11、dom
    ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。
    ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容(value)。

    12、表单

    novalidate 属性在应用中不是必须的,但是你需要在 AngularJS 表单中使用,用于重写标准的 HTML5 验证。

    $dirty 表单有填写记录
    $valid 字段内容合法的
    $invalid 字段内容是非法的
    $pristine 表单没有填写记录

    13、全局api

    API 描述
    angular.lowercase() 转换字符串为小写
    angular.uppercase() 转换字符串为大写
    angular.isString() 判断给定的对象是否为字符串,如果是返回 true。
    angular.isNumber() 判断给定的对象是否为数字,如果是返回 true。


    最复杂指令:

    restrict 值可以是以下几种:
    E 只限元素名使用
    A 只限属性使用
    C 只限类名使用
    M 只限注释使用


    ==========================================================
    数组:


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

    <ul>
    <li ng-repeat="x in names">{{x}}</li>
    </ul>

    </div>

    <script>
    var app = angular.module('myApp', []);

    app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    });
    </script>

    在指令 里 操作dom

    transclude:true 不替换
    <div ng-transclude></div>

    complile link 编译

    指令 link 函数 操作dom 绑定事件

    2-7

    scope 创建独立作用域 scope:{}


    暴露方法 卸载controller里
    link 处理指令内部的数据

    return

    require: 依赖某个指令


    scope 绑定策略 @ 字符串 == 双向 & 传递父函数


    3-2

    compile 操作scope报错 不能操作


    @ 函数 块级键

  • 相关阅读:
    Redis(五)——主从做读写分离原理与优化
    Redis(四)——持久化方案(RDB和AOF使用)
    Redis(三)——高级用法(GEO地理位置信息)
    Redis(二)——五大数据类型的基本操作(字符串类型,哈希类型,列表类型,集合类型,有序集合类型)
    Redis(一)——redis初识,redis安装和启动
    15 Ajax技术
    ORM多表分组、F与Q查询
    ORM多表操作
    ORM单表操作
    CentOS 7 下 rdesktop 的安装
  • 原文地址:https://www.cnblogs.com/y896926473/p/5435434.html
Copyright © 2011-2022 走看看