分离角路由，控制器和服务

Question

You'll have to forgive the lack of code example on this one; however, I'm hoping this question is straight forward enough that it will not require one.

I'm new to working with Angular. The project I'm working on isn't terribly big. Would it be practical to have controllers in one file, routing in another file and services in the last file? If so, how do I manage the dependencies so that I can reference my controllers from the routing file?

Answer 1

Note: This only answers the file/folder structure. Ideally this would be compiled into a single file that is referenced into your app. Or compiled into feature files which are included separately.

---

Based on the Guide from John Papa:

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

And Todd Motto

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

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

The two best approaches IMO are, for smaller projects, by type:

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

Or for larger project, feature-driven:

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

You want to keep the folder structure relatively flat so you don't have to spend ages navigating folders to find the files you want.

Answer 2

Of course you can. This is a normal code organization behavior you follow with angular. as you are new, I have a sample angular app that are very simple. I'm using this app with my students to explain Single page application using angular and node js.

you can find a link to what you ask as a sample here https://github.com/mustafamg/CourseManagementSystem/tree/master/public/app

In this link you can find routing an application preparation in app.js, while controllers in controllers folder.

You simply reference app.js in your html file followed by controller.js

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