【笔记】AngularJs学习笔记[02]【实践回顾与知识点归纳】

关注

原创 2022-06-29 08:16:02 1k 阅读 AI 写同款· GEO 优化 ›

前端项目-ng-currency.zip 前端项目-ng-currency,与货币筛选器一起使用的指令。立即下载

⭐️ 本文首发自前端修罗场(点击即可加入)，一个专注 Web 技术、答疑解惑、面试辅导、职业发展的社区。现在加入，即可参与打卡挑战，和一群人一起努力。挑战成功即可获取一次免费的模拟面试机会，进而评估知识点的掌握程度，获得更全面的学习指导意见，不走弯路，不吃亏！

上一篇中，我们介绍ng的数据绑定的方法，不知道你是否能给吸收。想了一下，为了在 ng 入门之前能够帮助大家打好基础，所以在这篇中我就用一个例子来解析 ng，并归纳一下 ng 的知识点。

案例解析

<html ng-app>
<!-- ng-app 告诉angular 应该管理页面的那部分，在html中声明就是管理整个html页面 -->
<head>
	<title></title>
</head>
<!-- 用控制器管理body标签之间的任何东西 -->
<body ng-controller='CartController'>
	<h1>订单：</h1>
	<!-- ng-repeat为items数组中每个元素拷贝一个这个div中的DOM，在div每次拷贝中，同时设置一个叫item的属性代表当前元素 -->
	<div ng-repeat='item in items'>
		<!--将当前项的title属性插入到DOM中 -->
		<span>{{item.title}}</span>
		<!-- 定义创建了输入字段和item.quantity之间的数据绑定 -->
		<input ng-model='item.quantity' />
		<!-- currency是ng的一种过滤器 -->
		<span>{{item.price|currency}}</span>
		<span>{{item.price*item.quantity|currency}}</span>
		<!-- ng-click点击调用remove()函数，并传递$index -->
		<button ng-click="remove($index)">删除</button>
	</div>

	<script type="text/javascript" src="js/angular.js"></script>
	<script type="text/javascript">
	//管理逻辑
		// $scope对象：用来把数据绑定到界面上的元素
		function CartController($scope){
			$scope.items=[{//定义一个items集合
				title:'水笔',
				quantity:8,
				price:3.95
			},{
				title:'毛笔',
				quantity:10,
				price:12.95
			}];
			//定义remove函数,将remove加到$scope中
			$scope.remove=function(index){
				$scope.items.splice(index,1);
			};
		}
	</script>
</body>
</html>

希望在对这个例子进行了完整的注解之后，你能更清晰的理解ng的思路,并且希望您能亲自实践一下！实践是检验真理的唯一标准嘛~

知识点归纳

1.MVC
ng是基于MVC的js库，首先你要了解一下JS在MVC上的解析。

M：模型，包含应用当前状态的数据；
V：视图，显示模型中的数据；
C：控制器，管理模型与视图的关系。

用一张图来解释：

javascript-MVC模式

现在是否对javascript的MVC模式有更清晰的认识呢。

OK，我们接下来将ng.

2.angularjs知识点

首先，你要使用ng来创建一个web应用，你必须做2件事：

（1）加载angularjs；(通常我们可以使用CDN加载angularjs,因为CDN是一种“脚本跨应用缓存”，即当用户有多个使用angularjs的应用时，ng只下载一次，不会再次加载CDN。)

（2）使用ng-app告知angular管理那一部分的DOM；

注释：如果在现有的一个应用中，希望使某部分用angularjs来管理，就在该部分的元素上加上ng-app，如<div ng-app></div>

其次，在我们在$scope中创建数据的时候，应该使用“模型对象”的方式来包含数据，这样能避免在$scope对象中原型继承引起非预期的行为。

如：

var messages={};//定义一个messages对象
		messages.someText="hello world";//为messages的属性someText赋值
		function myController($scope){
			$scope.messages=messages;
		}