One of my most popular posts is Ionic Framework Introduction – Barcode Scanner. Apparently, people like making barcode scanners! Who knew!?!
Today, we’re going to do a little update to that post and get our Ionic 2 on! Since the previous app was so basic, I’m not going to actually upgrade the code, we’ll just start from scratch. Since we only have “15 Minutes” (YMMV) let’s get going!Read More »
It has been a while since I’ve touched my Angular Blackjack project. When I first started working on it, I created a build process that used gulp-concat to simply merge all our application files into one. Let’s bring our application into 2015, ES2015 that is, with a modular loading system.
For this exercise I decided to use Webpack. I could’ve easily used jspm or browserify, but Kent C. Dodds‘s series on Egghead.io was easy to follow and very informative: https://egghead.io/series/angular-and-webpack-for-modular-applications
For a quick TL;DR, you can see the pull request of all the changes made: https://github.com/adamweeks/angular-blackjack/pull/2/files?w=1
(First off, sorry for the long winded post title. It is basically what I google every time I’m trying to remember the functionality.)
Let’s say you have a directive that allows a user to enter data. When that user is done entering data, the directive processes the data, then sends the result back up to the parent. If we were to do this with two-way data binding, we’d have to set up watchers to know when the values were changed. There is a way to do it without the watchers though. We can use the parent scope binding type: “&”.
In keeping with my previous posts about my Webstorm templates, this is my template for creating a new Angular Service.
| (function() { | |
| 'use strict'; | |
| angular.module('${moduleName}', []) | |
| .service('${serviceName}', [${serviceName}]); | |
| function ${serviceName}() { | |
| var service = this; | |
| } | |
| })(); |
Previous Posts:
A few months ago I starting playing around with the idea of making a mobile game using Angular and Ionic. I didn’t want to use any game frameworks, just a basic game to play.
The game I ended up creating was Emoji Eater. It has gameplay that is very similar to the old Windows Mobile game called Jawbreaker. The only real difference is the “levels” where you have a certain amount of turns before the combination amount goes up. (I found it quite difficult to pass level 6!)
Now, I’m certainly no designer and definitely not a game designer, so please pardon the crudeness of the game. It is definitely not a “released” product, but it is playable.
If you’re interested in checking out the source behind it, I’ve posted it up on Github.
Enjoy!
If you’ve seen any of my Angular code, you will notice that I use a LOT of element directives (Angular 2 calls these “components”!). You’ll also notice that I like writing a lot of unit tests.
After my previous post on WebStorm templates, I came to the realization that I was writing a lot of boiler plate code for testing these directives. Instead of rewriting these tests every time, I’ve created a template to use for unit testing directives.
(One thing to note, this requires at least angular mocks 1.3.15 for the bindings options in the $controller constructor)
| 'use strict'; | |
| describe('My Great Directive', function() { | |
| var $rootScope; | |
| var $controller; | |
| var $window; | |
| var $httpBackend; | |
| var $compile; | |
| var scope; | |
| var MyFancyService | |
| var MyGreatDirectiveController; | |
| beforeEach(function() { | |
| module('myApp.greatDirective'); | |
| inject(function(_$rootScope_, _$httpBackend_, _$compile_, _$controller_, _$window_, _MyFancyService_) { | |
| // Native Angular Injections | |
| $rootScope = _$rootScope_; | |
| $controller = _$controller_; | |
| $window = _$window_; | |
| $compile = _$compile_; | |
| $httpBackend = _$httpBackend_; | |
| scope = $rootScope.$new(); | |
| // Custom Injections | |
| MyFancyService = _MyFancyService_; | |
| // Locals are the injections to the directive's controller | |
| var locals = { | |
| $window: $window, | |
| MyFancyService: MyFancyService | |
| }; | |
| // Bindings are the objects that are bound to the directive's scope | |
| var bindings = { | |
| fancyString: 'fancy-string' | |
| }; | |
| MyGreatDirectiveController = $controller( | |
| 'MyGreatDirectiveController', | |
| locals, | |
| bindings | |
| ); | |
| }); | |
| }); | |
| describe('Directive Controller', function() { | |
| it('should be a proper contoller', function() { | |
| expect(MyGreatDirectiveController).toBeDefined(); | |
| }); | |
| }); | |
| describe('Compiled Directive', function() { | |
| var responseText; | |
| beforeEach(function() { | |
| responseText = 'My Great Directive!'; | |
| $httpBackend.whenGET('/app/partials/great.directive.html').respond(responseText); | |
| }); | |
| it('should compile', function() { | |
| var element = $compile('<my-great-directive></my-great-directive>')(scope); | |
| scope.$digest(); | |
| $httpBackend.flush(); | |
| expect(element.html()).toContain(responseText); | |
| }); | |
| }); | |
| }); |
I started working on another “fun” project last week. I should rephrase that. I “attempted” to start a project last week. That very first step, I got stuck. Why is starting so hard? I created a new project using yeoman, but the build process uses grunt and it is more complex than I wanted. I also tried Angular Seed, but it didn’t fit what I was looking for either.
Of course, I had just written my Angular Blackjack project from scratch, so I did what all developers do, I made my own base project!
Introducing: Angular-Base
https://github.com/adamweeks/angular-base
I’ve modified the build system a bit since the Angular Blackjack project, but not a lot. Feel free to use it to get your projects started. Keep in mind, I haven’t actually built a real project with the base yet, but I’ve started using it. I’m sure there will be changes to the base project. If you see any issues or want some features, I’m definitely open to PRs.
If you’re like me, you find yourself rewriting a lot of boilerplate code with Angular. Especially when creating new files. I just started using templates in WebStorm and it is quite the time saver!
Here’s my first one I use for creating a new directive. This utilizes the bindToController feature of directives for Angular 1.3+.
| (function() { | |
| 'use strict'; | |
| angular | |
| .module('${moduleName}') | |
| .controller('${controllerName}', [${controllerName}]) | |
| .directive('${directiveName}', [${directiveName}]); | |
| function ${controllerName}() { | |
| var vm = this; | |
| vm.activate = function() { | |
| }; | |
| vm.activate(); | |
| } | |
| function ${directiveName}() { | |
| return { | |
| restrict: 'E', | |
| scope: {}, | |
| templateUrl: '', | |
| controller: '${controllerName}', | |
| controllerAs: 'vm', | |
| bindToController: true, | |
| }; | |
| } | |
| })(); |
Take this code and create a new template with it in WebStorm by going to Preferences, Editor, File and Code Templates, then hitting the “+” button.
Once the template is in Webstorm, you can see it in the new file window:
You’ll then be prompted to fill out all of the variables:
Hope this saves some time!
P.S. For you Sublime Text users, you can use this as a ‘trigger’ as well for use in new files!
When creating an AngularJS directive, most of the time we want to pass some sort of data to that directive where it is implemented. Of course, Angular gives us multiple ways to do so. Let’s try to make sense of the different binding types: “@”, “=”, and “&”.
(Related: AngularJS Directive’s ‘Restrict’ Real World Guide)
As you may have read, or if you’ve ever heard me talking about Angular, you know I’m a big fan of John Papa’s Angular Style Guide. I definitely agree with so many things in his style guide and I try to follow them in my coding. One thing that I’ve found that I’ve started to do differently though is my usage of services over factories.
Recently, long time pair programmer and code reviewer, Ryan Martinsen came across some of my code and wondered what the hell I was doing. See, in John’s guide, he relies heavily on the Revealing Module Pattern (RMP) in order to define his factories. But since I switched to using services, I brought the RMP over with me. I define all my public service methods up top and then create them as named functions below. After describing what had happened, the response from Ryan was a “Oh, ok then.” which in my book is a MAJOR win!
Here’s an example of a RMP service:
| angular.module('blogpost.service',[]) | |
| .service('BlogpostService',BlogpostService); | |
| function BlogpostSerivce(){ | |
| var service = this; | |
| service.getBlogs = getBlogs; | |
| service.createBlog = createBlog; | |
| service.getBlogName = getBlogName; | |
| ////////// | |
| var blogName = 'Test Blog'; | |
| var blogs = ['blog1', 'blog 2', 'blog3']; | |
| function getBlogs(){ | |
| return blogs | |
| } | |
| function createBlog(blogObject){ | |
| blogs.push(blogObject); | |
| } | |
| function getBlogName(){ | |
| return blogName; | |
| } | |
| } |
Adam Weeks 