AngularJS用法：
--------------------------------------------------
 AngularJS 指令:
 AngularJS 通过被称为 指令 的新属性来扩展 HTML。
 AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
 ng-app 指令初始化一个 AngularJS 应用程序。
 ng-init 指令初始化应用程序数据。
 ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
 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 Scope(作用域):
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
Scope 作用范围
了解你当前使用的 scope 是非常重要的。

根作用域
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

****************************
AngularJS 控制器
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
控制器文件可以使用外部连接使用。。

*********************************
AngularJS 过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
AngularJS 过滤器可用于转换数据：
过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。

************************************
AngularJS 服务(Service)
AngularJS 中你可以创建自己的服务，或使用内建服务。
什么是服务？
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
有个 $location 服务，它可以返回当前页面的 URL 地址。
为什么使用服务?
$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。
AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

*******************************************
ng-disabled 指令
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
ng-show 指令隐藏或显示一个 HTML 元素。
directive 指令：
有些笔者认为是AngularJ非常强大而有有用的功能之一
它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性，并且它不只是单单如此，你还可以在它的基础上来操作scope、绑定事件、更改样式等。
类型：
1.restrict
（字符串）可选参数，指明指令在DOM里面以什么形式被声明；取值有：E(元素),A(属性),C(类),M(注释)，其中默认值为A；当然也可以两个一起用，比如EA.表示即可以是元素也可以是属性。
2.priority
(数字)，可选参数，指明指令的优先级，若在单个DOM上有多个指令，则优先级高的先执行；
3.terminal
（布尔型），可选参数，可以被设置为true或false，若设置为true，则优先级低于此指令的其他指令则无效，不会被调用(优先级相同的还是会执行)
4.template（字符串或者函数）可选参数，可以是：
（1）一段HTML文本
（2）一个函数，可接受两个参数tElement和tAttrs
5.templateUrl（字符串或者函数），可选参数，可以是
（1）一个代表HTML文件路径的字符串
（2）一个函数，可接受两个参数tElement和tAttrs（大致同上）
7.scope
（1）默认值false。表示继承父作用域;
（2）true。表示继承父作用域，并创建自己的作用域（子作用域）;
（3）{}。表示创建一个全新的隔离作用域；
8.transclude
如果不想让指令内部的内容被模板替换，可以设置这个值为true。

****************************************
函数会影响到全局命名空间:
JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。
AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。

***************************************
AngularJS 表单
AngularJS 表单是输入控件的集合。
HTML 控件
以下 HTML input 元素被称为 HTML 控件:
input 元素
select 元素
button 元素
textarea 元素
HTML 表单
HTML 表单通常与 HTML 控件同时存在。
novalidate：用于禁用浏览器的默认验证。
required 必填项验证
ng-minlength 最小长度
ng-maxlength 最大长度
ng-pattern 模式匹配 正则表达式
name="email" ng-model="user.email" 判断是否是电子邮件
name="number" ng-model="user.age" 判断内容是否为数字
type="url" name="homepage" ng-model="user.facebook_url"
......
$valid ng-valid Boolean 当前基于你设定的规则是否验证通过
$invalid ng-invalid Boolean 当前基于你设定的规则是否验证未通过
$pristine ng-pristine Boolean 如果表单或者输入框没有使用则为True
$dirty ng-dirty Boolean 如果表单或者输入框有使用到则为True
*********************************
AngularJS 全局 API
AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如：
比较对象
迭代对象
转换对象
全局 API 函数使用 angular 对象进行访问。
以下列出了一些通用的 API 函数：
API 描述
angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString() 判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。

----------------------------------------------------
AngularJS 指令 描述
<html ng-app 为 <html> 元素定义一个应用(未命名)
<body ng-controller 为 <body> 元素定义一个控制器
<tr ng-repeat 循环 users 对象数组，每个 user 对象放在 <tr> 元素中。
<button ng-click 当点击 <button> 元素时调用函数 editUser()
<h3 ng-show 如果 edit = true 显示 <h3> 元素
<h3 ng-hide 如果 edit = true 隐藏 <h3> 元素
<input ng-model 为应用程序绑定 <input> 元素
<button ng-disabled 如果发生错误或者 ncomplete = true 禁用 <button> 元素

Bootstrap 类解析

元素 Bootstrap 类 定义
<div> container 内容容器
<table> table 表格
<table> table-striped 带条纹背景的表格
<button> btn 按钮
<button> btn-success 成功按钮
<span> glyphicon 字形图标
<span> glyphicon-pencil 铅笔图标
<span> glyphicon-user 用户图标
<span> glyphicon-save 保存图标
<form> form-horizontal 水平表格
<div> form-group 表单组
<label> control-label 控制器标签
<label> col-sm-2 跨越 2 列
<div> col-sm-10 跨越 10 列

JavaScript 代码解析

Scope 属性 用途
$scope.fName 模型变量 (用户名)
$scope.lName 模型变量 (用户姓)
$scope.passw1 模型变量 (用户密码 1)
$scope.passw2 模型变量 (用户密码 2)
$scope.users 模型变量 (用户的数组)
$scope.edit 当用户点击创建用户时设置为true。
$scope.error 如果 passw1 不等于 passw2 设置为 true
$scope.incomplete 如果每个字段都为空(length = 0)设置为 true
$scope.editUser 设置模型变量
$scope.watch 监控模型变量
$scope.test 验证模型变量的错误和完整性

