AngularJS 简介
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
好的学习网址: http://www.runoob.com/angularjs/angularjs-tutorial.html
什么是 AngularJS？
AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。
引入angular
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
简单示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
当网页加载完毕，AngularJS 自动开启。
ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
引导AngularJS应用(初始化)
可通过ngApp指令来自动引导AngularJS应用
AngularJS应用引导过程有3个重要点：
注入器(injector)将用于创建此应用程序的依赖注入(dependency injection)；
注入器将会创建根作用域作为我们应用模型的范围；
AngularJS将会链接根作用域中的DOM，从用ngApp标记的HTML标签开始，逐步处理DOM中指令和绑定。
一旦AngularJS应用引导完毕，它将继续侦听浏览器的HTML触发事件，如鼠标点击事件、按键事件、HTTP传入响应等改变DOM模型的事件。
这类事件一旦发生，AngularJS将会自动检测变化，并作出相应的处理及更新。
AngularJS 指令
说明
AngularJS 指令是以 ng 作为前缀的 HTML 属性
在html5页面中可以使用 data-ng-
常用指令
ng-app
标记了AngularJS脚本的作用域
可在任意标签中使用
一个网页可以有多个
ng-init
初始化 AngularJS 应用程序变量
写在ng-app所在标签
通常情况下使用一个控制器或模块来代替它
示例
<div ng-app="" ng-init="quantity=1;price=5">
<p><b>总价：</b> {{ quantity * price }}</p>
</div>
ng-model
绑定 HTML 元素 到应用程序数据,也可以进行数据校验
参见下面的数据绑定
ng-controller
指定使用的控制器
参见下面的控制器
ng-switch
判断
<div ng-app="">
<input ng-model='a'>
<ul ng-switch on="a">
<li ng-switch-when="1">1</li>
<li ng-switch-when="2">2</li>
<li ng-switch-default>other</li>
</ul>
</div>
ng-repeat
循环输出指定次数的 HTML 元素
示例
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
或
<div ng-app="" ng-init="names={'name1':'Jani','name2':'Hege'}">
<table border="1">
<tr ng-repeat="(x, y) in names">
<td>{{x}}</td>
<td>{{y}}</td>
</tr>
</table>
</div>
特殊变量
$index 当前循环的索引
$first 是否为头元素
$middle 是否为非头非尾元素
$last 是否为尾元素
$even 当前循环的索引是否是偶数(0,2,4..)
$odd 当前循环的索引是否是奇数(1,3,5..)
ng-class-even,ng-class-odd
样式,和ng-repeat配合使用
<style>
.oddClass { background:red;}
.evenClass { background:yellow;}
</style>
...
<ul ng-app="" ng-init="l=[1,2,3,4]">
<li ng-class-odd="'oddClass'" ng-class-even="'evenClass'" ng-repeat="m in l">{{ m }}</li>
</ul>
ng-disabled
绑定应用程序数据到 HTML 的 disabled 属性
示例
<div ng-app="" ng-init="mySwitch=true">
<button ng-disabled="mySwitch">按钮</button>
<input type="checkbox" ng-model="mySwitch">复选框
</div>
当mySwitch的值为true时,即复选框选中时,按钮将不可点
ng-show,ng-hide
绑定应用程序数据, 控制html元素的隐藏和显示
ng-src,ng-href
用于替代img的src或超链接的href属性
因为页面会先于js加载
ng-style,ng-class
样式
<div ng-app="">
<input ng-model='width'>
<div ng-style="{width: width+'px', height: '100px', backgroundColor: 'red'}"></div>
</div>
自定义指令
可以使用 .directive 函数来添加自定义的指令
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive
可以通过标签,属性,类名,注释来调用
示例
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : abc()
};
});
function abc(){
var str = '';
for(var i=0;i<10;i++){
str+="<h1>自定义指令"+i+"</h1>";
}
return str;
}
</script>
</body>
自定义函数返回对象的属性
tempate属性的值为页面显示的内容
restrict 值可以是以下几种:
E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用
默认值为 EA, 即可以通过元素名和属性名来调用指令
如果需要使用注释来调用,需要在返回对象中添加属性 restrict : "M", replace : true,并在调用时 <!-- directive: 自定义指令 -->
AngularJS 表达式
AngularJS 表达式写在双大括号内：{{ expression }}
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
如果绑定的变量值发生改变,表达式的值也会实时发生改变
数据绑定
说明
数据同步是AngularJS的一个核心特性。当页面加载的时候，
AngularJS会根据输入框的属性值名字，将其与数据模型中相同名字的变量绑定在一起，以确保两者的同步性
实时同步
在AngularJS中，一个视图是模型通过HTML模板渲染之后的映射。
这意味着，不论模型什么时候发生变化，AngularJS会实时更新结合点，随之更新视图
任何对于模型的更改都会即时反映在视图上
任何在视图上的更改都会被立刻体现在模型中
优点
节省了大量dom操作
ng-model指令
绑定 HTML 元素 到应用程序数据,也可以进行数据校验
双向绑定
在修改输入域的值时， AngularJS 属性的值也将修改
<div ng-app="">
数量： <input type="number" ng-model="quantity">
价格： <input type="number" ng-model="price">
<p><b>总价：</b> {{ quantity * price }}</p>
</div>
数据校验
为应用程序数据提供类型验证(number,email,required)
email和number需要写到type属性中,而required是单独的一个属性
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text" required>
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
提示信息会在 ng-show 属性返回 true 的情况下显示
应用状态
可以为应用数据提供状态值(invalid, dirty, touched, error)
error的返回值是一个对象,key可能为email,required
其它三个返回值是true或false
<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
Email:<input type="email" name="myAddress" ng-model="myText" required>
<p>编辑邮箱地址，查看状态的改变。</p>
<h1>状态</h1>
<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
<p>Pristine: {{myForm.myAddress.$pristine}} (如果值没有改变则为 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>
<p>Error: {{myForm.myAddress.$error}} (错误信息)。</p>
</form>
css类
根据表单域的状态添加/移除以下类
ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine
示例
<style>
input.ng-invalid {
background-color: red;
}
</style>
<body>
<form ng-app="" name="myForm">
输入你的名字:
<input name="myName" ng-model="myText" required>
</form>
</body>
当文本框的值为空时,背景色会变红
AngularJS 模块
模块定义了一个应用程序
模块是应用程序的容器
定义
<script>
var app = angular.module("myApp", []);
</script>
在模块定义中 [] 参数用于定义模块的依赖关系
使用
<div ng-app="myApp">...</div>
优点
JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。
AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。
AngularJS 控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据。
ng-controller 指令指定使用的控制器
<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 Scope(作用域)
AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
Scope用来存放模型,用来在视图和控制器之间传递数据
使用$scope
创建控制器时，可以将 $scope 对象当作一个参数传递:
视图中,不需要添加 $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>
Scope不仅可以存放属性,也可以存放方法
作用域和根作用域
在$scope上定义的属性只在当前ng-app或某个ng-repeat循环中有效
$rootScope作用域为根作用域,定义的属性在ng-app所有位置有效,使用方法和$scope相同
AngularJS 过滤
用于转换数据(格式化) 或 排序
使用一个管道字符（|）添加到表达式和指令中
常用过滤器
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
在表单式中使用过滤器
{{ lastName | uppercase }}
在指令中使用过滤器
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<div>
输入过滤器(将过滤器的输出作为另一个过滤器的输入)
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
格式化时间
{{ a | date:'yyyy-MM-dd HH:mm:ss' }}
自定义过滤器
var app = angular.module('phonecatFilters', []);
app.filter('checkmark', function() {
return function(input) {
return input ? '正确' : '错误';
};
});
例子
表格排序
<div ng-app="myApp">
<div ng-controller="myCtrl">
<table>
<tr>
<th ng-click="f='name'; rev=!rev">名字</th>
<th ng-click="f='age'; rev=!rev">年龄</th>
</tr>
<tr ng-repeat="o in data | orderBy: f : rev">
<td>{{ o.name }}</td>
<td>{{ o.age }}</td>
</tr>
</table>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.data = [
{name: 'B', age: 4},
{name: 'A', age: 1},
{name: 'D', age: 3},
{name: 'C', age: 3},
];
});
</script>
AngularJS 服务(Service)
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用
服务的优点
AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好
常用内置服务
$location 对应window.location
$http 向服务器发送请求
$timeout 对应window.setTimeout
$interval 对应window.setInterval
创建自定义服务
声明
方式一: 使用service方法
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
方式二: 使用factory方法
app.service('hexafy', function() {
var myFunc = function (x) {
return x.toString(16);
}
return myFunc;
});
方式三:使用$provide来定义
使用
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义
$http
发送请求
示例
var p = $http({
method: 'GET',
url: '/json'
});
p.success(function(response, status, headers, config){
$scope.name = response.name;
});
参数
method 方法
url 路径
params GET请求的参数
data post请求的参数
headers 头
transformRequest 请求预处理函数
transformResponse 响应预处理函数
cache 缓存
timeout 超时毫秒，超时的请求会被取消
withCredentials 跨域安全策略的一个东西
便捷写法
$http.delete(url, config)
$http.get(url, config)
$http.head(url, config)
$http.jsonp(url, config)
$http.post(url, data, config)
$http.put(url, data, config)
依赖注入
当控制器构造的时候，AngularJS的依赖注入器会将这些服务注入到你的控制器中
只需要在控制器的构造函数里面作为参数声明出所需服务的名字
压缩问题
由于AngularJS是通过控制器构造函数的参数名字来推断依赖服务名称的。
所以如果你要压缩代码，它所有的参数也同时会被压缩，这时候依赖注入系统就不能正确的识别出服务了。
解决方式一:
app.$inject = ['$http'];
app.controller('myCtrl', function($http) {
...
});
解决方式二:
app.controller('myCtrl', ['$http', function($http) {
...
}]);
AngularJS 内置方法
转换
angular.lowercase() 将字符串转换为小写
angular.uppercase() 将字符串转换为大写
angular.copy() 数组或对象深度拷贝
angular.forEach() 对象或数组的迭代函数
比较
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
angular.fromJSON() 反序列化 JSON 字符串
angular.toJSON() 序列化 JSON 字符串
基础
angular.bootstrap() 手动启动 AngularJS
angular.element() 包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。
angular.module() 创建，注册或检索 AngularJS 模块
AngularJS 包含
可以在 HTML 中包含 HTML 文件
使用 ng-include 指令来包含 HTML 内容
示例 <div ng-include="'b.html'"></div>
多视图和路由(暂时不会)
index.html
<div ng-app="phonecat">
<div ng-view></div>
</div>
<script>
angular.module('phonecat', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
}]);
function PhoneListCtrl($scope) {
}
function PhoneDetailCtrl($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}
</script>
otherwise使得当浏览器地址不能匹配我们任何一个路由规则时，触发重定向到/phones
phone-list.html
这是list页面
phone-detail.html
这是detail页面,phoneId:{{phoneId}}
AngularJS 事件
AngularJS 支持以下事件:
ng-click
ng-dbl-click
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-keydown
ng-keyup
ng-keypress
ng-change
ng-click
点击事件
<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">隐藏/显示</button>
<p ng-hide="myVar">你好</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
}
});
</script>
事件对象
可使用$event
angularJs
最新推荐文章于 2022-04-27 19:46:52 发布
扫一扫
484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
