Vanilla AngularJs not loading up.

Question

I am new to Angularjs. Trying to make a basic application. Getting stuck.

I loaded the angularjs

<script type="text/javascript"
src="https://code.angularjs.org/1.4.8/angular.min.js"></script>

Created a simple table in HTML

<table ng-controller="CalculatorController">
    <thead>
        <tr>
            <th colspan="2">
                <h1>Calculator</h1>
            </th>
        </tr>
    </thead>
    <tr>
        <td>First number</td>
        <td><input ng-model="number1" type="number"></input></td>

    </tr>
    <tr>
        <td>Second number</td>
        <td><input ng-model="number2" type="number"></input></td>
    </tr>
    <tr>

        <td colspan='2'><input type="button" ng-click="sum()"
            value="Add"></input></td>
    </tr>
    <tr>
        <td>Result</td>
        <td>{{result}}</td>
    </tr>
</table>

And then added my angular module.

<script type="text/javascript">
    //Creates a new module called 'myApp'
    angular.module('myApp', []);

    // Load the app at document ready. 
    angular.element('document').ready(function() {
        angular.bootstrap(document, [ 'myApp' ]);
    });

While I have not yet added my controller, I expected the page to load up properly with this. However, I am getting the following error while loading this page on browser.

    Error: [jqLite:nosel] http://errors.angularjs.org/1.4.8/jqLite/nosel
Nangular.js:2737
(anonymous function)Calculator.html:47

Help please.

Answer 1

jQLite don't support selector based query(if jQuery is not included before AngularJS), basically it needs in DOM element. You should have document without '(quotes)

Code

angular.element(document).ready(function() {
    angular.bootstrap(document, [ 'myApp' ]);
});