本文阐述了AngularJS的MVC架构。分享给大家参考，如下：

MVC应用架构起源于1970年的Smalltalk语言，后来被广泛应用于桌面应用开发，现在在WEB开发中也非常流行。MVC的核心思想是将数据管理(Model)、业务逻辑控制(Controller)和数据显示(View)分开，使程序更具逻辑性和可维护性。

对于AngularJS应用程序，视图是DOM(文档对象模型)，您可以将其理解为HTML页面。控制器是用户定义的JavaScript类。模型数据(模型)存储在对象的属性中。

让我们看看下面的代码：

！DOCTYPE html html ng-app head lang=' en ' meta charset=' UTF-8 '脚本类型=' text/JavaScript ' src=' http : angular-1 . 3 . 0 . 14/angular . js '/脚本标题教程03/title/head divng-controller=' user controller '用户名：输入类型=' text' ng-model=' name '占位符=' user name'/Password:输入类型=' password' ng-model=' pword '占位符=' Password '/$ scope.pword=' 123456$ log . info($ scope . name)；$ log . info($ scope . pword)；$ scope . log in=function(){ alert(' log in ')；} }/script/body/html我们在之前的《AngularJS入门教程之数据绑定用法示例》代码的基础上进行了修改。我们通过ng-controller指令声明了一个名为UserController的控制器，div的开始标记和结束标记之间的部分由这个控制器管理。

功能用户控制器.是控制器定义部分，这里我们借助AngularJs依赖注入系统，以参数的形式将$scope和$log对象注入到控制器中。$scope是一个模型数据对象。如前所述，ng-model的作用是添加一个绑定到$scope对象的属性和表单元素。$log对象用于在浏览器控制台中输出调试信息。

您可以在控制器中进行一些初始化工作。例如，这里我们将用户名和密码文本框中的内容初始化为“admin”和“123456”。它也可以用于事件处理。我们通过ng-click指令将按钮的点击事件处理函数声明为login()，并通过$scope.login=function()绑定控制器中的事件。

在浏览器中运行可以看到以下效果：

加载页面时，文本框中的内容被初始化，点击提交弹出对话框。

AngularJs的控制器范围限于ng-controller所在元素的开始标记和结束标记之间的部分。为了证明这个结论，我们用下面的代码添加另一个控制器：

！DOCTYPE html html ng-app head lang=' en ' meta charset=' UTF-8 '脚本类型=' text/JavaScript ' src=' http : angular-1 . 3 . 0 . 14/angular . js '/脚本标题tutorial03/title/head dydiv ng-controller=' user controller ' style=' border : # CCC solid 1px；'用户名：输入类型=' text' ng-model=' name '占位符=' user name'/password:输入类型=' password' ng-model=' pword '占位符=' password '/Button ng-click=' log in()' submit/Button pussername您输入的：{{name}}/p您输入的pPassword:{ { pword } }/p/div br/div ng-controller=' infocontuller ' style=' border : # cccsolid 1 px；'个人爱好：输入类型=' text' ng-model=' love '占位符=' personal hospital '/pt您输入的个人爱好：{{love}}/p/div脚本函数用户控制器($ scope，$ log) {$ scope。名称=' admin$ scope.pword=' 123456$ scope . log in=function(){ alert(' log in ')；} } Function infocontuller($ scope，$ log) {$ scope。爱情='足球'；$ log . info($ scope . name)；$ log . info($ scope . pword)；$ log . info($ scope . love)；}/script/body/html由于在InfoContoller控制器中没有定义name和pword，因此我们在控制台中将$scope.name和$scope.pword输出为未定义。

AngularJS源代码可以在这里下载。

希望本文对AngularJS编程有所帮助。