angularjs目录结构_AngularJS最佳实践：目录结构

angularjs目录结构

We spend a lot of time writing code. In the early phases of a project, the directory structure doesn't matter too much and many people tend to ignore best practices. In the short term, this allows the developer to code rapidly, but in the long term will affect code maintainability. AngularJS is still relatively new and developers are still figuring out what works and doesn't. There are many great ways to structure an app and we'll borrow some principles from existing mature frameworks but also do some things that are specific to Angular.

我们花费大量时间编写代码。 在项目的早期阶段，目录结构并不太重要，许多人倾向于忽略最佳实践。 从短期来看，这使开发人员可以快速进行编码，但从长远来看，将影响代码的可维护性。 AngularJS还是一个相对较新的东西，开发人员仍在弄清楚什么有效，哪些无效。 构建应用程序的方法有很多，我们将从现有的成熟框架中借鉴一些原则，但还要做一些特定于Angular的事情。

In this article, I will cover best practices regarding directory structures for both small and large AngularJS apps. This may be a hot button issue with some developers and while there is no "perfect" way to structure an app, I will be writing from experience and lessons learned from projects I've worked on.

在本文中，我将介绍有关小型和大型AngularJS应用的目录结构的最佳实践。 对于某些开发人员来说，这可能是一个紧迫的问题，尽管没有“完美”的方法来构建应用程序，但我将根据从我所从事的项目中获得的经验和教训来进行写作。

标准结构 (Standard Structure)

First of all, let's go over what not to do. Many AngularJS tutorials show an app structure that resembles the code below:

首先，让我们回顾一下不应该做的事情。 许多AngularJS教程都显示了类似于以下代码的应用程序结构：

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

This is a very typical app structure that I see. On the surface, it seems to make a lot of sense and is very similar to a lot of MVC frameworks. We have a separation of concerns, controllers have their own folder, views have their own folder, external libraries have their own folder, etc.

我看到这是一个非常典型的应用程序结构。 从表面上看，它似乎很有意义，并且与许多MVC框架非常相似。 我们有一个关注点 ， 控制器有自己的文件夹 ， 视图有他们自己的文件夹 ， 外部库有他们自己的文件夹 ，等等。

The main problem with this directory structure is not apparent when you are working with only a handful of views and controllers. In fact, it is preferable to follow this approach when writing a tutorial for example or for smaller application. This structure makes it very easy for the reader to visualize and conceptualize the concepts you are covering.

当仅使用少数视图和控制器时，此目录结构的主要问题并不明显。 实际上，例如在编写教程或针对较小的应用程序时，最好遵循这种方法。 这种结构使读者很容易可视化和概念化您所涵盖的概念。

This approach falls apart, however, when you start adding additional functionality to the app. Once you have more than 10 controllers, views and directives, you are going to have to do a lot of scrolling in your directory tree to find the required files.

但是，当您开始向应用程序添加其他功能时，这种方法就会分崩离析。 一旦拥有10个以上的控制器，视图和指令，您将不得不在目录树中进行大量滚动才能找到所需的文件。

For example, say you are building a blog with Angular. You decide that you would like to add the author information to the bottom of each article. Well now, you have to find the blog directive, controller, potentially the service and finally the view before you can even look at the whole picture and start making edits.

例如，假设您正在使用Angular构建博客。 您决定要在每个文章的底部添加作者信息。 现在，您必须找到Blog指令，控制器，可能的服务以及最后的视图，然后才能查看整个图片并开始进行编辑。

Say a few months down the line, you are adding additional features to your blog and want to rename a particular feature, again it's a hunt throughout the directory structure to find the affected files, edit them, make sure they are all in sync, and then make the changes.

再说几个月，您要向博客中添加其他功能，并希望重命名特定功能，这仍然是遍历目录结构的过程，以查找受影响的文件，对其进行编辑，确保它们全部同步，以及然后进行更改。

