Angular企業級開發(3)-Angular MVC實現

時間 2019-11-16

原文原文鏈接

1.MVC介紹

Model-View-Controllerjavascript

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

控制器（Controller）- 負責轉發請求，對請求進行處理。
視圖（View） - 界面設計人員進行圖形界面設計。
模型（Model） - 程序員編寫程序應有的功能（實現算法等等）、數據庫專家進行數據管理和數據庫設計(能夠實現具體的功能)。

2.Angular MVC

在AngularJS應用中，MVC設計模式經過JavaScript和HTML來實現。使用HTML定義視圖，用JavaScript實現模型和控制器。java

2.1Angular MVC中的Views

在AngularJS應用中，視圖是使用HTML來建立，HTML能夠是一個簡單單獨的頁面，也能夠是html代碼片斷。程序員

一個簡單的HTML頁面:angularjs

<!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 here
var hackApp = angular.module("hackApp", []);

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