1. 引入 AngularJS
要使用 AngularJS，您需要首先引入 angular.js 文件。这可以通过在 HTML 文件中使用
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
2. 创建一个 AngularJS 应用
在 HTML 文件中，使用 ng-app 指令创建一个 AngularJS 应用。这个指令必须放在标签内：
<html ng-app="myApp">
同时，您可以在 JavaScript 中创建一个名为 myApp 的 AngularJS 应用：
angular.module('myApp', [])
3. 控制器（Controller）
控制器是 AngularJS 中的核心，负责处理业务逻辑和数据操作。以下是一个简单的控制器示例：
angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
$scope.message = 'Hello, AngularJS!';
});
在 HTML 中，您可以使用 ng-controller 指令将该控制器应用于 HTML 元素：
<div ng-controller="MyCtrl">
<p>{{ message }}</p>
</div>
4. 模型（Model）
模型是 AngularJS 中的数据模型，负责存储数据和处理数据变化。以下是一个简单的模型示例：
angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
$scope.model = {
name: 'John',
age: 30
};
});
在 HTML 中，您可以使用 ng-model 指令将数据绑定到 HTML 元素：
<input type="text" ng-model="model.name">
<input type="number" ng-model="model.age">
5. 视图（View）
视图是 AngularJS 中的界面，负责显示数据和用户交互。以下是一个简单的视图示例：
<div ng-view></div>
在 JavaScript 中，您可以使用 ng-view 指令将一个名为 myView 的视图应用于 HTML 元素：
angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
$scope.message = 'Hello, AngularJS!';
})
.view('myView', {
template: '<p>{{ message }}</p>'
});
6. 指令（Directive）
指令是 AngularJS 中的特殊语法，用于操作 DOM 元素和数据。以下是一个简单的指令示例：
angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'A',
template: '<p>{{ message }}</p>',
scope: {
message: '=myMessage'
}
};
});
在 HTML 中，您可以使用 my-directive 指令应用该指令：
<div my-directive my-message="message"></div>
7. 过滤器（Filter）
过滤器是 AngularJS 中的特殊函数，用于过滤和转换数据。以下是一个简单的过滤器示例：
angular.module('myApp', [])
.filter('myFilter', function() {
return function(input) {
return input.toUpperCase();
};
});
在 HTML 中，您可以使用 my-filter 指令过滤数据：
<p>{{ message | myFilter }}</p>
8. 服务（Service）
服务是 AngularJS 中的一个重要概念，它用于在应用程序中存储和处理数据。服务可以在整个应用程序中被共享，使得不同的控制器和视图可以访问和修改相同的数据。以下是一个简单的服务示例：
angular.module('myApp', [])
.service('myService', function() {
return {
data: 'This is a service',
method: function() {
return 'This is a method';
}
};
});
在示例中，我们创建了一个名为 myService 的服务，它包含两个属性：data 和 method。data 属性存储一个字符串值，而 method 属性是一个函数，它返回一个字符串值。
要在控制器中使用这个服务，我们需要在控制器的依赖列表中添加该服务。例如，下面的控制器将使用 myService 服务：
angular.module('myApp', [])
.controller('myCtrl', function($scope, myService) {
$scope.serviceData = myService.data;
$scope.serviceMethod = myService.method();
});
在这个控制器中，我们使用 myService 服务设置了两个变量：serviceData 和 serviceMethod。serviceData 存储了服务中的 data 属性值，而 serviceMethod 存储了服务中的 method 属性返回的值。
在视图中，我们可以使用这些变量来显示服务中的数据和方法：文章来源：https://www.toymoban.com/news/detail-624304.html
<div ng-controller="myCtrl">
<p>Service data: {{ serviceData }}</p>
<p>Service method: {{ serviceMethod }}</p>
</div>
这是一个简单的示例，展示了如何在 AngularJS 中使用服务。服务可以帮助您更好地组织应用程序的代码，使代码更易于维护和扩展。文章来源地址https://www.toymoban.com/news/detail-624304.html
到了这里，关于AngularJS学习（一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
