AngularJS如何使用？ angularjs的詳細使用介紹

本篇文章主要的講述了關於angularjs的使用詳情，angularjs一些簡述的功能描述都在裡面，現再就讓我們一起來看看吧

#最近，專案中使用到了AngularJS ，趁週末時間學習了一下，和大家分享。

一、AngularJS簡述
AngularJS的官方文件是這樣介紹它的。
完全使用JavaScript編寫的客戶端技術。同其他歷史悠久的Web技術（HTML、CSS
和JavaScript）配合使用，讓Web應用開發比以往更簡單、更快速。
AngularJS讓開發網頁應用程式變得非常簡單，同時也降低了建構複雜應用的難度。它提供了開發者在現代網頁應用程式中經常要用到的一系列進階功能，例如：
解耦應用邏輯、資料模型和視圖；
Ajax服務
依賴注入；
瀏覽歷史（使書籤和前進、後退按鈕能夠像在普通Web應用中一樣工作）；
測試；
更多功能。

二、Angularjs目錄結構
最新版本是angular2.0,它與angular1.x區別比較大，我使用的版本是1.3版本。

在使用基本功能時，只需要匯入angular.js或angular.min.js檔案就可以。其它的js檔案是angularjs分割出來的功能，例如angular-route.js,它是關於路由的腳本文件，在1.2版本時，使用路由不需要單獨專稿angular-route.js,而在1.3版本後，使用路徑需要單獨導入angular-route.js

##三、Angularjs基本上使用

##創建web專案(使用Hbuilder),並導入js檔

#AngularJs它主要的核心特性：MVC模組化資料綁定 語意化標籤(指令)  依賴注入等

##MVC
MVC核心概念是:將管理資料的程式碼(model),應用邏輯程式碼(controller),展示資料的程式碼(view)分離開。 在angular應用程式中，視圖就是DOM,控制器就是JavaScript,而模型資料被儲存在物件的屬性中。

自己寫了一個小範例：

HTML程式碼

JS程式碼

在這個案例中，ng-app它是一個angular的指令（在angular中一般以ng-開頭的都是指令），它用來描述整個頁面是angular應用程式的擁有者。 {{msg}}它是用來將資料在頁面上輸出。也可以使用ng-bind來綁定資料在頁面上輸出。

雙向資料綁定

在傳統的js框架中，它是將html程式碼與資料混合在一起，在發送給用戶在顯示出來，而angular它可以將UI中某個部分映射到javascript屬性上，然後讓它們自己去同步，這就叫做資料綁定，查看以下程式碼：

上述程式碼我只是添加了一句,這時我會發現，當文字方塊中的內容改變時，視圖中的信息會自動改變，而我在程式碼中沒有添加任何關於事件操作，這項功能也適用於來自伺服器的更新。 （想看更多就到PHP中文網AngularJS開發手冊

中學習）

#模組化

在上述程式碼中，我在js檔案中聲明了一個全域的函數demo1Controller，在js的開發中是不建議定義全域的函數或變數的，它污染了全域空間，這種編碼是不」優雅的。在angular中我可以使用module(模組化來解決這個問題)我對上述程式碼進行修改如下：Html程式碼



、

JS程式碼

程式碼執行結果是不變的，但是我透過angular.module來定義了一個模組。 Angular.module(“myapp”,[ ]),後面的“[ ]“代表的是當前的myapp模組是否與其它的模組有關聯，如果無關聯，在[ ]內可以不寫任何程式碼，但是[ ]一定要存在，如果不存在，它的意義是不一樣的。 注意:在angularjs中所有的一切都是從模組開始的。

依賴注入
在上述程式碼中，大家一定有一個疑問，就是我在js程式碼中使用的$scope它是由誰創建的，為什麼我可以使用它？其實就全是依賴angular提供的依賴注入來完成的，依賴注入的概念我在學習spring中已經接觸過，不過在前端開發中，這是我第一次使用依賴注入。
AngularJS使用$injetor（注入器服務）來管理依賴關係的查詢和實例化。
事實上，$injetor負責實例化AngularJS中所有的元件，包括應用的模組、指令和控制器等。在運行時，任何模組啟動時$injetor都會負責實例化，並將其需要的所有依賴傳遞進去.我在開發中，最學用的就是在需要的地方通過參數來傳遞。
Angularjs中的注入一般分為三種：
推斷式註入

#顯示注入（標註式註入）

#行內註入（內嵌注入）

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

以上是AngularJS如何使用？ angularjs的詳細使用介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！