AngularJS Guidline

README.md

Global Guidlines

Filesystem Naming:

• Lowercase
• Dashes Between Words
• Apply to Folder & Files

my-folder / my-file.css

Function Naming:

#!javascript
function myFunction() {
  //some code
}

Constructor Naming:

#!javascript
function MenWithTwoLegs() {
  //some code
}

Variables:

• Init all variables on top of the file/function.
• Variables naming write in Lowercase and with Underscore:

#!javascript
var my_lucky_number = 16,
    my_unlucky_number;
    // some code...

AngularJS Guidlines

** 1 Component per file. For search, minimalize files, for relocate and edit code. **

Naming Filesystem

app.mdl.js

product-list.ctrl.js
product-list.tpl.html
product-list.css

product-box.drv.js
product-box.drv.test.js

.fltr .srv .cnst .val .mock and etc...

Namespacing Components

** src/scripts/core/main.ctrl.js **

#!javascript
angular.module('myApp')
 .controller
  ('myApp.core.mainCtrl',
   ['$scope', function($scope){
}]);

States/Routing

• Use only UI-Router
• Use Dynamic Routing. \state:id
• Think in states:

#!javascript
$stateProvider.state('product',
	{
		controller: 'productCtrl'
		templateUrl: '...'
		url: '/:productId'
	}
);

Folder Structure

• Core → The App’ Sections
• Common → Repeated Through Core
• Nested States = Nested Folders

scripts/
	common/ --> universal stuff, base layers
		services/
		directives/
	core/    --> states
		app.mdl.js
		products/
			products.ctrl.js
			product-details/

Keep everything together:

users-list/
  users-list.ctrl.js
  users-list.ctrl.test.js
  users-list.tpl.html
  users-list.scss

smart-tree/
  smart-tree.drv.js
  smart-tree.drv.test.js
  smart-tree.tpl.html
  smart-tree.scss

Separate to modules. For:

• Faster Unit Testing
• Gives Context
• Easier To Remove Parts Of The App

** scripts/core/user/user.mdl.js **

#!javascript
.module('myApp.core.user', [])
  .controller(
   'myApp.core.user.userCtrl', ...);

angular
.module('myApp.common.services')
 .service(
  'myApp.common.services.product', ...);

##Services

One Service --> return One Dependence

#!javascript
angular.module('...')
.factory('userService',
  function(){
    return {
      gettingUsers: {} // some code
    }
});

Directives

• Isolated Scope
• Inject Only Private Services

** userBox Directive: **

#!javascript
scope: {
	userModel: '=',
	userClicked: '&',
// params: user
}

#!html
<user-box user-model=”data”
 user-clicked=”onClick(user)”></user-box>

Recomendations:

1. Autogenerate File linking by ** Gulp.js / Grunt.js **

** index.html **

#!html
<!-- include:
 “type”:”js”,
	 “files”:
 	[“scripts/**/*.mdl.js',
 	 “scripts/**/*.js”,
 “!scripts/**/*.test.js”]
-->

2. Unit test your code (Karma an enxample)

#!javascript
describe('userCtrl', function(){
	it('Should…', function(){
		expect(userClicked)
.toBe(true)
	}
})

Given(function(){ list empty });
When(function(){ user clicks });
Then(function(){ expect() });

3. Manage your packages with bower.io

4. Use promises (Angular.js)

5. Use CSS preprocessors: SCSS, STYLUS, LESS

6. Build with Gulp.js

Project Developed by:

Nikita Lavrenko

• Skype: nikita.lavrenko
• Email: [email protected]
• LinkedIn: www.linkedin.com/in/niklavr