AngularJs如何搭建前端框架？ angularjs的搭建前端框架的詳解-js教程-PHP中文網

首頁

web前端

js教程

AngularJs如何搭建前端框架？ angularjs的搭建前端框架的詳解

寻∝梦

Sep 08, 2018 pm 03:38 PM

angularjs前端

這篇文章主要講述的就是關於angularjs的搭建前端框架的介紹，還有如何啟動專案的，一步一步的解釋，下面就讓我們一起來看這篇文章吧

關於angularjs的前言：

#寫在最前面，從實習到畢業後這大半年來都是在現在所在的公司工作，才開始接觸公司的專案時，後端都是用的熟悉的知識，然後前端卻用了從來沒聽說過angularjs，從開始接觸到現在，也算是會熟練的寫裡面的內容了吧。但整體還是很迷糊，最近剛好有個自己的專案練練手，於是選擇angularjs作為前端來練習練習，也算是自己對這半年來的學習總結。由於本身是寫後端的，現在從頭開始練習一個前端專案。可能比較費力，陸續進步。也算是自己在這個公司的一些總結。

1.關於angularjs

哈哈，其實都可以自己百度到的，這裡就不多說了。我們都是站在巨人的肩膀上。

2.獲取AngularJs app的種子

對於像我一樣的新手來說，初次著手angularjs時，肯定沒有那個能力去自己去編寫什麼項目目錄啊，文件啊之類的。所以我在github上找了一個種子。
網址： https://github.com/glitchtank/angular-seed-master
需要安裝git，然後複製到本地
git clone https://github.com/glitchtank/angular-seed- master
關於這個種子的介紹可以詳細的閱讀以下README.md，這裡就不多做介紹了，前端出身的同學肯定覺得我在說廢話。

3.安裝node，啟動專案

nodejs下載位址：https://nodejs.org/en/download/ 根據自己的作業系統版本下載安裝
windows 進入cmd，進入到我們剛剛clone的專案下，執行指令node scripts/web-server.js
然後在瀏覽器中輸入http://localhost:8000/app/index.html 可以看見一個簡單的頁面，自此專案啟動成功。
AngularJs如何搭建前端框架？ angularjs的搭建前端框架的詳解

注意：
1.關於連接埠8000，如果你的連接埠8000已經被其他程式佔用，你可以在web-server.js中修改default_port，改成其他連接埠.
2.執行node scripts/web-server.js指令時，如果進入script再執行node web-server.js，瀏覽器輸入http://localhost:8000/app/index.html會報404.

4.認識整個專案

AngularJs如何搭建前端框架？ angularjs的搭建前端框架的詳解

css資料夾下存放我們編寫的一些css檔案；
img資料夾下存放我們需要用到的一些圖片;
js檔案下：
controller.js 控制器
filter.js我們自己寫的一些濾鏡
service.js 呼叫後端api的連線一般放在這裡

5.第一個小範例

#這個範例來自於《用angularjs開發下一代web應用》一書中的購物車例子。
在專案下建立一個新的html頁面：shopCart.html,內容如下

<!DOCTYPE html><html ng-app="myApp"><head lang="en">
    <meta charset="UTF-8">
    <title>购物车例子</title></head><body ng-controller="CartController"><h1 id="your-nbsp-order">your order</h1><p ng-repeat="item in items">
    <span>{{item.title}}</span>
    <input ng-model="item.count">
    <!--angularjs内置过滤器currency,实现美元格式化-->
    <span>{{item.price |currency}}</span>
    <span>{{item.price*item.count |currency}}</span></p><script src="lib/angular/angular.js"></script><script src="js/app.js"></script><script src="js/controllers.js"></script><script src="js/services.js"></script><script src="js/filters.js"></script><script src="js/directives.js"></script></body></html>

在js/controller.js檔案中新增

function CartController($scope){
    $scope.items=[
        {tile:&#39;pea&#39;,count:8,price:3.00},{tile:&#39;apple&#39;,count:9,price:4.00}
    ]
}

啟動專案
AngularJs如何搭建前端框架？ angularjs的搭建前端框架的詳解

#可以知道，我們在input框中隨意輸入數量，後面的計算結果都會跟著改變。這就是angularjs的資料綁定。比jquery方便多了吧。

這篇文章到這就結束了（想看更多就到PHP中文網AngularJS使用手冊中學習），有問題的可以在下方留言提問。

以上是AngularJs如何搭建前端框架？ angularjs的搭建前端框架的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。