`
Virtoway
  • 浏览: 3268 次
  • 性别: 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
分享到:
评论

相关推荐

    Mastering Web Application Development with AngularJS

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

    精通AngularJS

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

    MambaJS-Framework:使用AngularJS进行快速Web开发

    模块化,可从Git存储库管理应用程序模块,当您安装模块时,该模块的菜单会自动注入到主应用程序中。 模板,Mamba附带了一个简单的提供程序,可以管理多个主题 原则声明 干净的代码 单一责任 角分量作为立即调用的...

    AngularJs权威教程.pdf

    后半部分深入到 AngularJS 应用开发,系统地讨论了服务器通信、事件、架构、动画、本地化、安全、缓存、 移动应用等主题。 本书适合各个层次的 AngularJS 开发人员学习,无论是出于工作需要,还是好奇心的驱使,只要...

    Angular-AngularJS-StyleGuide.zip

    Angular-AngularJS-StyleGuide.zip,My Ng Conf 2014 TalkScalable Architecture in Angularjs的可扩展...它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。

    精通AngularJS part1

    其核心特性是:MVC、模块化、自动双向数据绑定、语义化标签、依赖注入等。 作者简介 Pawel Kozlowski有15年以上的Web开发经验,接触过多种Web技术、语言和平台。他精通客户端和服务器端编程,并始终在寻找能提高...

    devoxx-browserify-angularjs:提供给 Devoxx France 2015 的实时编码“使用 Browserify 模块化您的 AngularJS 应用程序”的来源

    Browserify 工具建议我们采用 Node.js 模块化标准来构建我们的 Web 客户端。 它还使我们有机会使用 npm 管理我们的依赖项,从而从这个伟大的生态系统中受益。 在快速介绍 Node.js 和 Browserify 模块系统之后,...

    Angular-angularjs-chat.zip

    Angular-angularjs-chat.zip,Angularjs聊天-在iOS、Android和Web应用程序中提供聊天信息体验。...它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。

    Angular-resharper-angularjs.zip

    Angular-resharper-angularjs.zip,用于angularjs的resharper插件支持resharper angularjs,Angularjs于...它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。

    Angular-angularjs-google-maps.zip

    Angular-angularjs-google-maps.zip,最简单的angularjs google maps v3 directivegoogle maps ...它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。

    Angular-AngularJS-Learning-zh_CN.zip

    Angular-AngularJS-Learning-zh_CN.zip,一、Angularjs、Angularjs、Angularjs(学习Angularjs的博客...它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。

    angularjs-base:基于Angular的开发平台

    Angular-base:适用于AngularJS应用程序的模块化平台 该存储库是用于构建典型 Web应用程序的模块化抽象。 您可以使用它来快速搭建Angular Web应用程序项目以及这些项目的开发环境。 即使我们了解在某些情况下结构...

    AngularJS实用开发技巧(推荐)

    2.四大核心分别是mvc、模块化、指令系统、双向数据绑定 二、一些原则 1.不要复用controller,一个控制器一般只负责一小块视图。 2.不要在controller里面操作dom。 3.不要在contorller里面做数据格式化,ng有很好...

    Angular-jigsaw.zip

    Angular-jigsaw.zip,Jigsaw七de板de提供了一组基于Angular5 的Web组件。jigsaw的主要目的是帮助应用...它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。

    Angular-od-virtualscroll.zip

    Angular-od-virtualscroll.zip,基于可观测的angularod虚拟滚动实现,Angularjs于2016年发布,是...它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。

    Angular-angularjs-in-patterns.zip

    Angular-angularjs-in-patterns.zip,模式中的angularjs——这个存储库提供了对angularjs的不同看法。...它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。

    Angular-ChatRoom-AngularJS.zip

    Angular-ChatRoom-AngularJS.zip,一个由angular、node.js、express和socket.io组成的在线聊天室。...它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。

    Angular-ppspider.zip

    Angular-ppspider.zip,puppeter构建的蜘蛛网,decorator构建的支持任务队列和任务调度,支持NEDB/...它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。

Global site tag (gtag.js) - Google Analytics