AngularJs MVC 詳解

時間 2019-12-01

標籤 angularjs mvc 詳解欄目 AngularJS 简体版

原文原文鏈接

爲何在前端也須要MVC

一、代碼規模愈來愈大，切分職責是大勢所趨javascript

二、爲了複用html

三、爲了後期維護方便前端

MVC的目的是爲了模塊化和複用java

前端實現MVC的困難

一、操做DOM必須等整個頁面加載完程序員

二、多個js若是出現依賴，須要程序員本身解決app

三、js的原型繼承ide

Controller

需求：有一些功能，在各個控制器中都會用到，怎麼辦？模塊化

 1 <!DOCTYPE html>
 2 <html lang="en" ng-app="myApp">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script type="text/javascript" src="../../jslib/angular.min-1.5.8.js"></script>
 7     <script type="text/javascript" src="demo02.js"></script>
 8 </head>
 9 <body>
10     <div ng-controller="CommonController">
11         <div ng-controller="Controller1">
12             <p>{{greet.text}},AngularJs</p>
13             <button ng-click="test1()">test1</button>
14         </div>
15         <div ng-controller="Controller2">
16             <p>{{greet.text}},AngularJs</p>
17             <button ng-click="test2()">test2</button>
18         </div>
19         <button ng-click="commonFn()">通用</button>
20     </div>
21 </body>
22 </html>

demo02.html

 1 /**
 2  * Created by sherry on 16/8/3.
 3  */
 4 
 5 var myApp = angular.module("myApp",[]);
 6 myApp.controller("CommonController",function ($scope) {
 7     $scope.commonFn = function () {
 8         alert("這是通用功能");
 9     }
10 });
11 myApp.controller("Controller1",function ($scope) {
12     $scope.greet = {
13         text:"Hello1"
14     };
15     $scope.test1 = function () {
16         alert("test1");
17     }
18 });
19 myApp.controller("Controller2",function ($scope) {
20     $scope.greet = {
21         text:"Hello2"
22     };
23     $scope.test2 = function () {
24         alert("test2");
25     }
26 });

demo02.js

對於button，無論其隸屬於哪一個控制器，只要是在 CommonController 內的，就都能被調用 commonFn 方法就變成了兩個「子」控制器的公共方法工具

以下：spa

    <div ng-controller="CommonController">
        <div ng-controller="Controller1">
            <p>{{greet.text}},AngularJs</p>
            <button ng-click="test1()">test1</button>
        </div>
        <div ng-controller="Controller2">
            <p>{{greet.text}},AngularJs</p>
            <button ng-click="test2()">test2</button>
            <button ng-click="commonFn()">通用</button>
        </div>
    </div>

可是：AngularJs中並不推薦這麼作，AngularJs的最佳實踐，是把公共部分抽取成Service，被Controller調用

Controller使用中的注意點：

一、不要試圖去複用Controller，通常控制器只負責一小塊視圖【通常一個Controller負責的是一個業務邏輯，除非業務邏輯切分得足夠細，不然不具有複用的可能】

二、不要在Controller中操做DOM，這不是控制器的職責【推薦將DOM操做使用指令來作，Controller中操做DOM的速度是很是低的】

三、不要在Controller裏面作數據格式化，AngularJs有很好的表單控件

四、不要在Controller裏面作數據過濾操做，AngularJs有$filter服務

五、通常來講，Controller是不會相互調用的，控制器之間的交互經過事件進行

Model

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../../jslib/angular.min-1.5.8.js"></script>
</head>
<body>
    <input type="text" placeholder="輸入..." ng-model="name">
    <p>{{name}}</p>
</body>
</html>