Angularjs

Firebase is a great way to connect applications to a database that will sync data in realtime.  Tying this in with AngularJS allows you to create a single page application that updates dynamically and as data changes without page refreshes.  This allows you to create applications that can give your users access to data the moment it is updated and changed.  They have a great binding called AngularFire that links the two services together nicely. One thing that I had problems with was filtering data returned by Firebase with the great AngularJS filter method.  Because AngularFire returns a dictionary with methods and elements the AngularJS filter has problems filtering the data correctly.  The AngularJS template rendering can render the data just fine but the filter does not work.  To fix that you'll need to employ the AngularFire method orderByPriority before your AngularJS filter.  Here is an example.<input type="text" class="form-control" ng-model="storeSearch.$" placeholder="Sto...

AngularJS $location Not Changing the Path by Eric on February 1, 2020

In my adventures learning AngularJS I am confronted with strange problems all the time which is a really great thing.  I love learning how to do new and intersting things in different programming environments.  Today I was having problems with my URL not forwarding correctly on a callback method.  Once a user was logged in I wanted the URL to forward to another page.  I was using $location.path and setting it to a URL that was defined in my $routeProvider but it wasn't actually going to that page. A quick Google search led me to this Stack Overflow page, AngularJS $location not changing the path, with the exact problem I was having.  The answer, it turns out, is to add $scope.apply() after any changes you've made.  This does a refresh on the scope and applies any changes you've made that may not have been updated.  The answer describes a conflict with another library in his case jQuery.  I am using Firebase to log the user in and I believe the conflict is there. Here is my code an...

AngularJS Detect Enter Key - ngEnter by Eric on February 1, 2020

AngularJS has a ton of built in directives and functions to make your app come alive very quickly.  One thing I noticed it was lacking was a built in on-enter event.  For example, if a user is in an input field when they hit enter I want it to do something, maybe not necessarily submit the form.  Luckily, AngularJS gives you the ability to create your own directives and add them into your app.  Below is a simple directive that you can add to your app that allows you to add ng-enter to elements in your partials.  Pass it a function and watch as you hit enter and that function is executed flawlessly./* This directive allows us to pass a function in on an enter key to do what we want. */ app.directive('ngEnter', function () { return function (scope, element, attrs) { element.bind("keydown keypress", function (event) { if(event.which === 13) { scope.$apply(function (){ scope.$eval(attrs.ngEnter); }); ...

Adding Extra JavaScript to AngularJS Partials by Eric on February 1, 2020

When loading partials into your one page AngularJS app occasionally you'll need to load in JavaScript files that pertain only to those partials.  If you are only using AngularJS these added <script> tags won't be rendered by Angular.  After Googling for some time I have found that the solution is to load JQuery into your index.html file just before AngularJS.  This fixes the problem.partial.html<script type="text/javascript" src="//cdn.someplace.com/file.js/"></script>index.html<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>   Problem solved. Hope this helps someone else who runs into the same problem I had.  If there is a better, more Angular way, of doing this let me know in the comments below.