http://www.unmung.com/feed?feed=https://kathyems.wordpress.com/feed/

San Francisco, CA

Angular 1.6 Binding Functions

Binding functions in Angular tripping you up? Passing function and method bindings between components can be challenging unless you really think about what’s going on in each step and have an understanding of higher order functions. Here I’m tackling using ng-click on a view with it making changes to the parent that is 3 levels […] <p>Binding functions in Angular tripping you up?</p> <p>Passing function and method bindings between components can be challenging unless you really think about what’s going on in each step and have an understanding of higher order functions.</p> <p>Here I’m tackling using ng-click on a view with it making changes to the parent that is 3 levels up. This (with additional code, not shown) produces a component box with a clickable label, on a flex grid. The flex grid itself is also a component that lives on the parent template.</p> <p>In this diagram, I specifically named each binding differently so you could see the progression through the components. The main idea to remember is to pass an object from the view {ein: ‘123’}. Then for each binding, you must use the key name (“ein”).</p> <p><img alt="components" class="alignnone size-full wp-image-435" src="https://kathyems.files.wordpress.com/2019/01/components-1.png?w=615"/></p> <p>The folder architecture would look something like this:</p> <ul> <li>app <ul> <li>equipment-dashboard <ul> <li>equipment-dashboard.controller (1-controller-parent)</li> <li>equipment-dashboard.html (1-template)</li> <li>components <ul> <li>equipment-flex <ul> <li>equipment-flex.component (2-controller)</li> <li>equipment-flex.html (2-template)</li> </ul> </li> </ul> </li> </ul> </li> <li>components <ul> <li>equipment-generic <ul> <li>equipment-generic.component (3-controller)</li> <li>equipment-generic.html (3-view)</li> </ul> </li> </ul> </li> </ul> </li> </ul> <p>**NOTE: “equipment-generic” is under “app &gt; components” and not under “app &gt; equipment dashboard &gt; components &gt; equipment-flex &gt; components” because it’s re-used by many areas of the site, but it could easily have been listed under “equipment-flex &gt; components”.</p> <p> </p> <p> </p> <p> </p>

Angular Injection

Another way to inject services into your AngularJS app is splitting out the injection into a new line. When doing this method, be sure to order your injections in the same order that they are passed into the controller function. // GOOD (function() { angular .module('app') .controller('MyTableController', MyTableController); MyTableController.$inject = [ 'getTable','tablesService','$scope' ]; function MyTableController(getTable, […] <p>Another way to inject services into your AngularJS app is splitting out the injection into a new line. When doing this method, be sure to order your injections in the same order that they are passed into the controller function.</p> <p><code>// GOOD<br/> (function() {<br/> angular<br/> .module('app')<br/> .controller('MyTableController', MyTableController);</code></p> <p><code>MyTableController.$inject = [ <span style="color: #339966;">'getTable','tablesService','$scope'</span> ];</code></p> <p><code>function MyTableController(<span style="color: #339966;">getTable, tablesService, $scope</span>) {<br/> console.log("getTable", getTable);<br/> }<br/> })();</code></p> <p><code>// BAD<br/> (function() {<br/> angular<br/> .module('app')<br/> .controller('MyTableController', MyTableController);</code></p> <p><code>MyTableController.$inject = [ <span style="color: #ff0000;">'getTable','$scope','tablesService'</span> ];</code></p> <p><code>function MyTableController(<span style="color: #ff0000;">getTable, tablesService, $scope</span>) {<br/> console.log("getTable", getTable);<br/> }<br/> })();</code></p>

Callbacks to gather data in JavaScript

Callbacks may be a dying breed with the new ES6 inclusion of promises but it’s good to understand the need for a callback. JavaScript by design is asynchronous to ensure speedy applications. This means that when a line of code is fired, it doesn’t wait for a response before executing the next line of code. […] <p>Callbacks may be a dying breed with the new ES6 inclusion of promises but it’s good to understand the need for a callback.</p> <p>JavaScript by design is asynchronous to ensure speedy applications. This means that when a line of code is fired, it doesn’t wait for a response before executing the next line of code. But what happens if you need the first line to return in order to use the returned item for the next line of code? This is where callbacks come in most handy.</p> <p>Creating a function that takes a callback as one of the arguments will provide scope and closure to the line of code that called the function. It’s like sending an enclosed stamped envelope along with your wedding invite in order to get a (reliable) response from the guest you are inviting.</p> <p>This is really important when gathering data from a database or when the function you are calling parses a text file because these processes can take some time.</p> <p>Here’s an example of a recent use case that helped my web historian read and return the index file:</p> <p>http-helpers.js</p> <p><code>exports.serveIndex = function(res, asset) {</code></p> <p style="padding-left: 30px;"><code>archive.<span style="color: #993300;">readIndex</span>(function(data){</code></p> <p style="padding-left: 60px;"><code>res.writeHead(200, this.headers);<code></code><br/> <code>res.end(JSON.stringify(data));</code></code></p> <p style="padding-left: 30px;">});</p> <p><code>};</code></p> <p>archive-helpers.js</p> <p><code>exports.<span style="color: #993300;">readIndex</span> = function (<span style="color: #0000ff;">callback</span>) {</code></p> <p style="padding-left: 30px;"><code>fs.readFile(exports.paths.index, "utf8", function(err, data){</code></p> <p style="padding-left: 60px;"><code><span style="line-height: 1.6;">if(err) throw err;</span></code></p> <p style="padding-left: 60px;"><code><span style="color: #0000ff;">callback</span><span style="line-height: 1.6;">(data);</span></code></p> <p style="padding-left: 30px;"><code><span style="line-height: 1.6;">});</span></code></p> <p><code>};</code></p>