AngularJs and ng-controller

Question

I have just started learning AngularJS but I am stuck at this point. I made three files in one project:

1.Index.html
2.Angular.min.js( downloaded from official site)
3.Script.js

But when I am opening html in browser I am not getting the value of test property. It just shows the {{test}} (not the value). Will be very thankful if you help me out.

 <!DOCTYPE html>
    <html lang="en" ng-app = "myapp">
    <head>
       <meta charset="UTF-8">
       <title>Document</title>
    </head>
    <body  ng-controller = "MyCtrl">
           {{test}}
           <script src = "angular.min.js"</script>
           <script src = "script.js"></script>
    </body>
    </html>***

Script.js file is

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

app.controller('MyCtrl', ['$scope', function($scope){
    $scope.test = "Welcome to my world";

}]);

I don't see any problem with code. Make sure the javascript files are being loaded correctly. — Guranjan Singh
– Guranjan Singh, Commented Aug 16, 2016 at 1:06
Check the developer tools (F12 in Chrome, Firefox and Opera) and see if the console displays any errors, because your code doesn't have any. — Skaparate
– Skaparate, Commented Aug 16, 2016 at 1:12
@Skaparate: console showing this error Uncaught Error: [$injector:modulerr], — Gagandeep Singh
– Gagandeep Singh, Commented Aug 17, 2016 at 1:55
@GagandeepSingh I'm certain the problem is with loading of the library. here is a plunker with the same code. Only difference is I'm loading the angular library from the google CDN and it works. Also, as mentioned in the answer you were missing > from the script tag where you include the library. That will cause it to break as well. — Guranjan Singh
– Guranjan Singh, Commented Aug 17, 2016 at 16:51

shaunhusain · Accepted Answer · 2016-08-16 01:27:14Z

2

Check the network tab be sure angular itself is actually loading copying and pasting your code into a running sample.

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

app.controller('MyCtrl', ['$scope', function($scope){
    $scope.test = "Welcome to my world";

}]);

<!DOCTYPE html>
    <html lang="en" ng-app = "myapp">
    <head>
       <meta charset="UTF-8">
       <title>Document</title>
    </head>
    <body  ng-controller = "MyCtrl">
           {{test}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
           <!--
           you were missing a > here
           <script src = "angular.min.js"</script>
           <script src = "script.js"></script>
-->
    </body>
    </html>

answered Aug 16, 2016 at 1:27

shaunhusain

19.7k4 gold badges41 silver badges53 bronze badges

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

1 Comment

Gagandeep Singh Over a year ago

I did what you suggested, but no luck. Also, yes angular file has been loaded into my sample.

Collectives™ on Stack Overflow

AngularJs and ng-controller

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related