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 相关文章推荐
基于jquery的tab切换 js原理
Apr 01 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
原生JS中应该禁止出现的写法
May 05 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二维数组排序方法(array_multisort usort)
2013/12/25 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
js输出列表实现代码
2010/09/12 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
Webpack3+React16代码分割的实现
2021/03/03 Javascript
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Python实现统计代码行的方法分析
2017/07/12 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
用Python配平化学方程式的方法
2019/07/20 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
幼儿园长自我鉴定
2013/10/17 职场文书
大学校庆策划书
2014/01/31 职场文书
社团活动总结报告
2014/06/27 职场文书
2015年预算员工作总结
2015/05/14 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL
Go语言 详解net的tcp服务
2022/04/14 Golang
基于redis+lua进行限流的方法
2022/07/23 Redis
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers
Moment的feature导致线上bug解决分析
2022/09/23 Javascript