AngularJS 学习示例-CSDN博客

本文链接：https://blog.csdn.net/big1989wmf/article/details/84766886

1、九种提高AngularJS性能的方法
[url]http://www.iteye.com/news/32507[/url]

[b]例子1：[/b]

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta charset="utf-8">
<script src="editor-app/libs/angular_1.2.13/angular.min.js"></script>
<script src="editor-app/libs/angular_1.2.13/angular-animate.min.js"></script>
<script src="test/demo.js"></script>

</head>
<!-- body #s -->
<body >
<!--  -->
<h5>1、ng-model属性双向绑定“\{\{\}\}”</h5>
	<div ng-controller="helloCtrl">
		<p>名字输入 : <input type="text" name="world" ng-model="world" /></p>
		<p>Hello后面输出： {{world}}</p>
	</div>

<h5>2、ul-ol-li筛选、 排序示例</h5>
	<div ng-controller="phoneListCtrl">
		<input ng-model="quer"/>
		<select ng-model="sortType">
			<option value="name">按姓名</option>
			<option value="age">按年龄</option>
		</select>
		<ul>

		  <li ng-repeat="phone in phones |filter:quer |orderBy:sortType">
		   <p>{{phone.name}}--{{phone.age}}--{{phone.snippet}}--<img ng-src="{{phone.imsrc}}"/></p>
		  </li>
		</ul>
		<ol>

		  <li ng-repeat="phone in phones |filter:quer |orderBy:sortType">
		   <p>{{phone.name}}--{{phone.age}}--{{phone.snippet}}--<img ng-src="{{phone.imsrc}}"/></p>
		  </li>
		</ol>
	</div>

<h5>3、简单金额统计</h5>
<div ng-controller="multipleController">
数量：<input type="number" min="0" max="10" required ng-model="num1"/>
单价：<input type="number" min="1" max="100" required ng-model="num2"/>
<p>总计（默认美元形式）：{{num1*num2 | currency}}</p>
<p>总计（指定人民币形式）：{{num1*num2 | currency:"RMB ¥"}}</p>
</div>

<h5>4、filter:内置过滤器；自定义过滤器</h5>
<div ng-controller="filterController">
	<input ng-model="lower">
	<input ng-model="upper">
	    <p>{{ lower | lowercase }}</p>
	    <p>{{ upper | uppercase }}</p>
</div>

<h5>5、指令directive示例-根据格式显示时间</h5>
<div ng-controller="directiveController">
 <p> 要显示的时间格式:<input ng-model="format"/></p>
 <p>当前时间:<span my-current-time></span></p> 
</div>

<h5>6、</h5>
<div ng-controller="showHideController">
<p><button ng-click="toggle()">显示/隐藏</button></p>
<p ng-hide="myVar">
名：<input ng-model="ming"/>
姓：<input ng-model="xing"/>
----姓名：{{xing+" "+ming}}
</p>

</div>


<h5>7、自定义服务</h5>

<div  ng-controller="myController7">
	<input ng-init="message='good'" ng-model="message"/>
	<button ng-click="callNotify(message);">notify</button>
</div>


