AngularJS displaying as plain text

Question

I am currently having trouble getting angular JS to display, and I'm not sure what I'm doing wrong as it only shows up as plain text in my browser and doesn't get the info passed from the app2.js.
I have all dependencies properly placed in the locations listed in my code, so I'm thinking that I may have made an error in my code?
My code is as follows.

<!DOCTYPE html>
<html ng-app="phonecatApp" lang="en">
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="PhoneCat">
    <!-- AngularUI Styles -->
    <link rel="stylesheet" href="Content/ui-bootstrap-csp.css" />

</head>


<p>Total number of phones: {{phones.length}}</p>

    <body ng-controller="PhoneListController">

        <ul>
            <li ng-repeat="phone in phones">
                <span>{{phone.name}}</span>
                <p>{{phone.snippet}}</p>
            </li>
        </ul>

    </body>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/app2.js"></script>
</html>

app2.js

// Define the `phonecatApp` module
var app = angular.module('phonecatApp', ['ui.bootstrap']);

// Define the `PhoneListController` controller on the `phonecatApp` module
phonecatApp.controller('PhoneListController', function PhoneListController($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.'
      }
    ];
});

your script tags does not have closing , <script src="scripts/angular.js"</script> , shouldn't it be <script src="scripts/angular.js"></script>..? or is that just a typo ..? — Sudhir Bastakoti
– Sudhir Bastakoti, Commented Jul 4, 2016 at 6:41
app2.js:5 Uncaught ReferenceError: phonecatApp is not defined — Auborey
– Auborey, Commented Jul 4, 2016 at 6:50
angular.js:13708 Error: [ng:areq] Argument 'PhoneListController' is not a function, got undefined errors.angularjs.org/1.5.7/ng/… at angular.js:68 at assertArg (angular.js:1885) at assertArgFn (angular.js:1895) at $controller (angular.js:10210) at setupControllers (angular.js:9331) at nodeLinkFn (angular.js:9116) at compositeLinkFn (angular.js:8510) at compositeLinkFn (angular.js:8513) at publicLinkFn (angular.js:8390) at angular.js:1756 — Auborey
– Auborey, Commented Jul 4, 2016 at 6:51

Sudhir Bastakoti · Accepted Answer · 2016-07-04 06:52:00Z

3

you defined your module as app :

var app = angular.module('phonecatApp', ['ui.bootstrap']);

and are defining you controller on phonecatApp module. So change to:

var phonecatApp = angular.module('phonecatApp', ['ui.bootstrap']);

answered Jul 4, 2016 at 6:52

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

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

Comments

SrinivasAppQube · Accepted Answer · 2016-07-04 07:02:19Z

0

naming problem with module check once. replace with the phonecatApp

answered Jul 4, 2016 at 7:02

SrinivasAppQube

3011 gold badge5 silver badges22 bronze badges

Comments

currarpickt · Accepted Answer · 2016-07-04 07:37:10Z

0

I think you have mistake in app2.js. You should replace phonecatApp.controller with app.controller. because you have declare var app=... so you should use app.controller. Hope it works!

edited Jul 4, 2016 at 7:37

currarpickt

2,3004 gold badges26 silver badges39 bronze badges

answered Jul 4, 2016 at 7:00

bios123

35 bronze badges

Collectives™ on Stack Overflow

AngularJS displaying as plain text

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related