`
Virtoway
  • 浏览: 3479 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

AngularJS Web 模块化开发

阅读更多
  在这个信息化时代,谁掌握最新资讯,谁就快人一步,我跟大家分享美国著名构架设计师
Alexander Siniouguine 的最新热作:"搞定Web模块化管理最新招"    该文在美国点击量日过万啦 ,IT 福音哦!是不是有小鹿乱撞的感觉呀?
快速浏览标题便了解到本文要谈到公开资源平台,该平台允许快速,轻松地创建一个管理网络,并不需要在风格,导航,解决方案架构和其它跟主要任务无关的琐事上花费过多的时间。
平台视觉图和其中一块模板:

很长一段时间里,我们使用WPF技术模块化管理应用。我们做出的决定是将此管理迁移到网站中。最后我们得出了2个不同的产品:第一个:平台,就是这篇文章致力于介绍的 ,第二个是用于电子商务应用程序开发使用的集合模块。
技术运用于


我们决定使用这些技术都是我们广泛应用微软产品的经验结果。
我们使用以下的技术:
• ASP.NET MVC 5.0 -作为一个网络托管技术
• ASP.NET Web API 2.0-去实施REST服务
• Entity Framework 6.0 – ORM 
• EF Migrations -以便管理数据库模式的更改和数据
• ASP.NET Identity -授权和认证任务
AngularJS –主要针对SPA 的用户界面。挑选它的主要依据之一是因为它的普及性和文件质量。我们之前虽然没有过应用AngularJS方面的工作经验。但一路回首,我们从未对这个选择有过任何遗憾。
Architecture 
平台和模块都采用DDD,SOLID,Test Driven Development(TDD)。从表面看,我们在使用MVVM(非常感谢AngularJS-从WPF的过渡到现在都没有出现过任何并发症)


Platform Capabilities
现在让我们看一下平台兼容性的核心列表。理解这个列表包含平台兼容性是很重要的,因为它不仅仅是电子商务应用的一个附加功能。
风格指南


我们使用MCSS系统方法的应用创造了我们自己的主题。我们还创建了一个风格元素指南和用于元素导航的视觉构造,允许您轻松地创建一段HTML源码,以此用来扩展模块。
Navigation


在这里,我们针对用户界面提出了一个统一的导航用户界面概念。我们非常喜欢应用于新portal.azure.com中水平滚动页面导航的想法,于是我们决定把它作为一个基点。
主要的导航元素是:
• “blade”-传统界面的模拟窗口
• “widget容器包含widget
• “main menu” -针对所有模块的全局导航菜单

Modularity


平台在运行安装扩展模块时允许系统功能扩展。鉴于每个模块都可以提供自己的用户界面和REST API服务,所以该平台可以被定制用于服务许多特殊的商业需求。
模块化是我们遇到的最困难的问题之一。为了解决这个问题,我们不得不从WPF中采用微软PRISM,并且使它在ASP.NET MVC中可以正常运行。模块包含了使用版本和依附关系的信息,这些信息常在系统在模块初始化和安装过程中有被使用 。
除了扩张用户 界面和API ,每个模板可以用自己的数据库模式并且支持在版本更新过程中的数据迁移。它们也可以通过loC和依赖注入来扩展或覆盖其他模块的功能。
我们就不一一列出所有用户界面的扩展点啦,这只是其中的一小部分:主菜单,工具栏,窗口,通知等。

其它有用的信息
• 授权和认证联合认证兼容-使用微软ASP.NET Identity。
• Managing users and permissions -我们自己的执行并且准备使用UI。
• Working with binary data (files) -扩展系统提供API上传文件到本地磁盘存储,网络存储或 azureblob存储。可以扩展用来使用任何类型的存储服务。
• 背景工作调度-使用延时库来实现,是一个很灵活的功能体系,为监测工作提供自己的接口。
• 动态设置系统-允许声明性设置,并提供标准管理界面和API代码使用。
• 动态特性系统-允许使用UI 或代码来动态扩展任何用户对象的新属性。
• 贮藏-使用缓存服务来优化和提升缓存能力   (AppFabric, WEB Cache, memcache等.)
• 基于模板的通知系统-定义通知类型,编辑模板,支持本地化,规划,日志。支持包括电子邮件、短信等多种不同的通知渠道。
• 统一的输出/输入系统模块-统一的用户界面和数据格式的实际执行模块。
它不仅仅是一颗银色的“子弹”,而且还…
因此,我们最终拥有了一个相当好的系统,它允许有经验的开发人员针对复杂的项目快速创建一个管理网站, 或者使用它作为一个指南来创建独一无二的系统。

• 更多关于平台的信息可以点击 :http://docs.virtocommerce.com/display/vc2devguide/Working+with+Platform. 
• 您可以看到,使用该平台创造一个电子商务产品的真实例子:Virto Commerce online demo (frontend and admin).
• 项目本身就坐落在此: https://github.com/VirtoCommerce/vc-community. 项目正在积极发展中,所以所有的意见,反馈和要求将得到高度赞赏。
许可证
在该文中提及的相关源代码和文件,都是由CPOL授权许可的

关于作者:
Alexander Siniouguine

职业:软件构架师
国籍:美国
高级软件构架师。作者已经自主设计了几款网络产品,这些产品被世界上著名的网络公司所运用
阅读我最近的文章:

Checkout my latest article: http://www.codeproject.com/Articles/1013731/Modular-WEB-Admin-Using-ASP-NET-MVC-and-AngularJS
http://virtocommerce.com/

原文摘自:http://www.codeproject.com/Articles/1013731/Modular-WEB-Admin-Using-ASP-NET-MVC-and-AngularJS

PS:本文是小博主的呕心沥血译文,一直对Alexander Siniouguine这位有着20年IT行业经验精英有着十分崇敬之情,之前也读过他的文章,对他的独特眼光和对行业领域独到的见解感到钦佩,该篇 “使用ASP.NET MVC和AngularJS的Web模块化管理"我觉得也是行业领域的创新之作吧,与大家共享共勉哦





  • 大小: 80.4 KB
  • 大小: 214.8 KB
  • 大小: 69.9 KB
  • 大小: 117.6 KB
  • 大小: 128.1 KB
  • 大小: 80.4 KB
  • 大小: 214.8 KB
  • 大小: 69.9 KB
  • 大小: 117.6 KB
  • 大小: 128.1 KB
分享到:
评论

相关推荐

    NodeJS+MongoDB+AngularJS WEB开发原版

    书中也会涵盖指令的自定义和模块化开发,以及使用AngularJS的测试工具进行单元测试和端到端测试。 除此之外,本书可能还会探讨如何整合Node.js、MongoDB和AngularJS,创建一个完整的Web应用。这包括用户认证和授权...

    AngularJS模块化开发--增删改查

    在这个"AngularJS模块化开发--增删改查"的项目中,我们将会深入探讨如何利用AngularJS进行高效且结构化的应用开发,同时结合RequireJS进行模块管理,以及使用Bootstrap进行UI设计和ngRoute实现页面间的路由跳转。...

    Node.js MongoDB AngularJSWeb开发.part3

    3. AngularJS应用开发:可能涉及到模块化、服务、过滤器、指令的创建与使用,以及如何实现路由和状态管理。 4. 集成与部署:这部分可能讲述了如何将Node.js、MongoDB和AngularJS整合在一起,形成完整的Web应用,并...

    angularjs 子模块实战例子 (切换效果)

    AngularJS是一款强大的前端JavaScript框架,它通过数据绑定和依赖注入来简化Web应用程序的开发。子模块是AngularJS模块化架构的一个关键组件,允许我们组织和分离代码,提高代码的可维护性和可重用性。 首先,让...

    angularjs和bootstrap开发的web控件的集合

    AngularJS,一个由Google维护的JavaScript框架,专注于数据绑定和依赖注入,使得前端开发更加模块化和易于维护。而Bootstrap,则是Twitter推出的一款用于快速构建响应式和移动优先网站的前端框架,它提供了丰富的UI...

    《Node.js+MongoDB+AngularJS Web开发》源代码

    它提供了数据绑定、依赖注入、路由、模块化等特性,极大地简化了前端开发流程。AngularJS的核心理念是声明式编程,通过HTML扩展实现视图和模型之间的双向数据绑定,从而减少了DOM操作的复杂性。 在《Node.js+...

    Node.js/MongoDB/AngularJS Web开发源码和书

    在AngularJS部分,读者将学习如何构建模块化、可重用的组件,使用路由管理页面切换,以及通过$http服务与后端API进行通信。 书中的源码部分,"nodejs-mongodb-angularjs-web-development-master.zip",包含了书中...

    AngularJS Web Application Development cookbook

    - **模块化设计**:讲解如何将应用分割成多个可重用的模块,从而提高代码的可维护性和可读性。 - **最佳实践**:提供了大量实用的最佳实践,帮助开发者避免常见的错误和陷阱。 ##### 2. 实战案例分析 - **实际应用...

    用AngularJS开发下一代Web应用(AngularJS 2013)-中英双版本

    这个框架以其双向数据绑定、模块化结构、依赖注入等特性,极大地简化了Web应用的开发流程,尤其适合构建下一代动态和交互性强的Web应用。本资源提供了2013年的"用AngularJS开发下一代Web应用"的中英双版本电子书,...

    Mastering Web Application Development with AngularJS

    其核心特性是:MVC、模块化、自动双向数据绑定、语义化标签、依赖注入等。《精通AngularJS》深入浅出地讲解了AngularJS的开发概念和原理,并通过丰富的开发实例向读者展示了构建复杂应用的完整过程,包括学习使用...

    angularjs Web页面框架 v15.2.4

    1. **模块化**:AngularJS支持模块化开发,允许将应用程序分解为可重用的组件或模块,便于代码组织和维护。 2. **指令系统**:AngularJS的指令系统扩展了HTML的功能,允许创建自定义的DOM行为。例如,`ng-repeat`...

    AngularJS 应用模块化的使用

    AngularJS的一个核心特性就是模块化,模块化是现代Web应用开发中不可或缺的一个部分。模块化允许我们将应用程序分解为不同的块,每个模块可以独立进行开发和测试,这不仅有助于代码组织,还提高了代码的可维护性和...

    Node.js MongoDB AngularJSWeb开发.part2

    此外,AngularJS还提供了路由、指令、过滤器等功能,让Web应用的构建更加模块化和可维护。 当Node.js、MongoDB和AngularJS结合在一起,可以构建出高效、响应式的全栈Web应用。Node.js负责后端逻辑和服务器通信,...

    红旅动漫移动端网站demo,用angularjs、swiper、jquery,模块化开发.zip

    【标题】"红旅动漫移动端网站demo,用angularjs、swiper、jquery,模块化开发" 这个标题揭示了一个基于Web技术的移动端项目,主要是为红旅动漫设计的一个网站演示版本。项目采用了一些主流的前端框架和技术,包括...

    angularjs Web页面框架 v17.2.3.zip

    它提供了丰富的功能,如数据绑定、依赖注入、指令系统、模块化等,极大地简化了Web开发流程。标题中的"angularjs Web页面框架 v17.2.3.zip"指的是这个压缩包包含的是AngularJS的特定版本——17.2.3,这通常是一个...

    angularjs Web页面框架 jsp源码

    AngularJS 是一个强大的前端JavaScript框架,由Google维护,主要用于构建单页Web应用程序(SPA)。它引入了MVC(模型-视图-控制器)架构模式,极大地简化了动态Web页面的开发。在“angularjs Web页面框架 v13.3.0”...

    用AngularJS开发下一代web应用pic

    3. **模块化**:AngularJS应用是基于模块构建的,每个模块可以包含控制器、服务、指令等组件,有助于组织代码,提高复用性和可测试性。 4. **依赖注入**:AngularJS的依赖注入(DI)机制允许你在不需显式创建对象的...

    angularjs Web页面框架 v12.2.17.zip

    4. **计算机案例和模板建站**:AngularJS的灵活性和模块化使其成为创建模板网站的理想选择。"模板建站"可能包含预配置的布局、组件和样式,帮助开发者快速搭建网页结构。这些案例可能展示了如何利用AngularJS的特性...

Global site tag (gtag.js) - Google Analytics