Angular JS - Angular файл не отвечает на html (AngularJs с 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");
}

});

Я довольно новичок в Angular JS и я просто пытаюсь подключить Angular файл с Html. до сих пор я создал функцию showLog, но нажатие на нее вообще ничего не делает. Я чувствую, что ng-controller ничего не делает, и {{firstName}} & {{lastName}} показывают именно так (то есть 'John' 'Doe' не впрыскиваются)

Также у меня есть другой вопрос - если я загружаю файл Angular с <script type="text/javascript" src="js/main.js"></script>, зачем мне нужно указывать ng-controller? не должно ли это уже работать?

Answer 1

модуль приложения зарегистрирован неправильно. Вам нужно создать такой экземпляр:

angular.module('app', [])

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

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

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

});

Чтобы запустить приложение, вам необходимо использовать директиву ng-app (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>

Answer 2

Вы можете использовать angular.bootstrap для подключения приложения к элементу c html.

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>