Category Archives: angular

Angular and require.js

The combination of Angular, jquery and require.js are extremely powerful. Here is an example
template illustrating them all used together. 

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Template page<    itle>

<!-- Include jQuery and jQuery UI -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<!-- End of jQuery -->

<!-- AMD -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>
<!-- End of AMD -->

<script>
    require.config({
        baseUrl : "src",
        paths : {
            "jquery" : "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min",
            "jquery-ui" : "http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min",
            "angular" : "http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular"
        },
        shim : {
            "jquery-ui" : {
                deps : [ "jquery" ],
                exports : 'jQueryUI'
            },
            "angular" : {
                exports : "angular"
            }
        }
    // End of shims
    });
    require([ "jquery", "angular", "jquery-ui" ], function($, angular) {
        var module = angular.module("myApp", []);
        // more here
        angular.bootstrap(document, ["myApp"]);
    }); // End of require
</script>
<!-- End AMD -->
</head>
<body>
    <h1>Test Page</h1>
</body>
</html>