更好的结构和基础 (A Better Structure and Foundation)

Let's get to best practices and what you should be doing to build scalable and maintainable AngularJS apps that your coworkers will love you for. An ideal AngularJS app structure should be modularized into very specific functions. We also want to take advantage of the wonderful AngularJS directives to further compartmentalize our apps. Take a look at a sample directory structure below:

让我们了解最佳实践，以及如何构建可扩展且可维护的AngularJS应用程序，您的同事会喜欢您。 理想的AngularJS应用程序结构应模块化为非常具体的功能。 我们还想利用精彩的AngularJS指令进一步划分我们的应用程序。 看一下下面的示例目录结构：

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

This directory structure is much harder to read and understand from the get go. A newcomer to Angular may be completely turned off by this complex approach, and that is why you see tutorials and examples in Angular following the simpler directory structure found in examples earlier. Let's dive into the directory structure above and see what's going on here.

从一开始就很难阅读和理解此目录结构。 Angular的新手可能会被这种复杂的方法完全关闭，这就是为什么您在Angular中看到教程和示例之后，会遵循前面示例中更简单的目录结构。 让我们深入上面的目录结构，看看这里发生了什么。

index.html (index.html)

The index.html lives at the root of front-end structure. The index.html file will primarily handle loading in all the libraries and Angular elements.

index.html位于前端结构的根目录。 index.html文件将主要处理所有库和Angular元素中的加载。

资产文件夹 (Assets Folder)

The assets folder is also pretty standard. It will contain all the assets needed for your app that are not related your AngularJS code. There are many great ways to organize this directory but they are out of scope for this article. The example above is good enough for most apps.

资产文件夹也很标准。 它将包含与AngularJS代码无关的应用程序所需的所有资产。 有许多很棒的方法来组织此目录，但是它们超出了本文的范围。 上面的示例对于大多数应用程序已经足够了。

应用文件夹 (App Folder)

This is where the meat of your AngularJS app will live. We have two subfolders in here and a couple JavaScript files at the root of the folder. The app.module.js file will handle the setup of your app, load in AngularJS dependencies and so on. The app.route.js file will handle all the routes and the route configuration. After that we have two subfolders - components and shared. Let's dive into those next.

这就是AngularJS应用的基础。 我们在这里有两个子文件夹，在文件夹的根目录有两个JavaScript文件。 app.module.js文件将处理应用程序的设置，加载AngularJS依赖项等。 app.route.js文件将处理所有路由和路由配置。 之后，我们有两个子文件夹- 组件和共享 。 接下来让我们深入探讨。

组件文件夹 (Components Folder)

The components folder will contain the actual sections for your Angular app. These will be the static views ,directives and services for that specific section of the site (think an admin users section, gallery creation section, etc). Each page should have it's own subfolder with it's own controller, services, and HTML files.

components文件夹将包含Angular应用程序的实际部分。 这些将是该站点特定部分的静态视图，指令和服务（例如，管理员用户部分，画廊创建部分等）。 每个页面都应该具有自己的子文件夹以及自己的控制器，服务和HTML文件。

Each component here will resemble a mini-MVC application by having a view, controller and potentially services file(s). If the component has multiple related views, it may be a good idea to further separate these files into 'views', 'controllers', 'services' subfolders.

通过具有视图，控制器和可能的服务文件，此处的每个组件都将类似于mini-MVC应用程序。 如果组件具有多个相关视图，则最好将这些文件进一步分为“视图”，“控制器”，“服务”子文件夹。

This can be seen as the simpler folder structure shown earlier in this article, just broken down into sections. So you could essentially think of this as multiple mini Angular applications inside of your giant Angular application.

可以将其视为本文前面显示的更简单的文件夹结构，将其分为几部分。 因此，您基本上可以将其视为巨型Angular应用程序中的多个微型Angular应用程序。

共享文件夹 (Shared Folder)

