自己建网站做app,90后小姑娘做网站,怎么做网页代码,购物网站建设网页推广MVVM简介 针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC(Model-View-Controll)设计模式针对不同的人可能意味不同的东西 ,AngularJS并不执行传统意义上的MVC#xff0c;更接近于MVVM。 MVVM模式是Model-View-ViewMode模式的简称。由视图(View)、视图模型(ViewMode…MVVM简介 针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC(Model-View-Controll)设计模式针对不同的人可能意味不同的东西 ,AngularJS并不执行传统意义上的MVC更接近于MVVM。 MVVM模式是Model-View-ViewMode模式的简称。由视图(View)、视图模型(ViewModel)、模型(Model)三部分组成通过这三部分实现UI逻辑、呈现逻辑和状态控制、数据与业务逻辑的分离。 Model将和ViewModel互动(通过$scope对象)将监听Model的变化。这些可以通过View来发送和渲染由HTML来展示你的 代码。View可以通过$routeProvider对象来支配所以你可以深度的链接和组织你的View和Controller将他们变成导航 URL。AngualrJS同时提供了无状态的Controller可以用来初始化和控制$scope对象。 Model与MVC模式一样Model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。它具有对数据直接访问的权利例如对数据库的访问Model不依赖于View和ViewModel也就是说模型不关心会被如何显示或是如何被操作模型也不能包含任何用户使用的与界面相关的逻辑。 ViewModel是一个用来提供特别数据和方法从而维护指定view的对象,。ViewModel是$scope的对象只存在于AnguarJS的应用中。$scope只是一个简单的js对象这个对象使用简单的API来侦测和广播状态变化。 Controller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。 View是AngularJS解析后渲染和绑定后生成的HTML。这个部分帮助你创建web应用的架构。$scope拥有一个针对数据的参考controller定义行为view处理布局和互动。 使用MVVM模式有几大好处 1. 低耦合View可以独立于Model变化和修改一个ViewModel可以绑定到不同的View上当View变化的时候Model可以不变当Model变化的时候View也可以不变。 2. 可重用性可以把一些视图的逻辑放在ViewModel里面让很多View重用这段视图逻辑。 3. 独立开发开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。 4. 可测试性可以针对ViewModel来对界面(View)进行测试。 控制器 AngularJS控制器控制AngularJS应用程序的数据是常规的JavaScript对象。 ng-controller指令就是用来定义应用程序控制器的并且同时创建了一个新的作用域关联到相应的DOM元素上。 所谓作用域就是一个指向应用模型的对象它是表达式的执行环境作用域有层次结构这个层次和相应的DOM几乎是一样的作用域能监控表达式和传递事件并且可以从父作用域继承属性。 每一个AngularJS应用都有一个绝对的根作用域。但也可能有多个子作用域。 一个应用可以有多个作用域因为有一些指令会生成新的子作用域当新作用域被创建的时候他们会被当成子作用域添加到父作用域下这使得作用域会变成一个和相应DOM结构一个的树状结构。 控制器属性 现在我们就用ng-controller指令来创建一个简单的控制器定义如下所示 div ng-app ng-controllerMyController p请输入一个名字input typetext ng-modelperson.name /p pHello span ng-bindperson.name/span /p/div scriptfunction MyController($scope) { $scope.person { name: World };}/script如上所述我们通过ng-controller指令创建了一个JavaScript对象 —— MyController并带有name属性那参数$scope是什么呢代表什么意思呢。 现在我们就来解答MyController对象参数 —— $scope。 $scope就是把一个DOM元素连结到控制器上的对象它提供一个绑定到DOM元素(以及其子元素)上的执行上下文。它也是一个JavaScript对象指向应用程序作用域内的所有HTML元素和执行上下文。作用域呢就是作为$scope的数据属性关联到DOM上的并且能在需要调试的时候被获取到。 要明确创建一个$scope对象我们就要给DOM元素安上一个controller对象使用的是ng-controller 指令属性。 所有$scope都遵循原型继承这意味着它们都能访问父$scope们,对任何属性和方法如果AngularJS在当前$scope上找不到就会到父$scope上去找如果在父$scope上也没找到就会继续向上回溯一直到$rootScope上这个$rootScope是最顶级的$scope它对应着含有 ng-app指令属性的那个DOM元素也就是说根作用域关联的DOM就是ng-app指令定义的地方。 也就是说拥有了$scope我们就可以操作作用域内任何我们想要获取的对象数据。 控制器方法 控制器不仅声明属性也可以声明方法如下所示 div ng-app ng-controllerMyController Your name: input typetext ng-modelusername button ng-clicksayHello()打招呼/button hr {{greeting}}/div scriptfunction MyController($scope) { $scope.username World; $scope.sayHello function() { $scope.greeting Hello $scope.username !; };}/script参考以上代码赶快动手试试控制器的使用方法吧 当然如果是开发条件的需要我们也可以将控制器写在外部文件中那如上示例该怎么做呢很简单如下简单引用即可 script srcMyController.js/script转载于:https://www.cnblogs.com/rainheader/p/4623954.html
