CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
Justin
Justin

Reputation: 972

AngularJs Controller not linking to view

I can't understand why the text I type in my controller is not linking to the view.

I created two javascript files. app.js and MainController.js

I followed a tutorial from Codecademy to replicate a similar scenario but I'm probably missing something very rudimentary which I can't figure out for some reason.

Below are my files:

index.html

<!DOCTYPE html>
<html lang="en">

<body ng-app="myApp" ng-controller="MainController">
  <h1>{{title}}</h1>

  <scipt src="js/app.js"></scipt>

  <script src="js/controller/MainController.js"></script>
</body>

</html>

app.js

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

MainController.js

app.controller('MainController', ['$scope', function ($scope) {
    $scope.title = 'Hola!';
}]);

I think it could be to do with having my Main Controller in a separate file to the app.js file.

Upvotes: 1

Views: 1222

Answers (4)

oussamaLachiheb
oussamaLachiheb

Reputation: 51

I think that you're not loading Angular in your main page (index.html), so just add this line

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

Upvotes: 1

Jordy van Eijk
Jordy van Eijk

Reputation: 2766

You need to add Angular.js to you head.. Before you app.js I think angular is not loaded now.

index.html 

 <head>
   <title>{{title}}</title>
   <script data-require="[email protected]"    data-semver="1.5.0-rc.0"    src="https://code.angularjs.org/1.5.0-   rc.0/angular.js"></script>
   <link rel="stylesheet" href="style.css" />
   <script src="app.js"></script>
 </head>

 <body >
   <h1>{{title}}</h1>
   {{1+1}}
 </body>
</html>

app.js

(function() {
 angular.module('myApp', [])
   .controller('mainController', ['$scope', function($scope) {
     $scope.title = 'Hello world!';
   }]);
}())

NOTE: Do not declare a variable app as this is on global scope. which can be overwritten by something else always try to use a IFFE and add your controllers to your module and create other modules if you want to put services inside another file.

Upvotes: 0

Nijeesh
Nijeesh

Reputation: 847

In mainController

angular.module('myApp').controller(......

Upvotes: 0

paul trone
paul trone

Reputation: 702

you need to declare the app variable before referencing it in MainController.js

// MainController.js
var app = angular.module('myApp');

Upvotes: 0

Related Questions