Offshore AngularJS- development- Hire-AngularJS-Developers- Outsource-AngularJS-Development
Angularjs patterns
Transcript of 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