Brent Nicolet Brent Nicolet - 4 months ago 7
AngularJS Question

Angular JS code is not working

I have no idea why when I do an AngularJS tutorial that it doesn't work in my browser. I'm new to AngularJS. Any insights would be great. I have 3 files.

index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>First Angular App</title>
<script src="angular.js"></script>
<script src="app.js"></script>
<script src="core.js"></script>
</head>
<body>
<div id="main_div" ng-app='my_ang_app' ng-controller='first_div'>
{{message}}
</div>
</body>
</html>


app.js:

var app = angular.module('my_ang_app', []);


core.js:

app.controller('first_div', function ($scope) {
$scope.message="Hello world from angular";
});


When I preview it in the browser it shows {{message}}

Answer

Check whether the javascript files you refered are loaded correctly and its always better if you refer them after loading the view. Something like below,

  <body>
    <div id="main_div" ng-app='my_ang_app' ng-controller='first_div'>
    {{message}}
    </div>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="core.js"></script>
    </body>

Here is the working App

Comments