AngularJS学习总结
2017-09-21 22:05
225 查看
AngularJS学习总结
AngularJS是一个基于Mvx的前端重量级框架，在angularJS中最重要的和最需要关注的是数据；AngularJS适用于所有数据相关的项目；
AngularJS中的变量和方法和javascript中的不互通；
相对于使用ng-bind（不推荐使用），使用{{}}具有更强大的性能；
ng-app:AngularJS使用的范围；
ng-model:AngularJS绑定的控件；
ng-click:AngularJS中的点击事件；
ng-init:变量的初始化（在父级上加;不推荐把所有数据卸载ng-init里面）；
ng-repeat:AngularJS中的循环事件；
AngularJS中的Controller：
作用：
1、放JS代码；
示例代码（给变量赋值）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html ng-app="test">
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
var app = angular.module("test",[]);
app.controller('zhangsan',function($scope){
$scope.a = 12;
});
</script>
</head>
<body>
<div ng-controller="zhangsan">
<span>{{a}}</span>
</div>
</body>
</html>2、桥梁的作用（打通AngularJS和JavaScript）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html ng-app="test">
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
var app=angular.module("test",[]);
app.controller('cont1',function ($scope){
$scope.alert=function (s){
window.alert(s);
};
});
</script>
</head>
<body ng-controller="cont1">
<input type="text" ng-model="s12"/>
<input type="button" value="按钮" ng-click="alert(s12)">
</body>
</html>1个页面里可以有很多个module；
1个module里可以有很多个controller；
1、双向绑定：
e.g.:在A控件里的输入会显示在B控件中，同时在B控件里的输入会显示A控件中；
2、依赖注入：
普通函数：有调用方决定函数；
ng函数：由定义方决定参数；
注意事项：
依赖注入的参数名scope不能随便写；
controller有两种写法：
1、（推荐使用）
var app=angular.module("test",[]);
app.controller('cont1',
f7dd
function ($scope){
$scope.a=12;
});2、（此时参数名可以随便写）
var app=angular.module("test",[]);
app.controller('cont1',['$scope','$http',function (a,b){
a.a=12;
}]);filter–过滤器
示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html ng-app="test">
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
var app = angular.module('test',[]);
app.controller('cont1',function($scope){
$scope.items=[{name:'衬衫',price:15,time:213213123213},
{name:'外套',price:89,time:453454354355},
{name:'鞋子',price:123,time:144541255122}];
});
</script>
</head>
<body >
<ul ng-controller="cont1">
<li ng-repeat="item in items">
<h3>{{item.name}}</h3>
<span>{{item.price|currency}}</span>
<i>{{item.time|date:"yyyy年MM月dd日 HH:mm:ss"}}</i>
</li>
</ul>
</body>
</html>价格加 |currency(过滤器) 之后向外输出带了美元符号
时间加了 |date(过滤器) 向外输出变成了年月日格式格式（{{item.time|date:”yyyy年MM月dd日 HH:mm:ss”}}同时过滤器可以带参数）
ng-src:用于给图片加地址
示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html ng-app="">
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" src="js/angular.js"></script>
</head>
<body ng-init="a=true">
<input type="text" ng-model="src"/>
<img ng-src="{{src}}"/>
</body>
</html>ng-href:加链接
ng-hide:隐藏
ng-show:显示
示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html ng-app=""> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <script type="text/javascript" src="js/angular.js"></script> </head> <body ng-init="a=true"> <input type="button" value="显示隐藏" ng-click="a=!a"> <div style="background:#CCC;width:300px;height:300px;" ng-hide="a"></div> </body> </html>
ng-clack:用于做延迟（页面没加载出来之前都是隐藏的）
AngularJS从服务器获取数据：
采用$http 的get()和post()方法；
示例代码（从a.php获取数据）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html ng-app="test">
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
var app=angular.module("test",[]);
app.controller('cont1',function ($scope,$http){
//$http.get(url,参数);
//$http.post();
$http.get('a.php',{
params:{a:12,b:5},
responseType:'json'
}).then(function (res){
alert(res.data);
},function (){
alert("失败了");
});
});
</script>
</head>
<body ng-controller="cont1">
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 关于AngularJs中的路由学习总结
- AngularJS学习总结
- 【angularjs】【学习心得】ng-class总结
- 前端MVC学习总结（三）——AngularJS服务、路由、内置API、jQueryLite
- angularjs学习总结一(表达式、指令、模型)
- 学习angularjs的总结与心得-作用域
- 关于AngularJs中的路由学习总结
- :angularjs学习总结(~~很详细的教程) 很不错的一篇帖子 适合快速了解angularjs整体结构 有个整体印象
- angularjs学习总结 详细教程
- angularjs学习总结 详细教程
- angularjs学习总结 详细教程
- Angularjs 学习笔记总结之二
- angularjs学习总结(~~很详细的教程) 适合快速了解angularjs整体结构 有个整体印象
- angularjs学习总结 详细教程
- AngularJS—学习总结
- angularjs学习总结 详细教程
- [转载]angularjs学习总结 详细教程
- 学习angularjs的总结与心得-hide/show
- angularjs学习总结 详细教程（转载）
- AngularJs学习总结