mlynch

A while back I made a quick AngularJS directive for Bootstrap 3 Tooltips. I wanted to be able to specify tooltips on any element like this:

<button title="Settings" data-placement="bottom" data-delay="500"
data-toggle="tooltip"><i class="icon ion-gear"></i></button>

But I wanted to be able to do it without having to call $([data-toggle="tooltip"]').tooltip() every time I loaded a new page with tooltips, which is what you'd have to do if you were using vanilla jQuery and Bootstrap without something like Angular.

I built a really simple directive that worked perfectly, and I realized this was a perfect example of creating a simple custom directive that makes your life so much easier.

mlynch

Single Page Apps are ruling the world and AngularJS is leading the charge. But many of the lessons we learned in the Web 2.0 era no longer apply, and few are as drastically different as authentication.

CORS

CORS is an oft-misunderstood feature of new browsers that is configured by a remote server. CORS stands for Cross-Origin-Resource-Sharing, and was designed to make it possible to access services outside of the current origin (or domain) of the current page.

Like many browser features, CORS works because we all agree that it works. So all major browsers like Chrome, Firefox, and IE support and enforce it. By using these browsers, you benefit from the security of CORS.

That means certain browsers do not enforce it, so it is not relevant there. One large example is a native Web View for things like Cordova and Phonegap. However, these tools often have configuration options for whitelisting domains so you can add some security that way.

mlynch

/**
 * the HTML5 autofocus property can be finicky when it comes to dynamically loaded
 * templates and such with AngularJS. Use this simple directive to
 * tame this beast once and for all.
 *
 * Usage:
 * <input type="text" autofocus>
 * 
 * License: MIT
 */

mlynch

angular.module('maxlynch')

/**
 * A simple ace-editor widget for adding a rich code editor
 * in place of a textarea with full ngModel support.
 * 
 * Usage:
 * 
 * <ace-editor language="javascript" theme="monokai"></ace-editor>
 * 

mlynch

angular.module('myApp', ['ionic'])

.directive('menuAndDrawerClose', ['$ionicViewService', function($ionicViewService) {
  return {
    restrict: 'AC',
    require: '?^ionSideMenus,?^drawer',
    link: function($scope, $element, $attr, ctrls) {
      $element.bind('click', function(){
        ctrls[0] && ctrls[0].close();
        ctrls[1] && ctrls[1].close();

mlynch

$ npm install -g gulp
/


> [email protected] install C:\Users\Max_2\AppData\Roaming\npm\node_modules\gulp\nod
e_modules\v8flags
> node fetch.js

-
C:\Users\Max_2\AppData\Roaming\npm\node_modules\gulp\node_modules\v8flags\fetch.

mlynch

<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key><true/>
</dict>

mlynch

/**
 * ionRadioFix - fixes a bug in iOS 9 UIWebView that breaks the tilde selector in CSS. To
 * use this fix, include it after your Ionic bundle JS.
 * 
 * Note: due to Angular directive override limitations, you'll need to change any reference
 * to <ion-radio> to <ion-radio-fix> to apply this patched radio button.
 * 
 * Also, make sure to add the new CSS from the second part of this gist.
 */
angular.module('ionic').directive('ionRadioFix', function() {

mlynch

<!--
This disables app transport security and allows non-HTTPS requests.
Note: it is not recommended to use non-HTTPS requests for sensitive data. A better
approach is to fix the non-secure resources. However, this patch will work in a pinch.

To apply the fix in your Ionic/Cordova app, edit the file located here:

platforms/ios/MyApp/MyApp-Info.plist

And add this XML right before the end of the file inside of the last </dict> entry:

mlynch

Shorter Links: http://j.mp/ionic-workshop

ES6

Object.observe http://bit.ly/ionic-es6-1

let http://bit.ly/ionic-es6-let