AngularJS入门教程之MVC架构实例分析  更新时间:2016年11月01日 15:36:49   作者:Rongbo_J   这篇文章主要介绍了AngularJS的MVC架构,结合实例形式重点分析了ng-controller声明并使用控制器的操作技巧与控制器作用域的相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS的MVC架构。分享给大家供大家参考,具体如下: MVC应用程序架构最早于1970年起源于Smalltalk语言,后来在桌面应用程序开发中使用较为广泛,如今在WEB开发中也非常流行。MVC的核心思想是將数据的管理(Model)、业务逻辑控制(Controller)和数据的展示(View)分离开来,使程序的逻辑性和可维护性更强。 对于AngularJS应用来说,视图(View)是DOM(文档对象模型),你可以理解为就是HTML页面。控制器(Controller)是一个用户自定义的JavaScript类。模型数据(Model)存储在对象的属性中。 我们来看下面的代码: tutorial03 用户名: 密码: 提交 您输入的用户名:{{name}} 您输入的密码:{{pword}} 我们在前面一篇《AngularJS入门教程之数据绑定用法示例》代码的基础上进行修改,我们通过ng-controller指令声明一个控制器,名称为UserController,它所在的div开始标签和结束标签之间的部分都由该控制器来管理。 function UserController…为控制器定义部分,这里我们依靠AngularJs依赖注入系统以参数的形式向控制器中注入$scope和$log对象。$scope为模型数据对象,前面有提到过,ng-model的作用就是为$scope对象添加一个属性和表单元素绑定。$log对象用于在浏览器控制台中输出调试信息。 在控制器中可以做一些初始化工作,例如这里我们將用户名和密码文本框中的内容初始化为”admin”,”123456”。还可用于事件处理,我们通过ng-click指令声明按钮的点击事件处理函数为login(),在控制器中通过$scope.login = function()…进行事件绑定。 在浏览器中运行可以看到效果如下: 页面加载时文本框中内容被初始化,点击提交弹出对话框。 AngularJs的控制器的作用域仅限于ng-controller所在的元素开始标签和结束标签之间的部分,为了证明这个结论我们再增加一个控制器,代码如下: tutorial03 用户名: 密码: 提交 您输入的用户名:{{name}} 您输入的密码:{{pword}} 个人爱好: 您输入的个人爱好:{{love}} 由于name和pword不是在InfoContoller控制器中定义的,我们在控制台中输出$scope.name和$scope.pword显示为undefined. AngularJS源码可点击此处本站下载。 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: Angular2入门–架构总览 Angular 4.0学习教程之架构详解 AngularJS MVC架构 相关文章 Angular+Ionic使用queryParams实现跳转页传值的方法 这篇文章主要介绍了Angular+Ionic使用queryParams实现跳转页传值的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 2020-09-09 AngularJS中run方法的巧妙运用 前端技术的发展是如此之快,各种优秀技术、优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢。下面这篇文章主要给大家介绍了AngularJS中run方法的巧妙运用,需要的朋友可以参考借鉴,下面来一起看看吧。 2017-01-01 使用Angular.js开发的注意事项 这篇文章主要记录了一些在学习和使用angular.js踩到的坑和需要注意的点,方便以后自己查阅,也给同样遇到这些问题的朋友们一些帮助,有需要的朋友们下面来一起看看吧。 2016-10-10 AngularJS基于ui-route实现深层路由的方法【路由嵌套】 这篇文章主要介绍了AngularJS基于ui-route实现深层路由的方法,涉及AngularJS路由嵌套操作相关实现步骤与技巧,需要的朋友可以参考下 2016-12-12 分享Angular http interceptors 拦截器使用(推荐) AngularJS 是一个 JavaScript 框架。它可通过 标签添加到 HTML 页面。这篇文章主要介绍了分享Angular http interceptors 拦截器使用(推荐),需要的朋友可以参考下 2019-11-11 Angularjs中使用layDate日期控件示例 本篇文章主要介绍了Angularjs中使用layDate日期控件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-01-01 Angular.js跨controller实现参数传递的两种方法 这篇文章主要给大家介绍了关于Angular.js跨controller实现参数传递的两种方法,文中给出了详细的介绍和示例代码,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。 2017-02-02 AngularJS过滤器详解及示例代码 本文主要介绍AngularJS过滤器,这里整理了详细的资料和提供了示例代码及实例效果图,有兴趣的小伙伴可以参考下 2016-08-08 AngularJS中处理多个promise的方式 promise是一种用异步的方式处理值的方法,promise是对象,代表了一个函数最终可能的返回值或者抛出的异常,在与远程对象打交道时我们可以把他看作是远程对象的一个代理,通过本文给大家介绍AngularJS中处理多个promise的方式及什么是promise,需要的朋友参考下 2016-02-02 深入理解AngularJs-scope的脏检查(一) 这篇文章主要介绍了深入理解AngularJs-scope的脏检查(一) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 最新评论

