angularjs学习笔记
来源：互联网 发布：淘宝联盟优惠卷设置 编辑：程序博客网 时间：2024/06/06 10:02
一、AngularJS基础
1、ng-app=” ” 定义angularJS的使用范围；
<div ng-app=""></div>2、ng-init=”变量=值;变量=’值’” 初始化变量的值，有多个变量时，中间用分号隔开；
<div ng-init="firstName='John'"></div>3、ng-model=”变量” 定义变量名；
<input type="text" ng-model="name"><h1>{{name}}</h1>4、ng-bind=”变量” 绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值，比如：{{变量}}。
<span ng-bind="firstName"></span> 相当于{{firstName}}5、AngularJS 模块（Module） 定义了 AngularJS 应用，ng-app指令定义了应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用，ng-controller 定义了控制器。
<div ng-app="myApp" ng-controller="myCtrl"></div>var app = angular.module('myApp', []);app.controller('myCtrl', function() {});二、AngularJS 表达式
AngularJS 表达式写在双大括号内：{{ expression }}
<p>我的第一个表达式: {{ expression }}</p>1、AngularJS 数字
<div ng-app="" ng-init="quantity=1;cost=5"> <p>总价： <span ng-bind="quantity * cost"></span></p></div>2、AngularJS 字符串
<div ng-app="" ng-init="firstName='John';lastName='Doe'"><p>姓名： {{ firstName + " " + lastName }}</p></div>3、AngularJS 对象
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p>姓为 {{ person.lastName }}</p></div>4、AngularJS 数组
<div ng-app="" ng-init="points=[1,15,19,2,40]"><p>第三个值为 {{ points[2] }}</p></div>三、AngularJS 指令
1、所有指令
<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 元素的值
2、自定义指令
除了 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 { restrict : "E" , template : "<h1>自定义指令!</h1>" };});</script></body>注：restrict 值可以是以下几种:E 作为元素名使用 <runoob-directive></runoob-directive>A 作为属性使用 <div runoob-directive></div>C 作为类名使用 <div class="runoob-directive"></div>M 作为注释使用 <!-- directive: runoob-directive -->restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。四、AngularJS模型
ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
1、ng-model 指令
ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。
<div ng-app="myApp" ng-controller="myCtrl"> 名字: <input ng-model="name"></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.name = "John Doe";});</script>2、双向绑定
双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改：
<div ng-app="myApp" ng-controller="myCtrl"> 名字: <input ng-model="name"> <h1>你输入了: {{name}}</h1></div>3、验证用户输入
<form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span></form>4、应用状态
ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)
<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'"> Email: <input type="email" name="myAddress" ng-model="myText" required></p> <h1>状态</h1> {{myForm.myAddress.$valid}} {{myForm.myAddress.$dirty}} {{myForm.myAddress.$touched}}</form>5、CSS 类
ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：
<style>input.ng-invalid { background-color: lightblue;}</style><body><form ng-app="" name="myForm"> 输入你的名字: <input name="myAddress" ng-model="text" required></form>五、AngularJS Scope(作用域)
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
1、如何使用 Scope
当你在创建控制器时，你可以将 $scope 对象当作一个参数传递:
当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。
<div ng-app="myApp" ng-controller="myCtrl"><h1>{{carname}}</h1></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.carname = "Volvo";});</script>2、Scope 概述
AngularJS 应用组成如下：
View(视图), 即 HTML。Model(模型), 当前视图中可用的数据。Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
<div ng-app="myApp" ng-controller="myCtrl"> <input ng-model="name"> <h1>{{greeting}}</h1> <button ng-click='sayHello()'>点我</button> </div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.name = "Runoob"; $scope.sayHello = function() { $scope.greeting = 'Hello ' + $scope.name + '!'; };});</script>3、Scope 作用范围
了解你当前使用的 scope 是非常重要的。
在以上两个实例中，只有一个作用域 scope，所以处理起来比较简单，但在大型项目中， HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。
<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>4、根作用域
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。 $rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
<div ng-app="myApp" ng-controller="myCtrl"><h1>{{lastname}} 家族成员:</h1><ul> <li ng-repeat="x in names">{{x}} {{lastname}}</li></ul></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, $rootScope) { $scope.names = ["Emil", "Tobias", "Linus"]; $rootScope.lastname = "Refsnes";});</script>六、AngularJS 控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。
1、
<div ng-app="myApp" ng-controller="myCtrl">名: <input type="text" ng-model="firstName"><br>姓: <input type="text" ng-model="lastName"><br><br>姓名: {{firstName + " " + lastName}}</div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe";});</script>应用解析：
AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
ng-controller=”myCtrl” 属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用 $scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。
2、控制器方法
上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。
控制器也可以有方法（变量和函数）
<div ng-app="myApp" ng-controller="personCtrl">名: <input type="text" ng-model="firstName"><br>姓: <input type="text" ng-model="lastName"><br><br>姓名: {{fullName()}}</div><script>var app = angular.module('myApp', []);app.controller('personCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; }});</script>3、外部文件中的控制器
在大型的应用程序中，通常是把控制器存储在外部文件中。
只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可：
<div ng-app="myApp" ng-controller="personCtrl">First Name: <input type="text" ng-model="firstName"><br>Last Name: <input type="text" ng-model="lastName"><br><br>Full Name: {{firstName + " " + lastName}}</div><script src="personController.js"></script>七、AngularJS 过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
AngularJS 过滤器可用于转换数据：
uppercase 过滤器将字符串格式化为大写：
<div ng-app="myApp" ng-controller="personCtrl"><p>姓名为 {{ lastName | uppercase }}</p></div>lowercase 过滤器将字符串格式化为小写：
<div ng-app="myApp" ng-controller="personCtrl"><p>姓名为 {{ lastName | lowercase }}</p></div>currency 过滤器将数字格式化为货币格式：
<div ng-app="myApp" ng-controller="costCtrl"><input type="number" ng-model="quantity"><input type="number" ng-model="price"><p>总价 = {{ (quantity * price) | currency }}</p></div>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"> {{ (x.name | uppercase) + ', ' + x.country }} </li></ul></div>以下实例自定义一个过滤器 reverse，将字符串反转：
var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.msg = "Runoob";});app.filter('reverse', function() { //可以注入依赖 return function(text) { return text.split("").reverse().join(""); }});limitTo 截取
{{"1234567890" | limitTo :6}} // 从前面开始截取6位{{"1234567890" | limitTo:-4}} // 从后面开始截取4位八、AngularJS 服务(Service)
- AngularJs学习笔记--Forms
- AngularJS入门学习笔记
- AngularJS学习笔记
- AngularJS 学习笔记(邹业盛)
- AngularJs学习笔记--bootstrap
- AngularJs学习笔记--directive
- AngularJs学习笔记--directive
- AngularJs学习笔记--bootstrap
- AngularJs学习笔记--expression
- AngularJs学习笔记--Forms
- AngularJs学习笔记--Modules
- AngularJs学习笔记--Scope
- angularjs学习笔记一
- angularJS学习笔记二
- angularjs学习笔记
- AngularJS学习笔记
- AngularJS学习笔记
- AngularJS学习笔记
- JavaSE_JavaWeb编程
- cocoapods基本使用
- pycharm配置py文件模板
- /lib/ld-linux.so.2: bad ELF interpreter: No such file or directory问题解决方法
- gcc编译参数详解
- angularjs学习笔记
- Android 开源框架Universal-Image-Loader完全解析（一）--- 基本介绍及使用
- 关于前台js中json的处理
- AngularJS学习笔记
- AngularJs filter 过滤器
- 欢迎使用CSDN-markdown编辑器
- layui use 定义js外部引用函数
- haproxy+keepalived实现高可用负载均衡
- shell 选择打印部分输出内容
