JavaScript框架之AnuglarJS学习——MVC
来源:互联网 发布:阿里旺旺软件下载网页 编辑:程序博客网 时间:2024/05/16 16:05
AngularJS学习——MVC
MVC是一种软件架构模式,独立于任何一门语言(只是一种软件思想,不是具体的某一种语言或技术。),于1970年起源于Smalltalk语言,随后随着桌面应用的普及广泛用于桌面应用开发中,发展到今天可谓无处不在。
MVC是Model(模型)、View(视图)、Controller(控制器)的首字母缩写。MVC核心思想是把数据的管理、业务逻辑控制和数据的展示分离开,是程序的逻辑性和可维护性更强。
- Model(模型)为程序中的模型数据,是控制器与视图之间传递信息的载体。
- View(视图)为用户可操作的软件界面,用户通过视图和创徐进行交互,在视图中会触发不同的事件。(例如单击按钮、输入文字等,不同的事件能够触发控制器执行相应的业务逻辑处理。)
- Controller(控制器)主要用于相应用户请求,在控制器中可操作模型数据,进行业务逻辑处理,根据处理结果分发到不同的视图。
在AngaularJS中,MVC分别指:
Model(模型):作用域对象中的属性($scope/$rootScope)
View(视图):DOM元素,用户(页面展示),开发者(通过AngularJS表达式访问模型数据)
Controller(控制器):用户自定义的构造方法,作用域中的模型数据可以通过依赖注入的方式注入到控制器中。
AngularJS控制器是一个构造方法。
eg:
<script type="text/javascript">function Box($scope, $log){$scope.name = "chenxiaoming";$scope.pword = 123456;}</script>在AngualrJS中,我们可以使用模块实例的controller()方法来声明一个控制器。接收两个参数,第一个参数为控制器名称,第二个参数为一个匿名方法,即控制器的构造方法
eg:
<script type="text/javascript">var app = angualr.module("myApp",[]);//实例化app.controller("myCtrl",function($scope, $log){$scope.name = "chenxiaomng";$scope.pword = 123456;})</script>AngularJS框架在window对象中增加了一个全局的angualr对象,我们调用angular对象的module()方法返回一个模块实例,然后调用模块实例的controller方法来声明一个控制器。
$scope是作用域对象,是控制器与视图之间传递信息的载体
$log为AngularJS框架内置的日志服务对象,用于向控制台中输入日志信息。
为控制器构造方法指定这两个参数后,表示控制器依赖于这两个对象,控制器实例化时会把这两个对象注入控制器中。
AngularJS1.3版本之后不支持全局控制器。
控制对象的实例化
用AngularJS内置的ng-controller指令。
<div ng-controller="myCtrl"><input type="text" ng-model="message"><p ng-bind="message"></p></div>
AngularJS框架遇到ng-controller指令时会根据ng-controller指令指定的控制器名称查找控制器构造方法,然后使用对应的构造方法实例化控制器对象,并将控制器依赖的对象注入控制器对象中。ng-controller指令还支持使用as语法指定控制器对象名称。
eg:价格计算机
<body><div class="wrapper" ng-app="myApp" ng-controller="myCtrl as calc"><div>价格:<input type="number" ng-model="price"></div><div>数量:<input type="number" ng-model="num"></div><div>总价:{{ calc.totalPrice() }}</div></div><script>var app = angular.module("myApp",[]);app.controller("myCtrl",myCtrl);function myCtrl($scope){$scope.price = 10;$scope.num =1;this.totalPrice = function(){return $scope.price * $scope.num;}}</script></body>
通过as语法指定控制器对象的名称,可以通过控制器对象名称访问独享的成员属性及成员方法。使用MVC思想重构以上代码:
<body><div class="wrapper" ng-app="myApp" ng-controller="myCtrl"><div>价格:<input type="number" ng-model="price"></div><div>数量:<input type="number" ng-model="num"></div><div>总价:{{ totalPrice() }}</div></div><script>var app = angular.module("myApp",[]);app.controller("myCtrl",myCtrl);function myCtrl($scope){$scope.price = 10;$scope.num =1;$scope.totalPrice = function(){return $scope.price * $scope.num;}}</script></body>效果是一样的,不同的仅是视图中表达式运算操作转移到了控制器中。
控制器的作用域范围
ng-controller指令实例化控制器时会产生一个新的作用域对象,而且同一个页面可以使用多个ng-controller指令来实例化不同的控制器对象,每个控制器对应的作用域对象只能与ng-controller指令所在的标签的开始标签与结束标签之间的DOM元素建立数据绑定。
控制器中处理DOM事件
AngularJS应用中的DOM事件处理可以在控制器中完成。
AngularJS框架为我们提供了一系列的事件绑定指令,这些指令是在原生的JavaScript事件名称前增加ng前缀:
- ng-click
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ......
以上笔记整理自个人学习,用做个人学习分享
- JavaScript框架之AnuglarJS学习——MVC
- Spring学习之MVC框架
- 12种JavaScript MVC框架之比较
- 12种JavaScript MVC框架之比较
- 12种JavaScript MVC框架之比较
- 12种JavaScript MVC框架之比较
- 12种JavaScript MVC框架之比较
- 12种JavaScript MVC框架之比较
- 12种JavaScript MVC框架之比较
- 12种JavaScript MVC框架之比较
- 12种JavaScript MVC框架之比较
- 各种JavaScript MVC框架之比较
- javascript MVC框架之 Backbone 实用指南
- JavaScript框架之AngularJS学习——准备
- JavaScript框架之AngularJS学习——双向数据绑定
- JavaScript框架之AngularJS学习——应用模块化
- JavaScript框架之AngularJS学习——表单校验
- JavaScript框架之AngularJS学习——UIRouter
- JedisPool连接池代码示例
- 面向对象三大特征
- Jenkins基础入门-14-Jenkins邮件通知设置
- DOM中元素节点、属性节点、文本节点的理解
- 浅谈单元测试关注的一些点
- JavaScript框架之AnuglarJS学习——MVC
- 9.24
- ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛
- 机房之初步构思
- KafkaConsumer-kafka消费者的Java客户端
- 1019. 数字黑洞 (20)
- Jmeter接口测试项目实战
- 西瓜书《机器学习》课后答案——chapter5_5.5
- fastcgi_finish_request() 遇到的坑