angularjs私人学习笔记
俗话说“好记性不如烂笔头”，编程的海洋如此的浩大，养成做笔记的习惯是成功的一步！
此笔记主要是angularjs1.6.2版本的笔记，并且笔记都是博主自己一字一字编写和记录，有错误的地方欢迎大家指正。
一、基础知识：
1、angularjs 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。angularjs 通过 指令 扩展了 HTML，且通过
表达式 绑定数据到 HTML。它诞生于2009年，由Misko Hevery 等人创建，后为Google所收购，已经被用于Google的多款产品中。
angularjs有诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。
官方网站： https://angularjs.org/
入门教程推荐网址：http://www.runoob.com/angularjs/angularjs-tutorial.html
备注：
bootstrap的入门教程推荐网址：http://www.runoob.com/bootstrap/bootstrap-tutorial.html
2、angularjs 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
(1) 把应用程序数据绑定到 HTML 元素。
(2) 可以克隆和重复 HTML 元素。
(3) 可以隐藏和显示 HTML 元素。
(4) 可以在 HTML 元素"背后"添加代码。
(5) 支持输入验证。
3、angularjs 主要特色是通过指令的形式扩展html，使得html标签拥有更多强悍的功能。
示例代码如下：
<div ng-app="">
<p>
名字：<input type="text" ng-model="name" />
</p>
<div>
输入的名字为：{{name}}
</div>
</div>
其中属性 ng-app、ng-model等都是angularjs的指令。
4、常用的指令：
ng-app:
指定应用名称。
ng-controller：指定控制器名称。
ng-init：初始化指令，通常可用于声明变量，或者指定初始值。
ng-model：模型绑定，用于绑定某个某个变量。
ng-bind：变量绑定，相当于读取变量数据。
ng-show：是否显示当前元素。true表示显示，false表示隐藏。
ng-hide：是否隐藏当前元素。与ng-show相反，true表示隐藏，false表示显示。
ng-class：与ng-model配合使用，读取ng-model的value作为class属性值。
ng-repeat：读取属性值的循环变量，然后循环添加当前元素到页面。
ng-options：读取属性值的循环变量，并循环创建option元素到当前元素内。
ng-if：条件判断。为true时显示当前元素，否则不显示。通常在循环中配合$odd和$even对象。
ng-disabled： 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
ng-click：指令定义了 AngularJS 点击事件。
5、angularjs的模块，相当于是一个容器，所有自定义的变量、控制器、服务、过滤器等，都是只在此模块中有效，从而不影响其他的模块。
6、angularjs还扩展了其他模块，根据需要引入扩展模块的js，例如想实现动画需要引入angular-animate.js，
想实现路由的功能则引入angular-route.js
二、使用笔记：
1、angularjs主要分为几个功能模块：
（1）指令：AngularJS 指令是以 ng 作为前缀的 HTML 属性。
例如：
<div ng-app="" ng-init="firstName='John'">
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>
（2）表达式：AngularJS 表达式写在双大括号内：{{ expression }}。
例如：
<div ng-app="">
<p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>
（3）应用：AngularJS 模块（Module） 定义了 AngularJS 应用。
控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。
例如：
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
2、AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
例如：ng-app="" 写法等于 data-ng-app=""
3、自定义指令：
除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive。
例如:
<body ng-app="myApp">
<!--使用元素名调用指令-->
<runoob-directive></runoob-directive>
<!--使用属性来调用指令-->
<div runoob-directive></div>
<!--使用类名来调用指令-->
<div class="runoob-directive"></div>
<!--使用注释来调用指令，注意directive:是固定格式-->
<!-- directive:run-dir -->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
//设置可调用指令的方式，默认只可以通过元素名和属性调用。
restrict : "EACM",
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
4、scope 作用域是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
而scope 是模型，所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
<div ng-app="myApp" ng-controller="myCtrl">
<!--在html元素中，直接使用作用域的属性即可，不需要加入$scope前缀引用-->
<h1>{{lastname}} 家族成员:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
//注意参数名字，angularjs框架底层是根据参数名判断的，而不是参数的顺序。
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
</script>
5、angularjs的过滤器：可以使用一个管道字符 | 添加到表达式和指令中。
(1)系统自带的过滤器：
currency
格式化数字为货币格式。
filter
从数组项中选择一个子集。
lowercase
格式化字符串为小写。
orderBy
根据某个表达式排列数组。
uppercase
格式化字符串为大写。
例如：
<div ng-app="mymod" ng-controller="mycrl">
<p>
名字：<input type="text" ng-model="name" />
</p>
<div>
<!--uppercase就是过滤器，通过|来调用-->
输入的大些名字为：{{name | uppercase}}
</div>
</div>
(2)自定义过滤器：
var mymod = angular.module("mymod",[]);
//myformat是过滤器名称，后面的函数里再返回函数对象，返回的函数对象就是格式化需要调用的对象
//返回函数的第一个参数是格式化的数据，后面参数是格式化时传入的参数。
mymod.filter("myformat", function() {
return function(input, isUppercase) {
var out = "fm:" + input
if (isUppercase) {
out = out.toUpperCase();
}
return out;
}
});
使用方式：
<div ng-app="mymod" ng-controller="mycrl">
<p>
名字：<input type="text" ng-model="name" />
</p>
<div>
<!--myformat就是过滤器，true就是格式化时传入的参数-->
输入的大些名字为：{{name | myformat:true}}
</div>
</div>
6、angularjs的服务：
(1)服务是一个函数或对象，可在你的 AngularJS 应用中使用，AngularJS 内建了30 多个服务，
比较常用的服务有：$location、$http、$timeout、$interval等。
使用例子：
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
//使用服务时，必须先在函数参数中说明服务
$scope.myUrl = $location.absUrl();
});
(2)自定义服务：
mymod.service("myser", function() {
this.addSerFlag = function (arg) {
return "myser:" + arg
}
})
使用方式：
var mymod = angular.module("mymod",[]);
//在controller控制器中使用自定义的服务。
mymod.controller("mycrl", function($rootScope, myser){
$rootScope.name = myser.addSerFlag("李四abc")
});
//在自定义的过滤器中使用自定义的服务。
mymod.filter("myformat", ["myser", function(myser) {
return function(input,isUppercase) {
var out = myser.addSerFlag("fm:" + input)
if (isUppercase) {
out = out.toUpperCase();
}
return out;
}
}]);
7、事件绑定：
<div ng-app="myApp" ng-controller="myCtrl">
<!--点击事件可以不是函数，直接进行简单的运算操作-->
<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p>
<!--点击事件绑定函数-->
<button ng-click="fun()">弹框</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//定义元素
$scope.count = 0;
$scope.fun = function () {
alert($scope.count);
}
});
</script>
8、表单校验：
angular对表单校验也有支持，表单校验有几个常用的属性：
属性 描述
$dirty
表单有填写记录
$valid
字段内容合法的
$invalid
字段内容是非法的
$pristine
表单没有填写记录
使用表单校验是，必须通过form的name来做绑定个子元素的name，例如myForm.myEmail
例子：
<form name="myForm" novalidate >
邮箱：<input name="myEmail" ng-model="myEmail" required type="email"/>
<span style="color: red;" ng-show="myForm.myEmail.$dirty && myForm.myEmail.$invalid">
<span ng-show="myForm.myEmail.$error.required">这邮箱是必须的</span>
<span ng-show="myForm.myEmail.$error.email">这邮箱是非法的</span>
</span>
</form>
9、使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容，ng-include 指令除了可以包含 HTML 文件外，
还可以包含 AngularJS 代码。
默认情况下， ng-include 指令不允许包含其他域名的文件。如果你需要包含其他域名的文件，你需要设置域名访问白名单：
例子：
<body ng-app="myApp">
<div ng-include="'http://c.runoob.com/runoobtest/angular_include.php'"></div>
<script>
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
//设置跨域白名单
$sceDelegateProvider.resourceUrlWhitelist([
'http://c.runoob.com/runoobtest/**'
]);
});
</script>
</body>
三、附加：
1、angularjs框架拥有许多实用的工具方法，常用的工具方法用：
'bootstrap': bootstrap,
'copy': copy,
'extend': extend,
'merge': merge,
'equals': equals,
'element': jqLite,
'forEach': forEach,
'injector': createInjector,
'noop': noop,
'bind': bind,
'toJson': toJson,
'fromJson': fromJson,
'identity': identity,
'isUndefined': isUndefined,
'isDefined': isDefined,
'isString': isString,
'isFunction': isFunction,
'isObject': isObject,
'isNumber': isNumber,
'isElement': isElement,
'isArray': isArray,
'version': version,
'isDate': isDate,
'lowercase': lowercase,
'uppercase': uppercase,
'callbacks': {$$counter: 0},
'getTestability': getTestability,
'reloadWithDebugInfo': reloadWithDebugInfo,
'$$minErr': minErr,
'$$csp': csp,
'$$encodeUriSegment': encodeUriSegment,
'$$encodeUriQuery': encodeUriQuery,
'$$stringify': stringify
用法：angular.copy(arg); //angular是框架定义的window属性（全局变量），所有工具类的使用都是通过借助该变量来引用。
