AngularJs - Use External controller.js

Question

Just started with Angular and trying to make this work.

I would like to display the name in the <p></p>, but it shows {{ name }}.

ASPX:

<html ng-app="myApp">
<head runat="server">
    <script src="Assets/Vendor/angularjs-v1.2.28.js"></script> 
    <script src="App/app.js"></script>  
    <script src="App/controllers.js"></script>

</head>
<body ng-controller="myCtrl">
<p>{{ name }}</p>
</body>
</html>

app.js:

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

controllers.js:

var controller = {};

controller.myCtrl = function ($scope) {
    $scope.name = "abcd";
}

EDIT: I have changed the order of loading the script files and updated this query. This is the error I see in console - Uncaught Error: [$injector:modulerr]

Did you press F12 (open developer console) to see what is going wrong? You're probably getting 'app' is not defined. My guess would be to invert the scripts controller.jsand app.js. — Highmastdon
– Highmastdon, Commented Jan 14, 2015 at 9:16
Like @hightmastdon says. Youre including the app and controller scripts in the wrong order — hammus
– hammus, Commented Jan 14, 2015 at 9:18

Highmastdon · Accepted Answer · 2015-01-14 09:22:30Z

4

You've not correctly put the order of the scripts. Rather put app.js in front of controller.js. Now you're getting the error: var app is not defined.

[Addition]
Furthermore, you're trying to inject myCtrl which is no object. So changing var controller to var myCtrl would probably work.

Better would be to use something as described here: https://docs.angularjs.org/guide/controller

app.controller('myCtrl', ['$scope', function($scope) {
  $scope.name = "abcd";
}]);

edited Jan 14, 2015 at 9:22

answered Jan 14, 2015 at 9:18

Highmastdon

7,5407 gold badges47 silver badges71 bronze badges

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

Comments

Davin Tryon · Accepted Answer · 2015-01-14 09:28:58Z

3

Few things here:

1 - myCtrl is not a dependent module. So, you don't need it when defining the myApp module:

angular.module('myApp',[]);

2 - Order of scripts, as described by @Highmastdon.

3 - When defining the controller, you can use the myApp module:

angular.module('myApp').controller('myCtrl', function($scope) {

    $scope.name = 'abcd';
});

edited Jan 14, 2015 at 9:28

answered Jan 14, 2015 at 9:21

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

8 Comments

Highmastdon Over a year ago

You could add the ['$scope', function($scope){}] in order to work with minification

sukesh Over a year ago

I guess step3 should go in app.js.right? What if i want to put it in controllers.js. How would it be then?

Davin Tryon Over a year ago

@Qwerty No, the app variable will be added to the global scope. So, it should be accessible as long as the controller.js file is loaded after app.js.

Highmastdon Over a year ago

@Qwerty no, that can be in controllers.js. As the page gets all scripts, they are available for use in one environment. Therefore when you load controllers.js after app.js, your app is already defined.

Highmastdon Over a year ago

I would not recommend this, because it creates a habit of putting everything in the same file, which is not conform the Single responsibility principle. In my opinion this also applies to files and their contents.

|

Collectives™ on Stack Overflow

AngularJs - Use External controller.js

2 Answers 2

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related