Auborey Auborey - 1 year ago 103
Javascript Question

AngularJS displaying as plain text

My code is as follows. 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. My code is as follows. I have all dependencies properly placed in the locations listed in my code, so I'm thinking I may have made an error in my code?

<!DOCTYPE html>
<html ng-app="phonecatApp" lang="en">
<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" />


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

<body ng-controller="PhoneListController">

<li ng-repeat="phone in phones">

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


// 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.'

Answer Source

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']);