Gui B.L Software Engineering-Code and posts about tech and programming

Integrating angularjs and jquery with requirejs

18 June 2014

index.html

First of all, in your index page, you will have to load requireJS script and point it your main configuration file like:

<!--requireJS -->
<script data-main="js/main" src="lib/requirejs/require.js"></script>

after that its time to configure requireJS to load your JS modules.

main.js

In your main.js file you will configure require and also wrap all non requirejs compatible modules into shims:

require.config({

    baseUrl: 'js/',

<span class="na">paths</span><span class="p">:</span> <span class="p">{</span>
            <span class="na">jquery</span><span class="p">:</span> <span class="s1">'../lib/plugins/jquery/jquery'</span><span class="p">,</span>
    <span class="na">angular</span><span class="p">:</span> <span class="s1">'../lib/components/angular/angular'</span><span class="p">,</span>
    <span class="na">angularAnimate</span><span class="p">:</span> <span class="s1">'../lib/components/angular-animate/angular-animate'</span><span class="p">,</span>
    <span class="na">angularCookies</span><span class="p">:</span> <span class="s1">'../lib/components/angular-cookies/angular-cookies'</span><span class="p">,</span>
    <span class="na">angularMocks</span><span class="p">:</span> <span class="s1">'../lib/components/angular-mocks/angular-mocks'</span><span class="p">,</span>
    <span class="na">angularResource</span><span class="p">:</span> <span class="s1">'../lib/components/angular-resource/angular-resource'</span><span class="p">,</span>   
    <span class="na">angularRoute</span><span class="p">:</span> <span class="s1">'../lib/components/angular-route/angular-route'</span><span class="p">,</span>
    <span class="na">angularScenario</span><span class="p">:</span> <span class="s1">'../lib/components/angular-scenario/angular-scenario'</span>
<span class="p">},</span>   

<span class="na">shim</span><span class="p">:</span> <span class="p">{</span>
    <span class="s1">'jquery'</span><span class="p">:</span> <span class="p">{</span><span class="s1">'exports'</span><span class="p">:</span> <span class="s1">'jquery'</span><span class="p">},</span>
    <span class="s1">'myApp'</span> <span class="p">:</span> <span class="p">{</span><span class="na">deps</span><span class="p">:[</span><span class="s1">'jquery'</span> <span class="p">]},</span>

    <span class="s1">'angular'</span><span class="p">:</span> <span class="p">{</span>
        <span class="s1">'deps'</span><span class="p">:</span> <span class="p">[</span><span class="s1">'jquery'</span><span class="p">],</span>
        <span class="s1">'exports'</span><span class="p">:</span> <span class="s1">'angular'</span>
    <span class="p">},</span>
    <span class="s1">'angularResource'</span><span class="p">:</span> <span class="p">{</span>
        <span class="s1">'deps'</span><span class="p">:</span> <span class="p">[</span><span class="s1">'angular'</span><span class="p">],</span>
        <span class="na">exports</span><span class="p">:</span> <span class="s1">'angularResource'</span>
    <span class="p">},</span>
    <span class="s1">'angularRoute'</span><span class="p">:{</span>
        <span class="s1">'deps'</span><span class="p">:</span> <span class="p">[</span><span class="s1">'angular'</span><span class="p">]</span>
    <span class="p">},</span>
    <span class="s1">'angularAnimate'</span><span class="p">:</span> <span class="p">{</span>
        <span class="s1">'deps'</span><span class="p">:</span> <span class="p">[</span><span class="s1">'angular'</span><span class="p">]</span>
    <span class="p">},</span>
    <span class="s1">'angularCookies'</span><span class="p">:{</span>
        <span class="s1">'deps'</span><span class="p">:</span> <span class="p">[</span><span class="s1">'angular'</span><span class="p">]</span>
    <span class="p">},</span>          
<span class="s1">'angularMocks'</span><span class="p">:</span> <span class="p">{</span>
    <span class="na">deps</span><span class="p">:[</span><span class="s1">'angular'</span><span class="p">]</span>
<span class="p">},</span>
<span class="s1">'angularScenario'</span><span class="p">:</span> <span class="p">{</span>
    <span class="na">deps</span><span class="p">:[</span><span class="s1">'angular'</span><span class="p">]</span>
<span class="p">},</span>   
<span class="na">priority</span><span class="p">:</span> <span class="p">[</span>
    <span class="s1">'angular'</span>
<span class="p">]</span>


});

/
 this block of code is necessary in order to defer angular's bootstrap phase.
/
//http://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap
window.name = 'NG_DEFER_BOOTSTRAP!';

require( [
    'angular',
    'app',
    'routes',
    'myApp'
], function(angular, app, routes, myApp) {
    'use strict';
    var $html = angular.element(document.getElementsByTagName('html')[0]);

<span class="nx">angular</span><span class="p">.</span><span class="nx">element</span><span class="p">().</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">angular</span><span class="p">.</span><span class="nx">resumeBootstrap</span><span class="p">([</span><span class="nx">app</span><span class="p">[</span><span class="s1">'name'</span><span class="p">]]);</span>
<span class="p">});</span>


});

