首页>>前端>>Vue->angular是mvc还是mvvm(angular mvvm)

angular是mvc还是mvvm(angular mvvm)

时间:2023-12-01 本站 点击:0

angular 需要定义model吗

如果其他朋友也有不错的原创或译文,可以尝试推荐给伯乐在线。在本文中让我们来逐步发掘angular为什么如此火:Angular.js是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(modelDriveView))JavaScript框架,其是Google推出的SPA(single-page-application)应用框架,其为我们的web应用开发增加不少魔法变换。我可以花整天的时间告诉你为什么你必须在新项目尝试angular.js,但是我觉得还是百说不如一练。数据绑定和scopes(作用域)首先第一个浮出大脑的问题是:angular支持数据绑定吗?下面让我们来了解angular.js的数据绑定:EditinpluckerInsertyourname:Echo:{{user.name}}在这代码片段中,在我们解释细节之前,我还是希望尝试下其效果:注:此刻暂时不要太心急去了解ng-app。如你所见,我在input中输入的将会显示在后边echo。这是如何工作的?简单来说,angular的ng-model(关于指令的将在文章后续)给我带来了双向绑定机制。如此是好,但是user.name存储在哪里呢?其存储在我们的$scope上,当我们在input中输入任何字符都会及时的更新scope对象上的user.name属性。然后我们可以利用angular的表达式{{…}}现实在HTML中。所以当我们在input中输入时,其会及时更新scope上的user,name属性,在由修改HTML显示。好吧,这并不难,但是你所说的$scope是个什么东东呢?在angular中$scope是连接controllers(控制器)和templates(模板view/视图)的主要胶合体。我们可以把我们的model存放在scope上,来达到双向你绑定。这就好比:这意味着我们我们从template上为$scope设置了一个属性对象user.name,所以我们也可以在controller中访问这个对象(user.name).让我们来看个更复杂的示例:Editinplunkervarapp=angular.module('app',[]);app.controller('MainCtrl',function($scope){$scope.message='World';});bodyng-app="app"ng-controller="MainCtrl"Hello,{{message}}在这里首先我们定义了angularapplication,只是简单的创建了一个angularmodule,其接受一个module名字和依赖数组为参数。紧接着创建了一个controller,通过调用appmodule的controller方法,并传入一个controller名字和function。function函数接受$scope参数(可以接受的参数,放在后面部分)。所以我们可以开始双向绑定了。在$scope中我们附加了message的字符串属性。在view中你可能注意到了bodytag多出了一些东东,这是干什么的?这些是angular的指令(directives),它给HTML带来了新的语法扩展,在这例子中我们使用了两个angular内置的指令:ng-app:它会告诉angularbody节点包含了我们的angular应用,换句话说,在body中的一切会被angular所接受管理。其参数为我们的appmodule的名字,和我们在javascript中命名一致。ng-controller:在这指令在我们传入的是controller名字,此例中为MainCtrl。最后我们将message插入我们的remplate。所以其可视化表示将是:聪明的你可以冒出一个疑问:我们能够在$scope上绑定function?当然。Editinplunkervarapp=angular.module('app',[]);app.controller('MainCtrl',function($scope){$scope.greet=function(){$scope.message="Hello,"+$scope.user.name;}});What'syourname?:Clickhere!{{message}}我在示例controller中很容易了解到如何添加function到$scope。示例中function将修改$scope.message为“hello,”和从input输入的$scope.user.name的字符串连接。然后在HTML中创建一个附加了angularng-click指令的button。ng-click指令是的button在被点击时会执行我们为其赋值的greet()表达式。注意:在input中enter并不会工作,这是展示ng-click如何工作。指令我们已经看见了一些指令了,指令是个什么东东?指令为HTML引入了新的语法。HTML已经很强大了,但是有时我需要…看下面的例子:示例代码在做什么?除了看见id外,我真的什么也不能获知。然后我们只得从多余30个javascript文件中去查找,最后我们看见如下代码:$('#chart').pieChart({});Aha!原来是个饼图(piechart)容器。在这里如果你不去查找javascript文件将无法获知页面到底是做什么的,实现了什么功能。下面我们再来看看angularcode,是不是语义很清晰,我们可以一眼看出这是一个piechart,不仅如此,而且还知道width,height,以及其数据。如果你对piechart示例感兴趣,请猛击这里angular内置指令angular给我带来了大量的内置指令。我们已经在前面看见了ng-app,ng-controller,ng-click,ng-model(angular的内置指令都以ng开始),接下来让我了解的内置指令。有时在页面中有部分内容我们只希望到达某状态(属性为true)才显示:EditinplunkerShowIamonlyvisiblewhenshowistrue.ng-show仅当angular其表达式值为true时,才显示该元素或子元素。注意:在这里对于ng-click我们并不是直接在controller中创建function(此刻我们没真正的controller),利用angular表达式作为指令的参数。在首次表达式为undefined,然后我们设置为为true,在false如此交替。angular同时也提供了ng-hide指令。让我们看些更有趣的指令,如果有个List或者数组呢?Editinplunkervarapp=angular.module('app',[]);app.controller('MainCtrl',function($scope){$scope.developers=[{name:"Jesus",country:"Spain"},{name:"Dave",country:"Canada"},{name:"Wesley",country:"USA"},{name:"Krzysztof",country:"Poland"}];});{{person.name}}from{{person.country}}棒极了,我们在controller中定义了一个list对象,在HTML用ng-repeat就能简单的显示了。它是如何工作的?ng-repeat会为集合中的每一项创建一个新的模板,在示例中有四项数据,将会重复创建下面code四次,{{person.name}}from{{person.country}}每次复制都会创建自己新的scope,我们没有为每项手动创建scope,我们可以把scope理解为其scope,但是在这里我们仍然能够访问父scope。可视化的展示为:我们能自定义directive?当然,我们能以不同粒度方式创建angular的directive,例如modaldialogsaccordions,paginators,charts,searchfrom…angular指令总是与可视化有关?不,我们仍然可以创建一些非可视化的指令集。让我们来看一个例子吧:回到我们上面的greet示例:What'syourname?:Clickhere!{{message}}已经能够很好的工作了,但是我们希望能够在页面初始化的时候光标焦点聚焦在输入框input。jQuery?jQuery提供了focus函数,能够很简单的完成,但是这里是angular教程,所以我们需要以angularway,显得我们更专业些…同时我们也希望我们的HTML能够有自描述能力(译者注:现代软件开发特别语言语义更重要,如linq,guava,restfull…),所以angulardirective肯定是个好的选择。app.directive('focus',function(){return{link:function(scope,element,attrs){element[0].focus();}};});接下来,我们可以在可以HTML中标注angulardirective(angulardirective首字母小写驼峰命名,在前台转换为全小写-分割风格)。directive是angular中最复杂的要点,这里只是最简单的directive而已,如果可能这将放在以后文章,这里并不会深入。directive需要一个object的返回对象,我们可以定义一些需要关注的属性,在示例中我们返回了一个link的链接函数(link函数主要作为directive的行为绑定),我们如果需要,也可以替换HTML中模板。Linkfunction有3个参数(准确应该是是4个)scope,节点element,还有所有HTMLattributeiAttrs。在link函数里我们可以绑定click,mouseenter等事件,注册指令行为。在示例中我们为指令节点使用了focus操作。对element了解,你可以移步到这里。我们可以很简单的使用指令如下:EditinplunkerWhat'syourname?:Clickhere!{{message}}目前我们看见的directive都很简单,如何利用指令渲染上面说的固定模板呢?如下:app.directive('hello',function(){return{restrict:"E",replace:true,template:"Helloreaders,thankyouforcoming"}});这里返回的是带有一些attribute的object。restrict:指令的使用方式Attribute形如:.Element形如:Class形如:CoMment形如:replace:询问是不是需要利用我们的模板替换原来的节点。template:我们需要append或者replace到原节点的html模板。directive还有很多的可配置options,如编译compile,templateurl…在示例我们不需要行为的绑定,所有没有linkfunction。其使用如下:EditinplunkerFilters(过滤器)假想我们有个购物车的view显示如下:Thereare13phonesinthebasket.Total:{{1232.12}}我们如何利用angular表达式显示为货币格式?形如:$1,232.12。相当简单,angular为我们提供了叫filter得东东,过滤器其好比unix中的管道pipeline。angular同时也内置了货币currencyfilter。如你所见,我们可以用|使用filter,这和unix管道模型很相似。我们也可以使用|链接的filter。例如我们可以对开发人员简单排序,在用ng-repeat显示出来:{{person.name}}from{{person.country}}在这里你发现了一些很有趣的事?卫门你可以给filter传递参数!OrderByfilter会接受一个属性名,并以它进行排序,示例中我们使用name,如果你希望反序排列,你可以用-name表示。马上你可能会冒出你头脑:假想我们不止4个开发人员,有300,并且我们希望通过name,country过滤呢?非常简单:EditinplunkerSearch:{{person.name}}from{{person.country}}在示例中请注意我们是如何绑定search.name的,此处利用name做filtering。filter的参数不会改变,绑定是search对象,会根据我们在input中输入改变,而filter则会找寻search对象中的name属性。到这里我希望你也像我一样一样兴奋起来了!下面我们来自定义filter呢?实现单词首字母大写filter:app.filter('capitalize',function(){returnfunction(input,param){returninput.substring(0,1).toUpperCase()+input.substring(1);}});这里我们自定义了一个filter其接受输入参数input和过滤器参数param的一个函数。接下来我们将在view使用它:{{"thisissometext"|capitalize}}Services在文章最后,我们需要再次较少下services。这是一个的维护应用程序功能逻辑部分,他是一个单间模式singleton。为了保持应用程序的逻辑层次分明,更趋向于将其业务逻辑放到不同的services,保持controller的逻辑只有流程控制和view交互逻辑。angular内置了很多services,如$httphttp请求,$q异步promises编程模式…在这里我们不会讨论angular的内置services,由于有很多的services,并且很难一次性解释完,将在后续文章。我们将创建一个简单的自定义services。在controller之间共享数据对我们很有用,每个controller都有自己的scope所以我们不能将其绑定到其他的controller。所以解决方案是services,可以吧数据共享到services,在需要用到的地方引用它。首先我们来看看如果不用services,我们将会遇见什么问题:MainCtrl:SecondCtrl:我们使用了相同的ng-model,预期当一个input改变时候会及时更新到另一个input,如下:但是实际情况却是:接下来需要借助services来解决这个问题,利用services将username在controller之间共享。app.factory('UserInformation',function(){varuser={name:"Angular.js"};returnuser;});这里用的是factory去创建一个service。angular中还有其他更高级的方式去创建service,如service,provider,这将会在后续文章详解。这里有很多方式去创建service,我们选择的是创建了一个带有name默认值的user对象,并返回它。在controllers中如何去使用呢?如下:Editinplunkerapp.controller('MainCtrl',function($scope,UserInformation){$scope.user=UserInformation;});app.controller('SecondCtrl',function($scope,UserInformation){$scope.user=UserInformation;});现在我们的程序形如:酷极了。现在我们的$scope.user在MainCtrl和SecondCtrl都用的是UserInformation,并且service是单例的,所以当我们更新其中一个controller的时候,另外一个也将会被更新。也有你又有了一个疑问:UserInformation参数是从哪里来的?angular核心是DI(依赖注入)在需要使用的地方会自定注入service。DI将不会在本节中讲述,我们可以简单的说,你创建了一个service,你可以在module作用域的controller,directive,甚至是其他service作为参数来轻松使用。也许你对上面出现的$scope认为他也是个service,其实这是一个例外,其并不是真正的service注入到我们的controller。总结到这里我们完成了第一篇但不是最后一篇angular博客。Angular.js是一个优秀的框架,我敢肯定你也爱上了它。希望能在下片文章中仍然能见到你的倩影。希望你能喜欢这篇文章,也能够评论些你的观点。

