技術文章 » 十分鐘學會angular

十分鐘學會angular

2023-07-16 18:00:34

首先筆者有一定的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"，並將其定義為一個沒有依賴的模組。在模組中，我們將定義任務列表的資料和功能。以下是模組的程式碼

// 建立一個名為 "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);
  };
});

在上面的程式碼中，我們建立了一個名為 "TaskApp" 的模組，並將其賦值給變數 app。然後，我們定義了一個名為 "TaskController" 的控制器，並將其繫結到模組 app 上。

控制器的建構函式中注入了 $scope 服務，它用於在控制器和檢視之間共用資料和狀態。我們將任務列表儲存在 $scope.tasks 中，並初始化了一些範例任務。

控制器還定義了一些功能：

  • addTask 函數用於新增新任務到任務列表中。
  • completeTask 函數用於將任務標記為已完成。
  • deleteTask 函數用於刪除任務。

現在，我們可以在 HTML 中使用這個模組和控制器來構建任務列表應用的檢視。以下是一個簡單的 HTML 範例：

<!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>

在上面的範例中，我們在 <html> 標籤中使用了 ng-app="TaskApp" 來指定我們的應用使用 "TaskApp" 模組。然後，在包含任務列表的 <div> 元素上使用了 ng-controller="TaskController" 來指定使用 "TaskController" 控制器。

在控制器的作用下，我們使用了 Angular 的指令來回圈遍歷任務列表，並在頁面上顯示任務的名稱、核取方塊、完成和刪除按鈕。我們還使用了 ng-click 指令來繫結點選事件，並呼叫控制器中對應的函數。

三、待續