![[AngularJS]--基本用法](https://www.qiuyue.org/source/img/logo-ico.png){kind=logo}
AngularJS简介AngularJs是Google下一代前端框架，基于mvc架构，它提供的功能如下：1、解耦应用逻辑，数据模型和视图2、Ajax3、依赖注入AngularJs初探新建html页面，
AngularJS简介
AngularJs是Google下一代前端框架，基于mvc架构，它提供的功能如下：
1、解耦应用逻辑，数据模型和视图
2、Ajax
3、依赖注入
AngularJs初探
新建html页面，并导入angular.js文件 （html中需要加上ng-app这个内置指令才能让angularjs起作用）
<!DOCTYPE html><!-- demo1 数据绑定--><html ng-app><head> <title>angularJS</title> <meta charset="utf-8"/> <script type="text/javascript" src="angular.js"></script></head><body><input ng-model="name" type="text" placeholder="请输入用户名" /><h1>hello：{{name}}</h1></body></html>该示例演示了一个基本但是非常棒的功能：数据绑定
实际上，在该程序中默认有一个控制器（controller）存在，在用户输入时会去请求该控制器并反向给{{}}表达式里面的变量赋值，具体控制器我们将在后面讲解。
控制器初探
可以自定义多个控制器，并为每个区域设置一个单独的控制器。
当某些元素在该控制器下时，就可以通过{{}}表达式得到该控制器作用域中的值。
<!DOCTYPE html><!-- demo2 简单数据绑定--><html ng-app><head> <title>angularJS--简单数据绑定</title> <meta charset="utf-8"/> <script type="text/javascript" src="angular.js"></script> <script type="text/javascript"> /** $scope是数据模型对象，它的属性可以被视图访问， 也可以同控制器进行交互 $timeout是angular自带的定时器 */ function mycontroller($scope,$timeout){ $scope.uname="akx"; $timeout(function(){ $scope.uname="angel"; },2000); } </script></head><body> <!-- ng-controller声明所有被包含的元素属于某个控制器,该控制器必须被定义 --> <div ng-controller="mycontroller"> <input ng-model="uname" type="text"/> <h1>{{uname}}</h1> </div></body></html>假如$scope作用域中的值放在该控制器外面，则不会访问到！
模块用法
有时候把函数定义为全局的容易造成命名冲突或不好维护，所以很多时候我们需要把函数聚集在模块里
定义模块的语法是：angular.module('myapp',[]);
其中第一个参数是模块名，第二个参数列表是所需要依赖的模块名
示例代码如下：
<!DOCTYPE html><!-- 在使用模块时，html标签后面不能使用ng-app --><html><head> <title>angularJS--模块</title> <meta charset="utf-8"/> <script type="text/javascript" src="angular.js"></script></head><body> <div ng-app="myapp"> <div ng-controller="MyController"> <h1>{{clock}}</h1> </div> </div></body></html> <script type="text/javascript"> //第一个参数为模块名称 //第二个参数为依赖的模块名称 angular.module("myapp",[]).controller("MyController",function($scope){ var nowtime=function(){ $scope.clock=new Date(); } setInterval(function(){ //触发修改model $scope.$apply(nowtime); nowtime(); },1000); }) </script>事件控制器
<!DOCTYPE html><!-- demo3 控制器 --><html ng-app="MyApp"><head> <title>angularJS--控制器</title> <meta charset="utf-8"/> <script type="text/javascript" src="angular.js"></script></head><body> <div ng-controller="MyController"> <input type="button" ng-click="add(2)" value="点击"/> <div ng-click="add(3)" style="border: 1px solid">点击div</div> <span>{{counter}}</span> </div> <br/></body></html> <script type="text/javascript"> var app=angular.module("MyApp",[]).controller("MyController",function($scope){ $scope.counter=0; //通过ng-click 执行add $scope.add=function(count){ $scope.counter+=count; } }) </script>当点击按钮时，会调用所属模块--控制器的add方法
控制器的作用域是可以嵌套的，默认情况下，AngularJS在当前作用域中无法找到某个属性时，
便会在父级作用域中进行查找。示例代码如下
网页代码：
<div ng-controller="ParentController"> <div ng-controller="ChildController"> <input type="button" ng-click="insertProp()" value="嵌套作用域测试"/> <span>{{person}}</span> </div> <span>{{person}}</span> </div>控制器代码:
app.controller("ParentController",function($scope){ $scope.person={ uname:"testangu" } }); app.controller("ChildController",function($scope){ $scope.insertProp=function(){ $scope.person.sex="男"; } })根据运行效果会发现，子作用域是引用到了父作用域的对象（但是对于字符串，数字等基本数据类型仅仅只有值得拷贝）
表达式
angularjs表达式的语法是：{{}}，在默认情况下，该表达式即可以取出$scope或者ng-model等作用域中的值，
在某些时候{{}}比想象中的更加强大，比如做插值处理！
<!DOCTYPE html><!-- demo5 表达式 --><html ng-app="MyApp"><head> <title>angularJS--表达式</title> <meta charset="utf-8"/> <script type="text/javascript" src="angular.js"></script></head><body><div ng-controller="myinter"> <input ng-model="to" type="text" /> <br/> <textarea ng-model="emailBody"></textarea> <br/> <pre>{{previewText}}</pre></div></body></html>
<script type="text/javascript"> var app=angular.module("MyApp",[]); //插值字符串示例监控emailBody，在此文本域里输入{{tso}}时，会被替换成ng-model="to"的内容 app.controller("myinter",function($scope,$interpolate){ $scope.$watch("emailBody",function(body){ if(body){ var template=$interpolate(body); $scope.previewText=template({tso:$scope.to}); } }) }) </script>当我们再emialBody中输入{{tso}}时，会被马上替换成ng-model="to"的内容
过滤器
过滤器可以做一些格式化或者过滤子集的操作
angularJS内置了很多，比如字符串，数字格式，日期
angularJS提供的filter过滤器可以从给定数组中选择一个子集，并将其生成一个新数组返回
大小写：{{uname | lowercase}}
数字小数位：{{num | number:2}}
数组过滤 :{{['java','javascript','c++','ruby'] | filter:'java'}}
也可以用该方式过滤json数组
limitTo:截取字符串或数组 {{"hello java world" | limitTo:5}}
自定义过滤器：
示例1：限制字符串长度大于3的元素
{{['java','javascript','cs','ruby'] | filter:lengthF}}
//这里run方法类似于初始化方法（main方法）不能使用$scope
var app=angular.module("MyApp",[]);
app.run(function($rootScope){
$rootScope.lengthF=function(str){
return str.length>3;
}
});
示例2：首字母大写
<!-- 可以连续使用 -->
{{'hello java World' | lowercase | upFirst }}
app.filter('upFirst',function(){
return function(input){
if(input){
return input[0].toUpperCase()+input.slice(1);
}
}
});
