All geek questions in one place

Angular.js controller not working

I am new to Angular and I am watching Intro videos before Angular from the Angular website. My code doesn't work, and I have no idea why not. I get an error

Error: ng:areq
Bad Argument
Argument 'MainController' is not a function, got undefined

Here is my code.

<!DOCTYPE html>

<html lang="en" ng-app>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Angular Demo</title>
</head>
<body>
    <main ng-controller="MainController">
        <p>{{message}}</p>
    </main>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script>
        function MainController($scope) {
            $scope.message = "Controller Example";
        }
    </script>
</body>
</html>

What am I doing wrong?

+4
source share
5 answers

After angular version 1.3, declaring global controller function is disabled

You need to use a modular approach to make it work.

You must first define angular.module and then include angular components in it

Demo

angular.module('app', [])
    .controller('MainController', function ($scope) {
        $scope.message = "Controller Example";
    })

Then change ng-appto use this moduleng-app="app"

+4
source

. :

var app = angular.module('myApp',[]);
app.controller('MainController',MainController);
function MainController($scope) {
    $scope.message = "Controller Example";
}

, myApp html :

<html lang="en" ng-app="myApp">
+2
function MainController($scope) {
  $scope.message = "Controller Example";
}

-

var app = angular.module('myApp', []);
myApp.controller('MainController', function($scope) {
  $scope.message = "Controller Example";
}

ng-app="myApp" html.

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

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Angular Demo</title>
   <script  src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

   <script>

    var app = angular.module("app",[])
    .controller('mainController', function($scope) {
      var vm = this;  
      vm.message = "Controller Example";
    })

    </script>
  </head>

  <body ng-controller="mainController as vm">
    <div >
      <p>{{vm.message}}</p>
    </div>
  </body>

</html>
+1

, ...

java script

// start angular module (app) definition
angular.module('myApp',[''])
 .controller('MainController', function($scope) {
 $scope.message = "Controller Example";
 });

HTML

<!DOCTYPE html>

<html lang="en" ng-app='myApp'>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Angular Demo</title>
</head>
<body>
    <main ng-controller="MainController">
        <p>{{message}}</p>
    </main>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>
</html>

.

http://campus.codeschool.com/courses/shaping-up-with-angular-js/

https://docs.angularjs.org/tutorial

0

Source: https://habr.com/ru/post/1606697/

More articles:


All Articles