本文实例讲述了AngularJS的MVC架构。分享给大家供大家参考,具体如下:

MVC应用程序架构最早于1970年起源于Smalltalk语言,后来在桌面应用程序开发中使用较为广泛,如今在WEB开发中也非常流行。MVC的核心思想是將数据的管理(Model)、业务逻辑控制(Controller)和数据的展示(View)分离开来,使程序的逻辑性和可维护性更强。

对于AngularJS应用来说,视图(View)是DOM(文档对象模型),你可以理解为就是HTML页面。控制器(Controller)是一个用户自定义的JavaScript类。模型数据(Model)存储在对象的属性中。

我们来看下面的代码:

<!DOCTYPE html>
<html ng-app>
<head lang="en">
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial03</title>
</head>
<body>
<div ng-controller="UserController">
 用户名:<input type="text" ng-model="name" placeholder="用户名"/>
 密码:<input type="password" ng-model="pword" placeholder="密码"/>
 <button ng-click="login()">提交</button>
 <p>您输入的用户名:{{name}}</p>
 <p>您输入的密码:{{pword}}</p>
</div>
<script>
 function UserController ($scope,$log)
 {
  $scope.name="admin";
  $scope.pword="123456";
  $log.info( $scope.name);
  $log.info( $scope.pword);
  $scope.login = function()
  {
   alert("登录");
  }
 }
</script>
</body>
</html>

我们在前面一篇《AngularJS入门教程之数据绑定用法示例》代码的基础上进行修改,我们通过ng-controller指令声明一个控制器,名称为UserController,它所在的div开始标签和结束标签之间的部分都由该控制器来管理。

function UserController…为控制器定义部分,这里我们依靠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">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial03</title>
</head>
<body>
<div ng-controller="UserController" style="border:#ccc solid 1px;">
 用户名:<input type="text" ng-model="name" placeholder="用户名"/>
 密码:<input type="password" ng-model="pword" placeholder="密码"/>
 <button ng-click="login()">提交</button>
 <p>您输入的用户名:{{name}}</p>
 <p>您输入的密码:{{pword}}</p>
</div>
<br/>
<div ng-controller="InfoContoller" style="border:#ccc solid 1px;">
 个人爱好:<input type="text" ng-model="love" placeholder="个人爱好"/>
 <p>您输入的个人爱好:{{love}}</p>
</div>
<script>
 function UserController($scope,$log)
 {
  $scope.name="admin";
  $scope.pword="123456";
  $scope.login = function()
  {
   alert("登录");
  }
 }
 function InfoContoller($scope,$log)
 {
  $scope.love="足球";
  $log.info($scope.name);
  $log.info($scope.pword);
  $log.info($scope.love);
 }
</script>
</body>
</html>

由于name和pword不是在InfoContoller控制器中定义的,我们在控制台中输出$scope.name和$scope.pword显示为undefined.

AngularJS源码可点击此处本站下载

希望本文所述对大家AngularJS程序设计有所帮助。

您可能感兴趣的文章:

  • Angular2入门–架构总览
  • Angular 4.0学习教程之架构详解
张贴在3