我们使用很多时间写代码,在项目早期,代码不是很多,因此目录结构很容易被人忽视。从短期来看开发者很容易写代码,但是不利于维护。AngularJS是比较新的技术开发者仍然不清楚什么是不可行的。有很多种方法组织代码文件,我们将从现有的成熟框架中借用一些原则,但也可以做一些具有Angular特色的组织方式。
这是很典型的应用的文件结构,看起来很像MVC框架。每一层都比较清晰,controller层有独立的文件夹,view层有独立的文件夹,lib有属于自己的文件夹。
如上的文件结构在view和controller比较少的时候问题不明显。一般情况在写教程的时候这样的文件结构很容易让读者理解和接受。当你往项目中添加功能模块时候,这种结构就显得很难维护,一旦超过10个controller、view、你将会看到很长的文件树结构。需要滑动鼠标才能找到对应的文件。
例如,当你使用Angular创建一个博客项目时候。你决定在每个文章的底部显示作者信息。在写代码前你将不得不查找这个功能相关的directive、controller、service和view等。
比较好的文件组织方式如下:
作为一个angular新手可能觉得很难理解。
普通的文件组织方式如下:
app/
----- controllers/
---------- mainController.js
---------- otherController.js
----- directives/
---------- mainDirective.js
---------- otherDirective.js
----- services/
---------- userService.js
---------- itemService.js
----- js/
---------- bootstrap.js
---------- jquery.js
----- app.js
views/
----- mainView.html
----- otherView.html
----- index.html
这是很典型的应用的文件结构,看起来很像MVC框架。每一层都比较清晰,controller层有独立的文件夹,view层有独立的文件夹,lib有属于自己的文件夹。
如上的文件结构在view和controller比较少的时候问题不明显。一般情况在写教程的时候这样的文件结构很容易让读者理解和接受。当你往项目中添加功能模块时候,这种结构就显得很难维护,一旦超过10个controller、view、你将会看到很长的文件树结构。需要滑动鼠标才能找到对应的文件。
例如,当你使用Angular创建一个博客项目时候。你决定在每个文章的底部显示作者信息。在写代码前你将不得不查找这个功能相关的directive、controller、service和view等。
比较好的文件组织方式如下:
app/
----- shared/ // acts as reusable components or partials of our site
---------- sidebar/
--------------- sidebarDirective.js
--------------- sidebarView.html
---------- article/
--------------- articleDirective.js
--------------- articleView.html
----- components/ // each component is treated as a mini Angular app
---------- home/
--------------- homeController.js
--------------- homeService.js
--------------- homeView.html
---------- blog/
--------------- blogController.js
--------------- blogService.js
--------------- blogView.html
----- app.module.js
----- app.routes.js
assets/
----- img/ // Images and icons for your app
----- css/ // All styles and style related files (SCSS or LESS files)
----- js/ // JavaScript files written for your app that are not for angular
----- libs/ // Third-party libraries such as jQuery, Moment, Underscore, etc.
index.html
作为一个angular新手可能觉得很难理解。
index.html
index.html文件是前端结构的根文件。该文件将加载所以的库文件和angular相关的文件