AngularJS 框架
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
【Angular JS表达式】
1、Angular JS使用双{{}}绑定方式。用于将表达式的内容输出到页面中。
表达式可以是文字、运算符、变量等，也可以在表达式中进行运算输出结果
eg. <p>{{ 5+5+"Angular" }}</p>
如果Angular.js文件放在文件下方，在页面刷新的瞬间看到{{}}表达式，可以使用<div ng-bind="name"></div>方式绑定
eg.上式可以改为：<p ng-bind="5+5+'Angular' "></p>
<!--举例 两条语句作用相同--> <p>{{ 5+5+"Angular" }}</p> <p ng-bind="5+5+'Angular' "></p>>
示意图
【AngularJS 常用指令】
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
1、ng-app：AngularJS所管辖的区域。一般写在body或HTML标签上，原则上一个页面只能有一个
eg. <body ng-app=""></body>
2、ng-model ：把元素值（比如输入域的值）绑定到应用程序的变量中。
eg.<input type="text" ng-model = "name" />
3、ng-bind：把应用程序变量中的值，输出到页面HTML视图中。可以与表达式{{}}互相替换。
eg.<div ng-bind="name"></div>
4、ng-init：初始化AngularJS应用程序中的变量值；
eg. <body ng-app="" ng-init=" name='jredu' ">
应用程序初始化时，name变量就赋有初值。
<!--AngularJS 绑定input与div(双向数据绑定)--> <body ng-app="" ng-init="name='Genista'"> <!--输入框前缀--> <input type="text" ng-model = "name" /> <input type="text" ng-model = "name" /> <div>{{name+"123"}}</div> <!--表达式（会有bug，可以改变angularJS导入顺序来解决）--> <div ng-bind="name"></div> </body>
示意图
【MVC 三层架构】
1、Model（模型层）:应用程序中用于处理数据的部分（包括将数据保存或者修改到数据库、变量文件中）。
在AngularJS中，Model 特指的是 应用程序中的各种数据。
View（视图层）：用户可以看到的用于显示数据的页面。（只有view是用户可见的）
Controller（控制器）：是链接Model和View的桥梁，负责从view读取数据、接收用户的操作输入；并将数据发送给model层。
model对数据处理完毕后，将结果返回给 Controller，Controller再将结果返回给View层显示。
如何 创建一个angular的模块，即ng-app="" 需要绑定的部分？
需要接收两个参数： eg. var app = angular.module("myApp",[]);
① 模块名称：即 angular.module 双引号中绑定的名字。
② 数组：表示需要注入的模块名称，不需要注入其他模块，可用空数组代替。
>>> Angular（2.0）将常用放入功能封装在angular.js，创建主模块时可以直接使用，无需注入。
>>>而一些应用较少的功能，需要导入相应的JS文件，并且在[]中注入进这个模块，才可以使用。
这就是AngularJS（1.0）中的【模块开发】和【依赖注入】。
如何 在AngularJS模块上，创建一个控制器？
需要传入两个参数：
① 控制器名字：即ng-controller需要绑定的名字
<div ng-controller="myCtrol">
② 控制器的构造函数，构造函数可以传入多个参数
>>>如果又在函数中使用系统的内置对象，则必须通过函数的参数传入，否则不能使用
>>>AngularJS 中的内置对象，都用$开头，例如 $scope,$rootScope
【AngularJS的作用域】
① $scope：局部作用域，声明在$scope上的属性和方法，只能在当前的Controller使用；
② $rootScope：根作用域，声明在$scope上的属性和方法，可以在整个ng-app所含范围内使用。
>>>如果没有使用 $scope 声明变量，而是直接使用ng-model在HTML标签中绑定的数据的作用域为：
1、如果ng-mode写在某个 Controller 中，则这个变量会默认绑定到当前的Controller的$scope上；
2、如果ng-mode没有写在任何一个 Controller 中，则这个变量会默认绑定到 Controller的 $rootScope 上；
【注】 AngularJS中的父子作用域
1、AngularJS中，子作用域只能访问父作用域中的变量，二不能修改父作用域的变量；
2、为了解决上述问题，可以将副作用域中的变量声明为引用数据类型，例如对象等。
这样可以在子作用域中，直接修改对象属性，而不需要修改对象本身保存的地址。
见"myCtrol1"举例
<div ng-controller="myCtrol1"> <input type="text" ng-model="name" placeholder="myCtrol1 name" /> <!--局部变量--> <div ng-bind="name+'------------myCtrol1的name'"></div> <div ng-bind="age+'------------myCtrol1的age'"></div> <input type="text" ng-model="test" placeholder="myCtrol1 test" /> <!--局部变量--> <input type="text" ng-model="obj.test" placeholder="myCtrol1 obj.test" /> <!--局部变量--> <!--父子作用域--> <mark ng-bind="test+'myCtrl1-test'"></mark> <mark ng-bind="obj.test+'myCtrl1-obj.test'"></mark> </div> <mark ng-bind="test+'全局-test'"></mark><br /> <mark ng-bind="obj.test+'全局-obj.test'"></mark><br /> <script type="text/javascript"> var app = angular.module("myApp",[]); app.controller("myCtrol1",function($rootScope){ $rootScope.test = "aaaaa"; $rootScope.obj = { test :"bbbbb", }; }); </script>
示意图
【AngularJS中的过滤器】
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
1、系统内置的过滤器
currency：将数字格式化为货币形式。
filter：从数组项中选择一个子集。
orderBy：根据某个表达式排列数组。
lowercase：格式化字符串为小写。
uppercase：格式化字符串为大写。
2、自定义过滤器（写在控制器外面） ，同时 需要传递过滤参数。
调用过滤器实例：
传入参数4，将被 过滤函数 的 num形参 所接收。
<script type="text/javascript"> angular.module("app",[]) /*实现隐藏手机号码后四位*/ .filter("hideTel",function(){ return function(text,num){ num = num>0&&num<11?num:3; text = text+""; var newTest = text.substring(0,11-num) +text.substring(11-num,11).replace(/\d/g,"*"); return newTest; } }) </script>
【AngularJS中的服务Service】
1、内置服务：
要是服务，必须要把服务名通过controller的构造函数的参数注入进来！
服务内置的服务，统一使用$开头，服务中的属性和方法统一使用$$开头！自定义服务时，需注意与系统服务的写法区分开
$location：返回当前页面的URL地址信息，第一个对象。
$http：向服务器发送请求，应用响应服务器传送过来的数据。相当于JQuery中的Ajax
$timeout：相当于setTimeout();
2、自定义服务
第一个参数是 服务名;
第二个参数是自定义服务的构造函数。我们自定义的服务，本质是一个对象。
对象的属性，可以在构造函数中，使用this.属性表示；
对象的方法，可以在构造函数中，使用this.方法表示；
<script type="text/javascript"> angular.module("app",[]) .controller("ctrl",function($scope,$location,$timeout,$interval,hexafy){ // 控制器（调用自定义服务不加$符号） $scope.local = $location.$$host; $timeout(function(){ $scope.time = "两秒后出现！"; },2000); $scope.num = 0; // 用$声明一个变量 $interval(function(){ $scope.num++; },1000); /*service 自定义服务的使用*/ $scope.gn=hexafy.gn; $scope.num1 = hexafy.func(10); }) .service("hexafy",function(){ this.gn = "将十进制转换为十六进制"; // 使用this.属性 把变量添加到函数上 this.func = function(num){ // this.方法 return num.toString(16); } } </script>
示意图
【AngularJS中的DOM和事件】
1、DOM
ng-disabled="false" 传入true表示禁用，传入false表示可用
ng-show="false" 传入true表示显示，传入false表示隐藏
ng-hide="false" 传入true表示隐藏，传入false表示显示
2、AngularJS中的事件 只能触发绑定在AngularJS作用域上的属性和方法。
<body ng-app="app" ng-controller="ctrl"> <!--【ng-disabled】--> <button ng-disabled="!myCheck">点击</button> <label> <input type="checkbox" ng-model="myCheck" /> 是否同意协议 </label> <p>{{myCheck}}</p> <!--【ng-show】--> <label> <input type="checkbox" ng-model="myCheck1" /> 是否显示 </label> <p ng-show="myCheck1">哈哈，来咯！</p> <!--【ng-hide】--> <label> <input type="checkbox" ng-model="myCheck2" /> 是否隐藏 </label> <p ng-hide="myCheck2">呜呜，拜拜！</p> </body>
示意图
【AngularJS的表单验证】
1、表单中，常用的验证操作：
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
$error 表单验证不通过的错误信息
2、验证时，必须给form和input，设置name属性。
给form和input设置name后，会自动将表单信息绑定到$scope 作用域中。所以，可以直接使用formName.inputName.$验证操作 得到验证结果
eg.
formName.inputName.$dirty = "true" 表示表单被填写过
formName.inputName.$invalid = "true" 表示表单输入内容不合法
formName.inputName.$error.required= "true" 表示表单设置了必填，但是没有输入
【注】$error 支持的验证
required/minlength/maxlength/partten/email/number/data/url等
3、为了避免AngularJS的验证与HTML5的验证表单冲突！例如，type = "email" required等，H5也会进行验证，可以给form添加 "novalidate" 属性，禁用HTML5的验证功能。
用户名验证功能——代码举例 ↓↓↓
<div class="panel-body"> <form class="form-horizontal" novalidate="novalidate" name="form"> <div class="row"> <div class="col-xs-3"> 用户名： </div> <div class="col-xs-9"> <input type="text" class="form-control" name="name" ng-model="user.name" required=" required" ng-minlength="6" ng-maxlength="12"/> <p style="color: aquamarine; margin: 0px;" ng-show="form.name.$invalid && form.name.$dirty"> <span ng-show="form.name.$error.required">用户名必须填写</span> <span ng-show="form.name.$error.minlength">用户名长度最少6位</span> <span ng-show="form.name.$error.maxlength">用户名长度最多12位</span> </p> </div> </div> </form> </div>
示意图
【AngularJS中使用动画】
1、导入angular-animate.js
2、 如果页面中没有自定义app模块，则可以直接绑定系统模块ng-app="ngAnimate"
如果页面中有自定义的app模块，则可以在自定义模块的数组中，注入ngAnimate。
angular.module("app",["ngAnimate"])
3、 当使用ng-show、ng-hide显示或者隐藏元素的时候， 系统会自动添加或者移除.ng-hide这个class类；
4、 当使用ng-if/ng-switch/ng-repeat等其他指令，需要分别设置显示后和隐藏后的两种class样式：
显示后的class： .ng-enter-active,.ng-leave{}
隐藏后的class： .ng-enter,.ng-leave-active{}
<style type="text/css"> .div{ width: 200px; height: 200px; background-color: red; transition: all ease 1s; } .ng-hide{ width: 0px; height: 0px; background-color: green; /*margin-left: -200px;*/ } .ng-enter-active,.ng-leave{ width: 200px; height: 200px; background-color: red; } .ng-enter,.ng-leave-active{ width: 0px; height: 0px; background-color: green; } </style> <body ng-app="app" ng-controller="ctrl"> <input type="checkbox" ng-model="myCheck" />隐藏div <div class="div" ng-show="myCheck">这是一个div</div> <input type="checkbox" ng-model="myIf" />移除div <div class="div" ng-if="myIf">这是一个div</div> </body> <script src="js/angular.js" type="text/javascript"></script> <script src="js/angular-animate.js" type="text/javascript"></script> <script type="text/javascript"> angular.module("app",["ngAnimate"]) .controller("ctrl",function(){ }) </script>
动画效果 渐变消失
今天就到这里吧，后续还会更新...
如果有疑问可以提出来大家共同解决，如果有不完善的地方还请多多指正！
有需要请加关注呦~~~蟹蟹~~~