With the above configuration angular will resume the bootstrap process in the right moment.

app.js

you should have a file called app.js that will initialize your angular app module:

define([
    'angular',
    'filters',
    'services',
    'directives',
    'controllers',
    'animations',
    'angularRoute',
    'angularCookies',
    'angularAnimate'  

    ], function (angular) {
        'use strict';

    <span class="k">return</span> <span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">'myApp'</span><span class="p">,</span> <span class="p">[</span>
        <span class="s1">'ngRoute'</span><span class="p">,</span>
        <span class="s1">'ngCookies'</span><span class="p">,</span>
        <span class="s1">'ngAnimate'</span><span class="p">,</span>
        <span class="s1">'myApp.services'</span><span class="p">,</span>
        <span class="s1">'myApp.directives'</span><span class="p">,</span>
        <span class="s1">'myApp.filters'</span><span class="p">,</span>
        <span class="s1">'myApp.controllers'</span><span class="p">,</span>
        <span class="s1">'myApp.animations'</span>
    <span class="p">]);</span>


});

These files follow the normal angularJS app structure with routes, controllers, directives, services and filters:

services.js

define(['angular', 'angularResource'], function (angular) {
    'use strict';

    <span class="cm">/* Services */</span>
<span class="kd">var</span> <span class="nx">appServices</span> <span class="o">=</span> <span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">'myApp.services'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'ngResource'</span><span class="p">]);</span>

<span class="nx">appServices</span><span class="p">.</span><span class="nx">factory</span><span class="p">(</span><span class="s1">'UserService'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'$resource'</span><span class="p">,</span>
      <span class="kd">function</span><span class="p">(</span><span class="nx">$resource</span><span class="p">){</span>
    <span class="k">return</span> <span class="nx">$resource</span><span class="p">(</span><span class="s1">'/appPortal/rest/user/:id'</span><span class="p">,</span> 
            <span class="p">{</span> <span class="na">id</span><span class="p">:</span> <span class="s2">"@id"</span><span class="p">}</span>
    <span class="p">);</span>
  <span class="p">}]);</span>

<span class="nx">appServices</span><span class="p">.</span><span class="nx">factory</span><span class="p">(</span><span class="s1">'ProductService'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'$resource'</span><span class="p">,</span>
  <span class="kd">function</span><span class="p">(</span><span class="nx">$resource</span><span class="p">){</span>    
    <span class="k">return</span> <span class="nx">$resource</span><span class="p">(</span><span class="s1">'/appPortal/rest/product/:id:query:catid'</span><span class="p">,</span>
            <span class="p">{</span>
            <span class="na">id</span><span class="p">:</span> <span class="s2">"@id"</span><span class="p">,</span>            
            <span class="na">catid</span><span class="p">:</span> <span class="s2">"@catid"</span><span class="p">,</span>          
            <span class="na">query</span><span class="p">:</span> <span class="s2">"@query"</span>
            <span class="p">}</span>
    <span class="p">);</span>
  <span class="p">}]);</span>   


<span class="nx">appServices</span><span class="p">.</span><span class="nx">factory</span><span class="p">(</span><span class="s1">'ProductCategoryService'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'$resource'</span><span class="p">,</span>
  <span class="kd">function</span><span class="p">(</span><span class="nx">$resource</span><span class="p">){</span>    
    <span class="k">return</span> <span class="nx">$resource</span><span class="p">(</span><span class="s1">'/appPortal/rest/category/:id:query'</span><span class="p">,</span> 
            <span class="p">{</span>
                <span class="na">id</span><span class="p">:</span> <span class="s2">"@id"</span><span class="p">,</span>            
                <span class="na">query</span><span class="p">:</span> <span class="s2">"@query"</span>                  
            <span class="p">},</span>               
            <span class="p">{</span>
              <span class="s1">'querynode'</span><span class="p">:</span>  <span class="p">{</span> <span class="na">method</span><span class="p">:</span> <span class="s2">"GET"</span><span class="p">,</span> <span class="na">params</span><span class="p">:</span> <span class="p">{</span><span class="na">query</span><span class="p">:</span> <span class="s1">'node'</span><span class="p">},</span> <span class="na">isArray</span><span class="p">:</span> <span class="kc">true</span> <span class="p">}</span>
            <span class="p">}</span>
    <span class="p">);</span>
  <span class="p">}]);</span>

