planner

######################################################################################## ########################################################################################

Ultimate AngularJS Component Oriented Design Guide available here !!

/!\ This project is no longer maintained. Read the guide and see this project instead.

######################################################################################## ########################################################################################

planner is a demo front-end web app using Angular Material and Firebase. The purpose of this project is to understand how setup quickly and easily an Angular project with a good architecture.

Test the app

Online : https://planner31.firebaseapp.com/ or from your computer:

Requirements

Developed with:

Node.js v4.4.1
npm v2.14.20
Gulp CLI v1.2.1 (if you don't have it run npm install --global gulp-cli)
Sass v3.4.22 (if you don't have it got here http://sass-lang.com/install)

Clone it !

Be sure to have previous requirements installed on your computer.

Clone the repo on your computer (or download it as zip).
Open your terminal and go to the project directory.
Run npm install.
Run gulp, you should see the server starting in the terminal.
Go to http://localhost:4000.

😄 Please feel free to fork this project and make pull requests ! 😄

Explanations

Calling order
- app.config()
- app.run()
- app.controllers()
Gulp automates tasks like starting the server, browserify js files, watch changes automatically...
Browserify allows us to use require() in our js files like in Node.js but for front-end development. Because of Gulp browserify takes all the required files in the app/ directory and concatenate them into a single file understandable by browsers in public/js/.
- To use require('nameOfDirectory') you must put in the directory a index.js file wich contains a require('file.js') for each file in the directory. (example in app/controllers/)
- If we don't use browserify the browser cannot understand require() statements.
All calls to Firebase must be in a service not a controller (example in app/services/EventService.js).
To share data between controllers we must use a service and store the shared data and then notify controllers of the update (example in app/services/SharedService.js). Do not forget to inject the service in the controller (example in app/controllers/PlannerCtrl.js).
To use Firebase hosting juste install Firebase CLI (npm install -g firebase-tools) and then run in your project directory firebase init and firebase deploy.

Angular best practices

Naming and location conventions

Element	Naming style	Example	File	Location
Modules	lowerCamelCase	angularApp	angularApp.js	`app/`
Controllers	Functionality + 'Ctrl'	AdminCtrl	AdminCtrl.js	`app/controllers/`
Directives	lowerCamelCase	userInfo	userInfo.js	`app/directives/`
Filters	lowerCamelCase	userFilter	userFilter.js	`app/filters/`
Services	UpperCamelCase	User	User.js	`app/services/`
Views	lowerCamelCase	mail	mail.ejs	`public/views/`

Controllers structure

The structure of a controller's file is :

angular.module('nameModule').controller('NameCtrl', NameCtrl);

function NameCtrl() {
  var vm = this;
  //vm.fields...
  //vm.methods...
  ]
}

Example (app/controllers/PlannerCtrl.js):

angular.module('planner').controller('PlannerCtrl', PlannerCtrl);

function PlannerCtrl() {
  var vm = this;
  vm.schedules = [
    {
      id:'1',
      time:'8h - 10h',
    },
    {
      id:'2',
      time:'10h - 12h',
    }
  ]
  //...
}

License

This project is licensed under the MIT License. See the LICENSE file for details.

gautierdelorme / planner