Angular JS - Angular file doesn't respond to html (AngularJs with Spring Boot)

Question

HTML

<div class="container" ng-controller="main" style="margin-top: 30px;">
    <div class="row">
        <div class="col-md-12">
            <p>{{firstName}}</p>
            <br>
            <p>{{lastName}}</p>
            <br>
            <button class="btn btn-primary" ng-click="showLog()">MyButton</button>
        </div>
    </div>
</div>


<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

main.js

angular.module('app').controller('main',
function ($scope, $http, $state, $sce, urls) {

$scope.firstName = 'John';
$scope.lastName = 'Doe';

$scope.showLog = function () {
    console.log("angular works");
}

});

I'm fairly new to AngularJS and am just trying to connect Angular File with Html. so far I created the showLog function but pressing it does nothing at all. I feel like ng-controller does nothing and {{firstName}} & {{lastName}} are showing just like that (meaning the 'John' 'Doe' don't get injected)

Also I have another question - If I'm loading the Angular file with <script type="text/javascript" src="js/main.js"></script> , Why do I need to specify ng-controller ? shouldn't this already work?

If you click on the link in the error message, it goes to a webpage that explains the error. Unknown provider: $stateProvider <- $state <- main. Providing text of the error message is more helpful than a picture. This error results from the $injector being unable to resolve a required dependency. — georgeawg
– georgeawg, Commented Mar 2, 2020 at 20:39

Bill P · Accepted Answer · 2020-03-02 19:41:58Z

1

app module is not registered correctly. You need to instantiate like this:

angular.module('app', [])

angular.module('app', []).controller('main',
function ($scope) {

$scope.firstName = 'John';
$scope.lastName = 'Doe';

$scope.showLog = function () {
    console.log("angular works");
}

});

In order to start the application , you need to use ng-app directive (https://docs.angularjs.org/api/ng/directive/ngApp):

<div class="container" ng-app="app" ng-controller="main" style="margin-top: 30px;">
    <div class="row">
        <div class="col-md-12">
            <p>{{firstName}}</p>
            <br>
            <p>{{lastName}}</p>
            <br>
            <button class="btn btn-primary" ng-click="showLog()">MyButton</button>
        </div>
    </div>
</div>

edited Mar 2, 2020 at 19:41

answered Mar 2, 2020 at 19:19

Bill P

3,61610 gold badges24 silver badges34 bronze badges

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

6 Comments

Shelo Over a year ago

ng-app directive doesn't show in directives list when I type it, and also if I add the directive console then shows : angular.min.js:7 Uncaught Error: [$injector:modulerr]

Bill P Over a year ago

ng-app is required to be placed into the html of your app. Without that, the controller will not be instantiated. That is the console error?

Shelo Over a year ago

I edited my question and added the image of the console

Shelo Over a year ago

It works, the only difference between our codes is that I have several unnecessary injections in my function() , removing everything except $scope & $http fixed the problem. Thank you very much good sir

Bill P Over a year ago

It was the next thing I would suggest you to try to remove these injections

|

eustatos · Accepted Answer · 2020-03-02 20:28:30Z

You can use angular.bootstrap for connecting the app to specific html element.

angular.module('app', [])
  .controller('main', ['$scope', function exampleController($scope) {
    $scope.firstName = 'John';
    $scope.lastName = 'Doe';

    $scope.showLog = function() {
      console.log("angular works");
    }
  }]);

angular.bootstrap(document.body, ['app']);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container" ng-controller="main" style="margin-top: 30px;">
  <div class="row">
    <div class="col-md-12">
      <p>{{firstName}}</p>
      <br>
      <p>{{lastName}}</p>
      <br>
      <button class="btn btn-primary" ng-click="showLog()">MyButton</button>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

Angular JS - Angular file doesn't respond to html (AngularJs with Spring Boot)

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related