AngularJS之HelloWorld一

当下提到前端开发，大家都绕不开Vue，而且Angular版本已经11.x了。为什么我还要继续学习AngularJS（version 1.x）这个诞生于2009年“过时”的前端JS框架？主要以下几点的思考：

1、少数项目还在使用Angular1.x

2、优秀的前端框架层出不穷，这些框架为什么这么优秀：）

3、重新认识AngularJS，发现“歪果人”的创新能力毋容置疑，这个是值得深思的

...

很久很久以前，网页上要实现局部刷新等功能，我们还用着iframe、frameset等这些“古老”的技术，我们上网使用的主流浏览器还是IE6、IE7，我们在不断的处理各种浏览器的兼容性问题。

那些年你还记得Google地图、Gmail的出现是多么的震撼，而AJAX、Jquery技术的出现是彻底改变了我们以往写前端的方式，那还是Web2.0时代，逢人必说我们用了AJAX技术：）

但是我们创造基于WEB应用程序的能力是令人难以置信的，而构造这些应用程序的复杂性也是同样令人难以置信的，此时我们发现，基于AJAX、JQUERY等技术开发大型WEB应用程序越来越痛苦。

为什么会越来越痛苦？因为我们那时的浏览器只是定位于网页效果展示，交互性很差，我们要尝试满足WEB浏览器各种奇怪的内部机制...

我们希望编程的过程就像在创造；

我们希望有一个环境，能够帮助我们决策，使得应用程序容易创建，并从一开始就能够理解，随着项目的变大，能够继续正确的策略使得应用程序容易测试、扩展和维护；

AngularJS来了！

AngularJS官网：https://angularjs.org/

提示：作为学习，这里的AngularJS版本用的是1.0.8，理解其设计思想！生产中很少用这个版本了。

AngularJS版本：1.0.8

CDN地址：https://cdnjs.com/libraries/angular.js/1.0.8

API地址： https://code.angularjs.org/1.0.8/docs/api

思考一个问题：

　　以前web应用程序开发是怎样的一个处理过程？

　　多页面Web应用程序通过组装和拼接服务器上的数据来创造它们的HTML，然后将完成的页面输送给浏览器。熟悉java体系的同学们都知道JSP、Freemarker、VeLocity等模板技术，也知道MVC架构模式，这其实是在服务端组装数据（业务）和HTML（JSP等模板）。

　　Angular又有哪些不同？

　　传递模板和数据到浏览器，然后在浏览器端组装。

　　服务器的角色呢？服务端则变成了只提供模板的静态资源和提供模板所需要的数据。

在浏览器端如何用Angular组装数据和模板？

让我们看一个例子：

helloworld工程目录：

hello.html

<!DOCTYPE html>
<html ng-app>
<head>
    <Meta charset="UTF-8">
    <title>hello</title>
    <script src="../libs/angular.js/1.0.8/angular.min.js"></script>
    <script type="text/javascript">
        function HelloController($scope) {
            $scope.greeting = { text: 'Hello' };
        }
    </script>
</head>
<body>
    <div ng-controller="HelloController">
        <input type="text">
        <p>{{ greeting.text }}</p>
    </div>
</body>
</html>

运行结果如下：

我们观察一下代码结构，对比以前的写法有什么不同？

我们发现一些有趣的现象：

1、在整个HTML中没有classes或者IDs来区分绑定的事件监听器。

2、当HelloController设置greeting.text为hello时，我们并没有注册任何事件监听器和写任何回调函数。

3、HelloController是一个普通的JavaScript类，我们并没有注册继承来自Angular提供的任何东西。

4、HelloController获取它需要的$scope对象，而没有必要创建它。

5、我们没有必要调用HelloController的构造函数，或者计算出何时调用他们。

至此，我们不仅要发问，Angular应用组织结构为什么完全不同于以前类似的应用？Angular为什么要这样设计（即指定这种决策）以及Angular是如何运行的？

我们下一篇继续分析~~~

AngularJS之HelloWorld一

相关推荐