對AngularJs的學習

2021-07-23 11:10:30 字數 1707 閱讀 3551

angualrjs有什麼好處?

angularjs是為了克服html在構建應用上的不足而設計的。

angularjs使用了不同的方法,它嘗試去補足html本身在構建應用方面的缺陷。

angularjs通過使用我們稱為識別符號(directives)的結構,讓瀏覽器能夠識別新的語法。例如:

1.使用雙大括號}語法進行資料繫結;

2.使用dom控制結構來實現迭代或者隱藏dom片段;

3.支援表單和表單的驗證;

4.能將邏輯**關聯到相關的dom元素上;

5.能將html分組成可重用的元件。

構建乙個crud應用可能用到的全部內容包括:

1.資料繫結、.

2.基本模板識別符號、

3.表單驗證、

4.路由、

5.深度鏈結、

6.元件重用、

7.依賴注入。

要用到的東西:

接下來,看一下我自己寫的乙個例子,需要的東西有:

1.bootstrap.css檔案

2.angualr.js檔案

3.bootstrap.js檔案

4.jquery.js檔案

5.studentinfo.js檔案(自定義的模擬手機資料的)

我編寫html的工具是hbuilder 寫起來比較方便 sublime也是款不錯的軟體

我們先來看看我的**:

index.html

serach:

select

alex

21

姓名 年齡班級

****

家庭住址

}}}}}

studentinfo.js檔案

function studentctrl($scope),,,,]};

讓我們來逐步分析:

lang="zh-cn"  這是用於html5的  

2.              serach:

ng-model="query" placeholder="alex" />

select

ng-model="orderprop" class="form-control">

alex21

ng-repeat="student in students | filter:query | orderby:orderprop">

1.ng-model 資料繫結  }雙括號繫結的表示式(核心功能 繫結)

2.filter:query   用於篩選 就是過濾資料

3.orderby:orderprop    排序

以上兩個都ng-model了就是資料繫結了  當使用者輸入什麼或者選擇了什麼  頁面都會單頁面重新整理

4.ng-repeat   這個就像我們的for 或foreach  就是迴圈遍歷集合中每個物件 }

}}}}

上面就是繫結到每個物件的屬性在介面上顯示出來

那麼資料**來呢?

ng-controller就是把studentinfo.js的模擬手機資料注入進去

從而達到效果 總結

ng-controller  把資料注入進去

ng-repeat   迴圈

ng-model  繫結資料

}  頁面顯示繫結資料

angularjs學習筆記

不要用控制器去繼承控制器,通用的通過service來通用 不要試圖服用controller,乙個控制器只負責乙個塊試圖 不要在controller中操作dom,這不是controller的職責,用指令只做 不要在controller中做資料初始化,ng有表單控制項 不要在controller中做資料...

angularjs 學習筆記

文件 function angular bootstrap element,modules config 第乙個引數,要繫結的元素,第二個引數要繫結的modules 第三個引數 暫不明確 controller welcomecontroller function scope angular.boot...

Angular JS 學習筆記

特定領域語言 指令 當關聯的html結構進入編譯階段時應該執行的操作,可以寫在名稱裡,屬性裡,css類名裡 本質上是函式 穩定的dom 繫結了資料模型的dom元素的例項不會在繫結的生命週期發生改變 作用域 用來檢測模型的改變和為表示式提供執行上下文的 angularjs 和其它模板系統不同,它使用的...