AngularJS 实例学习笔记
前言
本文档记录了我在学习 AngularJS 过程中实践的一些例子和心得体会。
简介
AngularJS 是一款由 Google 推出的前端框架，通过它可以轻松构建复杂的单页面应用。AngularJS 的核心概念是数据驱动模型，即视图层通过绑定模型来自动更新，使得开发者可以更专注于业务逻辑。下面将介绍一些常见的 AngularJS 实例。
实例
双向数据绑定
双向数据绑定是 AngularJS 最重要的特性之一，它可以将模型和视图进行双向同步。以下是一个简单的双向数据绑定的例子：
htmlCopy Code<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="name">
<p>Hello, {{name}}!</p>
</body>
</html>
上述代码中，我们使用 ng-model 指令将输入框与 name 变量进行绑定，使用双括号语法输出 name 变量的值。
控制器和作用域
控制器是 AngularJS 中的一个重要概念，它可以将视图和模型进行解耦。以下是一个简单的控制器和作用域的例子：
htmlCopy Code<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</head>
<body ng-controller="myCtrl">
<p>First Name: {{firstName}}</p>
<p>Last Name: {{lastName}}</p>
</body>
</html>
上述代码中，我们使用 ng-controller 指令将 myCtrl 控制器与整个页面进行绑定，然后在控制器中定义了 firstName 和 lastName 两个变量，并将它们传递给了 $scope 对象。在视图中，我们可以通过双括号语法输出这两个变量的值。
过滤器
过滤器是 AngularJS 中的一个常见概念，它可以对数据进行格式化和处理。以下是一个简单的过滤器的例子：
htmlCopy Code<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.names = [
{name: "Jani", country: "Norway"},
{name: "Hege", country: "Sweden"},
{name: "Kai", country: "Denmark"}
];
});
</script>
</head>
<body ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">{{x.name}}</li>
</ul>
</body>
</html>
上述代码中，我们使用 ng-repeat 指令将 names 变量遍历输出，并使用 orderBy 过滤器将它们按照 country 属性排序。
结语
AngularJS 是一个非常强大的前端框架，通过上述实例，相信读者已经初步掌握了其核心概念和用法，希望本文对你有所帮助。