22 |
--------------------------------------------------------------------------------
/test/unit/lib/main.no_ngload.js:
--------------------------------------------------------------------------------
1 | /*jslint browser: true, node: true, nomen: true */
2 |
3 | require.config({
4 | // The baseUrl depends on what is defined in karma.unit.js:basePath
5 | baseUrl: "/base",
6 |
7 | // alias libraries paths
8 | paths: {
9 | 'angular': 'bower_components/angular/angular',
10 | 'angular-mocks': 'bower_components/angular-mocks/angular-mocks',
11 | 'angularAMD': 'src/angularAMD',
12 | 'ngload': 'src/ngload',
13 | 'app_no_ngload': 'test/unit/lib/app_no_ngload'
14 | },
15 |
16 | shim: {
17 | 'angularAMD': ['angular']
18 | },
19 |
20 | // controllerSpec is at the end of dependency tree so kicking it off will start entire test
21 | deps: ['test/unit/app_no_ngload.spec'],
22 |
23 | // start test run, once Require.js is done
24 | callback: window.__karma__.start
25 | });
26 |
--------------------------------------------------------------------------------
/www/js/scripts/directive/navMenu.js:
--------------------------------------------------------------------------------
1 | /*jslint node: true */
2 | /*global define */
3 | define(['app'], function (app) {
4 | app.controller("navMenuController", function ($scope, $route, SiteName, $window, $location) {
5 | var tab_name = $route.current.navTab,
6 | ga_path = SiteName + $location.path();
7 |
8 | $scope.isTabActive = function (tabName) {
9 | if (tabName === tab_name) {
10 | return "active";
11 | }
12 | };
13 |
14 | //console.log("Sending to GA: " + ga_path);
15 | $window._gaq.push(['_trackPageview', ga_path]);
16 |
17 | });
18 |
19 | app.directive('navMenu', function () {
20 | return {
21 | restrict: 'A',
22 | controller: 'navMenuController',
23 | templateUrl: 'js/scripts/directive/templates/navMenu.html'
24 | };
25 | });
26 | });
27 |
--------------------------------------------------------------------------------
/www/js/main.js:
--------------------------------------------------------------------------------
1 | require.config({
2 |
3 | baseUrl: "js/scripts",
4 |
5 | // alias libraries paths
6 | paths: {
7 | 'angular': '../lib/angular/angular',
8 | 'angular-route': '../lib/angular/angular-route',
9 | 'async': '../lib/requirejs/async',
10 | 'angularAMD': '../lib/requirejs/angularAMD',
11 | 'ngload': '../lib/requirejs/ngload',
12 | 'ui-bootstrap': '../lib/angular-ui-bootstrap/ui-bootstrap-tpls',
13 | 'prettify': '../lib/google-code-prettify/prettify',
14 |
15 | 'HomeController': 'controller/home_ctrl',
16 | 'MapController': 'controller/map_ctrl',
17 | 'ModulesController': 'controller/modules_ctrl'
18 | },
19 |
20 | // Add angular modules that does not support AMD out of the box, put it in a shim
21 | shim: {
22 | 'angularAMD': ['angular'],
23 | 'angular-route': ['angular']
24 | },
25 |
26 | // kick start application
27 | deps: ['app']
28 | });
29 |
--------------------------------------------------------------------------------
/www/js/scripts/directive/write.js:
--------------------------------------------------------------------------------
1 | // customDirectives
2 | define(['app'], function (app) {
3 | app.directive('ngWrite', function ($timeout, $log) {
4 | return {
5 | restrict: 'A',
6 | //require: "^ngController",
7 | link: function (scope, elm, attr) {
8 | // Attempt to read the attribe from scope. If not found, return what's pass to directive
9 | if (scope[attr.ngWrite]) {
10 | // ngWrite is found in scope. Check if promised has been returned
11 | var inval = scope[attr.ngWrite];
12 | if ('then' in inval) {
13 | inval.then(function (data) {
14 | elm.text(data);
15 | });
16 | } else {
17 | elm.text(inval);
18 | }
19 | } else {
20 | elm.text(attr.ngWrite);
21 | }
22 | }
23 | };
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/test/unit/factory/utestModule.js:
--------------------------------------------------------------------------------
1 | define(['angularAMD', 'test/unit/factory/utestProvider'], function (angularAMD, utestProvider) {
2 |
3 | return function (result) {
4 | var inject = angularAMD.inject;
5 |
6 | utestProvider(result);
7 |
8 | /*
9 | There is a problem with having a describe outside of utestProvider
10 | If there is an error, it will always use the title of the last
11 | test in the `utestProvider`
12 | */
13 | describe("Utest " + result.suffix + " Modules", function () {
14 | it(".config check.", inject([result.UtestStoreResult, function (UtestStoreResult) {
15 | if (UtestStoreResult === "undefined") {
16 | console.log("### ERROR on " + result.suffix + ": ", result.config_name);
17 | }
18 | expect(UtestStoreResult).toBe(result.config_name);
19 | }]));
20 |
21 | it(".run check.", inject(function ($rootScope) {
22 | expect($rootScope.run_name).toBe(result.run_name);
23 | }));
24 | });
25 |
26 |
27 |
28 | };
29 |
30 | });
--------------------------------------------------------------------------------
/www/views/map.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Third party Javascript API such as
5 | Google Maps API can be setup for on-demand loading using
6 | async.js
7 | RequireJS plugin as demonstrated in wrapper.
8 |
9 |
10 |
11 |
12 |
13 |
14 | {{title}}
15 | Move the marker to update latitude and logitude.
16 |
4 | Demonstrate how to create on-demand loaded components such as
5 | and .
6 | Standard AngularJS module is supported
7 | via RequireJS plugin as used in
8 | . Notice that angularAMD
9 | is able to handle out of sequence calls of .factory and .constant in
10 | .
11 |
6 | AngularJS + RequireJS: The Proper and Easier Way
7 |
8 |
9 |
10 |
11 |
12 | Integrating AngularJS and RequireJS shouldn't be complicated, and it isn't with angularAMD.
13 | To see it in action, checkout this website that show case key features. Make sure to
14 | load your favorite Developer Tools to see the on-demand loading of *.js files
15 | as you switch tabs.
16 |
17 |
18 |
19 |
20 |
A quick AngularJS + RequireJS how-to using angularAMD:
21 |
22 |
Step 1:
23 | Define components and dependencies in main.js:
24 |
25 |