search

CodingCarlos / angular-demos

0 stars 2 forks source link

Project Structure #4

Open CodingCarlos opened 7 years ago

CodingCarlos commented 7 years ago

First at all, just say that there is a lot of different forms to structure your projects. This is one of many, but is what I feel more confortable with:

/ css
     - style.css
/ js
    / angular
           - angular.min.js
    / module
           - module.min.js
           - module-asset.js
    - app.js
/ controllers
    - home.js
/ directives
    - item.js
/ img
    - image123.png
/ services
    - session.js
/ views
    - home.html
- index.html
- ...

Naming

Files and folders: name-of-file Variables: CamelCase nameOfVariable Functions: CamelCase nameOfFunction() Classes: UpperCamelCase NameOfFunction()

Controllers

For Controllers, we will use UpperCamelCase, with "Controller" as the ending word in the controller name, but not in the file. Example:

controllers/user.js

app.module('app').
    controller('UserController', userController);

function userController(...) { ... }

Services

For Services, just the name of what it do, in camelCase. Example:

services/user.js

angular.module("app")
    .factory("user", userService);

function userService(...) { ... }

Directives

A #1 directive is a function totally abstract of the context. It will became a html property, so the naming will be exactly what is. We will use camelCase, in directive.js, and html valid name (separe-words-like-this) as the html tag or param. Example:

directive/list-element.js

app.module('app').
    directive('listElement', listElementDirective);

function listElementDirective(...) { ... }

index.html

<body ng-app="app">
    <list-element></list-element>
    <div list-element>...</div>
    <div class="list-element">...</div>
    <div list-element="...">...</div>
</body>