angularJS基础笔记

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

AngularJS 其特性：
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。不用依赖JQ。例子:<script src="js/Angular.js"></script>
AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。

AngularJS 表达式与 JavaScript 表达式
类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

1、ng-app=" " 定义angularJS的使用范围；
2、ng-init="变量=值;变量='值'" 初始化变量的值，有多个变量时，中间用分号隔开；
3、ng-model="变量" 定义变量名；
4、ng-bind="变量" 绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。
但是一般都用双重花括号来获取变量的值，比如：{{变量}}。
5、HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

例子:input输入了什么,那么Hello后面就跟什么,实现了数据的绑定
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>

例子:初始化变量值为多少,姓名后面就跟什么
<div ng-app="" ng-init="firstName='Johns'">
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>

例子:如果变量初始化过,那么ng-model也能直接显示出来
<div ng-app="" ng-init="firstName='John'">
<p>在输入框中尝试输入:</p>
<p>姓名: <input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>
</div>

解析:
如果您移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。
ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

AngularJS 表达式
前面说到双大括号和 ng-bind 指令有异曲同工之妙。
有点像jsp的out.pring(),用以输出数据。
双大括号里可以包含文字、运算符和变量。且会计算出来
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }} 或{{ 5*5 }}

AngularJS 对象
例子:AngularJS 对象就像 JavaScript 对象:
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.lastName }}</p>
</div>

AngularJS 数组
例子:AngularJS 数组就像 JavaScript 数组：
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>

ng-repeat 指令会重复一个 HTML 元素：
例子:.Jani .Hege .Kai 会输出三个标签元素
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>

例子:.Jani，Norway .Hege，Sweden .Kai，Denmark会输出三个标签元素
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}</li>
</ul>
</div>

AngularJS 模块
模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块。
例子:
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>

添加控制器
你可以使用 ng-controller 指令来添加应用的控制器:
例子:
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>

AngularJS 应用
例子:利用JS赋值
<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', []); //AngularJS 模块(Module)定义了 AngularJS 应用。模块名称
app.controller('myCtrl', function($scope) { //AngularJS 控制器(Controller)用于控制 AngularJS 应用。
$scope.firstName= "John"; //控制器名称+函数
$scope.lastName= "Doe"; //范围scope(本页).lastName(变量)='vlaue'
});
</script>

创建自定义指令。
AngularJS 通过 ng-directives 扩展了 HTML。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令,runoobDirective,但在使用它时需要以'-'分割, runoob-directive:

例子:会输出<h1>自定义指令!</h1>(用div效果一样)
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<div runoob-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>

例子:通过类名显示,必须设置restrict为'C'
<body ng-app="myApp">
<div class="runoob-directive"></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "C",
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>

例子:通过注释显示,必须设置 restrict : "M",replace : true,
<body ng-app="myApp">

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "M",
replace : true,
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>

例子:通过添加 restrict 属性,并设置值为 "A", 来设置指令只能通过属性的方式来调用,默认为EA
<runoob-directive></runoob-directive> //不能显示(此为元素名使用)
<div runoob-directive></div> //可以显示(此为属性使用)
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用

验证用户输入
例子:通过(form.name)+(input.name)+$error+(input.type),ng-show为true时显示
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

应用状态
ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):
例子:通过form.name+input.name+$error(状态值)
<form ng-app="" name="myForm" ng-init="myText = '[email protected]'">
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>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>
<p>invalid: {{myForm.myAddress.$invalid}} (如果无效则为true)。</p>
<p>error: {{myForm.myAddress.$error}} (有错则为集合)。</p>
</form>

例子:验证
<form ng-app="" ng-init="user='John Doe';email='[email protected]'"
name="myForm">
<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>
<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>

CSS 类
ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：
ng-empty 空的

ng-not-empty 非空的
ng-touched 点击的
ng-untouched 不变的
ng-valid
有效的
ng-invalid 无效的
ng-dirty 改变的
ng-pending 待定的
ng-pristine 原始的
例子:如果为无效值,将会执行input.ng-invalid(中间无空格)的css,required让其非空,
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<form ng-app="" name="myForm">
输入你的名字:
<input name="myName" ng-model="myText" required>
</form>
<p>编辑文本域，不同状态背景颜色会发送变化。</p>
<p>文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。</p>

AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即JavaScript函数，可以添加或修改属性。
scope是模型。
scope是一个JavaScript对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

