SPA & FRONT-END

WORKFLOW

SPA

SPA Concept & definition
Routing [ui-router]
Angular Style guide
1. Code style
2. File Structure
3. Best practices
l10n & i18n

Workflow

What is a task runner?
Node & NPM
Bower
Why gulp?
Gulp tasks

Concept & Definition

The problem
The solution
What is the page in SPA ?
Why is it single ?

Routers

Hash-bang
Deep-linking
ui-router
- The state
- The view
- The state params

ui-router

DEMO

Style Guide

Angular

General Rules

Controller #1

ControllerAs vs $scope
ControllerAs vm - .js
ControllerAs ctrl - .html

Controller #2

Bindable members up top
Alphabtized
Use activate function
Defer controller logic to services
Define controller in the route config

Service

Service vs Factory
Value and Constant
Interface on top
Separate services for data call
Return the promise with each handler [chaining]

Directive

Manipulate DOM in directives
Unique prefix for naming
Restrict "EA"
ControllerAs Syntax for consistency

Routing

Resolve dependencies in $routeProvider
Use controller in $routeProvider
Use controllerAs for consistency

Naming Convention

File Names

feature.type.js
queries.controller.js
queries.service.js
queries.data.service.js
query-item.directive.js
queries.route.js

Components Names

Pascal for controller
- QueriesControllers
Camel case for Services
- queriesService
Camel case for directives
- xxQueryItem

Self-contained modules

File structure

$ wrapper

$document
$window
$timeout
$interval
$http
$q

Angular Translate

l10n & i18n

Getting Started

$translate("queries").then(handler)

$translate(["queries","pages"]).then(handler)

{

LOGGED_IN : "{{username}} is logged in"

}

{{'LOGGED_IN' | translate:"{username:'Ali'}"}}

Going multi-lang

messageFormat Interpolation

FRONT-END WORKFLOW

Setup

Develop
Build

Let's automate it :)

NodeJS

240K packages
+60M last Thursday

+800M last week

~3.4B last month

npm init

npm install

npm install -g gulp-cli

npm install --save-dev gulp-cli

bower init

bower install

bower install angular --save

Gulp as a

Task Runner

Task runners are a set of tools to make build operation clean and well documented. They provide helpers to manage operations on the project file system via the command line.

Grunt

Base on files.

Configuration over code.

Independant tasks.

5500 packages.

~ 3 years.

Gulp

Based on streams.

Code over configuration.

Tasks run a sequence of methods.

2166 package.

~ 2 years.

npm install -g gulp-cli

Gulp API

gulp.task(name,fn)
gulp.run(tasks)
gulp.watch(glob,fn)
gulp.src(glob)
gulp.dest(glob)

npm install --save-dev gulp-uglify

Basic Tasks

Concat js
Minify js
Compile sass
Minify css
Live-reload