AngularJS如何深入學習？ angularjs的入門學習心得最新篇

這篇文章全是 angularjs 的自學心得，想要學得好，就多看看別人學的成果，雖然不一定適合你，但多看了就一定會找到你自己的路，現在就讓我們一起來看這篇文章吧

一：AngularJS入門

1、 AngularJS簡介 ： AngularJS 是一個 JavaScript 框架 。

AngularJS的四個核心思想：依賴注入，模組化，雙向綁定，語義化標籤。

2、 開發工具與除錯工具 ：sublime/webstorm ； 用瀏覽器來調試。

3、 第一個AngularJS web應用 ：

①引入angular.js檔案（ js/angular.min.js ），使用 ng-app 指令宣告AngularJS管理邊界。

②AngularJS #雙向綁定 的簡單使用：雙大括號 {{}}

#③常用的指令:看官方API

④在 中聲明： angular.module（'app'，[ ]）

.controller（'myctrl ',function($scope){

pe.msg="angular";

# 地 # ##app是ng-app='app'的名字，[ ]裡是angularjs之前定義的其他模組,myctrl是ng-controller的名字， {{msg}}

二：AngularJS的進階

#1、

AngularJS前端MVC的設計與建置 ##：看④的書寫樣式就是個簡單的MVC #2、

Binding指令實作資料雙向綁定 ：ng-bind或{{ }} （備註：了解下ng-clock指令） 3、

Controller的使用 ：定義controller；在controller中宣告變數；使用ng-bind綁定資料並顯示controller作用域；

##4、 $scope中變數與方法的使用

：

①在$scope上定義方法並在頁面上進行綁定呼叫。

######②在$scope上定義變數並在方法中使用：注意下$scope方法呼叫的寫法。 #####################三：AngularJS進階--Services與指令的使用######### 1、 自訂一個Services服務 #：

①在angularjs裡services有多中表現形式，學會在Controller中使用Services；

##②在AngularJS中services的表現形式其中包括：value，constant（常數）、factory（相當於工廠模式）、services

2、 Services的應用程式 ：如何在多個controller中共享資料

3、 常用指令的使用 ：

ng-bind資料雙向綁定（等同於{{ }}）;

#ng-model綁定HTML中表單元素到scope中############;############ng-show在表達式為true時顯示指定的HTML元素，否則隱藏指定的HTML元素;###### ng-hide在表達式為ture時隱藏指定的HTML元素，

#ng-if在表達式為ture時會添移除元素並顯示，false時移除元素（是從DOM中移除）

#ng-submit 指令用於表單提交後執行指定函數 ;

#ng-disabled #指令設定表單輸入欄位的disabled 屬性(input, select, 或textarea)若表達式回傳ture，則表單欄位停用 ##;

ng-checkde指令用於設定複選框（checkbox）或單選按鈕（radio）的checkde屬性，如果返回ture將被選中;

ng-src指令覆寫了 元素的src屬性

ng-herf 指令覆寫了原生的 元素href 屬性 ;

##ng- class用來給HTML元素動態綁定一個或多個CSS類別 ; ng-selected 指令用於設定 清單中的 元素的selected 屬性，表達式回傳ture則被選取 ;

ng-change #指令用來告訴AngularJS 在HTML 元素值改變時需要執行的動作。 需要搭配ng-model 指令使用。

ng-change 指令不會覆寫原生的onchange 事件, 如果觸發該事件， ng-change 表達式與原生的onchange 事件都會執行。

4、 常用指令ng-repeat的使用 ： ##指令用於循環輸出指定次數的HTML 元素（ 集合必須是陣列或物件）

#特有屬性（$index陣列的下標, $first （如果是第一個就會回傳ture）,$last）的使用

四：AngularJS內建服務--$http的使用

#1、 使用$http查詢MySql資料 ：先傳送一個$http請求，透過後端的開發語言將mysql的資料回傳到前端。

2、 $http請求帶參數實作資料庫的增刪改 ：案例

3、使用者角色權限實例：練習即可

五：AngularJS進階--Directive的使用

##1、 使用Directive自訂HTML元件 ：restrict意義與應用（A：屬性，E：元素，C：類別名稱），replace的使用、template的使用

2、多個directive之間的相互呼叫用require；了解下link的用法

六：AngularJS之移動APP開發

##1、移動前端框架lonic簡介；

2、Cordova簡介：一個前端平台、一套程式碼用它打包就可是現在Android、IOS平台；

3、在網路上找點案例實戰一下；

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