zoukankan      html  css  js  c++  java
  • Angular.JS学习笔记——1

    内容来自:http://www.runoob.com/angularjs/angularjs-intro.html

    AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

    我们建议把脚本放在 <body> 元素的底部。
    这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。

    AngularJS 通过 ng-directives 扩展了 HTML。

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

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

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

    什么是 AngularJS?

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

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

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

    AngularJS 表达式

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

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

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

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

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

     

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

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

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

     

    ngularJS 模块定义应用:

    AngularJS 模块

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

    AngularJS 控制器控制应用:

    AngularJS 控制器

    app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; });

    AngularJS 表达式

    AngularJS 数字

    AngularJS 使用 表达式 把数据绑定到 HTML。

    等价于:

    AngularJS 字符串

     

    AngularJS 对象

    AngularJS 数组

     

    AngularJS 表达式 与 JavaScript 表达式

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

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

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

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

    AngularJS 指令

     AngularJS 通过被称为 指令 的新属性来扩展 HTML。

    AngularJS 通过内置的指令来为应用添加功能。

    AngularJS 允许你自定义指令。

    AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-

    ng-app 指令初始化一个 AngularJS 应用程序。

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

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

    AngularJS 参考手册

    指令描述
    ng-app 定义应用程序的根元素。
    ng-bind 绑定 HTML 元素到应用程序数据
    ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据,并移除 HTML 字符串中危险字符
    ng-bind-template 规定要使用模板替换的文本内容
    ng-blur 规定 blur 事件的行为
    ng-change 规定在内容改变时要执行的表达式
    ng-checked 规定元素是否被选中
    ng-class 指定 HTML 元素使用的 CSS 类
    ng-class-even 类似 ng-class,但只在偶数行起作用
    ng-class-odd 类似 ng-class,但只在奇数行起作用
    ng-click 定义元素被点击时的行为
    ng-cloak 在应用正要加载时防止其闪烁
    ng-controller 定义应用的控制器对象
    ng-copy 规定拷贝事件的行为
    ng-csp 修改内容的安全策略
    ng-cut 规定剪切事件的行为
    ng-dblclick 规定双击事件的行为
    ng-disabled 规定一个元素是否被禁用
    ng-focus 规定聚焦事件的行为
    ng-form 指定 HTML 表单继承控制器表单
    ng-hide 隐藏或显示 HTML 元素
    ng-href 为 the <a> 元素指定链接
    ng-if 如果条件为 false 移除 HTML 元素
    ng-include 在应用中包含 HTML 文件
    ng-init 定义应用的初始化值
    ng-jq 定义应用必须使用到的库,如:jQuery
    ng-keydown 规定按下按键事件的行为
    ng-keypress 规定按下按键事件的行为
    ng-keyup 规定松开按键事件的行为
    ng-list 将文本转换为列表 (数组)
    ng-model 绑定 HTML 控制器的值到应用数据
    ng-model-options 规定如何更新模型
    ng-mousedown 规定按下鼠标按键时的行为
    ng-mouseenter 规定鼠标指针穿过元素时的行为
    ng-mouseleave 规定鼠标指针离开元素时的行为
    ng-mousemove 规定鼠标指针在指定的元素中移动时的行为
    ng-mouseover 规定鼠标指针位于元素上方时的行为
    ng-mouseup 规定当在元素上松开鼠标按钮时的行为
    ng-non-bindable 规定元素或子元素不能绑定数据
    ng-open 指定元素的 open 属性
    ng-options 在 <select> 列表中指定 <options>
    ng-paste 规定粘贴事件的行为
    ng-pluralize 根据本地化规则显示信息
    ng-readonly 指定元素的 readonly 属性
    ng-repeat 定义集合中每项数据的模板
    ng-selected 指定元素的 selected 属性
    ng-show 显示或隐藏 HTML 元素
    ng-src 指定 <img> 元素的 src 属性
    ng-srcset 指定 <img> 元素的 srcset 属性
    ng-style 指定元素的 style 属性
    ng-submit 规定 onsubmit 事件发生时执行的表达式
    ng-switch 规定显示或隐藏子元素的条件
    ng-transclude 规定填充的目标位置
    ng-value 规定 input 元素的值

    AngularJS 事件

    AngularJS 支持以下事件:

    • ng-click
    • ng-dbl-click
    • ng-mousedown
    • ng-mouseenter
    • ng-mouseleave
    • ng-mousemove
    • ng-keydown
    • ng-keyup
    • ng-keypress
    • ng-change

    AngularJS 验证属性

    • $dirty
    • $invalid
    • $error

    AngularJS 全局 API

    转换

    API描述
    angular.lowercase() 将字符串转换为小写
    angular.uppercase() 将字符串转换为大写
    angular.copy() 数组或对象深度拷贝
    angular.forEach() 对象或数组的迭代函数

    比较

    API描述
    angular.isArray() 如果引用的是数组返回 true
    angular.isDate() 如果引用的是日期返回 true
    angular.isDefined() 如果引用的已定义返回 true
    angular.isElement() 如果引用的是 DOM 元素返回 true
    angular.isFunction() 如果引用的是函数返回 true
    angular.isNumber() 如果引用的是数字返回 true
    angular.isObject() 如果引用的是对象返回 true
    angular.isString() 如果引用的是字符串返回 true
    angular.isUndefined() 如果引用的未定义返回 true
    angular.equals() 如果两个对象相等返回 true

     

     

     

     

     

     

     

    JSON

    API描述
    angular.fromJson() 反序列化 JSON 字符串
    angular.toJson() 序列化 JSON 字符串

     

     

    基础

    API描述
    angular.bootstrap() 手动启动 AngularJS
    angular.element() 包裹着一部分DOM element或者是HTML字符串,把它作为一个jQuery元素来处理。
    angular.module() 创建,注册或检索 AngularJS 模块

    重复HTML

     

    AngularJS 完美支持数据库的 CRUD(增加Create、读取Read、更新Update、删除Delete)应用程序。
    把实例中的对象想象成数据库中的记录。

    ng-app 指令

    ng-app 指令定义了 AngularJS 应用程序的 根元素

    ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。

    ng-init 指令

    ng-init 指令为 AngularJS 应用程序定义了 初始值

    通常情况下,不使用 ng-init。您将使用一个控制器或模块来代替它。

    ng-model 指令

    ng-model 指令 绑定 HTML 元素 到应用程序数据。

    ng-model 指令也可以:

    • 为应用程序数据提供类型验证(number、email、required)。
    • 为应用程序数据提供状态(invalid、dirty、touched、error)。
    • 为 HTML 元素提供 CSS 类。
    • 绑定 HTML 元素到 HTML 表单。

    ng-repeat 指令

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

    AngularJS ng-model 指令

    ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。

    双向绑定

    验证用户输入

    以上实例中,提示信息会在 ng-show 属性返回 true 的情况下显示。

    ng-model 指令根据表单域的状态添加/移除以下类:

    • 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 可应用在视图和控制器上。

    如何使用 Scope

    当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递:

    当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性。

    视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可,如: {{carname}}

    scope 是模型。

    scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。

     

    Scope 作用范围

    了解你当前使用的 scope 是非常重要的。

    在以上两个实例中,只有一个作用域 scope,所以处理起来比较简单,但在大型项目中, HTML DOM 中有多个作用域,这时你就需要知道你使用的 scope 对应的作用域是哪一个。

     

     每个 <li> 元素可以访问当前的重复对象,这里对应的是一个字符串, 并使用变量 x 表示。

    根作用域

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

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

     

    AngularJS 控制器

  • 相关阅读:
    “终身幼儿园”:学习是一个创造的过程
    我对ERP实质的理解(陈启申)
    Java学习记录1java并发编程之synchronized初学
    谈谈你对Spring的理解
    java中的==与equals的区别
    Windows下编译安装perl Module
    win系统用virtualBox安装Ubuntu虚拟机,如何共享数据
    Windows下emacsw3m设置代理
    自我介绍
    document 对象
  • 原文地址:https://www.cnblogs.com/YYkun/p/6116631.html
Copyright © 2011-2022 走看看