繁體中文

AngularJS 教學

AngularJS 應用

AngularJS - Bootstrap Application

Hello, aspiring programmers! Today, we're going to embark on an exciting journey into the world of AngularJS and learn how to bootstrap an application. As your friendly neighborhood computer science teacher, I'll guide you through this process step-by-step, making sure you understand every bit of code we write. So, grab your favorite beverage, get comfortable, and let's dive in!

AngularJS - Bootstrap Application

What is AngularJS?

Before we start bootstrapping our application, let's take a moment to understand what AngularJS is. AngularJS is a powerful JavaScript framework that helps us build dynamic web applications. It's like a Swiss Army knife for web developers, providing tools to make our lives easier and our code more organized.

Think of AngularJS as a helpful assistant that organizes your code and makes it easier to create interactive websites. It's like having a super-smart friend who helps you build amazing things!

Bootstrapping an AngularJS Application

Now, let's get to the exciting part - bootstrapping our AngularJS application. Bootstrapping is just a fancy way of saying "starting up" or "initializing" our application. It's like turning the key in your car's ignition - it gets everything up and running!

Step 1: Setting up the HTML

First, we need to create an HTML file that will serve as the foundation for our AngularJS application. Let's call it index.html:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My First AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<h1>Welcome to My AngularJS App!</h1>
<div ng-controller="MainController">
<p>{{ message }}</p>
</div>
<script src="app.js"></script>
</body>
</html>

Let's break this down:

  1. The ng-app="myApp" attribute in the <html> tag tells AngularJS that this is the root element of our application.
  2. We include the AngularJS library using a <script> tag.
  3. We have a <div> with ng-controller="MainController". This will be where we display our dynamic content.
  4. The {{ message }} is a placeholder for data that we'll define in our JavaScript.
  5. We link to our app.js file, which we'll create next.

Step 2: Creating the JavaScript File

Now, let's create our app.js file:

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

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

Here's what's happening:

  1. We create an Angular module named 'myApp' using angular.module('myApp', []).
  2. We define a controller named 'MainController' using app.controller().
  3. Inside the controller, we set $scope.message to our greeting. This will be displayed in our HTML where we have {{ message }}.

Understanding the Magic

Now, you might be wondering, "How does this all work together?" Great question! Let me explain:

  1. When the page loads, AngularJS looks for the ng-app directive. This tells AngularJS where to start working its magic.
  2. It then looks for the module we defined (myApp) and initializes it.
  3. Next, it finds the ng-controller directive and connects it to our MainController.
  4. The controller sets the message on the $scope, which is like a messenger between our JavaScript and HTML.
  5. Finally, AngularJS replaces {{ message }} in our HTML with the actual message we defined.

It's like a well-choreographed dance, with each part playing its role perfectly!

Expanding Our Application

Now that we have the basics down, let's add a bit more functionality to our app. We'll create a simple to-do list:

Update your index.html:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My AngularJS To-Do App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<h1>My To-Do List</h1>
<div ng-controller="TodoController">
<input type="text" ng-model="newTask">
<button ng-click="addTask()">Add Task</button>
<ul>
<li ng-repeat="task in tasks">{{ task }}</li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>

And update your app.js:

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

app.controller('TodoController', function($scope) {
$scope.tasks = ['Learn AngularJS', 'Build an app'];

$scope.addTask = function() {
if($scope.newTask) {
$scope.tasks.push($scope.newTask);
$scope.newTask = '';
}
};
});

Let's break down what's new:

  1. We've added an input field with ng-model="newTask". This creates a two-way binding between the input and $scope.newTask.
  2. The ng-click="addTask()" on the button tells AngularJS to call the addTask() function when clicked.
  3. ng-repeat="task in tasks" creates a list item for each task in our tasks array.
  4. In our JavaScript, we initialize $scope.tasks with two tasks.
  5. The addTask() function adds the new task to the array and clears the input field.

Conclusion

Congratulations! You've just bootstrapped your first AngularJS application and even added some functionality to it. Remember, learning to code is like learning a new language - it takes practice and patience. But with each step, you're becoming more fluent in the language of web development.

As we wrap up, here's a table summarizing the key AngularJS directives we've used:

Directive Purpose
ng-app Defines the root element of an AngularJS application
ng-controller Specifies which controller to use for the HTML element
ng-model Creates a two-way data binding
ng-click Specifies a function to run when an element is clicked
ng-repeat Repeats a section of HTML for each item in an array

Keep exploring, keep coding, and most importantly, keep having fun! The world of web development is vast and exciting, and you've just taken your first steps into it. Until next time, happy coding!

AngularJS - Bootstrap Application

您好，有志於成為程式設計師的人們！今天，我們將踏上一段令人興奮的旅程，進入AngularJS的世界，並學習如何引导一個應用程序。作為您身邊友善的計算機科學老師，我將一步步引導您完成這個過程，確保您理解我們編寫的每一行代碼。所以，拿起您最喜歡的飲料，放鬆身心，讓我們一起投入其中！

