angular 学习笔记

每天进步一点点,学习笔记

笔记来自  angular权威指南

如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加 novalidate 标记。

而按钮标签则完全忽略 hr e f 属性,并不会在被点击时有同样的行为。

指令本质上就是AngularJS扩展具有自定义功能的HTML元素
的途径。例如,我们可以创建一个自定义元素,它实现了 <video> 标签的功能并且能在所有浏览
器中工作:

directive() 方法返回的对象中包含了用来定义和配置指令所需的方法和属性。

声明指令本质上是在HTML中通过元素、属性、类或注释来添加功能。

无论有多少种方式可以声明指令, 我们坚持使用属性方式, 因为它有比较好的跨浏览器兼容性:

template: ‘<a href="{{ myUrl }}">{{ myLinkText }}</a>‘
在主HTML文档中,可以给指令添加 myUrl 和 myLinkText 两个属性,这两个参数会成为指令
内部作用域的属性:
<div my-directive
my-url="http://google.com"
my-link-text="Click me to go to Google">
</div>

当使用当前作用域中的属性动态创建URL时,应该用 ng-href 代替 href 。

AngularJS会告诉浏览器在 ng-src 对应的表达式生效之前不要加载图像:

ng-app 和 ng-controller 是特殊的指令,因为它们会修改嵌套在它们内部的指令的作用域。

$rootScope 是作用域链的起始点,任何嵌套在 ng-app 内的指令都会继承它。

ng-controller 接受一个参数 expression ,这个参数是必需的

子 $scope 只是一个JavaScript对象,其中含有从父级 $scope 中通过原型继承得到的方法和属
性,包括应用的 $rootScope 。

$scope 对象的职责是承载DOM中指令所共享的操作和模型。
操作指的是 $scope 上的标准JavaScript方法。
模型指的是 $scope 上保存的包含瞬时状态数据的JavaScript对象。持久化状态的
数据应该保存到服务中,服务的作用是处理模型的持久化。

出于技术和架构方面的原因,绝对不要直接将控制器中的 $scope 赋值为值类型
对象(字符串、布尔值或数字) 。DOM中应该始终通过点操作符 . 来访问数据。
遵守这个规则将使你远离不可预期的麻烦。

如果将模型对象的某个属性设置为字符串, 它会通过引用进行共享, 因此在子 $scope 中修改
属性也会修改父 $scope 中的这个属性。

模板的URL被限制
在与应用文档相同的域和协议下,可以通过白名单或包装成被信任的值来突破限制。

要记住,使用 ng-include 时AngularJS会自动创建一个子作用域

花括号 {{ some expression }} 内的表达式。这些表达式会
被自动注册到 $watch 服务中并更新到 $digest 循环中

指令的生命周期开始于 $compile 方法并结束于 link 方法

当指令 scope 设置为 true 时,会从父作用域继承并创建一个新的作用域对象。

时间: 2024-10-03 10:42:28

angular 学习笔记的相关文章

angular学习笔记(八)

本篇介绍angular控制视图的显示和隐藏: 通过给元素添加ng-show属性或者ng-hide属性来控制视图的显示或隐藏: ng-show: 绑定的数据值为true时,显示元素,值为false时,隐藏元素 ng-hide: 绑定的数据值为true时,隐藏元素,值为false时,显示元素 (其实只要用到其中一个就可以了) 下面来看个简单的例子,点击按钮可以显示/隐藏元素: <!DOCTYPE html> <html ng-app> <head> <title>

angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构

ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入angular-resource.min.js文件 2.在模块中依赖ngResourece,在服务中注入$resource var HttpREST = angular.module('HttpREST',['ngResource']); HttpREST.factory('cardResource

angular学习笔记(五)-阶乘计算实例(1)

<!DOCTYPE html> <html ng-app> <head> <title>2.3.2计算阶乘实例1</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="script.js"></script> </

angular学习笔记(二十三)-$http(1)-api

之前说到的$http.get和$http.post,都是基于$http的快捷方式.下面来说说完整的$http: $http(config) $http接受一个json格式的参数config: config的格式如下: { method:字符串 , url:字符串, params:json对象, data:请求数据, headers:请求头, transformRequest:函数,转换post请求的数据的格式, transformResponse:函数,转换响应到的数据的格式, cache:布尔

angular学习笔记(二十七)-$http(5)-使用$http构建RESTful架构

在angular中有一个特别为RESTful架构而定制的服务,是在$http的基础上进行了封装. 但是为了学习,我们先看看用直接$http是如何构建RESTful架构的: 假设有一个银行卡的列表.需要的功能有: 可以通过id来获取用户123的指定id的卡     'GET'  'card/user/123/id' 可以获取用户123的所有的银行卡             'GET'  'card/user/123' 可以更新用户123的指定id的卡                'POST' '

angular学习笔记(九)-css类和样式3

再来看一个选择li列表的例子: 点击li中的任意项,被点击的li高亮显示: <!DOCTYPE html> <html ng-app> <head> <title>6.3css类和样式</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="scri

angular学习笔记(九)-css类和样式2

在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有true或false,并且不易维护,所以,angular使用ng-class属性来控制元素的类名: 我们来看一个小例子,点击error按钮,顶部提示错误框,点击warning按钮,顶部提示警告框. 错误框的类名是.err,警告框的类名是.warn: <!DOCTYPE html> <html ng-app> <head> <title>6.2css类和样式</title> <

angular学习笔记(一)

入门实例: 一个购物车产品清单,可以自行改变数量,总价自动计算的小例子: 代码如下: <!DOCTYPE html> <html ng-app> <head> <title>1.1实例:购物车</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="

angular学习笔记(二十六)-$http(4)-设置请求超时

本篇主要讲解$http(config)的config中的timeout项: $http({ timeout: number }) 数值,从发出请求开始计算,等待的毫秒数,超过这个数还没有响应,则返回错误 demo: html: <!DOCTYPE html> <html ng-app = 'HttpGet'> <head> <title>18.4 $http(2)</title> <meta charset="utf-8"

angular学习笔记(十九)

本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器,服务,一样,可以通过模块实例的directive的方法来创建指令: var someModule = angular.module('SomeModule',[]); someModule.directive('directiveName',function(){ return { link: f