如何創建網頁控制器MVC

MVC：從計算機存儲器中取出指令，對指令進行譯碼，并根據指令的要求，按時間的先后順序向各部件發出控制信號，保證各部件協調一致地工作，完成各種操作，網頁中使用MVC創建框架，可以減少程序員的開發周期，網頁執行快，邏輯性強，下面我們就以Angular框架為例,創建一個Angular控件器。

工具/材料

Angular框架

操作方法

01
打開編譯環境（webstorm），在工程文件夾里新建一個html文件
02
在ctrl.html文件夾引入所需要的包和工具，如bootstrp和angular等
03
在angular.js文件下方定義一個angular模塊（module），代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script>
var myapp =augular.module('myapp',[])//定義一個模塊
</script>
</body>
</html>
04
定義一個控制器，并用scope搭建視圖與網頁通信的橋梁，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script>
var myapp =augular.module('myapp',[])//定義一個模塊
myapp.controller=("myctrl",['scrope',function () {

}])
</script>
</body>
</html>
05
在function隨便定義一個變量，一般為scope,網頁頭部<html>引入模塊名：ng-app="myapp",在網頁主體內容<body>里面引入控制器ng-controller="myctrl"這樣，網頁的內容才能被MVC控制器所接收和識別，代碼如下：
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body ng-app="ng-controller">
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script>
var myapp =augular.module('myapp',[])//定義一個模塊
myapp.controller=("myctrl",['scope',function (scope) {
}])
</script>
</body>
</html>
06
在控制器里面定義所需要的數據與內容，代碼如下：
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body ng-app="ng-controller">
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script>
var myapp =augular.module('myapp',[])//定義一個模塊
myapp.controller=("myctrl",['scope',function (scope) {
scope.articelelist=[
{'title':'新聞資訊','content':'新聞內容顯示'},
{'title':'小說連載','content':'擇天記'},
{'title':'生活百家','content':'社會相關'},
{'title':'軍事演練','content':'軍事圖片'},
{'title':'科技','content':'手機、IT'}
]
}])
</script>
</body>
</html>
07
在<body>里面定義一個響應式容器，一個panel組，遍歷（ng-repeat）數組數據,在panel-headding顯示文章標題的內容，代碼如下：
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body ng-controller="myctrl">
<div class="container">
<div class="panel-group">
<div class="panel panel-default" ng-repeat="artic in articeleList">
<div class="panel-heading">
<p class="panel-title">{{artic.title}}</p>
</div>
</div>
</div>
</div>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script>
var myapp = angular.module('myapp',[]);//定義一個模塊
//定義一個控制器
myapp.controller('myctrl',['scope',function (scope) {
scope.articeleList=[
{'title':'新聞資訊','content':'新聞內容顯示'},
{'title':'小說連載','content':'擇天記'},
{'title':'生活百家','content':'社會相關'},
{'title':'軍事演練','content':'軍事圖片'},
{'title':'科技','content':'手機、IT'}
];
}])
</script>
</body>
</html>
08
運行程序。
09
在panel-body中顯示網頁內容，代碼如下：
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body ng-controller="myctrl">
<div class="container">
<div class="panel-group">
<div class="panel panel-default" ng-repeat="artic in articeleList">
<div class="panel-heading">
<p class="panel-title">{{artic.title}}</p>
</div>
<div class="panel-body">
<p class="panel-content">{{artic.content}}</p>
</div>
</div>
</div>
< /div>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script>
var myapp = angular.module('myapp',[]);//定義一個模塊
//定義一個控制器
myapp.controller('myctrl',['scope',function (scope) {
scope.articeleList=[
{'title':'新聞資訊','content':'新聞內容顯示'},
{'title':'小說連載','content':'擇天記'},
{'title':'生活百家','content':'社會相關'},
{'title':'軍事演練','content':'軍事圖片'},
{'title':'科技','content':'手機、IT'}
];
}])
</script>
</body>
</html>
10
運行程序，得到最終結果。
End

發表于 2017-11-30 00:00
閱讀 ( 928 )
分類：娛樂休閑

如何創建網頁控制器MVC

工具/材料

操作方法

你可能感興趣的文章

相關問題

0 條評論

作家榜 ?

推薦文章