AngularJS学习笔记(一)

Angular

ng-app

ng-app是用来声明Angular的边界，告诉浏览器从哪里开始Angular开始管理DOM。

ng-model

	<input ng-model='item.quantity'>

ng-model标记Angular的模型。

ng-controller

	<body ng-controller='CartController'>

在Angular 中，你将会使用一种叫做控制器的JavaScript 类来管理页面中的区域。
在body 标签中引入一个控制器，就是在声明CartController 将会管理介于和之间的所有内容。

ng-repeat

<div ng-repeat='item in items'>

ng-repeat 的意思是，对于items 数组中的每一个元素，都把
中的DOM 结构复制一份（包括div 自身）。
对于div 的每一份拷贝，都会把一个叫做item 的属性设置给它，这样我们就可以在模板中使用这份拷贝的元素了。

模板与数据绑定

基本的运作流程如下。

用户请求应用起始页。

用户的浏览器向服务器发起一次HTTP 连接，然后加载index.html 页面，这个页面里面包含了模板。

Angular 被加载到页面中，等待页面加载完成，然后查找ng-app 指令，用来定义模板边界。

Angular 遍历模板，查找指令和绑定关系，这将触发一系列动作：注册监听器、执行一些DOM 操作、从服务器获取初始化数据。这项工作的最后结果是，应用将会启动起来，并且模板被转换成了DOM 视图。

连接到服务器去加载需要展示给用户的其他数据。

ng-bind

使用ng-bind='greetingText'绑定数据域和{{greetingText}}效果是一样的，但是后者在等待html加载完毕之后才会由Angular解析，而前者不会。

$watch

	<form ng-controller="StartUpController">
		Starting: <input ng-change="computeNeeded()"
		ng-model="funding.startingEstimate">
		Recommendation: {{funding.needed}}
	</form>

	function StartUpController($scope) {
		$scope.funding = { startingEstimate: 0 };
		computeNeeded = function() {
			$scope.funding.needed = $scope.funding.startingEstimate * 10;
		};
		$scope.$watch('funding.startingEstimate', computeNeeded);
	}

为了能够正确地刷新输入框，而不管它是通过何种途径进行刷新的，我们需要使用$scope中的$watch()的函数。
最基本的一点就是，你可以调用$watch()函数来监视一个表达式，当这个表达式发生变化时就会调用一个回调函数。

ng-css

	.selected {
	 background-color: lightgreen;
	}

	<table ng-controller='RestaurantTableController'>
		<tr ng-repeat='restaurant in directory' ng-click='selectRestaurant($index)'
			ng-class='{selected: $index==selectedRow}'>
			<td>{{restaurant.name}}</td>
			<td>{{restaurant.cuisine}}</td>
		</tr>
	</table>

	function RestaurantTableController($scope) {
		$scope.directory = [
			{name:'The Handsome Heifer', cuisine:'BBQ'},
			{name:"Green's Green Greens", cuisine:'Salads'},
			{name:'House of Fine Fish', cuisine:'Seafood'}];
		$scope.selectRestaurant = function(row) {
			$scope.selectedRow = row;
		};
	}

使用ng-css可以实现动态加载css样式。

posted on 2016-03-16 19:13 宇文风阅读(115) 评论(0) 收藏举报

刷新页面返回顶部