You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: a1/README.md
+90
Original file line number
Diff line number
Diff line change
@@ -56,6 +56,7 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see
56
56
1.[Routing](#routing)
57
57
1.[Task Automation](#task-automation)
58
58
1.[Filters](#filters)
59
+
1.[Low Level Functions](#low-level-functions)
59
60
1.[Angular Docs](#angular-docs)
60
61
61
62
## Single Responsibility
@@ -3268,6 +3269,95 @@ Use [Gulp](http://gulpjs.com) or [Grunt](http://gruntjs.com) for creating automa
3268
3269
3269
3270
**[Back to top](#table-of-contents)**
3270
3271
3272
+
## Low Level Functions
3273
+
3274
+
Angular 1.x ships with some [helper functions](https://docs.angularjs.org/api/ng/function) that are found within JavaScript natively. In such cases we should favor usage of native JavaScript functions instead of Angular's helper functions. In other cases where functionality is not found in JavaScript natively, we should turn to utility libraries such as [lodash](https://lodash.com/docs) to fill-in the gaps.
3275
+
3276
+
###### [Style [Y500](#style-y500)]
3277
+
3278
+
- Avoid using Angular low-level functions such as `angular.copy()`, `angular.extend()` or even `angular.isUndefined()`.
3279
+
3280
+
*Why?*: You can replace a lot Angular's low-level functions with native ES2015+ functionality such as [`Object.assign()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) for copying objects and the [Spread Syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#Copy_an_array) for copying arrays _(ie. `[...arr1]`)_.
3281
+
3282
+
*Why?*: Because this is functionality that has been made available in the latest versions of JavaScript, but did not exist natively back when helper functions were first written.
3283
+
3284
+
Replace `angular.forEach()` and `angular.isArray()`:
3285
+
3286
+
```javascript
3287
+
/* avoid */
3288
+
var arr = [1, 2, 3];
3289
+
var obj = { hello:'Hello', world:'World' };
3290
+
3291
+
angular.forEach(arr, function(value) {
3292
+
console.log(value);
3293
+
});
3294
+
3295
+
angular.forEach(obj, function(value) {
3296
+
console.log(value);
3297
+
});
3298
+
3299
+
angular.isArray(arr); // true
3300
+
angular.isArray(obj); // false
3301
+
```
3302
+
3303
+
```javascript
3304
+
/* recommended */
3305
+
var arr = [1, 2, 3];
3306
+
var obj = { hello:'Hello', world:'World' };
3307
+
3308
+
// iterate through arrays
3309
+
arr.forEach(function(value) {
3310
+
console.log(value);
3311
+
});
3312
+
3313
+
// iterate through objects
3314
+
Object.keys(obj)
3315
+
.forEach(function(key) {
3316
+
console.log(obj[key]);
3317
+
});
3318
+
3319
+
// alternative lodash helper to iterate through objects
3320
+
_.forEach(obj, function(value) {
3321
+
console.log(value);
3322
+
});
3323
+
3324
+
// available in ES
3325
+
Array.isArray(arr); // true
3326
+
Array.isArray(obj); // false
3327
+
```
3328
+
3329
+
Don't use `angular.copy()` and `angular.extend()` in favor of ES2015 features:
3330
+
3331
+
```javascript
3332
+
/* avoid */
3333
+
var arr1 = [1, 2, 3];
3334
+
var arr2 =angular.copy(arr1); // [1, 2, 3]
3335
+
3336
+
var obj1 = { hello:'Hello' };
3337
+
var obj2 = { world:'World' };
3338
+
var obj3 =angular.extend({}, obj1, obj2); // {hello: 'Hello', world: 'World'}
3339
+
```
3340
+
3341
+
```javascript
3342
+
/* recommended */
3343
+
var arr1 = [1, 2, 3];
3344
+
var arr2 = [...arr1]; // [1, 2, 3]
3345
+
3346
+
var obj1 = { hello:'Hello' };
3347
+
var obj2 = { world:'World' };
3348
+
var obj3 =Object.assign({}, obj1, obj2); // {hello: 'Hello', world: 'World'}
3349
+
```
3350
+
3351
+
*Why?*: These are commonly known features of JavaScript and makes code more intuitive to read.
3352
+
3353
+
*Why?*: This will ease the process of upgrading to Angular 2 as it does not ship with these helper functions.
3354
+
3355
+
- Note: Favor usage of functions that are available in JavaScript natively, then resort to using a utility library like [lodash](https://lodash.com/docs) when what you need is not available.
3356
+
3357
+
- Note: you might need to use a [polyfill](https://babeljs.io/docs/usage/polyfill/) to take advantage the latest features of JavaScript for better browser support.
0 commit comments