帶你初識Angular中MVC模型

時間 2019-12-15

原文原文鏈接

簡介

MVC是一種使用 MVC（Model View Controller 模型-視圖-控制器）設計模式，該模型的理念也被許多框架所吸納，好比，後端框架(Struts、Spring MVC等)、前端框架(Angular、Backbone等)。在學習angular的過程當中，我在網上查找關於angular MVC介紹的文章不多，有些文章也沒有很直白地爲初學者指明angular MVC究竟是啥樣貌，所以，今天咱們就來談談MVC模型在angular的形態。css

爲了介紹angular MVC模型，我創建一個最簡單的例子。該例子的啓動展現結果爲：html

下面我會逐一解釋。前端

view

view指的是視圖，在web前端工程中，view每每指的是HTML代碼。java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
</head>
<body ng-app="app">

    <div class="col-md-4 col-md-offset-4" ng-controller="InputController">
        模型數據: <input type="text" class="text-primary" ng-model="book.title">
    </div>

    <script src="js/angular.js"></script>
    <script src="js/demo1.js"></script>
</body>
</html>

model

model指的是模型數據，在java後端開發中，咱們經常使用java爲業務數據單獨建模，然而，在前端中，咱們也能夠爲數據創建模型。好比，下面的代碼片斷。

var book = {
        title: "angular"
    }

咱們爲書籍創建一個數據模型對象，爲了簡單，我只爲book聲明瞭一個屬性。

controller

controller指的是控制器，它的做用是控制model與view之間的交互。

angular.module("app", ["InputModule"]);

angular.module("InputModule", [])
.controller("InputController", ["$scope", function ($scope) {
    var book = {
        title: "angular"
    }
    $scope.book = book;
}]);