十分钟学会angular

梦里梦外; 2024-03-17 21:13 83阅读 0赞

首先笔者有一定的vue基础，但是遇到了含有angular的应用，因此需要学习angular的应用，在学习过程中将自己的学习步骤给一一记录下来，因此假设读者也是具有html及js的基础，在此基础上可以跟着我快速学习并掌握angular的基本使用方法。

一、angular的基本介绍：

Angular是一个用于构建Web应用程序的JavaScript框架。它采用了MVC（Model-View-Controller）架构模式，并提供了许多工具和功能，用于开发可维护、可扩展和高效的前端应用程序。安装分为两种，一种是利用node.js框架，另一种是直接在html代码上插入script引用文件。安装由于网上相应介绍太多，不再追溯，咱们下面直接以问题解决的形式来进入正题。

二、经常看到的两句代码：let app = angular.module('myApp',\[\]); 和app.controller('mainCtr',function( $secope )\{\})，这两句的用途及区别和应用场景分别是什么？

第一句代码：`let app = angular.module('myApp',[]);` 这行代码创建了一个名为 "myApp" 的 AngularJS 模块，并将其赋值给变量 `app`。模块是 AngularJS 应用的容器，它用于组织代码和定义应用的不同组件，如控制器、服务、指令等。在这个例子中，`'myApp'` 是模块的名称，`[]` 是一个依赖数组，用于定义该模块所依赖的其他模块。如果没有依赖的话，可以传入一个空数组。

第二句代码：`app.controller('mainCtr', function($scope) {})` 这行代码定义了一个名为 "mainCtr" 的控制器，并将其绑定到模块 `app` 上。控制器是 AngularJS 中的一种组件，它负责处理视图与模型之间的交互逻辑。在这个例子中，`'mainCtr'` 是控制器的名称，`function($scope) {}` 是控制器的构造函数。控制器的构造函数接收一个名为 `$scope` 的参数，它是一个 AngularJS 服务，用于在控制器和视图之间传递数据和状态。

这两句代码的区别和用途如下：

1.  `angular.module('myApp', [])` 用于创建一个 AngularJS 模块，并定义模块的名称和依赖关系。模块可用于组织应用的不同组件，并提供命名空间，以避免全局作用域中的命名冲突。模块还可以用于将应用拆分为多个模块，以实现模块化的开发和代码复用。
2.  `app.controller('mainCtr', function($scope) {})` 用于在指定的模块上定义一个控制器。控制器负责处理视图的逻辑，并将模型数据绑定到视图上。通过在控制器的构造函数中注入 `$scope` 服务，可以在控制器中访问和操作视图的数据和状态。

这两句代码的应用场景如下：

*  创建模块时，你可以在依赖数组中列出其他模块的名称，以便在当前模块中使用它们提供的功能。这样，你可以将应用拆分为多个模块，每个模块负责不同的功能区块。这种模块化的开发方式有助于代码的组织和维护。
 *  定义控制器时，你可以根据不同的视图或组件创建不同的控制器，每个控制器负责特定的功能。控制器中的逻辑可以与视图进行交互，处理用户输入、调用服务、更新数据等操作。通过控制器，你可以将应用的逻辑划分为更小的单元，并使其更易于理解和维护。

总结：创建模块是为了组织代码和定义应用的不同组件，而定义控制器是为了处理视图的逻辑和数据绑定。模块提供了命名空间和模块化开发的能力，而控制器负责处理视图的交互逻辑。这些概念和用法是 AngularJS 框架的核心特性，有助于构建结构清晰、可维护的应用程序。

当使用 Angular 框架进行开发时，模块和控制器是非常常见的概念。下面我将为你提供一个简单的例子来说明模块和控制器的作用和用法。

假设我们正在开发一个简单的任务列表应用，其中包含以下功能：

*  显示任务列表
 *  添加新任务
 *  标记任务为已完成
 *  删除任务