The shared folder will contain the individual features that your app will have. These features will ideally be directives that you will want to reuse on multiple pages.

shared文件夹将包含您的应用程序将具有的各个功能。 理想情况下，这些功能将是您要在多个页面上重用的指令。

Features such as article posts, user comments, sliders, and others should be crafted as AngularJS Directives. Each component here should have it's own subfolder that contains the directive JavaScript file and the template HTML file.

诸如文章，用户评论，滑块等功能应被设计为AngularJS指令。 这里的每个组件都应该有自己的子文件夹，其中包含指令JavaScript文件和模板HTML文件。

In some instances, a directive may have it's own services JavaScript file, and in the case that it does it should also go into this subfolder.

在某些情况下，指令可能具有其自己的服务JavaScript文件，并且在该情况下，它也应该放入此子文件夹中。

This allows us to have definitive components for our site so that a slider will be a slider across the site. You would probably want to build it so that you could pass in options to extend it. For example, you could have:

这使我们能够为网站添加确定的组件，从而使滑块成为整个站点上的滑块。 您可能想要构建它，以便可以传递选项来扩展它。 例如，您可能有：

Now this slider is accessible from any part of our site so we're not reinventing the wheel. We also just have to change it in one place, the shared folder and it will update sitewide.

现在，可以从我们网站的任何位置访问此滑块，因此我们不会重新发明轮子。 我们还只需要在一个位置更改它，即shared文件夹，它将在全站范围内更新。

最佳做法（适用于Huuuuge应用） (Best Practices (For Huuuuge Apps))

If you are developing a really large application in AngularJS, you will want to go even further and modularize your app. Here are some additional tips on how to accomplish this.

如果您正在AngularJS中开发一个非常大的应用程序，则将需要进一步扩展并模块化您的应用程序。 以下是有关如何完成此操作的其他提示。

模块化页眉和页脚 (Modularize the Header and Footer)

A good practice here would be to create a Core subfolder under components, and then a subfolder for the Header and Footer and any additional components that will be shared across many pages.

这里的一个好习惯是在组件下创建一个Core子文件夹，然后在Header和Footer以及将在许多页面之间共享的任何其他组件下创建一个子文件夹。

模块化路线 (Modularize the Routes)

In the structure above we didn't do this, but another good practice for very large apps is to separate the routes into separate files. For example you might add a blogRoutes.js file in the /views/blog/ subfolder and there include only the routes relevant to the blog such as /blog/:slug, /blog/:slug/edit, blog/tags:/tags, etc.

在上面的结构中，我们没有这样做，但是对于大型应用程序，另一个好的做法是将路由分成单独的文件。 例如，您可以在/views/blog/子文件夹中添加一个blogRoutes.js文件，并且其中仅包含与博客相关的路由，例如/blog/:slug ， /blog/:slug/edit ， blog/tags:/tags等