<span class="k">return</span> <span class="nx">appServices</span><span class="p">;</span>


});

controllers.js

define(['angular', 'services'], function (angular) {
    'use strict';

<span class="cm">/* Controllers */</span>
<span class="kd">var</span> <span class="nx">appControllers</span> <span class="o">=</span> <span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">'myApp.controllers'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'myApp.services'</span><span class="p">]);</span>

<span class="nx">appControllers</span><span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">'UserController'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'$scope'</span><span class="p">,</span> <span class="s1">'$routeParams'</span><span class="p">,</span> <span class="s1">'UserService'</span><span class="p">,</span>
  <span class="kd">function</span><span class="p">(</span><span class="nx">$scope</span><span class="p">,</span> <span class="nx">$routeParams</span><span class="p">,</span> <span class="nx">UserService</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">$scope</span><span class="p">.</span><span class="nx">user</span> <span class="o">=</span> <span class="nx">UserService</span><span class="p">.</span><span class="nx">get</span><span class="p">({</span><span class="na">id</span><span class="p">:</span> <span class="nx">$routeParams</span><span class="p">.</span><span class="nx">id</span><span class="p">});</span>
  <span class="p">}]);</span>

<span class="nx">appControllers</span><span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">'ProductListController'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'$scope'</span><span class="p">,</span> <span class="s1">'ProductService'</span><span class="p">,</span>
  <span class="kd">function</span><span class="p">(</span><span class="nx">$scope</span><span class="p">,</span> <span class="nx">ProductService</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">$scope</span><span class="p">.</span><span class="nx">products</span> <span class="o">=</span> <span class="nx">ProductService</span><span class="p">.</span><span class="nx">query</span><span class="p">();</span>
    <span class="nx">$scope</span><span class="p">.</span><span class="nx">orderProp</span> <span class="o">=</span> <span class="s1">'introductionDate'</span><span class="p">;</span>
  <span class="p">}]);</span>

<span class="k">return</span> <span class="nx">appControllers</span><span class="p">;</span>


});

directives.js

define(['angular', 'services'], function(angular, services) {
    'use strict';

    <span class="cm">/* Directives */</span>
<span class="kd">var</span> <span class="nx">appDirectives</span> <span class="o">=</span> <span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">'myApp.directives'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'myApp.services'</span><span class="p">]);</span>

<span class="nx">appDirectives</span><span class="p">.</span><span class="nx">directive</span><span class="p">(</span><span class="s1">'prodThumbnail'</span><span class="p">,</span> <span class="p">[</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">{</span>
      <span class="na">restrict</span><span class="p">:</span> <span class="s1">'E'</span><span class="p">,</span>
      <span class="na">scope</span><span class="p">:</span> <span class="p">{</span>
        <span class="na">product</span><span class="p">:</span> <span class="s1">'='</span>
      <span class="p">},</span>
      <span class="na">templateUrl</span><span class="p">:</span> <span class="s1">'partials/template/product_thumbnail.html'</span>
    <span class="p">};</span>
<span class="p">}]);</span>

<span class="nx">appDirectives</span><span class="p">.</span><span class="nx">directive</span><span class="p">(</span><span class="s1">'appVersion'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'version'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">version</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">return</span> <span class="kd">function</span><span class="p">(</span><span class="nx">scope</span><span class="p">,</span> <span class="nx">elm</span><span class="p">,</span> <span class="nx">attrs</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">elm</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="nx">version</span><span class="p">);</span>
      <span class="p">};</span>
<span class="p">}]);</span>

<span class="k">return</span> <span class="nx">appDirectives</span><span class="p">;</span>


});

Then your HTML pages could contain code to invoke the directives:

        <li ng-repeat="product in products" >        

            <prod-thumbnail product="product">
            </prod-thumbnail>       

        </li>

With the above configuration your web application can benefit from the modularity that requirejs provides and the cleanness and organization that angularjs provides, together which jquery and make them both a great choice to use for a modern frontend web application.