AngularJS学习指南
1、解释：
angularJS是通过添加自定义属性和方法，从而能够实现HTML扩展的MVVM框架，仅需要在JS中定义对应属性，然后通过指令将数据双向绑定在HTML上，不再需要繁琐的DOM操作，模型中数据发生变化时，框架底层将会扫面变化，并且同步到视图上。
2、在页面中加载AngularJS库文件
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
3、指令介绍
ng-app：在页面中圈定一个应用程序区域
ng-controller：在页面中圈定一个控制区域，方便在模型中设置，修改数据，与此区域对应及时同步，通过传递$scope,$rootScope参数添加，修改属性及方法。
ng-init：初始化控制区域变量
ng-show：控制视图区域显示
ng-hide：控制视图区域隐藏
ng-bind：绑定数据到视图元素上 优先于{{}}插值表达式
ng-repeat：在视图中循环展示数据 （（index,item） in data）
ng-model：绑定输入域数据，同步到模型中，可以实现检测检测，也可以验证数据
ng-click：绑定点击事件，时间在$scope中定义指定 绑定事件时不能缺少括号
4、过滤器
| currency | 格式化数字为货币格式。 |
| filter | 从数组项中选择一个子集。 |
| lowercase | 格式化字符串为小写。 |
| orderBy | 根据某个表达式排列数组。 |
| uppercase | 格式化字符串为大写。 |
自定义过滤器：
app.filter('filterName', function() {});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>angular</title>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div class="container" ng-app="lesson" ng-controller="lessonCtrl">
<h1 style="text-align: center;">课件列表</h1>
<div class="row" >
<div class="col-xs-12">
<table class="table">
<caption>基本的表格布局</caption>
<thead>
<tr>
<th>标题</th><th>大小</th><th>创建人</th><th>发布时间</th><th>知识点</th><th>类型</th><th>下载次数</th><th>状态</th><th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(index,item) in data">
<td>{{item.title | uppercase}}</td>
<td ng-bind="item.size"></td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.knowledge}}</td>
<td>{{item.type | lessonType}}</td>
<td>{{item.download}}</td>
<td>{{item.status | lessonStatus}}</td>
<td><a href="javascript:void(0);" ng-show="item.status == 1" ng-click="download(index)">下载</a><a href="javascript:void(0);" ng-show="item.status != 1" ng-click="publish(index)">发布</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<h1 style="text-align: center;">添加课件</h1>
<div class="row">
<div role="form">
<div class="form-group col-xs-12">
<label for="title">标题</label>
<input type="text" class="form-control" id="title" name="title" placeholder="请输入标题" ng-model="title">
</div>
<div class="form-group col-xs-6">
<label for="size">大小</label>
<input type="text" class="form-control" id="size" name="size" placeholder="请输入标题" ng-model="size">
</div>
<div class="form-group col-xs-6">
<label for="name">创建人</label>
<input type="text" class="form-control" id="name" name="name" placeholder="请输入标题" ng-model="name">
</div>
<div class="form-group col-xs-12">
<label for="name">知识点个数</label>
<input type="text" class="form-control" id="knowledge" name="knowledge" placeholder="请输入标题" ng-model="knowledge">
</div>
<label class="col-xs-12">课件类型</label>
<div class="form-group">
<label class="checkbox-inline">
<input type="radio" name="type" value="0" checked ng-model="type">文档
</label>
<label class="checkbox-inline">
<input type="radio" name="type" value="1" ng-model="type">音视频
</label>
<label class="checkbox-inline">
<input type="radio" name="type" value="2" ng-model="type">压缩包
</label>
</div>
<button type="submit" class="btn btn-default" ng-click="submit()">提交</button>
</div>
</div>
</div>
<script type="text/javascript">
var data = [
{id:1,title:'title1',size:'1.4M',name:'张三',date:'2017-06-30',knowledge:4,type:0,status:0,download:0},
{id:2,title:'title2',size:'1.8M',name:'张三',date:'2017-06-30',knowledge:0,type:1,status:0,download:0},
{id:3,title:'title3',size:'1.0M',name:'张三',date:'2017-06-30',knowledge:2,type:2,status:1,download:0},
{id:4,title:'title4',size:'4M',name:'张三',date:'2017-06-30',knowledge:14,type:2,status:0,download:0},
{id:5,title:'title5',size:'2.4M',name:'张三',date:'2017-06-30',knowledge:21,type:1,status:1,download:0},
{id:6,title:'title6',size:'4.4M',name:'张三',date:'2017-06-30',knowledge:5,type:0,status:2,download:0}
];
//定义应用程序
var app = angular.module('lesson',[]);
//设置控制器 传递作用域$scope,根作用域$rootScope 当前页面URL服务$location HTTP请求服务$http 定时器服务$timeout/$interval myService
app.controller('lessonCtrl',function($scope,$rootScope,$location,$http,$timeout,$interval,myService) {
//通过$http服务获取数据
$http({
method: 'get',
url:''
}).then(function(res) {
//res:{}
$scope.data = data;
},function(res) {
//
})
$scope.title = '';
$scope.size = '';
$scope.name = '';
$scope.knowledge = 0;
$scope.type = 0;
//添加方法
$scope.publish = function(index){
this.data[index].status = 1;
}
$scope.download = function(index) {
this.data[index].download += 1;
}
$scope.submit = function() {
this.data.push({
id:this.data.length + 1,
title:this.title.trim(),
size: this.size,
name:this.name.trim(),
date:myService.formatDate(),
knowledge:this.knowledge,
type:this.type,
status:0,
download:0
})
}
//使用自定义服务
console.log(myService.sayHello());
})
//自定义过滤器
app.filter('lessonType',function() {
return function(type) {
return ['文档','音视频','压缩包'][type];
}
})
app.filter('lessonStatus',function() {
return function(status) {
return ['未发布','已发布','已撤回'][status];
}
})
//自定义服务
app.service('myService',function() {
var that = this;
that.sayHello = function() {
return 'Hello World!';
}
that.addZero = function(num) {
return parseInt(num) > 10 ? num : "0" + num;
}
that.formatDate = function() {
var t = new Date();
return t.getFullYear() + "-" + this.addZero(t.getMonth() + 1) + "-" + this.addZero(t.getDate());
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号