带有angular.js的前端材料设计堆栈

时间:2015-09-29 21:08:21

标签: angularjs ionic-framework polymer material-design angular-material

我正在努力改进编码,并试图找出我需要的前端堆栈。我有很多红色和很多工具,但它太多了,我不知道哪些工作在一起好不好。

目前我的想法是使用谷歌的Material Design的设计原则做一个Web应用程序,并使用angular作为前端的逻辑。

我对这些工具很感兴趣并使用这些工具:Angular.js,Material Design Lite,Angular-material,polymer,ionic,bootstrap,Materialise和其他各种材料设计框架。

我正在玩这个演示,我想尝试使用Material Design Lite,但过于深入,最终需要使用Polymer来获得一些输入下拉组件。使用MDL进一步发挥作用我发现它不足以像我以前一样工作并希望能够使用它,但是我不喜欢MDL。

ionic对本地服务器有一些很好的功能,并且很容易设置模板应用程序以及其他很好的东西,比如导出到ios,android app,推送通知,但我最终删除了ionic.css,因为它干扰了MDL和聚合物

我要求一些更有经验的网络应用程序开发人员帮助我解决这个堆栈困境。我想把它从脑海中解脱出来,这样我就可以自由发展更多。

还有GRUNT,BOWER等工具吗?在我的情况下哪一个最好?

注意:如果你有兴趣,后端将是cakePhP和Mysql,数据类型将是JSON(angular将json发送到php进入DB)。

2 个答案:

答案 0 :(得分:3)

尝试学习所有工具并同时使用它们可能会令人难以招架。我的建议是在需要时使用这些工具。

如果您的网络应用很简单,您甚至可能不需要角度等框架。如果你想玩材料设计,你可以使用MD lite提供的css类,无论你使用angular / polymer /或plain javascript。 (如果您想使用Polymer,您已经包含了一些材料设计样式。)

有些人更喜欢从最简单的解决方案开始,并逐渐添加更复杂的工具。其他人更喜欢从集成了最佳实践的更复杂的解决方案开始,在这种情况下,使用“入门套件”可能会有用。

关于Grunt / gulp ......等等。当你需要一个“构建系统”来完成诸如压缩文件,优化图像和其他对发布很重要的事情的任务时,你可能会担心。

经过多年的前端开发后,我意识到不可能掌握所有可用的工具(以及在代码之外的生活)。你最终会找到一些工具(每个人都有不同的偏好),重要的经验来自于解决实际问题。

答案 1 :(得分:2)

如果出现以下情况,我建议您为项目使用角度材料:

  • 你对angularjs有很好的了解,或者你觉得学习很有意思
  • 您已完成google design并希望以angularjs方式实现
  • 尝试实现缺失的功能或获取在线帮助

    Angular-material团队正致力于添加越来越多的功能,这些功能已在指令和服务中构建。查看github page上的发布内容demo guide

    (最新版本已经下拉菜单)

几点

  • Google有一个很棒的设计开源指南。

    Angular-material是一个框架,可以帮助您使用angularjs实现和遵循该设计语言和原则。

  • Bootstrap只是一个框架,它提供了与前端工作相关的css,js的实现。外观与谷歌设计完全不同。
  • Ionic是一个完全不同的框架,为移动应用程序开发提供实现和指导。

您可以在我的帖子here

中阅读有关angular-material / bootstrap / ionic中的diff的内容

鲍尔/咕噜

  • bower(包管理器)和grunt(任务运行器)是在节点环境中工作的工具。
  • 如果您的开发环境是nodejs,您应该使用它们来快速有效地完成工作。 查看网站了解更多信息。

的CakePHP / MySQL的

如果您的后端在这些上运行,并且您在前端有angularjs。  Angularjs可以在你的api中用JSON进行restfull调用,这一切都会很好。