angular入门学习之一

最新推荐文章于 2023-06-14 11:52:11 发布

xy_ggsddu

最新推荐文章于 2023-06-14 11:52:11 发布

阅读量341

点赞数

分类专栏： angular 文章标签： angular

本文链接：https://blog.csdn.net/xy_ggsddu/article/details/50844712

版权

angular 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

填坑。最近没有那么忙开始陆陆续续更新自己学习Angular的心得。同样都是初学者，有不足的地方希望大家指正。谢谢！

先看Demo

<!doctype html>
<html ng-app="firstApp"><!--Angular根元素，让AngularJs知道从哪里开始编译-->
	<head>
		<title>First AngularJS App</title>
	</head>
	<body>
		<div ng-controller="FirstController"><!--此div含有一个名为FirstController的控制器-->
			<span>Name:</span>
			<input type ="text" ng-model="first"><!--处理赋值，变量名为first-->
			<input type = "text" ng-model="last"><!--同上-->
			<button ng-click='updateMessage()'>Message</button><!--点击触发事件-->
			<hr>
			{{heading+message}}<!--Angular表达式-->
		</div>
		<script type="text/javascript" src="../angular.js"></script>
		<script type="text/javascript" src="first.js"></script>
	</body>
</html>

var firstApp = angular.module('firstApp',[]);//创建fristApp对象
firstApp.controller('FirstController',function($scope){//获取FirstController对象
	$scope.first = 'Some';//给first变量赋予初始值
	$scope.last = 'One';//同上
	$scope.heading = 'Message:';//设置heading初始值
	$scope.updateMessage = function(){//设置updateMessage方法
		$scope.message = 'Hello' + $scope.first + '' + $scope.last + '!';
	};
});

上下比对看看其实我们发现Angular的应用完全没有自己写dom操作的地方。通过一些ng指令来完成事件绑定以及赋值，当我们写网页或者其他Angular应用时应注意的就是程序逻辑的地方，而不用去关注dom操作，减少了大量的代码量。这更符合面向对象编程，让框架去处理dom而我们只去处理逻辑。