angular下载地址:https://github.com/angular/angular.js/releases
ng-app: 定义了一个AngularJS应用程序
ng-model: 把元素值绑定到应用程序
ng-bind: 把应用程序数据绑定到HTML视图上
html部分:
<body ng-app="myapp" ng-controller="myCtl" >
<div class="container">
<h1 class="page-header">标题</h1>
<form action="">
<div class="form-group">
<label for="">留言:</label>
//MVC中的m
<input type="text" class="form-control" ng-model="well">
</div>
//MVC中的v
<div class="well">内容:{{well}}</div>
</form>
</div>
</body>
js部分:
//MVC中的c
app=angular.module('myapp',[]);
app.controller('myCtl',function($scope){
$scope.well = 'Hello World';
})
一、Angular表达式
ng中的变量、函数等和js中的完全不同。
ng中的都是$scope内的 (使用:$scope.变量名)
<input ng-model="val1">
<input ng-model="val2">
//错误代码
<div class="well">{{parseInt(val1) + parseInt(val2)}}</div>
//正确代码
<div class="well">{{sum()}}</div>
//js部分
app = angular.module('myapp',[]);
app.controller('myCtr',function($scope){
$scope.sum = function(){
let res = parseInt($scope.val1) + parseInt($scope.val2);
return res ? res : 0;
}
})
二、repeat指令
ng-repeat 指令会重复一个 HTML 元素
//html部分
<body ng-app = "myapp" ng-controller = "myCtl">
<div class="contianer">
<h1>Angular-repeat指令</h1>
<table class="table table-bordered table-hover">
<tr>
<th>id</th>
<th>username</th>
<th>password</th>
<th>delete</th>
</tr>
<tr ng-repeat = "user in data">
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.password}}</td>
<td><a href="#">删除</a></td>
</tr>
</table>
</div>
</body>
//js部分
app = angular.module('myapp',[]);
app.controller('myCtl',function($scope){
$scope.data = [
{id:1,username:'1',password:'123'},
{id:2,username:'2',password:'123'},
{id:3,username:'3',password:'123'},
{id:4,username:'4',password:'123'},
{id:5,username:'5',password:'123'},
]
})
三、过滤器
"链式"使用: 过滤器可以应用在另外一个过滤器的结果之上
{{过滤器1 | 过滤器2 | 过滤器3 | …}}
过滤器可以拥有多个参数
{{表达式 | 过滤器:参数1:参数2:参数3…}}
1. currency : 格式化数字为货币格式。
<body ng-app="">
<div class="container">
<form action="">
<h1 class="page-header">Angular过滤器</h1>
<div class="form-group">
<input type="text" class="form-control" ng-model="num">
</div>
<div class="form-group">
<input type="text" class="form-control" ng-model="price">
</div>
<div class="well">{{num * price|currency}}</div>
</form>
</div>
</body>
2. filter : 从数组项中选择一个子集。
//html部分
<div class="form-group">
<input type="text" class="form-control" ng-model="find">
</div>
<table class="table table-bordered table-hover">
<tr ng-repeat="item in arr|filter:find">
<td>{{item.name}}</td>
</tr>
</table>
//js部分
app = angular.module('myapp',[]);
app.controller('myCtl',function($scope){
$scope.arr = [
{id:1,name:'Tom'},
{id:2,name:'Mary'},
{id:3,name:'Jack'},
{id:4,name:'Lisa'},
]
})
3. lowercase : 格式化字符串为小写
<body ng-app="">
<form action="">
<div class="form-group">
<input class="form-control" ng-model="str" />
</div>
<div class="well">{{str|lowercase}}</div>
</form>
</body>
4. orderBy : 根据某个表达式排列数组
5. uppercase : 格式化字符串为大写
6. 自定义过滤器
//html部分
<body ng-app="myapp" ng-controller="myCtl">
<form action="">
<div class="form-group">
<input class="form-control" ng-model="str" />
</div>
<div class="well">{{str|myfilter}}</div>
</form>
</body>
//js部分
app = angular.module('myapp',[]);
app.controller('myCtl',function($scope){
$scope.str = "Stive";
})
app.filter('myfilter',function(){
return function(text){
return text.split("").reverse().join("");
}
})
四、AngularJS 服务(Service)
( Angular 中,服务是一个函数或对象)
1. $location 服务 : 返回当前页面的URL地址
app = angular.module('myapp',[]);
app.controller('myCtl',function($scope){
$scope.str = "Stive";
})
2. $timeout服务
app = angular.module('myapp',[]);
app.controller('myCtl',function($scope,$timeout){
$scope.num = 1;
a = 1;
$timeout(function(){
$scope.num += a;
},1000)
})
3. $interval服务
//html部分
<body ng-app="myapp" ng-controller="myCtl">
<div class="container">
<form action="">
<h1 class="page-header">Angular过滤器</h1>
<div class="well">计时器:<span class="label label-success">{{time}}</span> </div>
</form>
</div>
</body>
//js部分
app = angular.module('myapp', []);
app.controller('myCtl', function ($scope, $interval) {
$scope.time = 0;
a = 1;
$interval(function () {
$scope.time += a;
}, 1000);
})
4. http服务
是 Angular 应用中最常用的服务。 服务向服务器发送请求,应用响应服务器传送过来的数据
//html部分
<body ng-app="myapp" ng-controller="myCtl">
<div class="container">
<form action="">
<h1 class="page-header">Angular过滤器</h1>
<div class="well">计时器:<span class="label label-success">{{time}}</span> </div>
</form>
</div>
</body>
//js部分
app = angular.module('myapp', []);
app.controller('myCtl', function ($scope, $http) {
$http.get("demo.php").success(function(res){
if(res == 'ok'){
$scope.time = 1;
}else{
$scope.time = 2;
}
})
})