AngularJS Scope(作用域)
如何使用 Scope
当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:
<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', []); //创建对象AngularJS 模块(Module)
app.controller('myCtrl', function($scope) { //获取对象的控制器
$scope.name = "Runoob"; //控制器给name赋值
$scope.sayHello = function() { //创建sayHello()方法
$scope.greeting = 'Hello ' + $scope.name + '!'; //再次赋值给greeting
};
});
</script>

所有的应用都有一个 $rootScope，它可以作用在ng-app指令包含的所有 HTML 元素中。
$rootScope可作用于整个应用中。是各个controller中scope 的桥梁。用rootscope定义的值，可以在各个controller中使用。
例子:同一个app内,不同的控制器,相同的值。
<div ng-app="myApp">
<div ng-controller="myCtrl">
<h1>姓氏为 {{lastname}} 家族成员:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<div ng-controller="myCtrl_1">
<div>scope中的值是{{lastname_1}}</div>
<div>rootscope中的值是{{$root.lastname}}</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
app.controller('myCtrl_1', function($scope, $rootScope) {
$scope.lastname_1 = $rootScope.lastname;
});
</script>

AngularJS 控制器
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建
控制器也可以有方法（变量和函数）
<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>

在大型的应用程序中，通常是把控制器存储在外部文件中。
只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可：
<script src="personController.js"></script>

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

例子:uppercase
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | uppercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.lastName = "Doe",
});
</script>

例子:orderBy(根据二十六字母排序)
Kai, Denmark
Jani, Norway
Hege, Sweden

<div ng-app="myApp" ng-controller="namesCtrl">
<p>循环对象:</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
</script>

自定义过滤器
以下实例自定义一个过滤器 reverse，将字符串反转：
例子:姓名: boonuR
<div ng-app="myApp" ng-controller="myCtrl">
姓名: {{ msg | reverse }}
</div>
<script>
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("");
}
});
</script>

AngularJS 服务(Service)
AngularJS 中你可以创建自己的服务，或使用内建服务。
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。

有个 $location 服务，它可以返回当前页面的 URL 地址。
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});

$location 对比 window.location
window.location $location.service
目的允许对当前浏览器位置进行读写操作允许对当前浏览器位置进行读写操作
API 暴露一个能被读写的对象暴露jquery风格的读写器
是否在AngularJS应用生命周期中和应用整合否可获取到应用生命周期内的每一个阶段，并且和$watch整合
是否和HTML5 API的无缝整合否是（对低级浏览器优雅降级）
和应用的上下文是否相关否，window.location.path返回"/docroot/actual/path" 是，$location.path()返回"/actual/path"

$timeout 服务
AngularJS $timeout 服务对应了 JS window.setTimeout 函数。
<div ng-app="myApp" ng-controller="myCtrl">
<p>两秒后显示信息:</p>
<h1>{{myHeader}}</h1>
</div>
<p>$timeout 访问在规定的毫秒数后执行指定函数。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
</script>

$interval 服务
AngularJS $interval 服务对应了 JS window.setInterval 函数。
<div ng-app="myApp" ng-controller="myCtrl">
<p>现在时间是:</p>
<h1>{{theTime}}</h1>
</div>
<p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
</script>

创建自定义服务
你可以创建自定义服务，链接到你的模块中：
<div ng-app="myApp" ng-controller="myCtrl">
<p>255 的16进制是:</p>
<h1>{{hex}}</h1>
</div>
<p>自定义服务，用于转换16进制数：</p>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() { //定义'hexafy'的服务
this.myFunc = function (x) { //服务的函数
return x.toString(16); //将其转换为16进制的数
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255); //调用刚刚创建的服务
});
</script>

结合过滤器，服务使用
例子:
<div ng-app="myApp" ng-controller="myCtrl">
<p>在获取数组 [255, 251, 200] 值时使用过滤器:</p>
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
<p>过滤器使用服务将10进制转换为16进制。</p>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
app.controller('myCtrl', function($scope) {
$scope.counts = [255, 251, 200];
});
</script>

$http 服务
$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。
$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch

POST 与 GET 简写方法格式：
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

<div ng-app="myApp" ng-controller="siteCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country +', '+x.Url}}
</li>
</ul>
</div>
//v1.5一下的版本
var app = angular.module('myApp', []).controller('siteCtrl', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/sites.php")
.success(function (response) {$scope.names = response.sites;});
});
//v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。
<script>
angular.module('myApp', []).controller('siteCtrl', function($scope, $http) {
$http({
method: 'GET',
url: '获取json数据的url'
}).then(function successCallback(response) {
$scope.names = response.data.sites;
}, function errorCallback(response) {
// 请求失败执行代码
});

});
</script>