---------------------------------------

angularJS的一点小笔记的更多相关文章

  1. 深入剖析Nginx一点小笔记

    前几天在图书馆看书,恰好看到这本<深入剖析nginx>,花了快一周的时间看完了这本书,写点笔记心得便于以后复习. 以前对nginx的认识就只是停留在一个反向代理服务器上.百度了一下ngin ...

  2. AngularJS的一点学习笔记

    ng-options="item.action for item in todos" ng-options表达式的基本形式, 形如 "<标签> for < ...

  3. jdbc一点小笔记

    JDBC的常用接口的步骤, 1使用Driver或者Class.forName()进行注册驱动: 2使用DriverManager进行获取数据库的链接.使用Connection获取语句对象.使用语句对象 ...

  4. AngularJS in Action读书笔记6(实战篇)——bug hunting

    这一系列文章感觉写的不好,思维跨度很大,原本是由于与<Angularjs in action>有种相见恨晚而激发要写点读后感之类的文章,但是在翻译或是阐述的时候还是会心有余而力不足,零零总 ...

  5. AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示

    前言: "宁肯像种子一样等待  也不愿像疲惫的陀螺  旋转得那样勉强" 这是前几天在查资料无意间看到的一位园友的签名,看完后又读了两遍,觉得很有味道.后来一寻根究底才知这是出资大诗 ...

  6. AngularJS in Action读书笔记4(实战篇)——创建Statistic模块

    个人感觉<Angularjs in action>这本书写的很好,很流畅,循序渐进,深入浅出,关键是结合了一个托管于Github上的实例讲解的,有代码可查,对于初学者应该是个不错的途径.( ...

  7. AngularJS in Action读书笔记3——走近Services

    试着想想这些问题:如果一个controller只关心自己所控制的view页面,那么对于整个application来说,你如何调用想要的function:如果controller从来都不会和其他cont ...

  8. AngularJS in Action读书笔记2——view和controller的那些事儿

    今天我们来818<angularjs in action>的第三章controller和view. 1.Big Picture概览图 View是angularjs编译html后呈现出来的, ...

  9. AngularJS in Action读书笔记1——扫平一揽子专业术语

    前(fei)言(hua): 数月前,以一个盲人摸象的姿态看了一些关于AngularJS的视频书籍,留下了我个人的一点或许是指点迷津或许是误人子弟的读后感.自以为已经达到熟悉ng的程度,但是因为刚入公司 ...

随机推荐

  1. Java-错误处理机制学习（一）异常处理

    注意:本文介绍Java中的异常处理理论知识及相关语法结构,对于实际应用来说是万万不够的.关于如何高效地使用异常,请查看Java-高效地使用Exception-实践. 异常处理的思想是,当应用程序处于异 ...

  2. 201521145048《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢式(思维导图或其他)归纳总结多数据库相关内容. 1.数据库的定义:是为了实现一定目的按某种规则组织起来的"数据"的"集合". ...

  3. 编程从入门到提高，然后放弃再跑路（Java）

    1.Java入门篇 1.1 基础入门和面向对象 1.1.1 编程基础 [01] Java语言的基本认识 [02] 类和对象 [03] 类的结构和创建对象 [04] 包和访问权限修饰符 [05] 利用p ...

  4. OC Block网上转载

    1.block是一个特殊的OC对象, 它建立在栈上, 而不是堆上, 这么做一个是为性能考虑,还有就是方便访问局部变量. 2.默认情况下block使用到的局部变量都会被复制,而不是保留.所以它无法改变局 ...

  5. Linux JDK配置

    第一步:下载jdk-7-linux-i586.tar.gz wget -c http://download.oracle.com/otn-pub/java/jdk/7/jdk-7-linux-i586 ...

  6. bzoj2118（加法原理）（墨墨的等式）

    题目大意:给定n个物品,每个物品有一个非负价值,问[L,R]区间内有多少价值可以被凑出来. 题意网上一大片,具体求解过程是利用了加法原理,将各个模数拥有的个数之和相加. 就是说随机取一个数a[k],那 ...

  7. S2_SQL_第四章

    1.使用EXISTS语句判断该数据库对象是否存在的语法: DROP TABLE IF EXISTS temp; 2. EXISTS作为WHERE语句的子查询: SELECT <字段>FRO ...

  8. 渣渣学QT

    初学QT,自己的一些小总结,错误之处,望大神指点一二: 1,添加资源文件时想应用在界面的背景,但是发现用不了,后来才知道是没有"构建"?应该是要在构建之后才将所添加的资源文件真正的 ...

  9. MVVM前后分离轻量级框架应用juicer和doT.js

    前言      前后端开发分的越来越细化,为了方便前端工程师更好的调试后端工程师嵌套的代码,前后分离技术就出现了,简单理解其实就是Ajax异步将数据提供给JavaScript,由JavaScript进 ...

  10. Asp.net中防止用户多次登录的方法

    在web开发时,有的系统要求同一个用户在同一时间只能登录一次,也就是如果一个用户已经登录了,在退出之前如果再次登录的话需要报错. 常见的处理方法是,在用户登录时,判断此用户是否已经在Applicati ...