AngularJS学习（一）

谁借莪１个温暖的怀抱￠ 2023-10-14 10:02 2阅读 0赞

#### 目录 ####

*   *   *  1. 引入 AngularJS
         *  2. 创建一个 AngularJS 应用
         *  3. 控制器（Controller）
         *  4. 模型（Model）
         *  5. 视图（View）
         *  6. 指令（Directive）
         *  7. 过滤器（Filter）
         *  8. 服务（Service）

#### 1. 引入 AngularJS ####

要使用 AngularJS，您需要首先引入 angular.js 文件。这可以通过在 HTML 文件中使用

#### 2. 创建一个 AngularJS 应用 ####

在 HTML 文件中，使用 ng-app 指令创建一个 AngularJS 应用。这个指令必须放在标签内：

同时，您可以在 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 元素：

#### 5. 视图（View） ####

视图是 AngularJS 中的界面，负责显示数据和用户交互。以下是一个简单的视图示例：

在 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 指令应用该指令：

#### 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 中使用服务。服务可以帮助您更好地组织应用程序的代码，使代码更易于维护和扩展。