2014年,在我实习的时候第一次接触AngularJS,那时候真是感觉这框架简直是太难学了!
2015年,AngularJS大行其道,可惜自己水平太洼,没兴趣,也没动力去学。
2016年,虽然React和Vue开始火了起来,但由于工作原因,所做的项目前端AngularJS,后端JAVA SpringMVC,数据库MariaDB,只能硬着头皮边学边做,到现在对AngualrJS一知半解,对许多的技术点掌握的不是很好。所以想重新学一遍,做做个人笔记,在提高自己的同事,系能能够对其他的初学者有所帮助。
所用的教材是AngularJS,根据自己的经验,会对教材里的代码做一些修改。
先看下最简单的AngularJS的例子:hello.html
<html ng-app="helloApp">
<head>
<title>Hello</title>
</head>
<body>
<div ng-controller="HelloCtrl">
<p>{{greeting.text}}, World</p>
</div>
</body>
<script src="http://cdn.bootcss.com/angular.js/1.5.9/angular.min.js"></script>
<script type="text/javascript">
var helloApp = angular.module("helloApp", []);
helloApp.controller("HelloCtrl", function($scope) {
$scope.greeting= { text: 'Hello'};
});
</script>
</html>
好,打开浏览器看看运行的结果。
好的,熟悉的Hello, World跃然于屏幕上。 我们来详细看看这些代码都是干什么的。
<script src="http://cdn.bootcss.com/angular.js/1.5.9/angular.min.js"></script>
这段代码是引入AngularJS文件,以便在此HTML页面能够使用AngularJS这个框架里的各种特性。为了能快速引入,这里使用国内CDN。也可以把框架源码下载到本地,然后用相对路径引入。
<script type="text/javascript">
var helloApp = angular.module("helloApp", []);
helloApp.controller("HelloCtrl", function($scope) {
$scope.greeting= { text: 'Hello'};
});
</script>
这里定义了一个module--"helloApp",以及module下的controller--"HelloCtrl"。
<html ng-app="helloApp">
</html>
<div ng-controller="HelloCtrl">
</div>
这几行代码则定义了module和controller的代码生效的范围。
在controller里,我们定义了一个对象,“greeting”, 该对象有一个属性text,里面的值为‘hello’。至于$scope是什么,之后再讲。
<p>{{greeting.text}}, World</p>
就会这么取得值,helloApp→HelloCtrl→greeting.text,由于是双向数据绑定的,在controller里改变greeting.text的值,前端页面显示的值便会自动改变。最终输出的结果就是Hello, World。
初探AngularJS就先到这里。