Category Archives: angularjs

Unit testing $scope.$on(‘$viewContentLoaded’) on an Angularjs Controller

TL;DR = call

$scope.$broadcast('$viewContentLoaded');

in your unit test. This will call your

$scope.$on('$viewContentLoaded', function () {}); 

method in your controller

If you have a Controller that has a method that is not fired until the view is loaded you will have a method similar to the following:

    $scope.$on('$viewContentLoaded', function () {
       SomeService.callMethod(params);
    });

The test case needs to wire in the $scope into your test like below

describe('when the campaign controller is initialized', function () {

 beforeEach( function() {
    $scope.$broadcast('$viewContentLoaded');
 } );

 it('should call the getAllCampaignTypes service call', function () {
     expect(mockedSomeService.callMethods).toHaveBeenCalledWith( ... );
 });

The Most important thing is the call to $scope.$broadcast(‘$viewContentLoaded’);

Yeoman grunt-ngmin to grunt-ng-annotate save massive time on your grunt build.

Background

If you have build your skeleton app from yeoman using the angularjs-generator and you created it before August 3rd 2014  you are running ngmin task.

Ngmin has been deprecated and you are told this every time you do an npm install on the project.

Git Issue that resolves this for new generated projects from yeoman

https://github.com/yeoman/generator-angular/issues/801

Why to migrate.

ng-min is deprecated so it is no longer supported.

ng-min is slow.  For a mature medium-sized angularjs app ng-min was taking 50 seconds of the build time.  Running with ng-annotate instead it now takes only 2 seconds to do the same thing.

Now the uglify task takes the most time of the build at 8 seconds against the 2 seconds needed for the ngannotate task.

A savings of 48 seconds a build.  

Built Machine spec:

OSX 10.9.5 with 3.2 GHz with 24 GB of ram.  No modifications have been made to the memory settings for grunt or node.

Continue reading

Angularjs Custom Form Validation

update: 9/9/14 added the ng-learn link which has  a flushed out example. If you are doing this you will need to change you test cases and include all the things like you were testing a directive.

If you want to set an input value to be invalid before submission then this is a good resource.

$scope.yourForm.nameOfElement.$setValidity( ‘reason’,  false );

E.G.: You want to add an error to your start date in a search form.

$scope.searchForm.startDate.$setValidity( ‘date’, false );

http://aleaiactaest.ch/2012/08/23/custom-form-validation-in-angular-js/

To see a more fully explained example please see:

http://ng-learn.org/2014/03/Writing_Custom_Validations_Part4/

Click the launch demo button.  Then click the script.js and the spec.js to see the full example.

IE8 Angularjs

I had a problem with IE8 compatibility mode going to document Mode: IE 7 standards. This caused my javascript to act funny and radio buttons not to work.
I was also getting the error pop up too:

https://docs.angularjs.org/api/ng/service/$sce

I found the following on stack overflow that is the key as my project is using Html5.
I have the in my project

http://stackoverflow.com/a/7685060/708860

Excerpt of what I did that worked.

Note the the [if] tag before the <!doctype html>

<!--[if HTML5]><![endif]-->
<!doctype html>
<!--[if the boilerplate conditionals goes here<![endif]-->
<head>
<!--[if !HTML5]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->

Spring security and Cors with angularjs

I used this as the basis of what I was doing with cors and angularjs.

Cors and Angularjs

I ran into the problem that I was also using Spring Security.

In my web.xml originally my cors filter was included after the spring security filter.

This stopped my filter from being called and returning the correct headers.

 

I corrected it by moving the cors filter above the security filter like below.

 

<filter>
        <filter-name>corsFilter</filter-name>
        <filter-class>com.myproject.config.CorsFilter</filter-class>
    </filter>

<filter>
        <filter-name>springSecurityFilterChain</filter-name>
        <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>corsFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <filter-mapping>
        <filter-name>springSecurityFilterChain</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

Stubbing out angularjs backends for testing via fixtures simplified.

Original Blog post this comes from.

http://michalostruszka.pl/blog/2013/05/27/easy-stubbing-out-http-in-angularjs-for-backend-less-frontend-development/

 Previous Usage

I have been using the other solution that the article describes to create a fixtures service for testing purposes but that would mean including a grunt string substitution module to ensure I did not include it in the production app.

What I liked about the new style of doing things

Using the way from the blog you can stop changing your ng-app in your index.html file and just use ?nobackend on your urls to hit the fixtures service.

My Changes to make it more useful.

Changes to index.html to ensure it is not included in production

I have made a change to my index.html file to ensure it is not packaged when you run grunt build to get the minimised files.

The below tells the build task to exclude these files.

You have to add your angular-mocks to the app else it will not be able to hook into the $httpbackend for stubbing.

<!-- build:remove -->
  <!-- Local stubbing service for development -->
  <script src="bower_components/angular-mocks/angular-mocks.js"></script>
  <script src="scripts/mock/httpBackendStub.js"></script>
<!-- endbuild --></p><p>

Modification to the solution to continue to serve html files from angular app

Here is the modification to the httpBackendStub.js to allow the angular app to still route to the html files without having to run a separate server as the blog describes.

 ......

.run(function($httpBackend) {
  $httpBackend.whenGET(/^views\//).passThrough();
  $httpBackend.whenGET( 

.......

Protractor test changes.

Make sure to update your protractor tests to use the new ?nobackend url and fix any test assertions.

Protractor Issues

This may cause problems with any relative url links.  I have not investigated enough to find a good solution for this.

Grunt Proxy setup for Yeoman 1.2

Purpose

I was wanting to keep my front end project separate from my backend.  This meant that the back end was on a different port than the yeoman server.  This causes cross site scripting issues with the yeoman server.  I figured out the only way around this was via a proxy.

I found this article from Mike Partridge from Jan 2014 which was a good starting point but the yeoman build has changed so this is no longer working.

http://www.hierax.org/2014/01/grunt-proxy-setup-for-yeoman.html

Tools used

  • grunt-cli v0.1.13

  • grunt v0.4.5

  • yeoman 1.2.0

  • grunt-connect-proxy 0.1.10

  • angular-generator 0.9.1

Change to instructions

The only change to the directions in the post from hierax is the following.   I just changed the things that are pushed into middleware.  Live reload no longer has a base [ ] block.

Step 3 should now look like:

livereload: {
 options: {
 open: true,
 middleware: function (connect) {
   // Setup the proxy
   var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest];

   middlewares.push(connect.static('.tmp'));

   middlewares.push(connect().use(
     '/bower_components',
     connect.static('./bower_components')
   ));
   middlewares.push(connect.static(appConfig.app));

   return middlewares;
 }
 }
 },