搜尋
首頁web前端js教程AngularJS入門教學(零):引導程式_AngularJS

我們現在開始準備寫AngularJS應用程式——phonecat。這一步(步驟0),您將會熟悉重要的原始碼文件,學習啟動包含AngularJS種子專案的開發環境,並在瀏覽器端執行應用程式。

進入angular-phonecat目錄,執行以下指令:

複製程式碼 程式碼如下:

git checkout -f step-0

該指令將重設phonecat專案的工作目錄,建議您在每一學習步驟執行此指令,將指令中的數字改為您學習步驟對應的數字,該指令將清除您在工作目錄內所做的任何更改。

執行以下指令:

複製程式碼 程式碼如下:

node scripts/web-server.js

來啟動伺服器,啟動後命令列終端將會提示Http Server running at http://localhost:8000,請不要關閉該終端,關閉該終端即關閉了伺服器。在瀏覽器中輸入http://localhost:8000/app/index.html來存取我們的phonecat應用程式。

現在,在瀏覽器中您應該已經看到了我們的初始應用,很簡單,但說明我們的專案已經可以運行了。

應用程式中顯示的「Nothing here yet!」是由以下HTML程式碼建構而成,程式碼中包含了AngularJS的關鍵元素,正是我們需要學習的。

app/index.html

複製程式碼 程式碼如下:




   
    My HTML File
   
   
   


Nothing here {{'yet' '!'}}




程式碼在做什麼?

ng-app指令:

複製程式碼 程式碼如下:


ng-app指令標記了AngularJS腳本的作用域,在中加入ng-app屬性即說明整個都是AngularJS腳本作用域。開發者也可以在局部使用ng-app指令,如

,則AngularJS腳本只在該
中執行。

AngularJS腳本標籤:

複製程式碼 程式碼如下:


這行程式碼載入angular.js腳本,當瀏覽器將整個HTML頁面載入完畢後將會執行該angular.js腳本,angular.js腳本運行後將會尋找含有ng-app指令的HTML標籤,該標籤即定義了AngularJS應用的作用域。

雙大括號綁定的表達式:

複製程式碼 程式碼如下:

Nothing here {{'yet' '!'}}


這行程式碼示範了AngularJS模板的核心功能-綁定,這個綁定由雙大括號{{}}和表達式'yet' '!'組成。

這個綁定告訴AngularJS需要運算其中的表達式並將結果插入DOM中,接下來的步驟我們將看到,DOM可以隨著表達式運算結果的改變而即時更新。

AngularJS表達式Angular expression是一種類似JavaScript的程式碼片段,AngularJS表達式僅在AngularJS的作用域中運行,而不是在整個DOM中運行。

引導AngularJS應用

透過ngApp指令來自動引導AngularJS應用是一種簡潔的方式,適合大多數情況。在進階開發中,例如使用腳本裝載應用,您也可以使用bootstrap手動引導AngularJS應用。

AngularJS應用引導過程有3個重要點:

1.注入器(injector)將用於建立此應用程式的依賴注入(dependency injection);
2.注入器將會建立根作用域作為我們應用模型的範圍;
3.AngularJS將會連結根作用域中的DOM,從用ngApp標記的HTML標籤開始,逐步處理DOM中指令和綁定。

一旦AngularJS應用引導完畢,它將繼續偵聽瀏覽器的HTML觸發事件,例如滑鼠點擊事件、按鍵事件、HTTP傳入回應等改變DOM模型的事件。這類事件一旦發生,AngularJS將會自動偵測變化,並進行相應的處理及更新。

上面這個應用的結構非常簡單。此模板包僅包含一個指令和一個靜態綁定,其中的模型也是空的。下一步我們試試稍複雜的應用!

我工作目錄中這些文件是做什麼的?

上面的應用來自於AngularJS種子項目,我們通常可以使用AngularJS種子項目來創建新項目。種子專案包括最新的AngularJS程式碼庫、測試庫、腳本和一個簡單的應用程式範例,它包含了開發一個典型的web應用程式所需的基本配置。

對於本教程,我們對AngularJS種子項目進行了下列更改:
1.刪除範例應用程式;
2.新增手機影像到app/img/phones/;
3.新增手機資料檔(JSON)到app/phones/;
4.新增Twitter Bootstrap檔案到app/css/ 和app/img/。

練習

試試看把關於數學運算的新表達式加到index.html:

複製程式碼 程式碼如下:

1 2 = {{ 1 2 }}


總結

