`

AngularJS MVC理解

阅读更多
今天和同事一起讨论了一下AngularJS MVC的思想,先不看AngularJS MVC的思想,看看我们传统的MVC的思想(Struts2, SpringMVC).

V:表示视图,如JSP,html等;
C:表示控制器,接受用户的请求,调用service层的方法,进而调用DAO层来获取数据,最终返回到指定的视图中;
M:其实也是一个抽象的概念,可以理解成service层+DAO层。

页面处理的流程大概是这样的:
1)绑定相应的DOM元素;
2)相应的事件触发Ajax请求,控制器接收请求后返回;
3)更新DOM元素。

以上的流程,我想大家都会明白,现在说说AngularJS MVC的思想。
其实这里涉及到一个url路由的概念,它主要有下面的属性:
1. status:标识状态,如login,register,这个主要用在页面或者controller的跳转,都是以这个为唯一标识的;
2. url:页面地址栏显示的url;
3. templateurl:AngularJS是单页应用,其实入口有一个ng-view,不管页面是什么,最终都会填充到里来,非常类似ajax,之前的ajax传输的是部分数据,现在是局部页面的替换,而且有缓存,加速访问,templateurl对应的页面只有最基本的信息,动态的信息由controller来完成;
4. controller:通过http service来向后台获取数据,然后通过双向绑定来更新页面。

所以基本的流程是这样的:
1. 地址栏url对应templateurl;
2. templateurl加载基本的信息;
3. 动态信息由controller来加载;
4. controller调用service,返回数据后通过scope进行双向绑定更新页面数据。
分享到:
评论

相关推荐

    angularjs 和 MVC的结合

    同时,也需要理解MVC中的路由配置,确保后端能够正确处理来自AngularJS的HTTP请求。 在AngularJS中,基础指令如ng-model、ng-repeat和ng-if等用于数据绑定和控制流。ng-model将控件的值与模型数据关联,ng-repeat...

    使用AngularJs ASP.NET MVC Web API EF构建一个多层SPA的例子

    在本文中,我们将深入探讨如何使用AngularJS、ASP.NET MVC、Web API和Entity Framework(EF)构建一个完整的多层Single Page Application(SPA)。这个技术栈是现代Web开发中常用的一组工具,它们协同工作,可以提供...

    angularjs asp.net mvc 書籍

    总的来说,这些书籍和资源将帮助你全面理解AngularJS和ASP.NET MVC的原理和实践,掌握如何将两者有效整合,构建出高效、灵活的Web应用程序。通过学习,你可以提升Web开发技能,适应不断发展的Web技术趋势。

    Spring+MVC+AngularJS例子

    在这个"Spring+MVC+AngularJS例子"中,我们将深入理解这三个技术如何结合在一起,以创建一个完整的maven项目。 Spring框架是一个开源的应用框架,主要用于Java平台,它提供了全面的依赖注入(DI)和面向切面编程...

    AngularJS tab栏实现和mvc小案例实例详解

    综合来看,AngularJS实现tab栏的过程涉及了对框架内核心概念的理解和应用,如MVC架构、数据绑定、指令、作用域和事件处理等。而通过具体的代码实践,我们能够更深入地理解AngularJS的这些概念,并将它们应用于实际...

    将AngularJS用于mvc MVW的单页面web应用程序。它使用指令过滤内容,$http服务读取JSON文件.zip

    这将帮助我们理解如何将动态数据集成到我们的应用程序中,以及如何通过AngularJS增强用户体验。 首先,AngularJS是一个流行的JavaScript框架,由Google维护,用于构建动态、交互式的Web应用。它遵循MVW模式,允许...

    angularjs-mvc:使用 .NET MVC、WebAPI 和 AngularJS 的演示项目

    **标题解析:** "angularjs-mvc" 是一个基于 .NET MVC、WebAPI 和 AngularJS 构建的演示项目,旨在展示如何将这三种技术融合在一起开发现代Web应用。 **描述解析:** 该描述表明这是一个已经完成的项目,源代码位于...

    用JQUERY模仿Angularjs的todoList(mvc)

    在IT领域,前端开发是至关...这不仅加深了对jQuery的理解,也让我们有机会对比和学习AngularJS的MVC架构。在实际开发中,选择合适的工具和技术栈是非常重要的,理解并能灵活运用这些知识将有助于提升我们的开发技能。

    Asp.mvc ~ 使用AngularJs构建SPA

    **标题:“Asp.mvc ~ 使用AngularJs构建SPA”** **描述:** 该资源是一个关于如何使用AngularJS在ASP.NET MVC框架下构建单页应用程序(Single Page Application, SPA)的教程。作者通过CSDN博客分享了详细的实现...

    AngularJS入门教程之MVC架构实例分析

    对于AngularJS应用来说,视图(View)是DOM(文档对象模型),你可以理解为就是HTML页面。控制器(Controller)是一个用户自定义的JavaScript类。模型数据(Model)存储在对象的属性中。 我们来看下面的代码:

    angularJs权威和精通angularjs

    本资源包含了《精通AngularJS》和《AngularJS权威指南》两本著作,将帮助你全面深入地理解AngularJS的核心概念和实用技巧。 **1. 双向数据绑定:** AngularJS的一大特色是其双向数据绑定功能,它自动保持视图和模型...

    AngularJS书两本

    这两本书《AngularJS_权威教程》和《AngularJS_深度剖析与最佳实践》将帮助我们深入理解并掌握这一强大的MVC(模型-视图-控制器)框架。 首先,《AngularJS_权威教程》可能涵盖了AngularJS的基础概念和核心特性,...

    AngularJS教程之MVC体系结构详解

    AngularJS教程之MVC体系结构详解涵盖了AngularJS框架中的核心概念模型-视图-控制器(MVC)设计模式。MVC是一种广泛使用的软件设计模式,...通过理解AngularJS的MVC架构,开发者能够更有效地构建、管理和维护Web应用。

    angularJS理论与实战.ppt

    AngularJS是一款由Google维护的JavaScript框架,...通过"angularJS理论与实战.ppt"的学习,开发者不仅能理解AngularJS的基本原理,还能学会如何运用这些知识解决实际开发中的问题,从而成为一名熟练的AngularJS开发者。

    Springmvc和Angularjs交互代码Demo

    为了深入理解这个Demo,你需要解压文件并查看源代码,特别是前后端的交互部分,这会帮助你更好地理解Spring MVC和AngularJS如何协同工作。通过分析和运行这个示例,你可以学习到如何设置和使用这两个框架,为自己的...

    创建你自己的angularjs

    首先,AngularJS是基于MVC(模型-视图-控制器)架构的JavaScript框架,由Google维护。它通过双向数据绑定、依赖注入、指令系统、过滤器、服务等核心概念,实现了快速开发动态网页应用的能力。在构建自定义框架的过程...

    angular(MVC)项目搭建

    4. **MVC模式理解** - **Model**:数据模型,负责存储和处理业务逻辑。 - **View**:视图,展示用户界面,通常与Controller交互,根据Model的变化更新UI。 - **Controller**:控制器,作为Model和View之间的桥梁...

Global site tag (gtag.js) - Google Analytics