angularjs1.6.x实例教程

阅读原文时间：2021年04月20日阅读：1

AngularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS现行主要区分为2个版本系列，分别是AngularJS1.x和AngularJS2，两个版本间的使用上有不少的区别，虽说AngularJS2是对AngularJS1.x的升级和精简，但在资料文档及稳定性上还暂时不如AngularJS1.x，所以我们现在较多的web应用还是用AngularJS1.x开发。从个人了解AngularJS1.x的层次上讲，想要学习AngularJS2，最好还是先从AngularJS1.x开始学习，磨刀不误砍柴工。

AngularJS1.x最大的使用特点就是在标签元素上添加"ng-"指令，通过两个大括号"{{}}"作为表达式，实现对变量的引用及数值显示。本博客的所有代码均使用当前最新版AngularJS v1.6.5版本。下面是一个简单的hello world测试代码，这也是最常见的基础格式：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="js/libs/angular/angular.js"></script>
    </head>

    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            <input type="text" ng-model="myInput" />
        </div>
        <script>
            var app = angular.module("myApp", []);
            app.controller("myCtrl", function($scope) {
                $scope.myInput = "hello world";
            });
        </script>
    </body>

</html>

上述例子中，用到了ng-app、ng-controller，这两个指令几乎是每个使用Angular框架页面必备的指令，分别表示对该页面的定义与控制。ng-model表示定义一个变量"myInput"与元素绑定，而在