It has definitely been a while since the last post — over a year now. Life’s been busy (moved to another state) and so has work, but I’ve been learning lots of new things to use in my day to day workflow and one of them is AngularJS.
Let me start off by saying Angular is awesome. I never thought I would get into a language that doesn’t make me think as I come from the camp of building a Backbone JS app from scratch just so I know what the code is doing. I was even hesitant on utilizing Bootstrap when it first came out to mock up quick layouts in CSS, but have fallen in love with the ease of that too. Maybe it’s because I am getting complacent as I get older and want things to be easier, not tougher.
Back to the original reason why I am starting this post. As mentioned, I have been baking in AngularJS to some of the web apps I have been developing lately. There is a ton of documentation out there on it, unlike EmberJS at the time when i was making a decision on which toolkit to use. Don’t get me wrong, Ember is probably great, and I love Handlebars, but the flux of the code base pre RC-1 was annoying. On the flip side, Angular documentation, while seemingly more abundant, tends to be conflicting as it too as a code base is still in semi-flux.
I was writing some simple form posting code utilizing Angular JS’s $http post methods and noticed in the logs, I was getting a double submission of parameters nested in the controller parameters sent through. This app was developed using Rails. I setup my Angular code just as the docs said for doing a post binding the form fields to specific models so I figured it was compliant and no other magic was happening.
1 | $http({ |
2 | method: 'POST', |
3 | url: '/myURL', |
4 | data: { |
5 | entry: $scope.entries |
6 | } |
7 | }).success().error(); |
Which ended up producing results like:
1 | front" => { |
2 | "entry" => { |
3 | "tourdate_id" => 2, |
4 | "first_name" => "Test", |
5 | "last_name" => "This", |
6 | "email" => "test@test.com", |
7 | "phone"=>"123-313-2311", |
8 | "zip_code"=>"12345" |
9 | } |
10 | } |
Come to find out, there is a little bit more that is needed to be added to the headers of the post request and also a parsing of the model params to tell Angular how to send over the params. Modifying the code to now be:
1 | $http({ |
2 | method: 'POST', |
3 | url: '/myURL', |
4 | data: $.param({entry: $scope.entries}), |
5 | headers: { |
6 | 'Content-Type': 'application/x-www-form-urlencoded' |
7 | } |
8 | }).success().error(); |
Produced the exact results I was looking for:
1 | "entry" => { |
2 | "tourdate_id" => 2, |
3 | "first_name" => "Test", |
4 | "last_name" => "This", |
5 | "email" => "test@test.com", |
6 | "phone" => "123-313-2311", |
7 | "zip_code"=>"12345" |
8 | } |
It’s a wonder why Angular does not have this directly baked in when you do a form post, but at least it was a simple enough change. The fact that I have to utilize jQuery code in it kind of muddies the water as I wanted this to be solely a pure Angular app without that other dependency, but this will do.