当前位置:网站首页> 经验杂谈>正文

如何创建网页控制器MVC 涨知识了

发布于:2021-02-20 16:55:38发问者:天晴问友| 评论:

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 inarticeleList">
<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 inarticeleList">
<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)

相关经验+更多
  • 手机联系人如何备份和恢复?,涨知识了

    手机联系人如何备份和恢复?,涨知识了

    手机是现代生活必不可少的工具之一,在使用时我们常常需要对联系人进行管理。本次就给大家介绍手机联系人如何备份和恢复,快来看看吧。 操作方法 01 打开“设置”,点击“系统

  • 手机微信如何备份联系人 大师来详解

    手机微信如何备份联系人 大师来详解

    小编以前是做手机行业这一块的,经常有很多人没有及时的备份好联系人,手机故障或手机丢失所导致的联系人丢失。这里给大家说下联系人没有备份是没有任何办法找回来的。请大家

  • 手机联系人怎么备份 如何恢复手机联系人 需要技巧

    手机联系人怎么备份 如何恢复手机联系人 需要技巧

    备份联系人最简单的方式就是把联系人备份到手机SIM卡或者手机存储设备中,如果需要恢复联系人就可以直接从SIM卡或手机存储设备中导入。接下来小编就告诉大家如何备份或恢复手机

  • 如何看iphone5s支持3G/4G网络情况 看完你就知道了

    如何看iphone5s支持3G/4G网络情况 看完你就知道了

    4G来了,你准备好了吗?你的手机4G网络吗,轻松几步让你判断自己的爱机是不是可以搭上4G的高速火箭。 工具/材料 iphone5S 操作方法 01 首先查看你的爱机型号。就在手机的背部,字体比

  • Iphone5S/5C如何使用4G网络,大师来详解

    Iphone5S/5C如何使用4G网络,大师来详解

    只需简单三步,Iphone5S/5C即可摇身变为4G手机 工具/材料 Iphone5S/5C wifi 操作方法 01 第一步:检查手机硬件是否支持4G 查看手机背面下方的型号(如下图所示)并对照下表查询,若您惊喜地

  • Iphone5S、5C如何使用4G网络 来研究下吧

    Iphone5S、5C如何使用4G网络 来研究下吧

    今天小编要和大家分享的是Iphone5S、5C如何使用4G网络,希望能够帮助到大家。 操作方法 01 首先在我们的手机桌面上找到设置并点击它,如下图所示。 02 然后点击蜂窝移动网络,如下图

经验评论

评论列表(条(包括审核中))