Skip to content

Instantly share code, notes, and snippets.

@dwayne
Last active August 29, 2015 14:06
Show Gist options
  • Save dwayne/834e41af0d5e0b59ce1e to your computer and use it in GitHub Desktop.
Save dwayne/834e41af0d5e0b59ce1e to your computer and use it in GitHub Desktop.
Suggestions from Jeff Browning at Pinecone on improving my skills at AngularJS and Rails.

AngularJS

  • Build custom directives. Basic controllers and templates are great, but anything beyond basic interactivity usually requires custom directives. The learning curve for custom directives can be challenging, so just take it one step at a time.
  • Inter-directive communication via controllers.
  • Become very familiar with scope usage, best practices, and pitfalls. Scope inheritance, and encapsulation are some of the areas where Angular can drive you insane, but this knowledge is essential in order to build large-scale, maintainable Angular apps.
  • Explore the differences between Services, Factories, and Providers.
  • Become a testing expert. One thing that I like about the Angular community is that tests are expected and encouraged.

Here are some resources to help:

Ruby/Rails

Finally, help out in the community. Answer StackOverflow questions. Find open source projects that you're interested in and help out with issues.

@dwayne
Copy link
Author

dwayne commented Sep 25, 2014

@dwayne
Copy link
Author

dwayne commented Sep 25, 2014

Understanding Isolate Scope

The isolate scope differs from normal scope in that it does not prototypically inherit from the parent scope.

Here's a reusable directive that isn't using an isolate scope, explain why it maybe better to use an isolate scope. It's even heralded as a great solution on Stack Overflow.

TODO: Explain why it isn't a great solution and provide an alternative.

Here's my solution:

.directive('onEnter', function () {
  var ENTER_KEY = 13;

  return {
    scope: {
      expressionFn: '&onEnter'
    },
    link: function (scope, element) {
      element.on('keypress', function (e) {
        if (e.which === ENTER_KEY) {
          scope.$apply(function () {
            scope.expressionFn({ $event: e });
          });
        }
      });
    }
  };
});

@dwayne
Copy link
Author

dwayne commented Oct 9, 2014

@dwayne
Copy link
Author

dwayne commented Oct 10, 2014

@dwayne
Copy link
Author

dwayne commented Oct 11, 2014

@dwayne
Copy link
Author

dwayne commented Oct 12, 2014

@dwayne
Copy link
Author

dwayne commented Oct 27, 2014

@dwayne
Copy link
Author

dwayne commented Nov 7, 2014

TODO: Write a directive that can be used for password confirmation.

Here's my implementation:

.directive('match', function () {
  return {
    restrict: 'A',
    require: ['^form', 'ngModel'],
    link: function (scope, element, attrs, ctrls) {
      var formCtrl = ctrls[0],
          inputCtrl = ctrls[1];

      var testForMatch = function (value, confirmation) {
        inputCtrl.$setValidity('match', value === confirmation);
      };

      scope.$watch(attrs.ngModel, function (confirmation) {
        testForMatch(scope.$eval(attrs.match), confirmation);
      });

      scope.$watch(attrs.match, function (value) {
        testForMatch(value, scope.$eval(attrs.ngModel));
      });
    }
  };
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment