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就先到这里。
网友评论