AngularJS – 使用RequireJS或内置的模块化开发?

发布时间:2020-04-09 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了AngularJS – 使用RequireJS或内置的模块化开发?脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在写一个 angularjs应用程序,我有一些控制器,我已经放在1 JS文件中.我希望有一些更模块化的东西,并将我的控制器分成自己的文件.

我想到了RequireJS,但这是推荐的方式吗?或者angularjs是否提供了其他内容以及解释它的位置的任何线索?

拥有所有这些文件也非常适合调试,但是一旦需要生产构建,angularJS会将模块合并到一个文件中并最小化结果吗?

如果有人能解释最好的方法,那将是非常有帮助的.

谢谢

Angular依赖注入非常棒,你应该创建很多小模块.

说到文件组织,更容易拥有很多小文件(每个模块可能有一个),但是你面对的问题是:我怎么处理所有这些文件?我如何加载它们?

值得一看的是这两个来源:Brian Ford’s blogthis Github repo.它帮助我改进了我的工作流程并更好地理解/使用Angular模块.

TL; DR

我为我的项目做的是使用Grunt连接(如果需要缩小)所有js文件(以及更多:更少的css编译,资产管理,javascript模板编译).
上面的Github回购中给出了一个很好的例子.

I don’t recommend using RequireJS with AngularJS. Although it’s certainly possible,I haven’t seen any instance where RequireJS was beneficial in practice. [Brian Ford]

文件组织

我的app文件夹如下所示:

www
|-dist/         = Created by Grunt. Generated files (served by my web server).
|-node_modules/ = node modules (ie. Grunt modules. Grunt is based on NodeJS)
|-src/          = My workspace
|-test/         = Some tests
|-vendor        = External libraries (AngularJS,JQuery,Bootstrap,D3,... Whatever you need)
|-gruntFile.js  = The Grunt configuration file: contains all the jobs for Grunt.
|-package.json  = App infos + dependencies (Grunt modules) I use (concat,uglify,jshint,...)

所以我工作的所有不同文件都在src文件夹中,然后看起来像这样:

www/src
|-app              = Folder for my controllers
| |-Controller1.js
| |-Controller2.js
| |-...
|-assets           = Folder for the static assets (img,css,...)
| |-img/
| |-css/
| |-favicon.ico
|-common           = Folder for the shared modules (directives,resources,services,...)
| |-directives
| | |-chart.js
| | |-map.js
| | |-...
| |-resources
| | |-users.js
| | |-another-cool-resource.js
| | |-...
| |-services
| | |-service1.js
| | |-...
|-views            = Folder for my templates
| |-profile.tpl.html
| |-search.tpl.html
| |-...
|-index.html       = The main and unique html file.

咕噜

然后我使用Grunt将所有内容“编译”到dist文件夹中.
可以在here找到gruntFile的示例.
我有一次性的部署工作和一些观察者的发展.

你需要更多解释吗?

总结

以上是脚本之家为你收集整理的AngularJS – 使用RequireJS或内置的模块化开发?全部内容,希望文章能够帮你解决AngularJS – 使用RequireJS或内置的模块化开发?所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478