不要忘记缩小 (Don't Forget to Minify)

If you do decide to opt in and build your AngularJS apps in a modularized fashion, be sure to concatenate and minify your code before going into production. There are many great extensions for both Grunt and Gulp that will help with this - so don't be afraid to split code up as much as you need.

如果您决定采用模块化方式选择加入并构建AngularJS应用，请确保在投入生产之前串联并缩小代码。 Grunt和Gulp都有很多出色的扩展，可以帮助解决这一问题-因此，请不要害怕根据需要拆分代码。

You may not want to necessarily have just one giant .js file for your entire app, but concatenating your app into a few logical files like:

您可能不需要整个应用程序只有一个巨型的.js文件，而是将您的应用程序连接到一些逻辑文件中，例如：

• app.js (for app initialization, config and routing)
  app.js （用于应用程序初始化，配置和路由）
• services.js (for all the services)
  services.js （用于所有服务）

This will be greatly beneficial for reducing initial load times of your app.

这对于减少应用程序的初始加载时间将非常有益。

If you need some more tips on minifying, check out our guide: Declaring AngularJS Modules For Minification

如果您需要更多有关缩小的提示，请查看我们的指南： 声明用于缩小的AngularJS模块

保持名称一致 (Keep the Names Consistent)

This is more of a general tip, but this will save you a headache in the future, when writing components and you need multiple files for the component, try to name them in a consistent pattern. For example, blogView.html, blogServices.js, blogController.js.

这更多是一个一般性的提示，但是在将来编写组件时，如果您需要多个文件用于组件，请尝试以一致的方式命名它们，这将在以后为您省去麻烦。 例如， blogView.html ， blogServices.js ， blogController.js 。

模块化方法的好处 (Benefits of the Modularized Approach)

The example above shows a modularized approach to building AngularJS. The benefits of this approach include:

上面的示例显示了构建AngularJS的模块化方法。 这种方法的好处包括：

代码可维护性 (Code Maintainability)

Follow the approach above will logically compartmentalize your apps and you will easily be able to locate and edit code.

遵循上述方法，将逻辑上划分您的应用程序，您将能够轻松找到并编辑代码。

可扩展 (Scalable)

Your code will be much easier to scale. Adding new directives and pages will not add bloat to existing folders. Onboarding new developers should also be much easier once the structure is explained. Additionally, with this approach, you will be able to drop features in and out of your app with relative ease so testing new functionality or removing it should be a breeze.

您的代码将更容易扩展。 添加新的指令和页面不会给现有文件夹添加膨胀。 解释了结构之后，新开发人员的入职也应该容易得多。 此外，通过这种方法，您将能够相对轻松地将功能放入和退出应用程序，因此测试新功能或删除它应该很容易。

调试 (Debugging)

Debugging your code will be much easier with this modularized approach to app development. It will be easier to find the offending pieces of code and fix them.

使用这种模块化的应用程序开发方法，调试代码将变得更加容易。 查找有问题的代码片段并进行修复将更加容易。

测试中 (Testing)

Writing test scripts and testing modernized apps is a whole lot easier then non-modularized ones.

与未模块化的脚本相比，编写测试脚本和测试现代化的应用程序要容易得多。

结论 (In Conclusion)

To conclude, this article covered some of the best practices in regards to structuring an AngularJS app. It is easy to ignore good practices in order to save time upfront. We all have a tendency to just want to start writing code. Sometimes this passion can hurt us in the long run when our awesome apps grow and become popular and then we're stuck rewriting or even worse maintaining badly thought out code. I hope this article had some helpful tips.

总之，本文介绍了有关构建AngularJS应用程序的一些最佳实践。 为了节省时间，很容易忽略良好做法。 我们都有一种只想开始编写代码的趋势。 有时，从长远来看，当我们出色的应用程序增长并变得流行时，这种热情可能会伤害我们，然后我们就不得不重写，甚至更糟的是维护经过深思熟虑的代码。 我希望本文有一些有用的提示。

I plan on building a barebones AngularJS application structure that should follow the best practices outlined in this article that will help you get started building Angular apps quickly and efficiently. Keep a lookout for that in the coming weeks. Stay tuned for Part 2 where we put these concepts into practice!

我计划构建一个准系统的AngularJS应用程序结构，该结构应遵循本文概述的最佳实践，这将帮助您开始快速，高效地构建Angular应用程序。 在接下来的几周内请注意这一点。 请继续关注第2部分 ，我们将这些概念付诸实践！

In the meantime, be sure to check out John Papa's AngularJS Style Guide for additional tips on AngularJS best practices and while you're add it give Todd Motto's AngularJS Guide a look too.

同时，请务必查看John Papa的AngularJS样式指南，以获取有关AngularJS最佳实践的其他提示，并在添加它的同时也给Todd Motto的AngularJS指南添加外观。

翻译自: https://scotch.io/tutorials/angularjs-best-practices-directory-structure

angularjs目录结构