AngularJS 前端 MVC 的设计与搭建

Posted 野渡书生

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJS 前端 MVC 的设计与搭建相关的知识,希望对你有一定的参考价值。

代码

#未引入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>

  

技术分享技术分享

以上是关于AngularJS 前端 MVC 的设计与搭建的主要内容,如果未能解决你的问题,请参考以下文章

利用前端MVC框架AngularJS实践设计模式

[angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架

由设计实现认识AngularJS

前端MVC学习总结——AngularJS验证过滤器

技术干货利用AngularJS开发复杂web应用

Anjular+Bootstrap前端开发案例实战