AngularJs Controller not linking to view

Question

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.

you have missed to add angular reference,,or isn't you added in question? you must have error in console,, — Pankaj Parkar
– Pankaj Parkar, Commented Feb 1, 2016 at 16:13

oussamaLachiheb · Accepted Answer · 2016-02-01 16:37:37Z

1

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>

answered Feb 1, 2016 at 16:37

oussamaLachiheb

511 silver badge5 bronze badges

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

1 Comment

Justin Over a year ago

This worked but i didn't realise that the position of this mattered - It seems I had to put this before i loaded the app.js file.

paul trone · Accepted Answer · 2016-02-01 15:59:40Z

0

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

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

answered Feb 1, 2016 at 15:59

paul trone

7025 silver badges10 bronze badges

Comments

Nijeesh · Accepted Answer · 2016-02-01 16:01:46Z

0

In mainController

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

answered Feb 1, 2016 at 16:01

Nijeesh

8477 silver badges11 bronze badges

Comments

Jordy van Eijk · Accepted Answer · 2016-02-01 16:12:39Z

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.

Collectives™ on Stack Overflow

AngularJs Controller not linking to view

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related