Health to the Web

As a team we adopted John Papas Angularjs style guide at the end of 2014. The Anguarjs communities understanding of best practices for Angularjs use has come a long way is a short time. I can say now having adopted and used it that John Papas style guide is a good step forward. We've been developing with Angularjs since 2013 and over that time our Angularjs code base looks quite different style wise. It looks like it was written by many (talented) individuals for various reasons such as our use of best practices evolved. Ideally the codebase should look as if written by one person: easy to learn and understand other peoples code. So as a team we wanted to write better Angularjs code. We are also looking ahead to Angular 2.0. There are significant changes in that release and where possible we'd like to write code now that will make it easier to adopt Angular 2.0 in future. As a team we investigated various angularjs coding standards/style guides such as googles, codeless, ...

We used to include mock test data with our Karma test code. When you build up a large body of complex tests the test data setup can run to hundreds of lines. It can be hard to read and understand. Oftentimes the same data is needed across many unit test suites and is repeated. Our solution is to create a /mock-data folder and put into it js files with mock json data for common json objects used by our unit tests e.g. customer object. When we call an expectGET() then we return a copy of the mock data e.g.  $httpBackend.expectGET('/api/...../').respond(angular.copy(CUSTOMER_MOCK_DATA)); If you build your mock test data well you can cover multiple tests with one mock data definition. For test cases that need unique combinations I find that I just copy the mock data object and then tweak select properties as necessary in the test or within a block of tests. e.g.  var myDeCustomer = angular.copy(CUSTOMER_MOCK_DATA);         myDeCustomer.profile.locale...

Give me the answer now : switch Karma to run Firefox not Chrome More details Our team is building a pretty complex angularjs app. We write unit tests and run them using Karma. The unit tests are run on a file change watch and just run in the background. We have almost 2000 unit tests. Its all been working great until recently when the test run gets much slower after each run. Its now at a point that by the 3rd karma run, karma grounds to a halt i.e. 1 run 15 secs, 2nd run 30 secs, 3rd run 1min + I should not the app itself is not exhibiting significant memory issues (although profiling and tuning is needed) just the unit tests. Step 1 - find out whats happening with our Karma tests? Using google Chrome Task Manager, monitor the Karma browser tab. The monitor shows us memory and cpu (you can also right click and add more columns). This is a rough measure but we could see karma tab: - memory almost doubled each run 300mb, 600mb, 800mb. - cpu was maxing out after 3rd run S...

angularjs ui-router is pretty cool, we use it in our app now but have not yet used query string parameters (e.g. ?p1=age&p2=height). But now we need to. we're now adding a feature which is basically a report generator and its a good use case for query string parameters once on the page then you're basically in that ui-router "state" users can select filters etc. from dropdowns which will reload the data but should not destroy/recreate any controllers or ui widgets (we stay on the page and do not state transition) yet we do want to update the url for deep links and back button support we don't know the complete list of possible filter choices, but know it should be data driven and will change by report  urls to support this report feature are will be something like thus /reports  /reports/sales  /reports/sales?region=west&time=weeks so we need to use query string parameters Below are some of the things I discovered with ui-router query strin...

Anti-patterns are patterns you should not be implementing. There are already a number of guidelines such as use directives only for dom manipulation, use of modules etc. Here's my running list for angularjs of ones I also feel are important. I'm no saint when it comes to these, I've probably implemented all of them at one stage or another. Controllers doing too much (thin Controllers fat Services) In angularjs, its easy to make behavior available from Controllers by adding functions to scope. Need to delete someone from a list? easy add a method on scope and call the delete. Plus models in angularjs are often portrayed as simple plain old javascript objects. Again easy to put the model on scope as use as an ng-model on the page. Many examples and tutorials show this; partly as a shortcut just to illustrate something else but none the less people see it enough times and it can become in-grained Here's the problem with that. Your controllers can quickly contain ...

If you've used angularjs for any time then you'll have come across service, factory and provider and probably be confused (at least I was). Here's a good post about when and why to use each in stackoverflow, especially the answer by allenhwkin But how do we add prototype functions? Starting with allenhwkins code I created this plunkr which defines a CarFactory that sets a function on the prototype .service() and .factory() are application wide singletons I tested both variations of creating a service using .factory() vs .service() In both cases, I injected the Service into a controller (standard angular dependency injection) and set a value in the Service using a setter Then I inject into other controllers including separate pages and the value I previously set is still set for the Service injected For the standard way you code .factory() and .service(), both are truly application wide singletons. If you set a value its set in the singleton app wide no matter ...

Warning: if you need to set cookie expiration, httpSecure, path or subdomain then ngCookies doesn't support as of v1.2.7. I plan to use jquery-cookie.js which angular issues also reference, and there is a number of issues open related to this gap in $cookies. Angular js provides support for cookie manipulation in the core library file angular-cookies.js (v1.2.7). That file defines a module ngCookies with 2 factory services: - $cookies - $cookieStore For setting of a simple property on a cookie then $cookies is the factory to use. For setting js objects (key-value pairs) in the cookie then $cookieStore is what to use. To use:  1. include the angular-cookies.js file in yout html 2. include the module ngCookies as a module dependency where you wish to use 3. request $cookies or $cookieStore (or both) to be injected by the dependency injector Using $cookie.  With $cookie you can treat a cookie name as a property on $cookie.   var cookieValue = $cookies.coo...

Many from the protractor test suite category detailed task syntax example load page load a page browser.get('yoururl') browser btn actions browser back/forward browser.navigate().back() OR browser.navigate().forward() access elements on page See Protractor API list and examples from Protractors test suite access by angular ngmodel name (must match ngmodel in the html) this is the preferred approach element(by.model('person.name')); access by the css id on the page e.g, #user_name (but this can be brittle) element(by.id('user_name')) access angular binding to get generated value i.e. for {{}} element(by.binding('person.concatName')); access angular repeat list data (must match repeat stmt in the html) See Protractor test suit l...

Directives are often mentioned as one of the "3 Ds" of angular (the other 2 being Data Binding and Dependency Injection). So Directives are a very important part of angular. Yet at the same time, mention of Directives can cause even experienced angular developers to acquire a haunted look (think Frodo and the Dark Riders and you have the idea ;-) ) A classic case for a directive is creating a reusable element for displaying customer information. It's part of the angular directive tutorial docs  and what I implemented for our site since we need to display the same contact info in multiple places. Steps to create: create the directive js create the directive html partial (optional but if have html then make partial) add directive name to app list of dependencies include the js file create the test use in your app Attribute vs Element There are 4 ways to include directives but the most common are as attribute or element as defined by the restrict setting: ...