How can I ensure AngularJS is run on my HTML and that a module is loaded?

Question

How can I ensure AngularJS is run on my HTML and that a module is loaded?

I asked a question earlier about How to populate a select dropdow

When I tried to implement this:

<html lang="en" class="light" data-ng-app="test">
<body data-ng-controller="TestCtrl">
...

    <script type="text/javascript">
        $(document).ready(function () {
            angular.module('test', []).controller('TestCtrl', function ($scope, $http) {
                $scope.selectedTestAccount = null;
                $scope.testAccounts = [];

                $http({
                    method: 'GET',
                    url: '/Admin/GetTestAccounts',
                    data: { applicationId: 3 }
                }).success(function (result) {
                    $scope.testAccounts = result;
                });
            });
        });
    </script>

But it's giving me an error in the Chrome Developer tools saying:

Uncaught Error: No module: test

I notice that the person who answered my post mentioned I would need to ensure Angular is run on my HTML and the module is loaded. Well I did include Angular in the script area but I still get the above message. Can anyone advise me what I might be doing wrong.

angularjs

Answer 1

When you put ngApp above the module declaration, obviously, angular tries to initiate the module before it is declared.

You have two options:

Put the module declaration to head, therefore it would be ready when ngApp directive tries to initialize.
Initialize your application manually using angular.bootstrap.

Initializing Manually:

angular.bootstrap(angular.element("body")[0], ["test"]);

Docs:
http://docs.angularjs.org/api/angular.bootstrap

Answer 2

Use a directive. Don't use jQuery in that way. This was my first (and main) error when started with angular from a strong jQuery background.

If you need to manipulate a dom element, in most cases, the right way is a directive

http://docs.angularjs.org/guide/directive