AngularJS学习总结

最新推荐文章于 2019-04-01 20:41:17 发布

cchangcs

最新推荐文章于 2019-04-01 20:41:17 发布

阅读量450

点赞数

文章标签： angularjs 框架前端

本文链接：https://blog.csdn.net/github_39611196/article/details/78057493

版权

Angularjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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',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>