zachlysobey

Blogs:
object mentor: http://blog.8thlight.com/
Dave Thomas: http://pragdave.me/
Java 8 stuff : http://blog.jooq.org/tag/java-8/
Jeff_Atwood: http://blog.codinghorror.com/
Chad Fowler: http://chadfowler.com/
martin Fowler: http://martinfowler.com/intro.html
John HackWorth: https://hackworth.be/
Brad Touesnard: http://bradt.ca/

zachlysobey

Overview of Drag & Drop Angular Plugins

Plugins

Angular UI Tree

Sortable, Nestable, Horizontal & Vertical lists. Supports touch. No jQuery UI dependency.

Original Author (JimLiu) no longer works on project; adopted by Voles

zachlysobey

<div class="my_meta_control">
     
            <?php $mb->the_field('assoc_proj'); ?>
            <p style="margin:2px 0;">
                <span style="float:left">What Project is this case study associated with?</span><br />
                <select name="<?php $mb->the_name(); ?>">
                    <?php
                    $selected = ' selected="selected"';
                    global $post;

zachlysobey

<?php
//////////////////////////////////////////////////////////////
// Ajax Project
/////////////////////////////////////////////////////////////

add_action( 'wp_ajax_nopriv_myajax-submit', 'ajax_project_load' );
add_action( 'wp_ajax_myajax-submit', 'ajax_project_load' );
 
function ajax_project_load() {
    $the_slug = $_POST['slug'];

zachlysobey

The standard approach

function MyController($scope, Vm) {
  const vm = this;
  vm.myData = 'foo';
  vm.myData; // 'foo'
  
  const stopWatching = $scope.$watch('controllerAsName.myData', (newVal, oldVal) => {
 doSomething(newVal, oldVal);

zachlysobey

angular.module('my.Module').directive('dateControl', dateControl);

function dateControl() {
    return {
        bindToController: true,
        controller: Controller,
        controllerAs: 'vm',
        scope: {
            isDataReady: '=',
            dateMilliseconds: '='

zachlysobey

Whats the best, most idiomatic way to make a self-closable directive?

Pass in ng-if?

<toggleBox ng-if="someCondition"></toggleBox>

angular.module('myModule').directive('toggleBox', function() {

zachlysobey

#Angular Resources & Best Practices

John Papa's Styleguide - Required reading. We try to follow this blindly.

Tips

• The above styleguide has snippets for different editors
• Organize directories by feature, not type
• One Injectable "thing" per file.
• Thin controllers. Think of them as the View Model (vm), not a MVC controller.
• Avoid the link function and doing things with element (this isn't jQuery)

zachlysobey

<!-- make sure to include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
    // optional 3rd parameter is the "size" (between 0-9). Default is 5
    // Facebook returns several sizes; 
    // experiment with these and fine-tune with css.
    function randomFbPhoto (el, albumId, size) {
        var $el = $(el); // create jQuery element from css selector
        var dataUrl = "https://graph.facebook.com/fql?q=SELECT+images,+caption,+link,+created+FROM+photo+WHERE+album_object_id+=+" + albumId + "+ORDER+BY+rand()+LIMIT+1";

zachlysobey

(function() {
    'use strict';

    angular
        .module('myModule')
        .directive('myDirective', myDirective);

    const template = `
        <div class="my-directive-template">
            <h1>Using multi-line Strings for templates</h1>