How to work on MVC in AngularJS

Question

I am getting this error Argument 'MyController' is not a function, got undefined when I am trying to run code below.

<!DOCTYPE html>
<html lang="en" ng-app>

<head>
  <meta charset="utf-8" />
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <title>Hello world from Prateek</title>
</head>

<body>
  <div ng-controller="MyController">
    <h1>{{author.name}}</h1>
    <p>{{author.title + ', ' + author.company}}</p>
  </div>
  <script>
    function MyController($scope) {
      $scope.author = {
        'name': 'J Doe',
        'title': 'Designer',
        'company': 'ABC XYZ'
      }
    }
  </script>
</body>

</html>

I want to get the name, title and company to be displayed, instead I am getting output as below

{{author.name}} {{author.title + ', ' + author.company}}

The global function controller syntax isn't available in newer versions of Angular (1.3+). — m59
– m59, Commented Aug 23, 2015 at 16:01
You don't need a workaround. Just use Angular the proper way. docs.angularjs.org/guide/controller — m59
– m59, Commented Aug 23, 2015 at 16:04

cubbuk · Accepted Answer · 2015-08-23 16:03:45Z

2

You haven't defined any angular application in your javascript. You can define your controller using created module. Then you can access your controller from your views. Here is an example:

<!DOCTYPE html>
<html lang="en" ng-app ="myApp">

<head>
  <meta charset="utf-8" />
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <title>Hello world from Prateek</title>
</head>

<body>
  <div ng-controller="MyController">
    <h1>{{author.name}}</h1>
    <p>{{author.title + ', ' + author.company}}</p>
  </div>
  <script>
    var myApp = angular.module("myApp", []); // definition of a module, you use myApp in ng-app directive in the html part so that angularJS initialize itself.
    myApp.controller("MyController", function ($scope) {
      $scope.author = {
        'name': 'J Doe',
        'title': 'Designer',
        'company': 'ABC XYZ'
      }
    });
  </script>
</body>

</html>

answered Aug 23, 2015 at 16:03

cubbuk

7,9284 gold badges39 silver badges64 bronze badges

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

4 Comments

Prateek Singla Over a year ago

That works great, but if I put the javascript into separate controllers.js, I am not able to see the output once again.

cubbuk Over a year ago

Did you include your new javascript in your html using <script> tag

Prateek Singla Over a year ago

Nopes, no tags. It looks like this could be a positioning problem, where to put the script tag when using controllers.js

cubbuk Over a year ago

You can put it at the end of <body> tag. If your controllers.js is at the same level with your index.html following will work <script src="controllers.js"></script>

Shaishab Roy · Accepted Answer · 2015-08-23 16:10:40Z

2

you should create module first then create controller like:

var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
    $scope.author = {
        'name': 'J Doe',
        'title': 'Designer',
        'company': 'ABC XYZ'
      }
});

and in your html you should use ng-app="module-name" like:

<html lang="en" ng-app="myApp">

answered Aug 23, 2015 at 16:10

Shaishab Roy

16.9k7 gold badges56 silver badges69 bronze badges

Collectives™ on Stack Overflow

How to work on MVC in AngularJS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related