Tag 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’);

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>

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;
 }
 }
 },

Twitter Bootstrap grid system with Yeoman, Angular, and IE8

Versions Used

Bootstrap 3.1.1

Yeoman angular-generator 0.8

Problem

I ran into this testing the IE8 rendering of the twitter bootstrap and the grid system with my angularjs app generated by yeoman.

What getbootstrap.com has

On the bootstrap site they have a block that checks your version of IE and if it is below IE9 then includes respondJs.

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- [if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
   <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->

Include respond in your project

Install in project

bower install respond -S

Include in the html via grunt

grunt bowerInstall

Move include from the  block to a if IE is less than IE 9

<!--[if lt IE 9]><script src="bower_components/respond/dest/respond.src.js"></script><!--<![endif]-->

Notes

You will have to remove the respond from your index.html <!–bower:js> if you rerun the following

grunt bowerInstall