AngularJS个人笔记——初探AngularJS

2016-12-05  本文已影响0人  陳三楽

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

上一篇 下一篇

猜你喜欢

热点阅读