目录
- 1. 引入 AngularJS
- 2. 创建一个 AngularJS 应用
- 3. 控制器(Controller)
- 4. 模型(Model)
- 5. 视图(View)
- 6. 指令(Directive)
- 7. 过滤器(Filter)
- 8. 服务(Service)
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
属性返回的值。
在视图中,我们可以使用这些变量来显示服务中的数据和方法:
<div ng-controller="myCtrl"> <p>Service data: {{ serviceData }}</p> <p>Service method: {{ serviceMethod }}</p>
</div>
这是一个简单的示例,展示了如何在 AngularJS 中使用服务。服务可以帮助您更好地组织应用程序的代码,使代码更易于维护和扩展。