前期:这份文件是工作草稿,远非完美。随着我们对AngularJS做更多的工作,我们将不断改进这一点。
通过使用AngularJS,我们试图实现不同的目标:
我建议你看一些AngularJS的好处和最佳实践的视频和资源。理解AngularJS的工作原理是很重要的,特别是要注意陷阱和最佳实践。
理解AngularJS作用域是非常重要的。
提示:
< div ng-model = " model.searchfield " >
而不是< div ng-model = " searchfield " >
视图
.例如< div ng-show = ' view.showPaginator ' >
服务
是一个单例,每当你请求一个服务相同的实例将返回工厂
供应商
优点是它们可以在模块配置阶段进行配置。服务和工厂都是提供者。阅读更多.catch ()
而且最后()
不能在IE8中工作。使用承诺(“最后”)()
代替。阅读更多关于最佳的文件结构有很多讨论。在过去,我们将一个特性划分为多个文件夹javascript
,样式表
,……从现在开始,我们想要根据特性来组织文件推荐它也能在大型项目中发挥最好的作用。
基本上,我们在插件文件夹中为每个特性创建一个文件夹。假设我们想创建一个“站点选择器”,然后创建以下文件:+ CoreHome + angularjs + siteselector + siteselector.directive.js + siteselector.directive.less + siteselector.directive.html + siteselector.controller.js + siteselector.filter.js + siteselector-model.service.js + search.png + common + images + filters + corehomespecpic .js
有时候你的插件中可能有一些可重用的组件,在这种情况下,你可以把它们放到一个常见的
文件夹中。这有什么好处呢?除此之外,当你打开一个插件文件夹时,你会立即注意到一个插件做了什么,而如果你只看到这个文件夹,情况就不是这样了javascript
,模板
而且样式表
文件夹。另一个优势是,理论上,我们可以将一个特性提取到一个单独的存储库中,并与其他人共享单个小部件。
一个模块总是以.module.js
.服务或工厂总是以.service.js
,控制器为.controller.js
,指示为.directive.js
还有一个滤镜.filter.js
.文件名是小写的,单词之间应该用破折号分隔:site-selector.directive.js
.如果有一个应用程序的配置文件必须命名为appname.config.js
,如。piwikApp.config.js
.
目前有angularjs
命名空间在插件中,这有点烦人,我们知道。长期来看,我们将删除此文件夹。中期来看——一旦我们有了更多的Angular组件——我们至少会给这个文件夹起一个更好、更有意义的名字。对于现有的jQuery代码资产结构,很难找到最不恼人的解决方案。
有关更详细的命名约定,请参阅Angular命名指南.
如果一个组件,比如一个过滤器,可以在不同的插件中重用,并且不是特定于插件的,我们将它们放入CoreHome / angularjs常见
:
文件名总是小写,单词之间用破折号分隔。通常,每种类型有一个文件。type - eg过滤器,指令或服务-在这种情况下不需要出现在文件名中,因为它已经放在相关文件夹中。
重要的如我们的指示总是以…开头piwik -
例如< div piwik-onenter = " close ()" >
Matomo中的一些特性已经通过AngularJS实现了。
它们使用不同的组件
我们目前没有使用AngularJS的路由。我们的目标是长期使用它来摆脱piwikBroadcast和许多其他类。
我们使用业力+柴+ [Mocha] (https://mochajs.org/)来编写单元测试。点击这里阅读更多信息:https://github.com/matomo-org/matomo/blob/master/tests/angularjs/README.md
TBD
可能是有趣的链接:Docular
AngularJS依赖注入允许插件覆盖或扩展任何他们想要的东西,比如一个指令。因此,插件架构或多或少是开箱即用的。
例如,一个插件可以“挂钩”到某个指令,扩展/改变控制器行为等。这个视频可能会给你一些启发:https://www.youtube.com/watch?v=rzMrBIVuxgM
更多即将到来!