例子:欢迎信息:data
<div ng-app="myApp" ng-controller="myCtrl">
<p>欢迎信息:</p>
<h1>{{myWelcome}}</h1>
</div>
<p> $http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中。</p>
<script>
angular.module('myApp', []).controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) { //get方法,url为welcome.htm
$scope.myWelcome = response.data;
});
});
</script>

AngularJS Select(选择框)
AngularJS 可以使用数组或对象创建一个下拉列表选项。使用对象作为数据源, x 为键(key), y 为值(value):

例子:两种方法,都可以调用
ng-options:
<div ng-app="myApp" ng-controller="myCtrl">
//ng-init="selectedName = names[0]"初始化显示的值、绑定的数据为selectedName、key定义了,value默认为key
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>
ng-repeat:
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
</script>

例子:两种方法,都可以调用
ng-options:选择的值是一个对象
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>
</div>
ng-repeat:有局限性，选择的值是一个字符串:
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>你选择的是: {{selectedSite}}</h1>
</div>
<script>
var app = angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
});
</script>

使用对象作为数据源, x 为键(key), y 为值(value):
x为car01 y为值{brand : "Ford", model : "Mustang", color : "red"}
<div ng-app="myApp" ng-controller="myCtrl">
<p>选择一辆车:</p>
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>你选择的是: {{selectedCar.brand}}</h1>
<h2>模型: {{selectedCar.model}}</h2>
<h3>颜色: {{selectedCar.color}}</h3>
<p>注意选中的值是一个对象。</p>
</div>
<script>
var app = angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
}
});
</script>

AngularJS 表格
ng-repeat 指令可以完美的显示表格。
<table>
<tr ng-repeat="x in names"> //ng-repeat="x in names | orderBy : 'Country'" 可以用拦截器排序
<td>{{ $index + 1 }}</td> //显示序号 ($index)从0开始
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>

使用 $even 和 $odd 偶奇(从0开始)
<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>
</tr>
</table>

ng-disabled 指令
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
例子:
<div ng-app="" ng-init="mySwitch=true"> //初始化mySwitch的值
<p><button ng-disabled="mySwitch">点我!</button></p> //不能点击为true
<p><input type="checkbox" ng-model="mySwitch"/>按钮</p> //默认点击了,value为true
<p>{{ mySwitch }}</p> //去除了checkbox后,才可以点击button
</div>

ng-show 指令
ng-show 指令隐藏或显示一个 HTML 元素。
例子:
<p ng-show="true">我是可见的。</p>
<p ng-show="false">我是不可见的。</p>
<div ng-app="" ng-init="hour=13"> //且可以参与计算
<p ng-show="hour > 12">我是可见的。</p>

ng-hide 指令(与show相反)
ng-hide 指令用于隐藏或显示 HTML 元素。
<div ng-app="">
<p ng-hide="true">我是不可见的。</p>
<p ng-hide="false">我是可见的。</p>
</div>

AngularJS 事件
AngularJS 有自己的 HTML 事件指令。

ng-click 指令
ng-click 指令定义了 AngularJS 点击事件。
例子:利用ng-click进行简单的计算
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>

例子:利用ng-click执行函数
<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">隐藏/显示</button>
<p ng-hide="myVar">
名: <input type=text ng-model="firstName"><br>
姓: <input type=text ng-model="lastName"><br><br>
姓名: {{firstName + " " + lastName}}
</p>
</div>
<script>
var app = angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar; //更改显示隐藏状态
}
});
</script>

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

Checkbox（复选框）
checkbox 的值为 true 或 false，可以使用 ng-model 指令绑定，它的值可以用于应用中：
<div ng-app="">
<form>
选中复选框，显示标题:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My Header</h1>
</div>

单选框
通过ng-switch选取绑定元素,通过ng-switch-when选取元素值
<body ng-app="">
<form>
选择一个选项:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</p>
</div>
<div ng-switch-when="tuts">
<h1>Tutorials</h1>
<p>Learn from examples.</p>
</div>
<div ng-switch-when="cars">
<h1>Cars</h1>
<p>Read about cars.</p>
</div>
</div>
<p>ng-switch 指令根据单选按钮的选择结果显示或隐藏 HTML 区域。</p>
</body>

