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 相关文章推荐
javascript 时间比较实现代码
Oct 28 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
Vue scoped及deep使用方法解析
Aug 01 Javascript
webpack4从0搭建组件库的实现
Nov 29 Javascript
微信小程序实现登录注册功能
Dec 29 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
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
Python Matplotlib库入门指南
2015/05/18 Python
Python对数据库操作
2016/03/28 Python
python 内置函数filter
2017/06/01 Python
python中模块查找的原理与方法详解
2017/08/11 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
python使用selenium实现批量文件下载
2019/03/11 Python
一行python实现树形结构的方法
2019/08/09 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
签约仪式策划方案
2014/06/02 职场文书
班级口号大全
2014/06/09 职场文书
个人投资合作协议书
2014/10/12 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python