<script type="text/javascript">
var app=angular.module("demoApp",[]);
//demo1
app.controller("helloCtrl",function($scope){
	$scope.world="angularjs text";//初始值
});
//demo2
var phoneListCtrl=['$scope','$http',function($scope,$http){
	$scope.phones=[
	               {name:"小赵",age:"34",snippet:"行政",imsrc:"editor-app/images/bpmn-error.png"},
	               {name:"张域",age:"19",snippet:"法务",imsrc:"editor-app/images/datadefinition.png"},
	               {name:"刘芳",age:"25",snippet:"财务",imsrc:"editor-app/images/wrench.png"},
	               {name:"袁华",age:"46",snippet:"运营",imsrc:"editor-app/images/delete.png"},
	               {name:"小孙",age:"22",snippet:"技术",imsrc:"editor-app/images/bpmn-warning.png"}
	               ];
	//方式二赋值
	//$http.get('test/test.json').success(function(data){
	//	$scope.phones=data;
	//});
	$scope.sortType='age';
}];
//demo3
function multipleController($scope){
	//初始
	$scope.num1=2;
	$scope.num2=4;
}
//demo4
function filterController($scope){
	//初始
	$scope.lower="UPPERCASE LETTERS TO LOWERCASE";
	$scope.upper="lowercase letters to uppercase";
}
//demo5
function directiveController($scope){
	$scope.format='yyyy-MM-dd HH:mm:ss';
}
//在module模块中新建指令
app.directive('myCurrentTime',function($timeout,dateFilter){
	return function(scope,element,attrs){
		var format,timeoutId;
		function updateTime(){
			element.text(dateFilter(new Date(),format));
		}
		//$watch监听scope值的改变
		scope.$watch('format',function(value){
			format=value;
			updateTime();
		});
		function updateLater(){
			timeoutId=$timeout(function(){
				updateTime();
				updateLater();
			},1000);
		}
		element.bind('$destroy',function(){
			$timeout.cancel(timeoutId);
			console.log(timeoutId);
		});
		updateLater();

	}
});
//demo6
app.controller("showHideController",function($scope){
	$scope.xing="雷";
	$scope.ming="小风"
	$scope.myVar=false;
	$scope.toggle=function(){
		$scope.myVar=!$scope.myVar;
	}
});

//demo7--服务factory-callNotify调用自定义服务notifyService
angular.module("demoApp", []).factory('notify',['$window',function(win){
	var msgs=[];
	return function(msg){
		msgs.push(msg);
		if(msgs.length==3){
			win.alert(msgs.join('\n'));
			msgs=[];
		}
	};
}]);

function myController7(scope,notifyService){
	scope.callNotify=function(msg){
		notifyService(msg);
	};
}

myController7.$inject=['$scope','notify'];

</script> 	
</body>
<!-- body #e -->
</html>

[b]例子2：[/b]


<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta charset="utf-8">
<script src="editor-app/libs/angular_1.2.13/angular.min.js"></script>
<script>
var app=angular.module("demoApp",[]);
app.controller("demoController",function($scope){
	//初始化
	$scope.productsList=[
	  {name:"苹果",category:"水果",other:"--"},
	  {name:"香蕉",category:"水果",other:"--"},
	  {name:"黄瓜",category:"蔬菜",other:"--"},
	  {name:"豆角",category:"蔬菜",other:"--"},
	  {name:"西瓜",category:"水果",other:"--"},
	  {name:"米",category:"其它",other:"--"},
	  {name:"白菜",category:"蔬菜",other:"--"},
	  {name:"油",category:"其它",other:"--"},
	  {name:"萝卜",category:"蔬菜",other:"--"}
	];
	$scope.quantity=0;
	$scope.price=0;
	//点击计算按钮
	$scope.countTotalFunction=function(){
		if(undefined==$scope.productName||null==$scope.productName){
			alert("请选择商品名称！");
		}else{
			alert('商品名称：'+$scope.productName.name+"，总计: "+$scope.quantity*$scope.price);
		}
	};
});

</script>
</head>

<body >
<div style="text-align: left;margin-left: 200px;">
	<h5>DEMO:购买某种商品的金额统计</h5>
	<div ng-controller="demoController">
		<p>商品名称：
		 <select ng-model="productName" ng-options="p.name group by p.category for p in productsList">
		 	<option value=''>--请选择--</option>
		 </select>
		</p>
		<p>数量：<input type="text" ng-model="quantity" required /></p>
		<p>单价：<input type="text" ng-model="price" required /></p>
		<p>自动统计金额：{{quantity*price}}</p>
		<button ng-click="countTotalFunction()">手动计算金额</button>
	</div>
</div>
<!--
PS:
	1-$scope作用域是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带,数据绑定就靠它。
	  	$rootscope是各个controller中scope的桥梁。用$rootscope定义的值，可以在各个controller中使用。
	2-AngularJS拥有许多扩展的HTML属性即指令：
		如ng-app,ng-init,ng-model,ng-controller,ng-click,ng-change,ng-class,
		ng-show,ng-hide,ng-disabled,ng-cloak,ng-view,ng-bind,
		ng-include,ng-options...
    3-AngularJS服务：
   		$http $location $timeout $interval $q $routeProvider $log....
-->
</body>
</html>