Adding ng-controller stops AngularJS

Question

With the below HTML AngularJS is invoked and the webpage prints "5" as the result of {{10/2}} in the "body".

<!DOCTYPE html>
<html ng-app>
<head>
    <title>AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
    <script src="script.js"></script>
</head>

<body>
    <h2>hello angular</h2>
    {{ 10/2 }}
</body>
</html>

When I add an ng-controller:

<!DOCTYPE html>
<html ng-app>
<head>
    <title>AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
    <script src="script.js"></script>
</head>

<body ng-controller="MainController">
    <h2>hello angular</h2>
    {{ 10/2 }}
</body>
</html>

with the script.js:

var MainController = function($scope){

    $scope.message = "Hello!"
}

AngularJS stops working and the webpage prints {{10/2}} instead of 5. What am I doing wrong here? Thanks.

Answer 1

In script.js , change

var MainController = function($scope){

    $scope.message = "Hello!"
}

to

app.controller('MainController', function($scope) {

  $scope.message = "Hello!"

});

Working Plunker

Adding ng-controller stops AngularJS

Question

1 answers

solution1
2 ACCPTED 2020-02-19 07:53:06

Adding ng-controller stops AngularJS

Question

1 answers

solution1 2 ACCPTED 2020-02-19 07:53:06

solution1
2 ACCPTED 2020-02-19 07:53:06