Why does not this angular code work? [closed]

-2

Why does not this angular code work? What am I missing?

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Ej de AngularJS</title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="col-md-6" ng-app="adminPanel" ng-controller="namesController">
    <table class="table">
      <thead>
        <tr ng-repeat="data in names">
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>{{data.name}}</td>
          <td>{{data.country}}</td>
          <td>@mdo</td>
        </tr>
      </tbody>
    </table>
  </div>

  </body>
</html>

<script type="text/javascript">var app = angular.module('adminPanel', []);

app.controller('namesController', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});</script>

    
asked by Santiago D'Antuoni 03.01.2017 в 17:18
source

2 answers

1

you put 2 times ng-app

ng-app="adminPanel" and there is another one in the html tag.

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

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <meta charset="UTF-8">
    <title>Ej de AngularJS</title>
</head>

<body>

    <div class="col-md-6" ng-controller="namesController">
        <table class="table">
            <thead>
                <tr ng-repeat="data in names">
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>{{data.name}}</td>
                    <td>{{data.country}}</td>
                    <td>@mdo</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>

</html>

<script>
var app = angular.module('adminPanel', []);
app.controller('namesController', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});
</script>

there it is.

    
answered by 03.01.2017 / 18:14
source
1

app at the level of the html tag that should not go, the code can go as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ej de AngularJS</title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="col-md-6" ng-app="adminPanel" ng-controller="namesController">
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody ng-repeat="data in names">
        <tr>
          <th scope="row">1</th>
          <td>{{data.name}}</td>
          <td>{{data.country}}</td>
          <td>@mdo</td>
        </tr>
      </tbody>
    </table>
  </div>

  </body>
</html>

<script type="text/javascript">var app = angular.module('adminPanel', []);

app.controller('namesController', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});</script>
    
answered by 03.01.2017 в 18:13