Breeze/Angular 範本

  • 發行項

作者 ：Mads Kristensen

Ward Bell 撰寫了輕Angular MVC 範本

下載「輕鬆/Angular MVC 範本」

AngularJS 是 Google 的開放原始碼程式庫，可建置單頁應用程式 (SPA) 。 它提供資料系結、相依性插入和螢幕管理。 將其與 一個用於資料模型化和資料管理的另一個開放原始碼程式庫結合，而且您有絕佳的 HTML/JavaScript 用戶端應用程式的基本要素。

ASP.NET 和 Web 工具 2012.2 Update 中包含的Angular SPA 範本是一種變化。 如果您有 Visual Studio，您將會在 60 秒內啟動並執行範例 SPA。

在外部，應用程式看起來非常類似一般，類似于一般專案JS SPA 範本。 但它在幕後相當不同。 在資料系結和原始 AJAX 用於資料存取時，會使用此身分識別的一個類別。 輕量/Angular範本會使用Angular進行資料系結，並針對資料存取使用「輕鬆」。 這些程式庫會啟用其他功能，包括頁面流覽和歷程記錄。

應用程式的 [關於] 頁面會在目前的使用者會話期間顯示執行中的事件記錄檔，包括：

  • 尋呼。 請注意 Todo 控制器的建立。
  • 遠端查詢和本機快取查詢。
  • 儲存新的和修改過的實體。
  • 用戶端上驗證的變更，讓使用者可以在認可變更至資料庫之前更正錯誤。

在此範本中還有更多可探索專案，包括：

  • 動態載入 HTML 檢視範本。
  • 透過 Angular 「指示詞」 的自訂資料系結。
  • 模組化和相依性插入。
  • 查詢篩選、排序、分頁、投影，以及包含相關實體。
  • 跨多個畫面共用資料。
  • 將多個變更儲存為單一交易。
  • 驗證規則會自動從伺服器傳播至 JavaScript 用戶端。

讓我們開始吧。

建立輕Angular範本專案

按一下上述的 [下載] 按鈕來下載並安裝範本。 範本會封裝為 Visual Studio 延伸模組 (VSIX) 檔案。 您可能需要重新開機 Visual Studio。

在 [ 範本] 窗格中，選取 [ 已安裝的範本 ]，然後展開 [Visual C# ] 節點。 在 [Visual C#] 底下，選取 [Web]。 在專案範本清單中，選取 [ASP.NET MVC 4 Web 應用程式]。 為專案命名，然後按一下 [確定]。

在 [新增專案精靈] 中，選取 [Angular SPA]。

按 Ctrl-F5 以建置並執行應用程式而不進行偵錯，或按 F5 以偵錯執行。

應用程式第一次執行時，會顯示登入畫面。 按一下 [註冊] 連結，並將新的頁面滑入檢視，您可以在其中輸入使用者名稱和密碼。 (登入和註冊頁面是使用 ASP.NET MVC.) 建立的。當您提交註冊表單時，伺服器會產生 TodoList，其中包含帳戶的兩個專案。 然後，它會在黃色記事上呈現給您。

現在您位於 SPA 的陸地。 您在操作 Todos 時所看到的一切和體驗，都是在用戶端上轉譯及管理，並透過「氣氣」和「輕氣」的協助進行管理。 以使用者身分探索應用程式... 但有開發人員的眼球。 在瀏覽器中使用開發人員工具來擷取網路流量。 (在 Internet Explorer 中：按 F12，選取 [ 網路 ] 索引標籤，然後按一下 [ 開始擷取]。) 立即嘗試下列專案：

  • 新增待辦事項專案。
  • 按一下標籤並編輯待辦事項專案標題
  • 核取核取方塊以標記專案完成。 請注意，文字方塊已停用，因此標題無法再編輯。
  • 按一下標籤右邊的 'x'。 專案會消失，並從資料庫刪除。
  • 挑選另一個專案並清除其標題。 您將會收到需要標題的驗證錯誤。 在短暫暫停之後，會還原上一個標題。
  • 輸入冗長的標題。 您會收到不同的驗證錯誤，表示標題太長。
  • 按一下 [新增待辦事項清單] 按鈕。 新的清單會出現在上一個清單的左邊。
  • 播放 TodoList 標題，觸發其必要和長度驗證。
  • 按一下標題文字方塊中，清除錯誤訊息。
  • 按一下右上角圓形中的 「x」，即可刪除 TodoList 及其待辦事項。
  • 按一下右上方的 [關於] 連結，以查看這些活動的記錄。

驗證邏輯會以用戶端方式執行。 伺服器模型類別上的驗證屬性會傳播至用戶端，並在用戶端連絡伺服器之前自動執行。

檢閱網路流量。 請注意，當「輕量」偵測到錯誤時，伺服器沒有呼叫。 每個有效的變更都會導致 POST 要求 「/api/Todo/SaveChanges」。 輕鬆組合變更，並以單一要求的形式將它們一起傳送至 Web API 控制器的 SaveChanges 方法。 這與將每個專案個別提出 PUT、POST 和 DELETE 要求的不同，與一樣。此範本會分別提出 PUT、POST 和 DELETE 要求。

此外，請注意，當您在 TodoList 與 About 頁面之間切換時，沒有網路流量。 這是因為查詢已受限於本機的「簡單快取」。

查看內部

此應用程式具有用戶端和伺服器端。 用戶端堆疊是由一些 HTML 和應用程式 JavaScript 模組的組合所組成，) 「app」 資料夾中 (加上協力廠商 JavaScript 程式庫 () 。

UI 架構會將檢視的 HTML 小工具與控制器中支援的簡報程式碼分開。 Angular資料系結系統會協調檢視和控制器，讓每一個都能執行其工作，而不需要瞭解其他專案。

控制器會要求資料內容取得和儲存模型實體。 資料內容會將大部分的工作委派給「輕量」，它會從 JSON 查詢結果建構自我追蹤模型物件。

伺服器端堆疊包含一些開發人員程式碼和三個主要 .NET 程式庫：Web API、Entity Framework 和 Breeze.NET。

基本架構與一樣，與一般專案範本相同。 不過，實作更簡單：已刪除 DTO，而且大部分的 Entity Framework 詳細資料都已委派給 Breeze.NET。

後續步驟

建議您探索程式碼，其引導您瞭解用戶端和伺服器堆疊在輕量網站上的廣泛討論。

您可以嘗試使用一般用戶端查詢;新增一些篩選和排序。 您可以新增更多模型屬性和更多實體，以更熟悉端對端 SPA 開發。 當您確信設計時，可以卸載待辦事項功能，並將其取代為您自己的功能。

祝各位編碼程式愉快！