📅 最后修改于: 2023-12-03 14:59:19.256000 🧑 作者: Mango
AngularJS是一款由Google开发的前端JavaScript框架，它以MVVM模式为基础，提供一系列的工具和API，使得开发者更容易地开发单页应用和动态Web应用。
安装AngularJS的方式有很多种，以下是常见的几种方式：
在命令行中执行以下命令：
npm install angular
在HTML文件中加入以下代码：
<!-- AngularJS -->
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.0/angular.min.js"></script>
从官网下载安装包，然后将angular.js文件放入项目中。
创建一个AngularJS应用非常简单，只需要在HTML文件中引入AngularJS的脚本，然后声明ng-app指令即可。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.0/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<h1>{{greeting}}</h1>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.greeting = "Hello, AngularJS!";
});
</script>
</body>
</html>
在上面的例子中，我们创建了一个名为myApp的AngularJS应用，并在页面中使用了ng-controller指令，将页面分成了两个部分。在AngularJS中，一个应用通常会包括多个控制器，每个控制器用于掌控某个特定区域的业务逻辑。在这个例子中，我们使用了一个名为myCtrl的控制器，用于掌控页面中的greeting。
AngularJS提供了很多指令，用于将数据和视图进行双向绑定。
ng-bind指令用于将数据绑定到视图中。在下面的例子中，我们将message属性绑定到了h1标签中。
<div ng-controller="myCtrl">
<h1 ng-bind="message"></h1>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.message = "Hello, AngularJS!";
});
</script>
ng-model指令用于实现双向数据绑定，它会将视图中的数据和作用域中的变量进行双向绑定。在下面的例子中，我们使用ng-model指令将输入框中的数据和作用域中的message变量进行了双向绑定。
<div ng-controller="myCtrl">
<input type="text" ng-model="message">
<h1>{{message}}</h1>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.message = "Hello, AngularJS!";
});
</script>
在AngularJS中，控制器使用JavaScript对象来描述。在控制器中，我们可以定义变量、函数以及其他需要的属性和方法。
<div ng-controller="myCtrl">
<h1>{{message}}</h1>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.message = "Hello, AngularJS!";
$scope.changeMessage = function() {
$scope.message = "Hello, World!";
};
});
</script>
在上面的例子中，我们定义了一个名为changeMessage的函数，用于改变message变量的值。
AngularJS提供了很多过滤器，用于对数据进行格式化和处理。下面是一些常用的过滤器：
currency过滤器用于格式化货币。在下面的例子中，我们将price变量格式化为人民币。
<div ng-controller="myCtrl">
<h1>{{price | currency:'￥'}}</h1>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.price = 100.00;
});
</script>
uppercase过滤器用于将字符串转换为大写。在下面的例子中，我们将greeting变量转换为大写。
<div ng-controller="myCtrl">
<h1>{{greeting | uppercase}}</h1>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.greeting = "Hello, AngularJS!";
});
</script>
filter过滤器用于在数组中过滤指定的数据。在下面的例子中，我们使用filter过滤器过滤出所有名字中包含"e"的元素。
<div ng-controller="myCtrl">
<ul>
<li ng-repeat="name in names | filter:'e'">{{name}}</li>
</ul>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.names = ["Alice", "Bob", "Charlie", "David", "Eva"];
});
</script>
AngularJS有很多指令，它们用于在HTML页面中添加逻辑和功能。
ng-repeat指令用于在HTML页面中循环显示数据。在下面的例子中，我们使用ng-repeat指令在页面中显示了一个名字列表。
<div ng-controller="myCtrl">
<ul>
<li ng-repeat="name in names">{{name}}</li>
</ul>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.names = ["Alice", "Bob", "Charlie", "David", "Eva"];
});
</script>
ng-click指令用于为HTML元素绑定点击事件。在下面的例子中，我们使用ng-click指令为按钮绑定了一个改变message变量值的事件。
<div ng-controller="myCtrl">
<h1>{{message}}</h1>
<button ng-click="changeMessage()">Click me!</button>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.message = "Hello, AngularJS!";
$scope.changeMessage = function() {
$scope.message = "Hello, World!";
};
});
</script>
AngularJS是一款非常强大的前端框架，它提供了很多工具和API，使得开发者可以更容易地开发单页应用和动态Web应用。本教程通过一些简单的例子，介绍了AngularJS的一些基础知识，希望能对开发者有所帮助。