This document provides a style guide and best practices for developing AngularJS applications. It discusses topics such as wrapping code in immediately invoked function expressions (IIFEs) to avoid namespace collisions, using the controllerAs syntax over $scope, placing logic in services rather than controllers, and debugging techniques like inspecting scopes and using breakpoints. Common errors encountered in AngularJS development are also covered, along with their potential causes and solutions.

1. AngularJS
Style Guide
1

2. 2
Style Guide
Debugging AngularJS
Common Errors

3. Style Guide
Reference : JohnPapa & mgechev
3

4. 4
Single Responsibility [Style Y001]
Avoid putting app modules, controllers, factories in the same file
Recommended 1 Component Per File

5. 5
IIFE [Style Y010]
Wrap angular module inside immediately invoke function expression (IIFE)
Why? An IIFE removes variables from the global scope. This helps prevent
variables and function declarations from living longer than expected in
the global scope, which also helps avoid variable collisions.
Why?: When your code is minified and bundled into a single file for
deployment to a production server, you could have collisions of variables
and many global variables. An IIFE protects you against both of these by
providing variable scope for each file.
Strict mode : cannot use
undeclared variable

6. 6
Definition of Modules (Setters) [Style Y021]
Avoid using a variable name when declare module
Why? With 1 Component Per File,
there is rarely a need to introduce
a variable for the module
Recommended to use a simpler setter syntax

7. 7
Getters [Style Y022]
Avoid using a variable name when using module
Recommended to use chaining with the getter syntax
Why? This produces more readable code and avoids variable
collisions or leaks

8. 8
controllerAs view syntax [Style Y030]
Avoid using classic controller with $scope syntax
Use the controllerAs syntax
Why?: It promotes the use of binding to a "dotted" object in the View (e.g.
customer.name instead of name), which is more contextual, easier to
read, and avoids any reference issues that may occur without "dotting".

9. 9
controllerAs with “self” [Style Y032]
*** NOTE : In Our Project, use “self” instead of “vm” for consistency
Use a capture variable for “this” when using the controllerAs syntax. Choose
a consistent variable name such as vm, which stands for ViewModel
var self = this;
self.name = {};
self.sendMessage = function() {};

10. 10
Function Declarations to Hide Implementation
Details [Style Y034]
Why?: You never have to worry
with function declarations that
moving var a before var b will
break your code because a
depends on b.
Why?: Move the complexity
out of view so can see
important stuff up top
Why?: Easier to read and
identify which function can
be bound to view
Why?: Order is critical with
function expressions
example of function expression :
var a = function() { };
var b = function() { };

11. 11
Defer Controller Logic to Services [Style Y035]
Why?: Logic may be reused by multiple controllers when placed
within a service and exposed via a function.
Why?: Removes dependencies and hides implementation
details from the controller.

12. 12
Order of Dependency Injection
Put angular built in service at the front and self-defined service at
the back
Why?: Improve readability and consistency
<input type="text" ng-model=“{{name}}” my-directive=“{{data}}” />

13. Debugging AngularJS
13
or Ionic Project

14. 14
Tips on Debugging AngularJS
> Use scope inspection tools
Always press command+option+I (Mac) or Ctrl+Shift+I (Windows)
> Inspect Element
- Install AngularJS Batarang extension in Chrome
- Select the element and inspect angular scope

15. 15
Tips on Debugging AngularJS
Place breakpoints at certain lines of code for debug
> Use chrome debugging tools

16. 16
Tips on Debugging AngularJS
Sometimes sass syntax error might cause live-reload failure
> Check on Ionic CLI
> Use jshint in Atom for checking javascript syntax in real time

17. Common Errors
Reference : AngularJs Error Reference
17

18. 18
Failed to instantiate module…
Solution :
- check for app.js & index.html
- ensure no spelling mistake
- ‘account.ctrlx’ should be ‘account.ctrl’
- ‘account-ctrlx.js’ should be ‘account-ctrl.js’
- or have you accidentally remove the <script> tag but loaded in module?

19. 19
XxxxxCtrl is not a function
Solution :
- check for app.js & index.html
- ensure ‘account.ctrl’ is included as dependency in app.js
- and <script src=“path/to/account-ctrl.js”></script> is in index.html
Cause :
- occurs when you have defined
the controller but did not
include it in app.js/index.html

20. 20
Unknown Provider
Solution :
- check for spelling mistake
- ‘$locatio’ should be ‘$location’
(Mostly happen in controller)

21. 21
$xxxxx is not defined
Solution :
- add it into the .controller() function
Cause :
- usually occurs when use a certain
service without injecting it
- eg : we use $location but didn’t
define it inside .controller() function

22. 22
Unexpected Token }
Cause :
- usually occurs when accidentally add extra comma (,) at the end
of JSON file (eg. in locale JSON file)
Solution :
- Remove the comma (,) at the
last string value

23. 23
CORS Issue When Serving in Desktop Browser
Solution :
- Install CORS extension in chrome
- Remember to turn it on
Note :
- Remember to turn off if didn’t use
- It might affect other page loading

24. THE END
Thanks for viewing ^^
24