也可以用在下拉菜单上:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</p>
</div>
<div ng-switch-when="tuts">
<h1>Tutorials</h1>
<p>Learn from examples.</p>
</div>
<div ng-switch-when="cars">
<h1>Cars</h1>
<p>Read about cars.</p>
</div>
</div>

HTML 表单
重置表单时
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button> //点击时,触发reset()事件:让master的值给user
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p> //因而不会出现master也随之改动,不用copy则会变动
</div>
<script>
angular.module('myApp', []).controller('formCtrl', function($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master); //利用angular.copy将值复制,不会出现值双向绑定
};
$scope.reset();
});
</script>

AngularJS API
API 意为 Application Programming Interface（应用程序编程接口）。
API 描述
angular.lowercase($scope.x) 转换字符串为小写
angular.uppercase($scope.x) 转换字符串为大写
angular.isString($scope.x) 判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber($scope.x) 判断给定的对象是否为数字，如果是返回 true。

AngularJS 包含
//类似JSP的include
如果包含的文件"runobb.htm"中有AngularJS代码,它将被正常执行
使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:
<body ng-app="">
<div ng-include="'runoob.htm'"></div>
</body>

AngularJS 动画
AngularJS 提供了动画效果，可以配合 CSS 使用。
AngularJS 使用动画需要引入 angular-animate.min.js 库。
还需在应用中使用模型 ngAnimate：
<body ng-app="ngAnimate">

例子:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}
.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
}
</style>
<body ng-app="ngAnimate"> //如果ng-app='myApp'被占用,可调用angular.module('myApp', ['ngAnimate']);
<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
</body>

AngularJS 依赖注入
AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：

value:Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）
// 定义一个模块
var mainApp = angular.module("mainApp", []);
// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);
// 将 "defaultInput" 注入到控制器
//计算服务CalcService.square();square为计算平方
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});

factory:Factory是一个函数用于返回值。在service和controller需要时创建。通常我们使用 factory 函数来计算或返回值。
// 定义一个模块
var mainApp = angular.module("mainApp", []);
//创建factory"MathService"用于两数的乘积
mainApp.factory('MathService', function() {
//清空factory工厂
var factory = {};
//创建返回值的函数
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
service:服务,也在service和controller之间
// 创建名称为'CalcService'的服务,并向服务中注入 factory "MathService",使用工厂的该函数
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});

provider:供应商
AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。
Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。
// 定义一个模块
var mainApp = angular.module("mainApp", []);
//模块配置,引入$provide
// 使用provider创建名为'MathService'的factory定义一个方法用于计算两数乘积
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
//初始化工厂
var factory = {};
//创建函数
factory.multiply = function(a, b) {
return a * b;
}
//返回函数
return factory;
};
});
});

以下实例提供了以上几个依赖注入机制的演示。
AngularJS 实例 - factory
<div ng-app = "mainApp" ng-controller = "CalcController"> //定义模块控制器
<p>输入一个数字: <input type = "number" ng-model = "number" /></p> //值number
<button ng-click = "square()">X<sup>2</sup></button> //点击事件
<p>结果: {{result}}</p> //结果
</div>
<script>
var mainApp = angular.module("mainApp", []); //获取模块
//将值注入模块当中去
mainApp.value("defaultInput", 5); //定义简单的值
mainApp.factory('MathService', function() { //创建一个factory,名称为'MathService'
var factory = {}; //清空factory
factory.multiply = function(a, b) { //创建multiply(×)函数,接受参数并处理参数
return a * b;
}
return factory;
}); //创建名称为'CalcService'的服务,
mainApp.service('CalcService', function(MathService){ //并向服务中注入 factory "MathService"
this.square = function(a) { //创建服务中函数square,并调工厂的该函数
return MathService.multiply(a,a) ;
}
});
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) { //绑定控制器,调用服务加参数
$scope.number = defaultInput; //传值
$scope.result = CalcService.square($scope.number); //默认的计算
$scope.square = function() { //点击后计算
$scope.result = CalcService.square($scope.number);
}
});
</script>