What is AngularJS？

在我們開始引导應用程序之前，讓我們花一分鐘時間來了解AngularJS是什麼。AngularJS是一個強大的JavaScript框架，它幫助我們建立動態網頁應用程序。它就像瑞士軍刀對於網頁開發者，提供了讓我們生活更輕鬆、代碼更有序的工具。

把AngularJS當成一個有用的助手，它組織您的代碼並讓創建有互動性的網站變得更容易。它就像一個超級聰明的朋友，幫助您建造令人驚奇的事物！

引导AngularJS應用程序

現在，讓我們來到令人興奮的部分——引导我們的AngularJS應用程序。引导只是一個花哨的說法，意思是“啟動”或“初始化”我們的應用程序。這就像在汽車發動鍵中轉動鑰匙——它讓一切運轉起來！

第一步：設置HTML

首先，我們需要創建一個HTML文件，這將成為我們AngularJS應用程序的基礎。我們稱之為index.html：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My First AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<h1>Welcome to My AngularJS App!</h1>
<div ng-controller="MainController">
<p>{{ message }}</p>
</div>
<script src="app.js"></script>
</body>
</html>

讓我們分解一下：

  1. 在<html>標籤中的ng-app="myApp"屬性告訴AngularJS這是我們應用程序的根元素。
  2. 我們使用<script>標籤引入AngularJS庫。
  3. 我們有一個帶有ng-controller="MainController"的<div>。這將是我們顯示動態內容的地方。
  4. {{ message }}是一個數據占位符，我們將在JavaScript中定義它。
  5. 我們鏈接到我們的app.js文件，我們將創建它。

第二步：創建JavaScript文件

現在，讓我們創建我們的app.js文件：

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

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

這裡發生了什麼：

  1. 我們使用angular.module('myApp', [])創建了一個名為'myApp'的Angular模塊。
  2. 我們使用app.controller()定義了一個名為'MainController'的控制器。
  3. 在控制器內部，我們將$scope.message設置為我們的問候語。這將在我們的HTML中顯示，我們有{{ message }}。

了解魔法

現在，您可能會想，“這一切是如何一起工作的？”好問題！讓我來解釋：

  1. 當頁面加載時，AngularJS尋找ng-app指令。這告訴AngularJS從哪裡開始發揮魔法。
  2. 然後它尋找我們定義的模塊（myApp）並初始化它。
  3. 接下來，它找到ng-controller指令並將其與我們的MainController相連接。
  4. 控制器在$scope上設置message，這就像我們的JavaScript和HTML之間的傳遞員。
  5. 最後，AngularJS將我們HTML中的{{ message }}替換為我們定義的實際消息。

這就像一場精心編排的舞蹈，每個部分都完美地扮演著自己的角色！

擴展我們的應用程序

現在，我們已經掌握了基礎，讓我們為我們的應用程序添加一些更多的功能。我們將創建一個簡單的待辦事項列表：

更新您的index.html：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My AngularJS To-Do App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<h1>My To-Do List</h1>
<div ng-controller="TodoController">
<input type="text" ng-model="newTask">
<button ng-click="addTask()">Add Task</button>
<ul>
<li ng-repeat="task in tasks">{{ task }}</li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>

並更新您的app.js：

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

app.controller('TodoController', function($scope) {
$scope.tasks = ['Learn AngularJS', 'Build an app'];

$scope.addTask = function() {
if($scope.newTask) {
$scope.tasks.push($scope.newTask);
$scope.newTask = '';
}
};
});

讓我們分解一下新內容：

  1. 我們添加了一個輸入字段，並使用ng-model="newTask"。這在輸入和$scope.newTask之間建立了雙向綁定。
  2. 在按鈕上的ng-click="addTask()"告訴AngularJS在點擊時調用addTask()函數。
  3. ng-repeat="task in tasks"為我們的任務數組中的每個任務創建一個列表項。
  4. 在我們的JavaScript中，我們使用兩個任務初始化$scope.tasks。
  5. addTask()函數將新任務添加到數組中，並清空輸入字段。

結論

恭喜您！您剛剛引导了您的第一個AngularJS應用程序，甚至為它添加了一些功能。記住，學習編程就像學習一門新語言——它需要練習和耐心。但是，每一步，您都在變得更加精通網頁開發的語言。

在我們結束時，這裡是一個總結我們使用過的關鍵AngularJS指令的表格：

指令 目的
ng-app 定義AngularJS應用程序的根元素
ng-controller 指定HTML元素使用哪個控制器
ng-model 創建雙向數據綁定
ng-click 指定當元素被點擊時調用的函數
ng-repeat 為數組中的每個項目重複一節HTML

繼續探索，繼續編程，最重要的是，繼續享受樂趣！網頁開發的世界是廣闊和令人興奮的，您已經踏出了第一步。下次見，快樂編程！

Credits: Image by storyset

上一教程:
AngularJS - 筆記本應用
下一教程:
AngularJS - 登入應用程式