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 |
19 | 20 |
A quick AngularJS + RequireJS how-to using angularAMD:
21 | 22 |Step 1:
23 | Define components and dependencies inmain.js:
24 |
25 | require.config({
26 | baseUrl: "js",
27 | paths: {
28 | 'angular': '.../angular.min',
29 | 'angular-route': '.../angular-route.min',
30 | 'angularAMD': '.../angularAMD.min'
31 | },
32 | shim: { 'angularAMD': ['angular'], 'angular-route': ['angular'] },
33 | deps: ['app']
34 | });
35 |
36 | and load RequireJS, and only RequireJS, in index.html:
37 |
38 | <head> 39 | <script data-main="js/main.js" src=".../require.js"></script> 40 | </head>41 | 42 |
Step 2:
43 | Createapp.js using RequireJS's define statement:
44 | define(['angularAMD', 'angular-route'], function (angularAMD) {
45 | var app = angular.module("webapp", ['ngRoute']);
46 | app.config(function ($routeProvider) {
47 | $routeProvider.when("/home", angularAMD.route({
48 | templateUrl: 'views/home.html', controller: 'HomeCtrl',
49 | controllerUrl: 'ctrl/home'
50 | }))
51 | });
52 | return angularAMD.bootstrap(app);
53 | });
54 |
55 | Step 3:
56 | Create controller usingapp.register method:
57 | define(['app'], function (app) {
58 | app.controller('HomeCtrl', function ($scope) {
59 | $scope.message = "Message from HomeCtrl";
60 | });
61 | });
62 |
63 | 64 | Check out this Gist 65 | for a simple implementation. Then, head over to github for detail documentation. 66 |
67 |