NG-Form To The Rescue

A project I’m currently work on (for a very popular apparel company) is employing AngularJS for their site. I’ve created some directives to handle collecting addresses for billing and shipping. Reusable directives with their own isolate scope. To add more awesome to the mix, I’m using ngMessage to show various error messages with the form. This all works great, but the problem was showing the error messages correctly when there are two forms on the page.

The MEAN Stack

Maybe you’re familiar with the LAMP stack? Linux, Apache, MySql, PHP. That’s been a pretty common way to serve websites for many years (circa 1998?). But things have changed, technologies have changed, and it’s not 1998 anymore. IE6 is dead, nested tables are dead, and the LAMP stack is the Old and Busted. The New Hotness is the MEAN stack, MongoDB, ExpressJS, AngularJS, and NodeJS. This new stack of technologies is what many new web apps are using these days.

Getting Jenkins ready for Node.js and AngularJS testing

Setting up Jenkins for Node.js + Mocha testing and such Install this stuff Node.js via Nave git clone* ./bin/ usemain v.0.8.9 Mocha npm install -g mocha ChaiJS npm install -g chai xunit-file (Mocha custom report for Jenkins) npm install -g xunit-file Jshint npm install -g jshint Nock npm install -g nock Supertest npm install -g supertest Testacular npm install -g testacular PhantomJS npm install -g phantomjs Here is a handy script that will install v0.

Using Testacular with Jenkins for AngularJS e2e Testing

Rollcall! AngularJS in your code ✓ Jenkins ✓ Node.js is installed on the Jenkins server? ✓ Testacular is installed on the Jenkins server ✓* PhantomJS is installed on the Jenkins server ✓ If that’s what you’re using, this is how I set up testing on the Jenkins server. Create a new job in Jenkins Pull from Git (or whatever), Trigger how you want too. That’s not germane to this article.

Getting AngularJS and Zend Framework POST to play nice

I was simply posting data to the server using this code $scope.submit = function() { console.log($scope.newTitle + ' is the new title'); $http({ url: '/api/idea/method/add', method: 'POST', data: { title: $scope.newTitle, description: $scope.newDescription }, headers: {'Content-Type': 'application/x-www-form-urlencoded'} }) .success(function(data, status) { }) .error(function(data, status) { }); }; But I was getting a JSON object submitted and therefore using Zend’s _getParam('title') could not pick up the title in the post. The answer was to use jQuery’s $.