AngularJS入门教程之MVC架构实例分析
本文实例讲述了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程序设计有所帮助。
相关推荐
-
Angular 4.0学习教程之架构详解
前言 前段时间谷歌发布了广受欢迎的Angular JavaScript框架的4.0版本,该版本致力于缩小生成代码的体积,以及保持框架的简化发布计划. 很久没写这种比较偏概念类的东西了,不过我觉得没有形成一个知识架构,学习效率会大打折扣.在这里把我的所理解的知识分享给大家,部分内容引用自官方文档.下面进入主题 Angular架构概览 先来看一下官方放出的架构图. 架构概览 这个架构图展现了 Angular 应用中的 8 个主要构造块: 模块 (module) 组件 (component) 模板 (
-
Angular2入门--架构总览
大致介绍 在3月23日,Angular4正式发布(没有3).似乎现在学Angular2又晚了,又晚一步-_-||.Angular2在Angular1的基础上有了较大的改变.之前向一个同学(之前学过Angular1)问一个Angular2的问题,他反问到这是Angular代码? 可见Angular1->Angular2的变化有多大.先来看看Angular2的架构 核心模块 一个完整的Angular应用主要由六个重要部分组成:组件.模板.指令.服务.依赖注入和路由 他们之间的关系: 从图中可以看出:
-
AngularJS入门教程之MVC架构实例分析
本文实例讲述了AngularJS的MVC架构.分享给大家供大家参考,具体如下: MVC应用程序架构最早于1970年起源于Smalltalk语言,后来在桌面应用程序开发中使用较为广泛,如今在WEB开发中也非常流行.MVC的核心思想是將数据的管理(Model).业务逻辑控制(Controller)和数据的展示(View)分离开来,使程序的逻辑性和可维护性更强. 对于AngularJS应用来说,视图(View)是DOM(文档对象模型),你可以理解为就是HTML页面.控制器(Controller)是一个
-
AngularJS 入门教程之HTML DOM实例详解
AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bd
-
AngularJS入门教程之Helloworld示例
本文实例讲述了AngularJS入门教程之Helloworld示例.分享给大家供大家参考,具体如下: 什么是AngularJs? angularjs是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于,利用数据绑定和依赖注入,它使你不用再写大量的代码了.这些全都通过浏览器端的javascript实现,这也使得它能够完美地和任何服务器技术结合. AngularJS简单的Helloworld例子: <!D
-
AngularJS入门教程之AngularJS表达式
表达式用于应用程序数据绑定到HTML.表达式都写在双括号就像{{表达式}}.表达式中的行为跟ng-bind指令方式相同. AngularJS应用表达式是纯javascript表达式,并输出它们被使用的数据在那里. AngularJS表达式格式 : {{expression }} AngularJS表达式可以是字符串.数字.运算符和变量 数字运算{{1 + 5}} 字符串连接{{ 'abc' + 'bcd' }} 变量运算 {{ firstName + " " + lastName }}
-
AngularJS入门教程之AngularJS模型
相关阅读: AngularJS入门教程之AngularJS表达式 AngularJS入门教程之AngularJS指令 在前面表达式和指令的教程中了解到,AngularJS模型(ng-model)可以将HTML输入域中的值与AngularJS创建的变量绑定. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.
-
AngularJS入门教程之AngularJS指令
熟悉HTML的朋友都知道,HTML有很多属性.比如<a>标签的href属性可以来指定链接的URL地址,<input>标签的type属性可以用来指定input的类型.AngularJS指令就是通过扩展HTML的属性来为 AngularJS应用增加功能. AngularJS指令用于扩展HTML.这些都是先从ng- 前缀的特殊属性.我们将讨论以下指令: 常用AngularJS指令 ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng
-
Zend Framework教程之Zend_Db_Table_Row用法实例分析
本文实例讲述了Zend Framework教程之Zend_Db_Table_Row用法.分享给大家供大家参考,具体如下: 1. 简介 Zend_Db_Table_Row是Zend Framework的行数据网关.通常来说,你不可以自己实例化Zend_Db_Table_Row, 而是通过调用Zend_Db_Table::find()方法或者Zend_Db_Table::fetchRow()方法将Zend_Db_Table_Row作为 结果数据返回过来.一旦你得到来一个Zend_Db_Table_R
-
AngularJS入门教程之 XMLHttpRequest实例讲解
AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. 读取 JSON 文件 以下是存储在web服务器上的 JSON 文件: http://www.runoob.com/try/angularjs/data/Customers_JSON.php { "records": [ { "Name" : "Alfreds Futterkiste", "City"
-
AngularJS入门教程之AngularJS 模板
是时候给这些网页来点动态特性了--用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.,你可以到GitHub去看完整的差别. 视图
-
AngularJS入门教程之Cookies读写操作示例
本文实例讲述了AngularJS的Cookies读写操作.分享给大家供大家参考,具体如下: 虽然使用JavaScript创建和获取Cookie很简单,AngularJS还是把它作为一个单独的模块进行了封装,模块名为ngCookies,和前面的教程中做法一样,先引入angular-cookies.js: <script type="text/javascript" src="angular-1.3.0.14/angular-cookies.js"><