Angular企業級開發-Angular MVC實現

標籤：資料庫設計   程式語言   編寫程式   程式設計   介面設計   

    

1.MVC介紹

Model-View-Controller

在20世紀80年代為程式語言Smalltalk發明的一種軟體架構。MVC模式的目的是實現一種動態程式設計，使後續對程式的修改和擴充簡化，並且使程式某一部分的重複利用成為可能。除此之外，此模式通過對複雜度的簡化，使程式結構更加直觀。軟體系統通過對自身基本部分分離的同時也賦予了各個基本部分應有的功能。專業人員可以通過自身的專長分組：

控制器（Controller）- 負責轉寄請求，對請求進行處理。

視圖（View） - 介面設計人員進行圖形介面設計。

模型（Model） - 程式員編寫程式應有的功能（實現演算法等等）、資料庫專家進行資料管理和資料庫設計(可以實現具體的功能)。

2.Angular MVC

650) this.width=650;" src="http://images2015.cnblogs.com/blog/59618/201611/59618-20161116214952388-1656698094.jpg" style="margin:0px;padding:0px;border:0px;" alt="59618-20161116214952388-1656698094.jpg" />
在AngularJS應用中，MVC設計模式通過JavaScript和HTML來實現。使用HTML定義視圖，用JavaScript實現模型和控制器。

2.1Angular MVC中的Views

在AngularJS應用中，視圖是使用HTML來建立，HTML可以是一個簡單單獨的頁面，也可以是html程式碼片段。

一個簡單的HTML頁面:

<!DOCTYPE html><html><head><title>Hack Hands Angular - Demos</title><meta charset="utf-8" /></head><body><div id="messageTitle"></div><div id="message">Hello World</div></body></html>

AngularJS應用大多是是SPA(Single Page Application)應用，當前頁面只是展示了應用的一部分內容，通過ng-view去載入更多的視圖內容。含有ng-view的html檔案如下:

<!DOCTYPE html><html><head><title>Hack Hands Angular - Demos</title><meta charset="utf-8" /></head><body><h1>Hack Hands Angular Demos</h1><div ng-view><div id="messageTitle"></div><div id="message">Hello World</div></div></body></html>

2.2 Angular MVC中的Controllers

應用的控制器，本質上它是一個JavaScript的函數，用於銜接頁面模板和邏輯代碼，並通過添加對象和行為來增強模板中範圍的功能在AngularJS中，可以在標籤上使用ng-controller指令指定，也可以在配置ui-view的情況下，在路由裡面指定。

// Code goes herevar hackApp = angular.module("hackApp", []);var indexController = hackApp.controller("indexController", function($scope) {  // controller logic goes here  $scope.message = "Hello Hacking World"});

2.3 Angular MVC中的Models

Model屬於資料層，它即可以表示整個Anglar應用的資料模型對象，也可以只表示某個實體物件

Model資料模型對象依附於範圍，無論是整個模型對象或某個實體物件，都必須被Angular的範圍以屬性的方式進行引用，這種引用可以顯式或隱式的進行建立。

Angular企業級開發-Angular MVC實現