AngularJS Project Setup step-by- step guide - RapidValue Solutions
AngularJs Style Guide
-
Upload
chiew-carol -
Category
Documents
-
view
142 -
download
1
Transcript of AngularJs Style Guide
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
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