exampleforangularjs资源-CSDN文库

angular

需积分: 4 88 浏览量 2014-12-16 21:18:03 上传评论收藏 180KB DOCX 举报

资源推荐

资源详情

资源评论

http://jsbin.com/ogecuw/1/edit?html,output

邊學  邊做 －動起來

標籤： 



忍之道  



原創 

 閱讀

 討論 

 追蹤 

 收藏 

 轉寄

 檢舉

上次體驗過



的範例之後，相信大家能夠體驗到 相

向互動的便利性，不需要寫太多的 ，馬上就能有即時互動的能力。

這次，我們要開始進入用  來做 。

今天我們的目標是做出一個可以輸入待辦事項的 ，並且可以新增待辦事項到

 當中。

發佈到： 

分享時間：  !""!#

最近更新： $ %!&"!"$

和上次  的程式一樣，我們在1789 的地方加上一個  :: 指令

@，讓  可以辨識出這是一個  的應用程式。

 提供了許多指令，這些指令可以教會 , 新的種種把戲，進而強化

, 在 A:: 上的能力。除了  :: 之外，上次我們也看到了 

8（作為資料綁定、可以雙向互動的資料模型），今天我們還會用到 :

作為迭代器，以及  A8 這個監聽 A8 事件的指令，詳細的作用，稍後就

能看到。

（有興趣深入的，可以看這篇7:!>>00>>@）

我們在 , 加入一個1=89，裡面有一個文字框1:9，以及一個「新增」

的A8按鈕。

另外準備一個19，裡面準備用19來放新增的待辦事項。

/ 的規劃大致如此，接下來我們就要討論如何讓資料由輸入框跑到下面的列

表中。

【Controller 登場】

一般的網站，會用資料庫來處理資料的儲存和存取，不過為了先專注在 

上面，我們就先用簡化的作法，先用二個 @: 物件來處理資料，一個是

newItem，用來存放新增的待辦事項（字串型態），另外一個是 todoList，用來存

放所有的待辦事項。

那麼這兩個變數要放哪裡呢？

如果是過去的網頁 :，可能放在1:9底下，然後透過 8 的操作與事件偵

測，來處理這些資料。

不過  本質上是遵循 MVC 框架，, 屬於 @B 的層面，資料不應該放

在這裡。而 ,)4 架構中，用來處理 , 和 )B 的中介，是透過 4 來進

行，因此，我們可以先把資料放進 4 中。

我們來取一個名為 0，放在  這個資料夾中。

檢視原始檔複製到剪貼簿列印關於

0 1:./:;<?>@:<.;<7:!>>00>

00080<91>:9..

0 1:./:;<?>@:<.;<>0<91>:9..

至於 4 要怎麼寫呢？其實相當簡單，一個 4 可以用一個函式來代

表，我們把新增待辦事項的 4 命名為 4，開始來把剛剛提到的兩個

變數放進去。

檢視原始檔複製到剪貼簿列印關於

0 =.4C:.D..

0 ..C:0B8.;.EFG..

&0 ..C:0.;.HD.A!.F買牛奶F.IJ.D.A!.F繳電話費F.IKG..

#0 I..

這裡預先放了兩個待辦事項到 陣列中，方便我們等一下看效果。

大家一定覺得很奇怪，為什麼會有一個 $scope 傳入，那是什麼東西呢？。記得我

們剛剛提過， 是一個 ,)4的架構，而  在建立應用程式時，會

產生一個物件，用來代表應用程式的 ,，而這個 , 就是上面 4 注

入的C:。

透過這種方式，, 可以在 4 中進行處理，另外有什麼異動時，也會反

應到 @B 中。

寫好我們的 4 之後，我們要把它和 @B 繫連起來，繫連的方法也很簡單，

我們在1A/9的地方，加上一個標示  的指令，寫法如下：

檢視原始檔複製到剪貼簿列印關於

0 1A/. ;<4<9..

把 4 的 = 的名稱指定給   指令，繫連就完成了。

【view::加入清單的迭代器】

 裡面我們放了兩個代辦事項，那麼要怎麼把它拿出來放在19當中呢？

用過去的思維，大概就是算出 的長度之後，用 = 迴圈來一一取出。不過

剩余27页未读，继续阅读

评论收藏

内容反馈

sinat_21155921

粉丝: 0
资源: 1

example for angular js

最新资源

example for angular js

example-angular

angular-example

angular js

angular.js

Angular 2 By Example

TypeScript 2.x for Angular Developers-Packt Publishing(2017).epub

Angular.2.By.Example.178588719X

Angular-HMR-Example:Angular HMR 示例

angular-duoshuo:duoshuo SDK for angular.js

angular-7-jwt-authentication-example:Angular 7 JWT身份验证示例

前端项目-angular-cookie.zip

Learning.Web.Development.with.Bootstrap.and.Angular.2nd.Edition.epub

Mastering.Angular.2.Components.1785884646.epub

前端项目-angular-mapboxgl-directive.zip

angular2教程

最新资源