AngularJS入门教程之MVC架构实例分析


Posted in Javascript onNovember 01, 2016

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

MVC应用程序架构最早于1970年起源于Smalltalk语言,后来在桌面应用程序开发中使用较为广泛,如今在WEB开发中也非常流行。MVC的核心思想是?⑹?莸墓芾恚?odel)、业务逻辑控制(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对象用于在浏览器控制台中输出调试信息。

在控制器中可以做一些初始化工作,例如这里我们?⒂没??兔苈胛谋究蛑械哪谌莩跏蓟???dmin”,”123456”。还可用于事件处理,我们通过ng-click指令声明按钮的点击事件处理函数为login(),在控制器中通过$scope.login = function()...进行事件绑定。

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

AngularJS入门教程之MVC架构实例分析

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

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入门教程之MVC架构实例分析

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

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

Javascript 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
js实现聊天对话框
Feb 08 Javascript
bootstrap table复杂操作代码
Nov 01 #Javascript
bootstrap flask登录页面编写实例
Nov 01 #Javascript
JS弹出窗口的运用与技巧大全
Nov 01 #Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 #Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 #Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 #Javascript
jQuery动态生成Bootstrap表格
Nov 01 #Javascript
You might like
Window下PHP三种运行方式图文详解
2013/06/11 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
详解JS面向对象编程
2016/01/24 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
python的中异常处理机制
2018/08/30 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
Django中的用户身份验证示例详解
2019/08/07 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
Python Map 函数的使用
2020/08/28 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
政法大学毕业生自荐信范文
2014/01/01 职场文书
晚会邀请函范文
2014/01/24 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
英文邀请函
2015/02/02 职场文书
小学运动会报道稿
2015/07/22 职场文书
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL