AngularJS 是一个由 Google 开发的 JavaScript 框架，用于构建动态 Web 应用程序。它提供了一些强大的功能，如数据绑定、依赖注入、组件化等，使得开发者可以更加轻松地创建复杂的应用程序。本文将介绍 AngularJS 的基础知识，帮助初学者快速入门。
准备工作
在开始学习 AngularJS 之前，需要先安装它。可以通过以下方式进行安装：
- 下载 AngularJS 的最新版本：https://angularjs.org/
- 在 HTML 文件中引入 AngularJS 库：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
数据绑定
AngularJS 的一个重要特性是数据绑定。它允许开发者将应用程序中的数据与 HTML 元素绑定在一起，使得当数据发生变化时，HTML 元素也会相应地更新。下面是一个简单的例子：
<div ng-app="">
<p>姓名：<input type="text" ng-model="name"></p>
<p>你好，{{name}}</p>
</div>这个例子中，ng-app 指令表示这个应用程序的边界，ng-model 指令表示将输入框中的值与 name 变量绑定在一起，{{name}} 表示将 name 变量的值显示在 HTML 中。当用户在输入框中输入值时，{{name}} 的值也会相应地更新。
控制器
控制器是 AngularJS 应用程序中的一个重要组成部分，它用于定义应用程序的行为。控制器可以将数据从模型中提取出来，并将它们绑定到视图中。下面是一个简单的例子：
// javascriptcn.com 代码示例
<div ng-app="myApp" ng-controller="myCtrl">
<p>姓名：<input type="text" ng-model="name"></p>
<p>你好，{{greeting}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "AngularJS";
$scope.greeting = "欢迎学习 AngularJS!";
});
</script>这个例子中，ng-controller 指令表示这个应用程序的控制器是 myCtrl，myCtrl 控制器定义了一个名为 greeting 的变量，并将它绑定到视图中。当应用程序加载时，greeting 变量的值将被设置为“欢迎学习 AngularJS!”。
依赖注入
依赖注入是 AngularJS 中的另一个重要特性。它允许开发者将依赖关系声明为控制器的参数，从而使得这些依赖关系可以被自动注入到控制器中。下面是一个例子：
// javascriptcn.com 代码示例
<div ng-app="myApp" ng-controller="myCtrl">
<p>姓名：<input type="text" ng-model="name"></p>
<p>你好，{{greeting()}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.name = "AngularJS";
$scope.greeting = function() {
return "欢迎学习 " + $http.get("https://api.example.com/greeting").data.message;
};
});
</script>这个例子中，$http 是 AngularJS 内置的服务，用于进行 HTTP 请求。当 myCtrl 控制器被创建时，$http 服务会自动被注入到控制器中。greeting 函数将使用 $http 服务从远程服务器获取数据，并将获取的数据显示在视图中。
指令
指令是 AngularJS 中的一个强大功能，它允许开发者创建自定义 HTML 元素和属性，并将它们绑定到 JavaScript 函数中。下面是一个例子：
// javascriptcn.com 代码示例
<div ng-app="myApp" ng-controller="myCtrl">
<my-directive></my-directive>
</div>
<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
return {
template : "<h1>Hello World!</h1>"
};
});
</script>这个例子中，my-directive 是一个自定义指令，它的定义包括一个 template 属性，用于指定指令的 HTML 内容。当 my-directive 元素被创建时，它的内容将被替换为“Hello World!”。
总结
本文介绍了 AngularJS 的基础知识，包括数据绑定、控制器、依赖注入和指令。通过这些知识，开发者可以更加轻松地创建复杂的 Web 应用程序。希望本文对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655743c1d2f5e1655d1b22c8