How to use angular with require

Question

I am attempting to display a list of items using angular loaded via require.

I have two files

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test App</title>
    <script data-main="/Scripts/app/main" src="../Scripts/lib/require.js"></script>
</head>
<body ng-controller="AppCntrl">
    <ul>
        <li ng-repeat="phone in appCntrl.phones">
            {{phone.name}}
            <p>{{phone.snippet}}</p>
        </li>
    </ul>
</body>
</html>

and main.js

require.config({
    baseUrl: '/Scripts/',
    urlArgs: "bust=" + (new Date()).getTime(),
    paths: {
                 'angular': 'lib/angular/angular.min',
                 'angular-resource': 'lib/angular/angular-resource.min'
    },
    shim: {
                 'angular': { 'exports': 'angular' },
                 'angular-resource': { deps: ['angular'] }
    }
});

require(['angular', 'angular-resource'], function (angular) {
    var mainMod = angular.module('mainMod', ['ngResource']);
    mainMod.controller('AppCntrl'['$scope', function ($scope) {
        $scope.phones = [
          {
            'name': 'Nexus S',
            'snippet': 'Fast just got faster with Nexus S.'
          },
          {
            'name': 'Motorola XOOM™ with Wi-Fi',
            'snippet': 'The Next, Next Generation tablet.'
          },
          {
            'name': 'MOTOROLA XOOM™',
            'snippet': 'The Next, Next Generation tablet.'
          }
        ];
    }]);
    angular.bootstrap(document, ['mainMod']);
});

I am not getting any console errors. Just an empty page

UPDATE

I made an update and now getting Error[ng:areq] I think this is progress

UPDATE2

I am not getting error

Cannot call method '$$minErr' of undefined

UPDATE 3

Error: [ng:areq]

Missing comma after 'AppCntrl'.

Stewie
– Stewie

2013-11-22 09:53:53 +00:00
Commented Nov 22, 2013 at 9:53 — Stewie
– Stewie, Commented Nov 22, 2013 at 9:53

Rob · Accepted Answer · 2013-11-22 16:14:22Z

1

I'm not sure why you are requiring angular-resource, it seems to be unneeded. Angular-route is required if you are using 1.2.0. And "appCntrl.phones" should just be "phones".

Plunker

answered Nov 22, 2013 at 16:14

Rob

2,7161 gold badge22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use angular with require

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related