Angularjs patterns

Presented ByPrabu

AngularJS Patterns

©2014

•Organization•Separation of Concerns•Modules•Readability•Exception Handling

Overview

©2014

var a;var b;Function add(a, b){}

Click to edit Master title style

©2014

Organization

©2014

Lift Principle

Where to locate to extend dashboard feature ?

ViewControllerModuler

Identify code at a glance

Flat structure as long as we can, for example single level, multi level or sub level

Try to stay DRY

Locating our code is easy

©2014

Separation of Concerns

1 component, 1 role, 1 file

● Controller handles logic for the view ● Get the data via xhr call● Opens Dialogs● Pagination Logic● Building Models● Broadcast Messages● Logging

Group Features into the Modules

app = angular.module("HealthPlotterAdmin", [ "ngResource" "ngAnimate" "ui.router" "ui.bootstrap" "templates" "toaster"]

Refactoring Opportunities

$http.get(“/api/users”)

Click to edit Master title style

©2014

Modules

1. Defining a module - Value Proposition

● Increase stability● Easier to extend and enhance● Easier to Maintain● More reuse by other components

app = angular.module("HealthPlotterAdmin", []);

2. Module Categories

app = angular.module("HealthPlotterAdmin", [ // Angular Modules "ngResource", "ngAnimate",

// Custom Modules "HealthPlotterAdminEmployerLocation" ,

// 3rd Party Modules "ui.bootstrap" ]);

Modules are contrainers for AngularJs components

©2014

Naming Conventions

File Name Ex. Use Dots, dashes or CamelCasing for multi word file names.

Name of things inside the code Ex. Name controller using PascalCase

Use camelCasing for non controller component such as Factories

Ex. employerLocation, modelPopup

©2014

Readability1. Variable or Chaining

©2014

2. Anonymous or Named Fuctions

Readability

©2014

Readability3. Inline dependency Array

©2014

Exception Handling

newMemberSuccess = (newMember) ­>    toaster.pop('success', "", "Member created successfully.")

newMemberError = (errResponse) ­>    toaster.pop('error', "Member creation failed!",               errResponse.data.response.message)

# adding new member      $admin.newMember.save($scope.newMember).$promise.then                  newMemberSuccess, newMemberError

app.factory "$admin", ["$resource", ($resource) ­> 

# resource declaration for members   newMember: $resource("/employers_members/:id", null,     update:       method: "PUT

©2014

WE BUILD APPS THAT PEOPLE LOVE TO USE

Enterprise Web Applications Development

Cross-Platform Business Mobile Apps Development

Social Media Integrated Applications Development

Product Development Services