AngularJS 实例 - provider
<div ng-app = "mainApp" ng-controller = "CalcController"> //定义模块控制器
<p>输入一个数字: <input type = "number" ng-model = "number" /></p> //值number
<button ng-click = "square()">X<sup>2</sup></button> //点击事件
<p>结果: {{result}}</p> //结果
</div>
<script>
var mainApp = angular.module("mainApp", []); //获取模块
mainApp.value("defaultInput", 5); //定义简单的值
mainApp.config(function($provide) { //模块配置,引入$provide
$provide.provider('MathService', function() {// 使用provider创建名为'MathService'的factory定义一个方法用于计算两数乘积
this.$get = function() {
//初始化工厂
var factory = {};
//创建函数
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
}); //创建名称为'CalcService'的服务,
mainApp.service('CalcService', function(MathService){ //并向服务中注入 factory "MathService"
this.square = function(a) { //创建服务中函数square,并调工厂的该函数
return MathService.multiply(a,a) ;
}
});
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput; //传值
$scope.result = CalcService.square($scope.number); //默认的计算
$scope.square = function() { //点击后计算
$scope.result = CalcService.square($scope.number);
}
});
</script>

constant:constant(常量)用来在配置阶段传递数值。
mainApp.constant("configParam", "constant value");

AngularJS 路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记实现，例如：
http://runoob.com/#/first

例子:
1、载入了实现路由的 js 文件：angular-route.js。
2、包含了 ngRoute 模块作为主应用模块的依赖模块。
angular.module('routingDemoApp',['ngRoute'])
3、<div ng-view></div>
<body ng-app='routingDemoApp'>
<h2>AngularJS 路由应用</h2>
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/computers">电脑</a></li>
<li><a href="#/printers">打印机</a></li>
<li><a href="#/blabla">其他</a></li>
</ul>
<div ng-view></div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
angular.module('routingDemoApp',['ngRoute']) //引入依赖
.config(['$routeProvider', function($routeProvider){ //引入$routeProvide路由提供商
$routeProvider //配置路由规则.when时候,template参数
.when('/',{template:'这是首页页面'}) //when(path,object) & otherwise(object)
.when('/computers',{template:'这是电脑分类页面'}) //第一个参数是 URL 或者 URL 正则规则。
.when('/printers',{template:'这是打印机页面'}) //第二个参数是路由配置对象。
.otherwise({redirectTo:'/'});
}]);
</script>

路由设置对象
路由配置对象语法规则如下：
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});

template:
如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数

templateUrl:
如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：
$routeProvider.when('/computers', {
templateUrl: 'views/computers.html',
});

controller:
function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。

controllerAs:
string类型，为controller指定别名。

redirectTo:
重定向的地址。

resolve:
指定当前controller所依赖的其他模块。

例子:
<body ng-app="ngRouteExample" class="ng-scope"> //定义模块控制器
<script type="text/ng-template" id="embedded.home.html"> //定义type="text/ng-template" id
<h1> Home </h1>
</script>
<script type="text/ng-template" id="embedded.about.html">
<h1> About </h1>
</script>
<div>
<div id="navigation">
<a href="#/home">Home</a>
<a href="#/about">About</a>
</div>
<div ng-view="">
</div>
</div>
<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute']) //导入依赖
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;}) //创建两个控制器
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) { //配置路由
$routeProvider.
when('/home', { //当为/home时,跳转路径+控制器名称
templateUrl: 'embedded.home.html',
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'embedded.about.html',
controller: 'AboutController'
}).
otherwise({
redirectTo: '/home'
});
});
</script>
</body>

AngularJS 应用实例
例子:编辑器
<body ng-app="myNoteApp" ng-controller="myNoteCtrl"> //定义模块控制器
<textarea ng-model="message" cols="40" rows="10"></textarea> //绑定数据
<p>
<button ng-click="save()">保存</button> //点击事件
<button ng-click="clear()">清除</button> //点击事件
</p>
<p>剩余字数: <span ng-bind="left()"></span></p> //绑定数据
<script>
angular.module("myNoteApp", []).controller("myNoteCtrl", function($scope) {
$scope.message = ""; //初始化message值
$scope.left = function() {return 100 - $scope.message.length;}; //left()函数返回值
$scope.clear = function() {$scope.message = "";}; //清除message的值
$scope.save = function() {alert("Note Saved");}; //弹出框
});
</script>

AngularJS 参考手册
AngularJS 指令
本教程用到的 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

验证解析：Angular 验证。
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 模块

angularJS基础笔记

我真的从测试转成了开发......

零基础写框架(2)：故障排查和日志基础

芯片产业管理和营销指北（1）—— 产品线经理主要职能

记一次疑似JVM内存泄漏的排查过程

简单4步，带你用华为云MetaStudio制作数字人短片

java面試基礎(一)

EL表達式各種用法(原創筆記)

java基礎筆記(三)

JAVA利用exe4j軟件打包成exe

List與Map之間的聯繫

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結