AngularJSStyle Guide

1

2

Style Guide

Debugging AngularJS

Common Errors

Style GuideReference : JohnPapa & mgechev

3

4

Single Responsibility [Style Y001]

Avoid putting app modules, controllers, factories in the same file

Recommended 1 Component Per File

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

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

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

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

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

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

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

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}}” />

Debugging AngularJS

13

or Ionic Project

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

Tips on Debugging AngularJS

Place breakpoints at certain lines of code for debug

> Use chrome debugging tools

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

Common ErrorsReference : AngularJs Error Reference

17

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

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

Unknown Provider

Solution :

- check for spelling mistake - ‘$locatio’ should be ‘$location’

(Mostly happen in controller)

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

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

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

THE ENDThanks for viewing ^^

24