AngularJS个人笔记——初探AngularJS

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就先到这里。

AngularJS个人笔记——初探AngularJS

推荐阅读更多精彩内容