angular初步认识一
最近比较流行MVC前端框架开发，最近研究了一个框架AngularJS框架
不说那么多，先上例子，我是个代码控
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>capter1-angular</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.css">
<script src="../js/angular.min.js"></script>
<script type="text/javascript">
var model = {
user:"Lifeng",
items:[{
action:"Buy Flowers",done:false
},{
action:"Get Shoes",done:false
},{
action:"Collect Tickets",done:true
},{
action:"Call Joe",done:false
}]
} var myApp = angular.module("myApp",[]);
myApp.controller("MyCtrl",function($scope){
$scope.todo = model;
})
</script>
</head>
<body ng-controller="MyCtrl">
<div class="page-header">
<h1>{{todo.user}}'s To Do List
<span class="label label-default">{{todo.items.length}}</span>
</h1> </div>
<div class="panel">
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-btn">
<button class="btn bth-default">Add</button>
</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Done</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in todo.items">
<td>{{item.action}}</td>
<td><input type="checkbox" ng-model="item.done" /></td>
<td>{{item.done}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
看到几个比较特殊的点
1.html标签中多一个ng-app="myApp"
2.body标签中多一个ng-controller="MyCtrl"
3.tr标签中多了ng-repeat="item in todo.items"
4.{{}}是取值表达式
5.script里面多了一些angular.module 以及myApp.controller等方法
1.根据AngularJS的解释是,一个文档中只有一个ng-app的属性，可以说是文档的唯一标识，当angular发现这个标识的时候，下面的文档树都要经过angular编译
2.ng-controller的指令就是作为前端处理业务的controller层
3.作为一个前端或者后端，看到这个就会想到是一个for遍历集合
4.不用说了，就是取元素的值
5.这个两个方法数据绑定和处理的业务逻辑。
这里还提一点，$scope是一个全局变量，还有就是数据双向绑定，里面用到了一个ng-model指令，这个自己也在学习中，希望以后学习中能够知道他们的原理。
下面可以看到$scope是全局，在对象上增加一个方法，可以在html元素上 直接使用这个方法,看标题栏，还有几个事情没有做的计数
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>angularJS学习</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.css">
<script src="../js/angular.min.js"></script>
<script type="text/javascript">
var model = {
user:"Lifeng",
items:[{
action:"Buy Flowers",done:false
},{
action:"Get Shoes",done:false
},{
action:"Collect Tickets",done:true
},{
action:"Call Joe",done:false
}]
} var myApp = angular.module("myApp",[]);
myApp.controller("MyCtrl",function($scope){
$scope.todo = model;
$scope.incompleteCount = function(){
var _count = 0;
angular.forEach($scope.todo.items,function(item){
if(!item.done){
_count++
}
});
return _count;
}
})
</script>
</head>
<body ng-controller="MyCtrl">
<div class="page-header">
<h1>{{todo.user}}'s To Do List
<span class="label label-default" ng-hide="incompleteCount() == 0">{{incompleteCount()}}</span>
</h1> </div>
<div class="panel">
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-btn">
<button class="btn bth-default">Add</button>
</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Done</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in todo.items">
<td>{{item.action}}</td>
<td><input type="checkbox" ng-model="item.done" /></td>
<td>{{item.done}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
自定义过滤器和发送ajax请求,写了一下代码，感觉使用挺简单，过滤器接受一个参数，list是angularJS提供的集合数据
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>angularJS自定义过滤器学习</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.css">
<script src="../js/angular.min.js"></script>
<script type="text/javascript">
var model = {
user:"Lifeng" } var myApp = angular.module("myApp",[]); myApp.run(function($http){
$http.get("/angular/todo.json").success(function(data){
model.items = data;
})
}); myApp.filter("checkedItems",function(){
return function(list,showComplete){
var resultArr = [];
angular.forEach(list,function(item){
if (!item.done || showComplete ) {
resultArr.push(item);
};
});
return resultArr;
}
}); myApp.controller("MyCtrl",function($scope){
$scope.todo = model;
$scope.incompleteCount = function(){
var _count = 0;
angular.forEach($scope.todo.items,function(item){
if(!item.done){
_count++
}
});
return _count;
}
})
</script>
</head>
<body ng-controller="MyCtrl">
<div class="page-header">
<h1>{{todo.user}}'s To Do List
<span class="label label-default" ng-hide="incompleteCount() == 0">{{incompleteCount()}}</span>
</h1> </div>
<div class="panel">
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-btn">
<button class="btn bth-default">Add</button>
</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Done</th>
<th> </th>
</tr>
</thead>
<tbody>
<!--普通的过滤器可以像下面那样 -->
<!--<tr ng-repeat="item in todo.items | filter:{done:false}} | orderBy:'action'"> -->
<!--自定义过滤器可以像下面那样 -->
<tr ng-repeat="item in todo.items | checkedItems:showComplete | orderBy:'action'">
<td>{{item.action}}</td>
<td><input type="checkbox" ng-model="item.done" /></td>
<td>{{item.done}}</td>
</tr>
</tbody>
</table>
<div class="checkbox-inline"><label><input type="checkbox" ng-model="showComplete" />Show Complete</label></div>
</div>
</body>
</html>
再来一个好玩一点的，就是点击按钮可以天添加数据到列表中
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>angularJS数据绑定学习</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.css">
<script src="../js/angular.min.js"></script>
<script type="text/javascript">
var model = {
user:"Lifeng" } var myApp = angular.module("myApp",[]); myApp.run(function($http){
$http.get("/angular/todo.json").success(function(data){
model.items = data;
})
}); myApp.filter("checkedItems",function(){
return function(list,showComplete){
var resultArr = [];
angular.forEach(list,function(item){
if (!item.done || showComplete ) {
resultArr.push(item);
};
});
return resultArr;
}
}); myApp.controller("MyCtrl",function($scope){
$scope.todo = model;
$scope.incompleteCount = function(){
var _count = 0;
angular.forEach($scope.todo.items,function(item){
if(!item.done){
_count++
}
});
return _count;
}
$scope.addNewItem = function(actionText){
$scope.todo.items.push({"action":actionText,"done":false});
}
})
</script>
</head>
<body ng-controller="MyCtrl">
<div class="page-header">
<h1>{{todo.user}}'s To Do List
<span class="label label-default" ng-hide="incompleteCount() == 0">{{incompleteCount()}}</span>
</h1> </div>
<div class="panel">
<div class="input-group">
<input type="text" class="form-control" ng-model="actionText"/>
<span class="input-group-btn">
<button class="btn bth-default" ng-click="addNewItem(actionText)">Add</button>
</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Done</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in todo.items | checkedItems:showComplete | orderBy:'action'">
<td>{{item.action}}</td>
<td><input type="checkbox" ng-model="item.done" /></td>
<td>{{item.done}}</td>
</tr>
</tbody>
</table>
<div class="checkbox-inline"><label><input type="checkbox" ng-model="showComplete" />Show Complete</label></div>
</div>
</body>
</html>
angular初步认识一的更多相关文章
- Angular初步
一.angular.js是什么? angular.js是一个javascript的框架,与jquery是一个级别的,区别是jquery主要是擅长dom操作,而angular主要是擅长绑定数据显示数据. ...
- Angular.js 的初步认识
MVC模式 模型(model)-视图(view)-控制器(controller) Angular.js采用了MVC设计模式的开源js框架 1.如何在angular.js建立自己的模块(model),控 ...
- angular 实现modal windows效果（即模态窗口，半透明的遮罩层），以及bootstrap(css,components,js)的初步学习
废话不说,直接上代码.可直接看效果,对着分析..今天算是bootstrap 入门了,开心.. 突然居然很多事情就是那样,不要太多的畏惧,迈出第一步其实就成功了一半了. <html ng-app= ...
- angular smart-table组件如何定制化之初步研究
table表运用在后台管理用得频繁,一般bootstrap的class="table"就能满足样式需求以及分页需求,但是每个产品经理需求不一样,比如说分页:bootstrap分页实 ...
- Angular 2 + 折腾记 ：(7) 初步了解表单：模板驱动及数据驱动及脱坑要点
前言 表单在整个系统中的作用相当重要,这里主要扯下响应表单的实现方式. 首先须要操作表单的模块引入这两个模块. import { FormsModule, ReactiveFormsModule } ...
- 数据的双向绑定 Angular JS
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
- 利用angular结合translate为项目实现国际化
前言 利用H5项目第一版本已经上线,话说有了第一期就有了第二期,这不要为第二期做准备了,老大发话第一件事就要利用Angular JS实现项目的国际化以及后续要借助这个框架来实现其他功能,好吧我表示没怎 ...
- Angular快速入门篇
简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使 ...
- Angular 2.0 的设计方法和原则
转载自:Angular 2.0 的设计方法和原则 在开始实现Angular 2.0版本之际,我们认为应该着手写一些东西,告诉大家我们在设计上的考虑,以及为什么做这样的改变.现在把这些和大家一起分享,从 ...
随机推荐
- [SAP ABAP开发技术总结]选择屏幕——各种屏幕元素演示
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- docker tomcat7 dubbo-admin monitor
docker run --name=dubbo_admin9201 -tid -p : -v /home/dubbo/admin:/usr/local/tomcat7/webapps/ROOT cen ...
- Javascript学习笔记：闭包题解（4）
代码: var val1=0; var val2=0; var val3=0; for(var i1=1;i1<=3;i1++){ var i2=i1; (function(){ var i3= ...
- ASP.NET MVC 静态资源打包和压缩问题小记
ASP.NET MVC 中有个 BundleConfig 用于静态资源的打包和压缩,我在使用的过程中遇到一些问题,现在做下总结,并给出具体的解决方案. 问题一:打包压缩后的 JavaScript 和 ...
- 个推，手机推送API的使用
参考:http://www.cnblogs.com/may-25/p/5501804.html 推送成功后返回的任务Id: String contentId = push.getContentId(m ...
- C语言习题（结构）
实际应用中经常会用到二维平面上的点,点的操作包括设置点的位置( pointT setPoint(double x , double y ) ),显示第n个点的位置( void showPoint(po ...
- c/c++中两颗璀璨的明珠
1.指针: 函数指针做函数参数 回调函数 语法现象 意义 实现什么效果 (1).间接赋值成立的三个条件 a.两个变量 b.建立关联 c. *p-> (2).函数指针做函数参数 a.调用的角度去理 ...
- Deep Learning 26：读论文“Maxout Networks”——ICML 2013
论文Maxout Networks实际上非常简单,只是发现一种新的激活函数(叫maxout)而已,跟relu有点类似,relu使用的max(x,0)是对每个通道的特征图的每一个单元执行的与0比较最大化 ...
- IO流中SequenceInputStream类
SequenceInputStream类: 不断的读取InputStream流对象,对于使用Enumeration对象的情况,该类将持续读取所有InputStream对象中的内容,直到到达最后一个In ...
- 百度app测试服务
https://cloud.baidu.com/product/mat.html?t=cp:ct|pp:fcforbce242jrcs|cn:fcforbce242|pu:newAATJRKWS002 ...