現在讓我們轉到步驟1,將一些內容加入到web應用程式中。

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
PHP实现框架:CakePHP入门教程PHP实现框架:CakePHP入门教程Jun 18, 2023 am 09:04 AM

随着互联网技术的不断发展,Web开发技术也在不断更新迭代。PHP作为一种开源的编程语言,在Web开发中拥有广泛的应用。而PHP框架作为PHP开发中常用的工具之一,能够提高开发效率和代码质量。本文将为大家介绍一个PHP框架——CakePHP,并提供一些简单入门的教程。一、什么是CakePHP?CakePHP是一个基于MVC(Model-View-Control

这是在 Microsoft Surface Duo 上双启动 Windows 11 的方法这是在 Microsoft Surface Duo 上双启动 Windows 11 的方法Apr 29, 2023 pm 09:37 PM

在MicrosoftSurfaceDuo上安装Windows11请记住,下面描述的步骤适用于SurfaceDuo的解锁和AT&T型号。搭载高通骁龙888处理器的SurfaceDuo2与此模组完全不兼容。警告:在我们了解如何在MicrosoftSurfaceDuo上双启动Windows11之前,请记住进行设备外备份。这是因为该过程需要擦除手机上的所有数据,包括内部存储中的文件。您可能会永久性地使您的设备变砖,因此只有在您知道自己在做什么的情况下才可以尝试此操作

如何在新的 SSD 上安装 macOS如何在新的 SSD 上安装 macOSApr 13, 2023 pm 04:01 PM

如何使用 macOS Recovery 在新的 SSD 上安装 macOS在 2009 年之后生产的任何 Mac 上,都有一个内置的恢复系统。这允许您将 Mac 启动到恢复模式。在此模式下,您可以修复内部磁盘、从 Time Machine 备份恢复文件、获取在线帮助或重新安装 macOS。您必须能够连接到互联网才能使用这些工具。您可以使用 macOS 安装工具在计算机中安装的新 SSD 上安装 macOS。要使用 Internet Recovery 在 SSD 上安装 macOS:按照制造商针对

初学者指南:从零开始,逐步学习MyBatis初学者指南:从零开始,逐步学习MyBatisFeb 19, 2024 am 11:05 AM

简明易懂的MyBatis入门教程:一步一步编写你的第一个程序MyBatis是一种流行的Java持久层框架,它简化了与数据库交互的过程。本教程将为您介绍如何使用MyBatis创建和执行简单的数据库操作。第一步:环境搭建首先,确保您的Java开发环境已经安装好。然后,下载MyBatis的最新版本,并将其添加到您的Java项目中。您可以从MyBatis的官方网站下

PHP实现框架:Lumen框架入门教程PHP实现框架:Lumen框架入门教程Jun 18, 2023 am 08:39 AM

Lumen是Laravel框架开发者开发的一款基于PHP的微框架,它的设计初衷是为了快速构建小型的API应用和微服务,同时保留了Laravel框架的部分组件和特性。Lumen框架轻量级、快速、易上手,因此受到了广泛的关注和使用。在本篇文章中,我们将快速入门Lumen框架,学习如何使用Lumen框架构建简单的API应用。框架准备在学习Lumen框架之前,我们需

2022年最新5款的angularjs教程从入门到精通2022年最新5款的angularjs教程从入门到精通Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

使用PHP和AngularJS搭建一个响应式网站,提供优质的用户体验使用PHP和AngularJS搭建一个响应式网站,提供优质的用户体验Jun 27, 2023 pm 07:37 PM

在如今信息时代,网站已经成为人们获取信息和交流的重要工具。一个响应式的网站能够适应各种设备,为用户提供优质的体验,成为了现代网站开发的热点。本篇文章将介绍如何使用PHP和AngularJS搭建一个响应式网站,从而提供优质的用户体验。PHP介绍PHP是一种开源的服务器端编程语言,非常适用于Web开发。PHP具有很多优点,如易于学习、跨平台、丰富的工具库、开发效

使用PHP和AngularJS构建Web应用使用PHP和AngularJS构建Web应用May 27, 2023 pm 08:10 PM

随着互联网的不断发展,Web应用已成为企业信息化建设的重要组成部分,也是现代化工作的必要手段。为了使Web应用能够便于开发、维护和扩展,开发人员需要选择适合自己开发需求的技术框架和编程语言。PHP和AngularJS是两种非常流行的Web开发技术,它们分别是服务器端和客户端的解决方案,通过结合使用可以大大提高Web应用的开发效率和使用体验。PHP的优势PHP

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。