AngularJS 前端 MVC 的設計與搭建

時間 2019-11-11

標籤 angularjs 前端 mvc 設計搭建欄目 AngularJS 简体版

原文原文鏈接

代碼

#未引入MVC框架以前的代碼

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>AngualrJS進階</title> 
<link rel="stylesheet" type="text/css" href="css/foundation.css">
</head>
<body style="padding:10px;">

</body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">

</script>
</html>

#引入MVC框架後的代碼

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>AngualrJS進階</title> 
<link rel="stylesheet" type="text/css" href="css/foundation.css">
</head>
<body style="padding:10px;" ng-app="app">
<!--既然這裏使用了一個變量名app，綁定AngularJS管理邊界，表示AngularJS的做用域，咱們就須要在js中聲明一個變量，這裏採用模塊定義方法，注意這裏是Module模塊，而不是Model模型，即這裏的Module不是MVC中的M-->
<div ng-contrller="myCtrl">
<!--這裏使用咱們js中定義的控制器，這個控制器的管理邊界就是該div-->
<input type="text" ng-model="msg">
<h1>{{msg}}</h1>
<!--將msg變量綁定到h1標籤-->
</div>
</body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
angular.module("app",[])
<!--app是咱們定義的模塊變量，不是模型，[]是引入AngularJS以前定義的其餘模塊-->
.controller("myCtrl",function($scope){
<!--這裏利用controller定義一個控制器變量myCtrl，$scope是咱們的應用程序所指向的html的元素，也就是模型Model-->
$scope.msg="angular";
});
<!--這個controller就是一個小型的MVC，controller就是C，$scope就是M，經過$scope.msg將Model雙向綁定到View上，
即將$scope這個Module的msg綁定到h1這個View元素-->
</script>
<!--建議將AngularJS文件放入一個單獨的JS文件，以下：<script src="js/myctrl.js"></script>，之後就能夠在myctrl.js中編寫控制代碼-->
</html>