分离角度路由、控制器和服务

Separating Angular Routing, Controllers, Services

本文关键字：控制器服务路由分离更新时间：2023-09-26

您将不得不原谅这篇文章缺少代码示例；然而，我希望这个问题足够直截了当，不需要回答。

我是Angular的新手。我正在做的项目不是很大。将控制器放在一个文件中，将路由放在另一个文件，将服务放在最后一个文件是否可行？如果是，我该如何管理依赖项，以便从路由文件引用我的控制器？

注意：这只回答文件/文件夹结构。理想情况下，这将被编译成一个单独的文件，并被引用到您的应用程序中。或者编译为单独包含的特征文件。

根据约翰·帕帕的指南：

https://github.com/johnpapa/angular-styleguide#locate

Todd Motto

http://toddmotto.com/opinionated-angular-js-styleguide-for-teams/

https://github.com/toddmotto/angularjs-styleguide

对于较小的项目，IMO的两种最佳方法是：

|-- app.js
|-- controllers/
|   |-- MainCtrl.js
|   |-- AnotherCtrl.js
|-- filters/
|   |-- MainFilter.js
|   |-- AnotherFilter.js
|-- services/
|   |-- MainService.js
|   |-- AnotherService.js
|-- directives/
|   |-- MainDirective.js
|   |-- AnotherDirective.js

或者对于更大的项目，功能驱动：

|-- app.js
|-- dashboard/
|   |-- DashboardService.js
|   |-- DashboardCtrl.js
|-- login/
|   |-- LoginService.js
|   |-- LoginCtrl.js
|-- inbox/
|   |-- InboxService.js
|   |-- InboxCtrl.js

你希望保持文件夹结构相对平坦，这样你就不必花很长时间浏览文件夹来找到你想要的文件。

当然可以。这是angular遵循的正常代码组织行为。由于你是新手，我有一个非常简单的angular应用程序示例。我正在和我的学生一起使用这个应用程序来解释使用angular和node-js的单页应用程序。

你可以在这里找到你所要求的样品的链接https://github.com/mustafamg/CourseManagementSystem/tree/master/public/app

在这个链接中，您可以在app.js中找到路由应用程序准备，而在controllers文件夹中找到controllers。

你只需在html文件中引用app.js，然后引用controller.js

<script src="app.js"></script>
<script src="controller.js"></script>