使用AngularJS代替Figma/inVision/Adobe

从AngularJS的起源以及它如何演变为AngularTS开始说起。

借鉴jQuery的存在方式、使用方式，以及AngularJS如何摆脱回调地狱的经验。

考虑一下制作模拟网站、线框图以及将其转移到真实的网页引擎时所面临的问题和困扰。

考虑一下AngularJS的基本原理。构建动态页面、创建动态链接、设计图形增强的布局。这并不难，几乎和制作可以点击并跳转到其他屏幕的Figma模型一样简单。比起将inVision页面链接在一起以便轻松展示流程，它更容易。别让我提及Adobe产品的简单性，它有很多选择，但没有一个能做到你想要的。

你可以从设计师那里获取设计，构建基本的HTML结构，使用一些花括号动态替换文本，这些文本来自架构师提供的模拟JSON，然后，你的页面就可以工作了。添加所需的CSS样式，然后，网站就能运行了。如果你刚刚开始，可能需要花费一些时间，但一旦掌握了这个技巧，所需的时间会更短，甚至比使用其他产品进行线框图和图形设计所需的时间还要短。

但问题在于：

如果你还没有理解，设计师可以看到所有的工作情况，所有的点击、流程和结构，而无需模拟每一个页面。开发人员可以查看重复的元素并从中创建组件（并向你展示如何操作，以便以后你也可以自己做）。架构师可以查看每个屏幕所需的数据并进行调整，为什么他们需要将所有用户信息发送到闪屏页面，它只使用了用户名。

更好的是，一旦这个“模拟”运行起来。如果项目足够简单，开发人员可以通过简单的Ctrl+H将ng-ifs替换为*ngIfs，重新构建组件的基本结构，并将提供模拟JSON的工厂更改为提供实际数据的服务。然后，网站就完成了。

但更有趣的是，如果项目非常庞大，这个简单的早期阶段可以消除早期设计和架构阶段中的许多未预料到的问题和错误，为实际版本的推进提供更清晰的视野，并提供一个可参考的工作原型。

作为内部测试，我们的设计师、特种作战人员、开发运维人员、业务分析师、架构师和技术分析师在项目的第一阶段共同工作了3个月。与他们并肩工作，我将设计转化为AngularJS代码，作为一个单文件[嗯...使用CDN加载纯AngularJS 1.8.0]，没有构建过程，没有后端。 如果可以选择，我不会回头。

等待几周的特殊操作来构建文档，来回与设计屏幕的交流，弄清楚代码可能是什么，在编写任何代码之前，屏幕可能放在哪里，却对它们的外观和感觉一无所知，然后等待几周的figma屏幕来展示一个只有一个特定链接指向一个特定页面的想法？

不，谢谢。

给我一天，我和设计师一起，我们就能完成工作框架，再给我一周，我们就能有模拟数据，再给我一个月，原型就会完成并准备好展示给客户。哎呀，顺便说一下，我会在进行的过程中加入firebase后端，我们可以用原型上线。但这是另一个故事了。

网络上的人们可以嘲笑我，但留下对这个想法的开放态度，也许很快，你会在我的疯狂中看到一些智慧。