Angular基础（上）
2016-11-09 本文已影响107人
小纸人儿
AngularJs 是一种MVVM（数据视图双向绑定）框架，angular.js扩展了HTML的功能，减轻了程序员的负担，避免重复劳动；
无论学习什么框架都一样，首先你得明确你要用它来干嘛，angular一般适合做后台的管理系统，总是频繁的进行计算，angular的核心就是数据；
指令
ng- 后接angular指令
ng-app:标记了angular.js脚本的作用域，angular.js仅在这块作用域运行;
ng-controller:控制器；
<div ng-app="myApp" ng-controller="cont"> </div>
var app = angular.module('myApp', [])
app .controller('cont',function($scope){})
ng-model：M层 ， 即指令把元素值（比如输入域的值）绑定到应用程序；
<p><input type="text" ng-model="name" /></p>
<h1> hello {{name}} </h1>
{{}}：表达式，告诉angular需要计算其中的表达式并将其结果插入到Dom中；
{{3+4}} => 7
ng-bing：将数据绑定到文本内,不好用，会将原内容覆盖，改用{ { } }；
ng-init：指令初始化；
事件
angular 中绑定事件不同于原生js，有自己的 HTML 事件指令
1、单击事件ng-click
<div ng-app="myApp" ng-controller="cont">
<p ng-click="num=num+1"></p>
</div>
2、双击事件ng-dbclick
3、键盘按下ng-keydown
4、键盘抬起ng-keyup
5、鼠标按下ng-mousedown
6、鼠标抬起ng-mouseup
（2、3、4、5、6用法同上）
样式及循环
1、ng-style：样式指令
<div ng-app="myApp" ng-controller="cont">
<!--第一种用法-->
<div ng-style="boxStyle">小纸人哈哈哈</div>
<!--第二种用法-->
<div ng-style="{{boxStyle}}">小纸人呵呵呵</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp' , []);
app.controller('mycont' , function($scope){
$scope.boxStyle = {
'color':'red',
'fontSize':'30px'
}
})
</script>
Paste_Image.png
2、ng-class：ng-class 指令允许动态设置CSS类在一个 HTML 元素上，可以动态的修改 class 的值
<style type="text/css">
.active{
color: royalblue;
}
</style>
<div ng-app="myApp" ng-controller="cont">
<div ng-class="{{addClass}}">addClass哈哈哈</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp' , []);
app.controller('mycont' , function($scope){
$scope.addClass = '{active : true}';
})
</script>
Paste_Image.png
3、ng-attr-href 、 ng-attr-title
<div ng-app="myApp" ng-controller="cont">
<a ng-attr-href="{{baidu}}" ng-attr-title="{{title}}"> 跳转百度 </a>
</div>
<script type="text/javascript">
var app = angular.module('myApp' , []);
app.controller('mycont' , function($scope){
$scope.baidu = 'http://www.baidu.com';
$scope.title = '文本信息';
})
</script>
4、ng-repeat ：循环
循环实现隔行变色小栗子
<style type="text/css">
.active1{
background: yellow;
}
.active2{
background: red;
}
</style>
<body ng-app="myApp" ng-controller="mycont">
<p ng-repeat-start="data2 in dataList2">{{data2.name}}</p>
<ul>
<!--隔行变色 $even 偶数 -->
<li ng-repeat="data in dataList" class="{{ $even ? 'active1' : 'active2' }}">{{data}}</li>
</ul>
<p ng-repeat-end="data2 in dataList2">{{data2.age}}</p>
</body>
<script type="text/javascript">
var app = angular.module('myApp' , []);
app.controller('mycont' , function($scope){
$scope.dataList2 = [
{'name':'wxy' , 'age': 18},
{'name':'dxq' , 'age': 19}
]
$scope.dataList = ['小纸人01' , '小纸人02' , '小纸人03'];
})
</script>
Paste_Image.png
过滤器
表示 在表达式输出内容时可以使用过滤器对其内容做调整
语法使用 | 管道符号
$filter 过滤器的书写方式 可以写在控制器里，也可以写在表达式里
1、currency
{{ money | currency }}
$filter("currency")(1000,"￥") ; //￥1000
2、number
{{ num | number }} //单纯的转换为一个数字
{{ num | number : 0 }} //转换为数字后不保留小数
{{ num | number : 2 }} //转换为数字后保留两位小数
$filter ("number")(1234.3407,2); //(值,保留几位小数)；
3、date
{{ time | date : 'yyyy-MM-dd HH:mm:ss Z' }}；
$filter("date")(1478143963616,"yy/MM/dd")；
4、orderBy
{{ data | orderBy:'id':true }}；<!-- 按id排序 true为降序 false为升序-->
$filter('orderBy')(data , 'id' )；
5、自定义属性filter
当 angular 提供的过滤器满足不了你的业务时，你可以自定义过滤器
eg：自定义首字母大小写
<body ng-app="myApp" ng-controller="mycont">
<div ng-controller="myctro">
{{ name }}
{{ name2 }}
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp' , []);
//首字母大写
app.filter( 'firstUpper' , function(){
return function( str ){
return str.charAt(0).toUpperCase() + str.substring(1);
}
} )
//首字母小写
app.filter( 'firstLower' , function(){
return function( str ){
return str.charAt(0).toLowerCase() + str.substring(1);
}
} )
app.controller( 'myctro' , function( $scope , $filter){
$scope.name = $filter('firstUpper')('xiaozhiren');
$scope.name2 = $filter('firstLower')('XIAOZHIREN');
})
</script>
服务
在 AngularJS 中，服务是一个函数或对象, 可以理解为封装了很多方法与属性的模块，angular 内部提供了大量的服务
$scope：局部变量
$rootScope：全局变量
$location：处理地址栏 url 的模块
$http：处理 http 请求的模块
$timeout：原生对应 setTimeout 方法
$interval：原生对应 setInterval 方法
未完，再更。。。。。。
