繁體中文

AngularJS 教學

AngularJS 應用

AngularJS - 環境設定

您好，未來的網頁開發者們！我很興奮能成為您們在AngularJS世界的精彩旅程中的導遊。作為一個教了超過十年計算機科學的人，我可以告訴您，設定您的開發環境就像是烹飪一頓美味大餐前準備廚房一樣。這可能不是最吸引人的部分，但對於成功來說絕對是必要的。所以，讓我們捋起袖子開始吧！

AngularJS - Environment Setup

AngularJS是什麼？

在我們深入設置之前，讓我們花一會兒時間了解一下AngularJS是什麼。想像一下你正在蓋房子。HTML會是基礎和牆壁，CSS會是油漆和裝飾，JavaScript會是電力和管道。那麼AngularJS呢？這就像是有一個專業的室內設計師和建築師團隊，確保一切無縫配合。

AngularJS是一個強大的JavaScript框架，它擴展了HTML的能力，使創建動態、單頁面的網絡應用程序變得更加容易。這就像是給你的HTML賦予超能力！

我們為什麼需要開發環境？

你可能會想，“我們不能馬上開始編碼嗎？”其實可以，但這就像是試圖在沒有餐具或家電的廚房裡烹飪一頓五道菜的大餐。一個正規的開發環境為您提供了编写、測試和運行您的AngularJS應用程序所需的所有工具。

設置您的AngularJS環境

現在，讓我們來處理正事。以下是我們需要做的：

1. 安裝Node.js

Node.js就像是我們開發環境的引擎。它是一個JavaScript運行時，讓我們能在計算機上運行JavaScript，而不需要在網頁瀏覽器中。

  1. 前往Node.js的官方網站（https://nodejs.org/）。
  2. 下載推薦給大多數用戶的版本。
  3. 運行安裝程序並按照提示操作。

為了檢查Node.js是否正確安裝，打開您的命令提示符或終端並輸入：

node --version

如果正確安裝，您應該會看到Node.js的版本號。

2. 安裝npm（Node包管理器）

好消息！npm通常會與Node.js一起捆綁。它就像是個巨大的圖書館，您可以在其中借（或在此情況下，下載）預先編寫的代碼包以供項目使用。

為了檢查npm是否安裝，輸入：

npm --version

3. 安裝AngularJS

現在，我們來點魔法。我們將使用npm來安裝AngularJS。在您的命令提示符或終端中，輸入：

npm install angular

這個命令告訴npm去獲取AngularJS包並在您的計算機上安裝它。

4. 設置一個簡單的AngularJS項目

讓我們創建一個基本項目來確保一切運行正常。首先，為您的項目創建一個新文件夹。您可以使用文件浏览器或命令行來完成這項操作：

mkdir my-angular-project
cd my-angular-project

現在，讓我們在這個文件夹中創建兩個文件：

  1. index.html
  2. app.js

以下是您的index.html應該看起來的樣子：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>我的第一個AngularJS應用程序</title>
<script src="node_modules/angular/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainController">
<h1>{{ greeting }}</h1>
</div>
</body>
</html>

而您的app.js應該是：

var app = angular.module('myApp', []);

app.controller('MainController', function($scope) {
$scope.greeting = 'Hello, AngularJS!';
});

讓我們來分解一下：

  • 在index.html中，我們創建了一個基本的HTML結構。
  • ng-app="myApp"屬性告訴AngularJS這是我們AngularJS應用的根元素。
  • 我們使用<script>標籤引入了AngularJS庫和我們的app.js文件。
  • <div ng-controller="MainController">將我們的HTML與app.js中定義的控制器相連接。
  • {{ greeting }}是AngularJS表達式，它會顯示控制器中的greeting值。

在app.js中：

  • 我們創建了一個名為myApp的AngularJS模塊。
  • 我們定義了一個名為MainController的控制器。
  • 在控制器內部，我們在$scope對象上設置了一個greeting屬性，AngularJS使用它來在控制器和視圖（我們的HTML）之間傳遞數據。

5. 運行您的應用程序

為了看到您的應用程序在運行，您需要一個網絡服務器。為了開發目的，您可以使用live-server包。使用npm全局安裝它：

npm install -g live-server

然後，在您的項目目錄中運行：

live-server

這將啟動一個本地網絡服務器並打開您的默認瀏覽器以顯示您的應用程序。您應該會在頁面上看到“Hello, AngularJS!”。

結論

恭喜您！您剛才設置了您的AngularJS開發環境並創建了您的第一個AngularJS應用程序。這可能看起來像是有很多步驟，但請相信我，這會隨著練習變得越來越容易。記住，每個專家都曾經是初學者，設定您的環境是成為AngularJS大師旅程的第一步。

在我們的下一課中，我們將深入研究AngularJS的概念並開始构建更複雜的應用程序。在那之前，您可以隨意實驗您的新設置。試著更改問候語或向您的HTML添加更多元素。最好的學習方式就是實踐！

祝您編程愉快，下課見！

方法 描述
angular.module() 創建或检索一个AngularJS模块
module.controller() 在模块中注册一个新的控制器
$scope 一个引用应用程序模型的對象
ng-app 指令，声明应用的根元素
ng-controller 指令，为HTML元素指定一个控制器
{{ }} AngularJS中的表达式语法，用于显示值

Credits: Image by storyset

上一教程:
AngularJS - 概覽
下一教程:
AngularJS - MVC架構