<p>As you can tell from the content of my blog posts, I’ve been practicing and preaching Angular.js for quite some time now. It is an extremely productive web framework that felt like a big step forward from my days doing jQuery “sprinkles” and then Backbone.</p> <p>But then recently, I started playing with Facebook’s <a href="https://facebook.github.io/react/">React</a> framework. And while I’m still not quite as productive as I was with Angular, I absolutely love the code that I’m writing. And on top of that, it has opened my eyes to a whole new paradigm for creating user interfaces.</p> <p></p>
Blog Entries tagged "angularjs"
<p><em>UPDATE: There have been some changes in the JWT Gem that make some of the below not work exactly right (it’ll still be about 90% the same). Specifically, they added expiration support. See <a href="/2015/07/20/authentication-using-json-web-tokens-using-rails-and-react">my post on the same topic, but using React.js</a>. The server side code in this post will work just as well with Angular.</em></p> <p></p>
<p>While working on an angular.js application recently, I found myself needing some form of authorization logic (not to be confused with authentication / login). I needed to restrict content in my app based on a user’s role as well as some other factors. At first, I created a single <code>AuthService</code> service that dealt with login, authorization, and session management. But this felt messy and violated the <a href="http://en.wikipedia.org/wiki/Single_responsibility_principle">Single Responsibility Principle</a>, so I decided to make something cleaner. My goal was for the API to look something like this:</p> <p></p>
<p>As my work has transitioned from traditional web apps to thick-client Javascript apps (primarily using Angular), <a href="http://gruntjs.com">Grunt</a> has become essential in my workflow. Grunt is a nice tool and it gets the job done. But there was always something I didn’t like about it that I couldn’t quite articulate until I discovered <a href="http://gulpjs.com">Gulp.js</a>. Whereas in Grunt, you create a json configuration file, Gulp is just a script. It’s code. And it really fits my programmer brain better. In this post, I’ll convert a basic Gruntfile that compiles and minifies Coffeescript into Gulp.</p> <p></p>
<p>“Onboarding” is one of those things we sometimes forget about when developing an application, but it really deserves more attention. Showing the user how to use your app can be critical in retaining them. Some people might say that if you need onboarding, your app just needs to have a better UX, but I don’t think this is practical in all situations, particularly complex business applications.</p> <p>For my current Angular app, I wanted a nice way to point out and explain the various features of the application right after signup. I looked through a few javascript plugins such as <a href="http://easelinc.github.io/tourist/">Tourist.js</a>, <a href="http://jeffpickhardt.com/guiders/">Guiders.js</a>, and a few others, but none seemed to work well with angular, so I decided to write my own, which I’m calling <a href="https://github.com/adamalbrecht/ngOnboarding">ngOnboarding</a>.</p> <p><img src="/assets/images/ng_onboarding_screenshot-d1c682a2.png" alt="ngOnboarding"></p> <p></p>
<h3 id="modals-are-easy">Modals are Easy</h3> <p>I’ve used a dozen or so modal / lightbox plugins over the years, almost exclusively jQuery-based. But you know what I didn’t realize until fairly recently? Modals are easy to build yourself from scratch. So let’s make one in the Angular fashion.</p> <p></p>
<h3 id="update-march-14th-2015">UPDATE (March 14th, 2015)</h3> <p>When I first wrote this library, I didn’t have a great understanding of the <a href="https://docs.angularjs.org/api/ng/type/ngModel.NgModelController">ngModelController API</a>, nor good directive design. So I wouldn’t recommend this library anymore. I started on a replacement library <a href="https://github.com/adamalbrecht/angular-date-picker-polyfill">here</a>, though it’s not quite ready for production use.</p> <p><hr></p> <p>I wasn’t particularly happy with any of the datepicker directives out there for Angular.js, so I decided to build one myself. I did it out of a need on my current project but also because I wanted to learn the ins and outs of directives. You can find the library <a href="https://github.com/adamalbrecht/ngQuickDate">on Github</a>.</p> <p></p>
<h3 id="the-problem">The Problem</h3> <p>Currently, I’m working on an Angular app that is very form-centric. Fields and fields and more fields. I want to make the form-filling process as quick and painless as possible, so I’m trying to implement auto-save.</p> <p></p>