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>

转载于:https://www.cnblogs.com/kevinlifeng/p/5192899.html

angular初步认识一相关推荐

前端学习（2324）：angular初步使用
app.component.html <div style="text-align:center"><h1>welcome to {{title}}< ...
angular 实现modal windows效果（即模态窗口，半透明的遮罩层），以及bootstrap(css,components,js)的初步学习...
废话不说,直接上代码.可直接看效果,对着分析..今天算是bootstrap 入门了,开心.. 突然居然很多事情就是那样,不要太多的畏惧,迈出第一步其实就成功了一半了. <html ng-app= ...
ng-notadd 0.17.1 发布，基于 Angular 的企业级中后台
中文说明: 支持后台生成截图修改步进组件的表单字段和按钮样式修改json-schema-form组件布局样式修改步进器组件布局样式技术栈 Typescript Angular Material ...
第二讲 html5框架+Crosswalk打包app 以及 Angularjs 基础（初步认识了解Angularjs）
第二讲 html5框架+Crosswalk打包app 以及 Angularjs 基础(初步认识了解Angularjs) 学习要点: 1. html5框架+Crosswalk打包app 2. 什么是a ...
利用angular结合translate为项目实现国际化
前言利用H5项目第一版本已经上线,话说有了第一期就有了第二期,这不要为第二期做准备了,老大发话第一件事就要利用Angular JS实现项目的国际化以及后续要借助这个框架来实现其他功能,好吧我表示没怎 ...
angular的html引入js,在AngularJS中的文件夹中加载JavaScript和CSS文件
AngularJS不支持你想要的东西,但是你可以看看Grunt或Gulp等构建工具,它们可以让你"构建"你的应用程序.在您的情况下,这些工具可以查找CSS文件并将它们连接成一个文件 ...
《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记二〇一九年二月十三日星期三2时28分54秒前提:本书适合有初步HTML.CSS.JavaScri ...
wpf datepicker 选择时分秒_[Angular 组件库 NG-ZORRO 基础入门] - DatePicker
前言回顾经过几天的学习,我们完成了 nz-table 相关知识的初步了解,当然还有很多情况我们没有顾及到,有兴趣的同学可以前往官方文档去查看剩余的示例说明. 今天我们继续介绍之前项目中涉及的组件:D ...
初步了解react-babel-虚拟DOM-JSX-类组件-函数式组件
一初步了解React 需要理解的概念有: 什么是六何分析法? 利用六何分析法剖析 React 如何查看哪些项目是用 reactjs 进行开发的学习 ReactJs 常用的 JavaScript 语 ...

angular初步认识一

angular初步认识一相关推荐

最新文章

热门文章