Simplest angularjs page not working

Question

I am watching a video to learn angularjs. I used CDN link for including angularJs

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"/>
    </head>
    <body ng-init="names=['shan', 'amit', 'vaibhav']">
        <ul>
            <li ng-repeat="pname in names">
            {{pname}}
            </li>
        </ul>
    </body>
</html>

I have no other file. That's the simplest piece of code I have and on browser I see blank page. What's wrong in this?

Voting to close as a typographical error; people are just spamming the same answer over and over — LittleBobbyTables - Au Revoir, Jun 04 '15 at 20:43

score 5 · Answer 1 · answered Jun 04 '15 at 20:34

5

Fix the script line:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

answered Jun 04 '15 at 20:34

jwatts1980

7,254
2
28
44

why this? I am using `/` – Shantanu Gupta Jun 04 '15 at 20:35
2

Cannot self close a script tag: http://stackoverflow.com/questions/69913/why-dont-self-closing-script-tags-work – jwatts1980 Jun 04 '15 at 20:35

tymeJV · Accepted Answer · 2015-06-04T20:36:53.937

5

Put an ng-app attribute on the html tag:

<html ng-app>

And close your script tag (it's not self-closing)

http://jsfiddle.net/g02ket0t/

edited Jun 04 '15 at 20:36

answered Jun 04 '15 at 20:34

tymeJV

103,943
14
161
157

curious to know, why `ng-app` is required? Is it something angularJs framework searches to initialize angularJs script? – Shantanu Gupta Jun 04 '15 at 20:41
@ShantanuGupta -- Yes, it's required to bootstrap the app – tymeJV Jun 04 '15 at 20:44
I don't understand why people keep posting duplicate answers even after looking that all of their points have been covered in one answer :(. I wish there could have been a way to close those answers. – Shantanu Gupta Jun 04 '15 at 20:47

score -2 · Answer 3 · answered Jun 04 '15 at 20:40

You can also use data-ng-, instead of ng-, if you want to make your page HTML valid.

<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
</script>
</head>
<body>
    <div data-ng-init="names=['shan', 'amit', 'vaibhav']">
        <ul>
            <li data-ng-repeat="pname in names">{{pname}}</li>
        </ul>
    </div>
</body>
</html>

score -2 · Answer 4 · answered Jun 04 '15 at 20:43

-2

You're missing the closing tag. Also add the ng-app attribute in the html tag to link to your app.

answered Jun 04 '15 at 20:43

Marco V

2,553
8
36
58

score -2 · Answer 5 · answered Jun 04 '15 at 20:43

Complete Script tag
Use ng-app attribute.

  <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    </head>
    <body ng-app ng-init="names=['shan', 'amit', 'vaibhav']">
        <ul>
            <li ng-repeat="pname in names">
            {{pname}}
            </li>
        </ul>
    </body>
</html>

Simplest angularjs page not working

5 Answers5