MVC和MVVM两框架是什么?

1.MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写。

2.MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。

3.MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model)

4.最典型的MVC就是JSP + servlet + javabean的模式。

也就是说,不管是MVC还是MVVM,都是为了使程序更加便利,用一个成语来说,叫做各司其职,每一层由每一层相应的工作,不会多做也不会少做,而MVVM也是与时俱进的产物,应对人们日益复杂的需求变化而产生的。

AngularJS 究根到底是 MVC 还是 MVVM

在MVC里,View是可以直接访问Model的!从而,View里会包含Model信息,不可避免的还要包括一些业务逻辑。 MVC模型关注的是Model的不变,所以,在MVC模型里,Model不依赖于View,但是 View是依赖于Model的。不仅如此,因为有一些业务逻辑在View里实现了,导致要更改View也是比较困难的,至少那些业务逻辑是无法重用的。MVVM在概念上是真正将页面与数据逻辑分离的模式,它把数据绑定工作放到一个JS里去实现,而这个JS文件的主要功能是完成数据的绑定,即把model绑定到UI的元素上。有人做过测试:使用Angular(MVVM)代替Backbone(MVC)来开发,代码可以减少一半。此外,MVVM另一个重要特性,双向绑定。它更方便你同时维护页面上都依赖于某个字段的N个区域,而不用手动更新它们。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/Vue/6608.html