AngularJS 是一个 JavaScript 框架，它是一个由 Google 开发和维护的前端框架。AngularJS 的特点在于它使用数据绑定和指令来构建可复用、可测试、可拓展的 Web 应用。在这篇文章中，我们将介绍一些 AngularJS 应用的示例代码，并对其进行深入分析，以帮助读者更深入地了解 AngularJS 的应用。
示例 1：一个简单的 AngularJS 应用
// www.javascriptcn.com code example
<!DOCTYPE html>
<html ng-app>
<head>
<title>AngularJS Demo</title>
</head>
<body>
<div ng-controller="myController">
<input type="text" ng-model="name" placeholder="Enter your name">
<p>Hello {{name}}!</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
function myController($scope) {
$scope.name = "AngularJS";
}
</script>
</body>
</html>这个应用非常简单，它只有一个文本框和一个显示问候消息的段落。当用户在文本框中输入他们的名字时，问候消息将显示输入的名字。这个应用的关键组件是 ng-model 指令，它将文本框的值绑定到 $scope.name 变量上。应用中 ng-controller 指令定义了一个控制器，它将数据模型绑定到视图上。在这个简单的应用中，myController 控制器只定义了一个名为 name 的变量，并将其设置为 "AngularJS"。
示例 2：通过 HTTP 获取数据
// www.javascriptcn.com code example
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Demo</title>
</head>
<body>
<div ng-controller="myController">
<ul>
<li ng-repeat="product in products">
{{product.name}} - {{product.price}}
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope, $http) {
$http.get("products.json").then(function(response) {
$scope.products = response.data;
});
});
</script>
</body>
</html>这个应用从 products.json 文件中获取产品数据，然后在页面上显示产品的名称和价格。应用中 ng-repeat 指令在每个产品中创建一个列表项。关键组件是 $http 服务，它被注入到 myController 控制器中。它使用 get 方法从服务器获取数据，并使用 then 方法处理响应。response.data 包含返回的 JSON 数据。
示例 3：使用过滤器
// www.javascriptcn.com code example
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Demo</title>
</head>
<body>
<div ng-controller="myController">
<ul>
<li ng-repeat="product in products | filter:searchText">
{{product.name}} - {{product.price}}
</li>
</ul>
<input type="text" ng-model="searchText" placeholder="Search">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.products = [
{name: "Product A", price: 10},
{name: "Product B", price: 20},
{name: "Product C", price: 30},
{name: "Product D", price: 40}
];
});
</script>
</body>
</html>这个应用包括一个文本框，它可以根据用户的输入过滤产品列表。应用使用了一个过滤器 filter，它可以根据 $scope.searchText 过滤产品列表。在这个示例中，我们没有从服务器获取数据，而是直接在控制器中定义了产品列表。
示例 4：使用路由
// www.javascriptcn.com code example
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Demo</title>
</head>
<body>
<div ng-controller="myController">
<ul>
<li><a href="#/">Home</a></li>
<li><a href="#/about">About</a></li>
<li><a href="#/contact">Contact</a></li>
</ul>
<div ng-view></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<script>
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "home.html"
})
.when("/about", {
templateUrl : "about.html"
})
.when("/contact", {
templateUrl : "contact.html"
})
.otherwise({
template : "404"
});
});
app.controller('myController', function($scope) {
$scope.message = "Hello AngularJS!";
});
</script>
</body>
</html>这个应用包括三个页面：Home、About 和 Contact。在应用启动时，它显示一个带有链接的菜单，并根据用户的选择在 ng-view 中渲染相应的页面。在这个示例中，我们使用了 AngularJS 的路由模块 ngRoute。在 app.config 中我们定义了路由规则，指定当用户访问不同的 URL 时应该渲染哪个 HTML 模板。在控制器中，我们将欢迎消息存储在 $scope.message 变量中，并在模板中使用它来显示欢迎消息。
结论
AngularJS 是一个十分强大的前端框架，能够让开发者轻松构建可复用、可测试、可拓展的 Web 应用。本文我们介绍了一些 AngularJS 应用的示例代码，并进行了深入分析，希望能为读者更好地理解 AngularJS 的应用提供参考和指导。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6734799f0bc820c5824954fd