首先，我们需要创建一个 Angular 模块来组织我们的应用。我们可以将其命名为 "TaskApp"，并将其定义为一个没有依赖的模块。在模块中，我们将定义任务列表的数据和功能。以下是模块的代码

![复制代码][ce6559b2ae88f8309f5fcec126208385.gif]

// 创建一个名为 "TaskApp" 的模块
    var app = angular.module('TaskApp', []);
    
    // 定义一个控制器来处理任务列表
    app.controller('TaskController', function($scope) {
      // 初始化任务列表
      $scope.tasks = [
        { name: 'Buy groceries', completed: false },
        { name: 'Do laundry', completed: true },
        { name: 'Clean the house', completed: false }
      ];
    
      // 添加新任务
      $scope.addTask = function(newTask) {
        $scope.tasks.push({ name: newTask, completed: false });
        $scope.newTask = ''; // 清空输入框
      };
    
      // 标记任务为已完成
      $scope.completeTask = function(task) {
        task.completed = true;
      };
    
      // 删除任务
      $scope.deleteTask = function(task) {
        var index = $scope.tasks.indexOf(task);
        $scope.tasks.splice(index, 1);
      };
    });

![复制代码][44e8819ffda91d647e0ebfb95cebba80.gif]

在上面的代码中，我们创建了一个名为 "TaskApp" 的模块，并将其赋值给变量 `app`。然后，我们定义了一个名为 "TaskController" 的控制器，并将其绑定到模块 `app` 上。

控制器的构造函数中注入了 `$scope` 服务，它用于在控制器和视图之间共享数据和状态。我们将任务列表存储在 `$scope.tasks` 中，并初始化了一些示例任务。

控制器还定义了一些功能：

*  `addTask` 函数用于添加新任务到任务列表中。
 *  `completeTask` 函数用于将任务标记为已完成。
 *  `deleteTask` 函数用于删除任务。

现在，我们可以在 HTML 中使用这个模块和控制器来构建任务列表应用的视图。以下是一个简单的 HTML 示例：

![复制代码][ba19c8618864cec2309141f732e2563b.gif]

<!DOCTYPE html>
    <html ng-app="TaskApp">
    <head>
      <title>Task List App</title>
      <script src="angular.js"></script>
      <script src="app.js"></script>
    </head>
    <body>
      <div ng-controller="TaskController">
        <h1>Task List</h1>
        <ul>
          <li ng-repeat="task in tasks">
            <input type="checkbox" ng-model="task.completed">
            <span ng-class="{ 'completed': task.completed }">{
      { task.name }}</span>
            <button ng-click="completeTask(task)">Complete</button>
            <button ng-click="deleteTask(task)">Delete</button>
          </li>
        </ul>
        <form ng-submit="addTask(newTask)">
          <input type="text" ng-model="newTask" placeholder="New Task" required>
          <button type="submit">Add</button>
        </form>
      </div>
    </body>
    </html>

![复制代码][2c439da36fa0dea87f2b3ae800325cd5.gif]

在上面的示例中，我们在 `<html>` 标签中使用了 `ng-app="TaskApp"` 来指定我们的应用使用 "TaskApp" 模块。然后，在包含任务列表的 `<div>` 元素上使用了 `ng-controller="TaskController"` 来指定使用 "TaskController" 控制器。

在控制器的作用下，我们使用了 Angular 的指令来循环遍历任务列表，并在页面上显示任务的名称、复选框、完成和删除按钮。我们还使用了 `ng-click` 指令来绑定点击事件，并调用控制器中对应的函数。

[ce6559b2ae88f8309f5fcec126208385.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/41db374f9bc24a6ca4c75f51d24fb8e2.png
[44e8819ffda91d647e0ebfb95cebba80.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/5fc21086d3184f01ab785d97f242ff96.png
[ba19c8618864cec2309141f732e2563b.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/f8f92f6f716342db9c4aabc695ca0e15.png
[2c439da36fa0dea87f2b3ae800325cd5.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/582adebc281f4290928588e6ddfaa1f0.png