MVC模式：模型（内存）-View（页面）-Controller（业务逻辑）
angular1.5版本依赖的还是Javascript；angular2+依赖的是typescript。两者语法不同.
JQuery库是javascript函数库，封装简化DOM操作；
Angular是JS结构化框架，主体不是DOM，而是页面中的动态数据。
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
AngularJS常用的在线引用地址：
<script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
Angular表达式{{}}和命令ng-bind功能相同。
AngularJS 应用程序由 ng-app 定义。应用程序ng-app一般在<body>中定义，表示控制范围为<body>，会自动生成一个$rootScope根作用域对象来接管所有属性. 只有添加ng-app，表达式才会生效.
ng-model是双向数据绑定（ng-model相当于html页面和内存间的管道），而{{}}是单向数据绑定（内存->页面/M->V），ng-init是单向数据绑定（页面->内存/V->M，命令写在html标签里）
ng-init：主要为当前作用域对象初始化数据。ng-app类似于Angular程序的启动main
控制器对象：用来控制Angular应用数据的实例对象。
ng-controller：指定控制器构造函数，Angular会自动New此函数创建控制器对象；
同时Angular还会创建一个新的作用域对象$scope，它是$rootScope的子对象；
在控制器函数中声名$scope形参（形参也只能是$scope），Angular会自动将$scope传入。
F12查看Web应用运行时的报错.
Ctrl+C：终止服务.
HTML调用外部控制器JS代不起作用的原因：（F12报错JS文件找不到，浏览器限制了直接对本地文件的访问）
虽然Angular应用程序是纯客户端代码，而且能够直接从文件系统中，在web浏览器中打开它们，但是最好从一个HTTP web服务器中供应它们。
特别是，为了安全原因，如果网页直接从文件系统中加载，很多现代浏览器不允许JavaScript发起服务器请求。
直接双击index.html跑，外部控制器JS代码可以执行。
$scope是什么？
$scope是一个普通的JavaScript对象。
=================== $scope =============================
$scope有什么作用？
$scope是一个作用域，是AngularJS表达式的执行环境，表达式中的变量值都是从表达式所在作用域的$scope对象上获取到的。
$scope是视图和控制器之间的胶水，是AngularJS实现MVC和双向绑定的基础。
$scope提供了$watch()方法，用来监控数据模型变化。
$scope提供了$apply()方法，该方法将任何数据模型的变化更新到视图上去。
$scope如何实现数据双向绑定的？同时展示了为什么$scope是AngularJS实现MVC的基础。原因：视图内容与$scope作用域对象的属性绑定，控制器通过将模型数据赋值给这些$scope上的属性值来改变视图，同时，视图变化时将变化后的值赋给$scope上的属性，控制器通过监控这些$scope值的变化，从而进行一些业务逻辑处理，例如，将新值传给服务器端保存。
各个$scope之间组成了一个树，父子之间通过$parent和$children属性相互引用. eg：console.log($scope.$parent);
当AngularJS执行表达式{{greeting.text}}，它会首先查找和当前节点相关的作用域中叫做greeting的属性。如果没找到，那就会继续向上层作用域搜索，直到根作用域。
哪些指令会创建$scope(子作用域）?
ng-controller、ng-repeat、 ng-switch、ng-view和ng-include 都会创建子作用域，并继承父作用域的属性和方法。
通过directive()方法定义的指令，如果返回对象中配置了scope属性为对象时，创建了一个孤立scope。
$scope.$watch("name", function(newValue, oldValue){ //function参数顺序如此
console.log("old: "+oldValue+" new:"+newValue);
})
============================== 控制器 =================================
控制器是什么?
Angularjs中的控制器是一个JavaScript函数。
控制器作用是什么?
控制是MVC的组成部分，是视图和数据模型桥梁。
控制器是实现业务逻辑的地方。控制器可以将一个独立的视图相关的业务逻辑封装在一个独立的容器函数中，便于后续维护。
在控制器中，可以设置作用域对象的初始状态。
在控制器中，可以给作用域添加事件函数。
如何创建一个控制器?
通过模块实例的controller()方法创建一个控制器。
通过ng-controller指令将创建的控制器与视图关联起来。
注：控制器函数中的this和$scope不是同一个东西.this表示控制器对象本身，$scope表示控制器函数中传进来的$scope对象. 因此可以在内部将$scope赋值给一个变量.
=========================== 表达式 ===============================
AngularJS表达式是什么？
AngularJS表达式类似Javascript的代码片段。
通常位于Html片段中，用于绑定数据，写在双大括号中如{{AngularJS表达式}}。
AngularJS表达式与JavaScript表达式的不同之处？
AngularJS表达式与JavaScript表达式不完全相同，因为AngularJS不会用Javascript的eval()函数去执行AngularJS表达式。 不过除了以下几个需要区别的地方以外，你可以把AngularJS表达式看成是Javascript表达式：
属性表达式：属性表达式是对应于当前的作用域的，不像Javascript对应的是window对象。
允许未定义值：执行表达式时，AngularJS能够允许undefined或者null，不像Javascript会抛出一个异常。
没有控制结构： 你不能在AngularJS表达式中使用“条件判断”、“循环”、“抛出异常”等控制结构。
过滤器： 你可以通过过滤器链来传递表达式的结果。例如将日期对象转变成指定的阅读友好的格式。
======================== 过滤器 ===============================
AngularJS过滤器是什么？
AngularJS过滤器是一种格式，只要你按照这种格式去写，就可以将数据变成你需要的样子。
AngularJS过滤器作用是格式化需要展示给用户的数据。
AngularJS过滤器分内置过滤器和自定义过滤器两种，两种过滤器的使用方法完全一样。内置过滤器是AngularJS内部定义好的，我们可以拿过来直接使用；如果内置过滤器不能满足我们的要求，可以根据业务需求自定义过滤器。
如何使用AngularJS过滤器？
AngularJS过滤器有两种使用方法：
方法一：在HTML中使用AngularJS过滤器，在模板绑定符号{{}}内通过”|”符号调用过滤器。
”|”符号前边是要进行格式化的AngularJS表达式；
”|”符号后边是采用的过滤器名字；
如果需要传递参数给过滤器，只要在过滤器名字后边加冒号”:”,冒号后写参数，如果有多个参数，依次给参数后加冒号；语法形式： {{ expression | filter2:参数 }}
如果有多个过滤器，可以用”|”分割来添加多个过滤器。
语法形式： {{ expression | filter1 | filter2 }}
方法二：在js代码中使用AngularJS过滤器，使用AngularJS提供的$filter服务来调用过滤器。
通过依赖注入方式将$filter注入到控制器中；
使用$filter服务的语法格式：
$filter(过滤器名字)(表达式, 参数)。//表达式即需要格式化的数据, 后面是需要传递给过滤器的其他参数.
例如： $filter(‘date’)(new Date(), “yyyy-MM-dd”);
自定义过滤器：
如何创建一个AngularJS过滤器？
通过AngularJS模块实例，调用filter()方法定义AngularJS过滤器
语法格式：filter(“过滤器名字”， function(){})。第二个参数是一个函数，这个函数必须返回一个函数，对输入内容的处理都在这个函数中。
============================ 指令 ====================================
AngularJS内置指令的特点？
AngularJS内置指令是AngularJS内部定义好的，用户可直接使用，不用再定义。
AngularJS一些内置指令重写了原生的HTML元素，扩展了这些标签的功能。例如：<form>支持表单验证。
AngularJS大部分内置指令都是HTML标签属性，都是以”ng-”前缀开头。这些内置指令提供了很多功能。例如：ng-app指令初始化一个应用程序；ng-model指令把元素值（input）绑定到应用程序。
以ng-开头的作为命名空间的指令都是AngularJS内部指令，所以，大家自定义指令时，不要使用ng-作为前缀。
AngularJS自定义指令是什么？
从表现形式上看，AngularJS指令有四种形态：HTML元素、HTML元素属性、HTML样式类()名、HTML注释。
从功能上看class，AngularJS指令是运行在HTML中的函数，可以改变 DOM、增加DOM、为DOM增加行为功能等等。指令就是DOM与逻辑行为的媒介，本质就是DOM绑定的独立逻辑行为函数。
如何创建一个指令？
使用angular.directive()方法创建指令。
语法格式：angular.directive(“directiveName”, directiveFactory)。
参数说明：
directiveName是指令名字；
directiveFactory是指令配置函数，该函数必须返回一个对象，对象属性是指令的
各个配置项。
自定义指令：
var myApp = angular.module("myApp", []);
myApp.directive("hello", function(){ //directive自定义一个命令
return{
restrict: "E", //"E"是element的缩写,表示该命令以html元素的方式使用; "A"表示用作属性; "C"表示样式类; "M"表示注释
template: "<div>hello angular</div>", //"Template"表示将指令替换成什么样式的模板(页面).可以是多个比较复杂的模板封装成一个指令
replace: true //<div myDirect></div>当replace为true时, myDirect对应的模板会完全替换<div>DOM元素；若为false,则myDirect对应的模板会插入到<div>内部.
}
});
自定义指令的调用方式：
元素名：
<runoob-directive></runoob-directive> //此时restrict："E"
属性：
<div runoob-directive></div> //此时restrict："A"
类名：
<div class="runoob-directive"></div> //此时restrict："C"
注释：
<!-- directive: runoob-directive --> //此时restrict："M" --> 注释内容前后都必须有一个空格。
若想同时满足多种调用方式：restrict：“E,A,C,M” （或EACM）
===================== 依赖注入 =======================================
依赖对象：完成某个特定的功能需要某个对象才能实现，这个对象就是依赖对象。
依赖注入：依赖的对象以形参的形式被注入进来使用，这种方式就是声明式依赖注入。
// 方式1：推断式（不推荐使用）
myApp.controller("myCtrl", function ($scope, $filter) {
$scope.date = $filter("date")(new Date(), "yyyy-MM-dd HH:mm");
})
// 方式2：显示注入
myApp.controller("myCtrl", controllerFn);
controllerFn.$inject = ["$scope", "$filter"];
function controllerFn($scope, $filter) {
$scope.date = $filter("date")(new Date(), "yyyy-MM-dd HH:mm"); } //方式3：行内注入 myApp.controller("myCtrl", ["$scope", "$filter", function ($scope, $filter) { $scope.date = $filter("date")(new Date(), "yyyy-MM-dd HH:mm"); }])
开发的两种方式：
需求：将数组里的每项值加10输出
var arr = [1,2,3,4,5];
var newArr1 = [];
var newArr2 = [];
方式1：声明式（更加注重的是执行的结果，声明式是对命令式的局部包装，像选择题）
var newArr2 = arr.map(function(item, index){
return item+10; }) console.log(newArr2); 方式2：命令式（更加注重的是执行的过程，像解答题） for(var i = 0; i < arr.length; i++){ var value = arr[i] + 10; newArr1.push(value); } console.log(newArr1);
<body ng-app="myApp" ng-controller="MyCtrl"> //根作用域的作用范围和子作用域的作用范围相同
<script type="text/javascript">
//创建模块对象（angular是引入angular.min.js后自动创建的对象）
app = angular.module("myApp", []); //第一个是模块名,第二个是依赖的模块列表（Angular外部扩展模块） 与ng-app是相对应的，每个字符串表示一个模块的名字.被依赖的模块必须首先加载执行，模块可以使用被依赖模块里定义的指令和服务. （和依赖注入很像，有点继承的意思） 注：后面的模块列表必须写上，才是定义模块；若不写[]，则是获取模块实例。 app.controller("MyController", //控制器名；控制器的构造函数。代码段：生成子作用域对象 function ($scope){ console.log(this); console.log($scope); $scope.firstname="kobe"; //先有属性定义,然后使用ng-model绑定，页面中才能通过表达式用 $scope.lastname="bryant"; $scope.getName = function(){ return $scope.firstname + ' ' + this.lastname; } }); //优化 链式调用（angular.module.controller函数返回值为模块,因此需要创建多个作用域对象时可以采用链式方法,而无需分别调用） angular.module('myApp', []) .controller('myCtrl1', function($scope){ $scope.empName = 'kobe'; }) .controller('myCtrl2', function($scope){ $scope.empName = 'wade'; }) </script> //以上代码有问题，项目上线打包时js代码压缩后形参会用a、b、c等字母代替; 代码压缩的$scope会被abcd代替，angular解析不了. //解决办法： angular.module('myApp', []) .controller('myCtrl1', ['$scope', function($scope){ //这样压缩时,数组中的字符串不会被压缩,angular解析压缩函数时用'$scope'替换压缩后的abcd.因此此时形参可以任意命名. $scope.empName = 'kobe'; //这种注入方式称为"显式声明依赖注入", 前面的称为"隐式声明依赖注入" }]) .controller('myCtrl2', ['$scope', function($scope){ $scope.empName = 'wade'; }]) eg: var myModule = angular.module("myModule", []); myModule.directive("hello", function(){ return { restrict: "C,E,M,A", template: "<div>hello angular</div>", replace: true } }); myModule.controller("myCtrl", ["$scope", function($scope){ // console.log($scope) $scope.name = "test"; $scope.$watch("name", function(newValue, oldValue){ console.log("old: "+oldValue+" new:"+newValue); }) }]) angular.module("myModule1", ['myModule']); //myModule1依赖myModule, 所以myModule必须先加载
ng-repeat：遍历数组显示数据，数组有几个元素就会产生几个新的作用域.($index, $first, $last, $middle, $odd, $even)
ng-bind：解决使用{{}}显示数据闪屏即表达式先以文本显示再变成值（在很短时间内显示{{}}) eg:<p>姓名为 <span ng-bind="firstName"></span></p> //firstName是变量名
ng-click="change()" //加括号表示调用
// ng-style：动态引用通过js指定的样式对象{color:'red', background:'blue'}
<div style="width: 200px;height:200px;" ng-style="myStyle"></div>
$scope.myStyle = {
background: 'red'
}
ng-class：动态引用定义的样式
<!--定义两种style类,html标签可以直接通过class属性调用某个style,eg: class="evenB"-->
<style>
.evenB{
}
.oddB{
} </style> <div style="width: 200px;height:200px;" ng-style="myStyle" ng-mouseenter="enter()" ng-mouseleave="exit()"></div> //鼠标移进移出命令 <ul> <li ng-class="{evenB:$even, oddB:$odd}" ng-repeat="person in persons">{{person.username}}--{{person.age}}</li> //指定偶数行使用样式evenB，奇数行使用odd样式.(奇偶根据$index) </ul>
注意：通过$scope.name调用变量的值，必须先定义该变量.（若未初始化，则该变量只有当输入时，该变量才会被赋值；若在输入前就调用该变量就会报错未定义） undefined取反为true
=============================== H5本地存储技术 ===============================
1、sessionStorage（会话存储）
- 生命周期：浏览器打开到关闭的过程
- 大小：5M
- 保存的位置：浏览器端
- setItem('key', value)
- getItem('key')
- removeItem('key')
2、localStorage（永久存储）
- 生命周期：永久，除非人为删除
- 大小：5M甚至更大
- 保存的位置：浏览器端
- setItem('key', value)
- getItem('key')
- removeItem('key')
3、cookie
作用：用于浏览器和服务器断进行通信的
特点:
- 大小：4kb
- 每次发送请求都携带。导致占用带宽
- 保存在浏览器端
- cookie容易被截获，不安全
- 生命周期：
- 回话周期：浏览器打开到关闭的过程
- 人为设置cookie的时间
https://jerryzou.com/posts/cookie-and-web-storage/ （详说 Cookie, LocalStorage 与 SessionStorage）
=============================================
angular.module("myApp", []).
controller('MyCtrl', ["$scope", function($scope){
//定义剩余字数的方法
$scope.message = "";
$scope.getWords = function(){
// console.log($scope.message);
if($scope.message.length>100){
$scope.message = $scope.message.slice(0, 100); return 0; } else{ return 100-this.message.length; }} $scope.delWords = function(){ $scope.message = ""; localStorage.removeItem('note_key'); } $scope.saveWords = function(){ alert('note is saved'); localStorage.setItem('note_key', JSON.stringify($scope.message)); //一般先将内容转成JSON格式存储（更安全） $scope.message = ""; } //google浏览器清理各种缓存的方法:更多工具->清理浏览数据 $scope.readWords = function(){ // if(localStorage.) console.log(localStorage.getItem('note_key')); $scope.message = JSON.parse(localStorage.getItem('note_key') || '[]'); //若不存在该key getItem返回null, 将JSON对象/JSON数组装换成原生JSON对象. 处理null的情况 } } ]);