CODEWITHSUNDEEP
javascriptangularjs
user5613751
user5613751

Reputation:

Cant Reach the angular method

Hey guys for some reason my code below dosent work and gives me this result. And when i click the save button, nothing alerts in the window? I think somehow im not reaching the angular library but im not sure. Help would be appreciated! Thankyou!

enter image description here

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script src = "https://rawgit.com/nirus/Angular-Route-Injector/master/dist/routeInjector.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.js"></script>
    <script type="text/javascript" src="main.js"></script>

    <script type="text/javascript" src="main.js"></script>
</head>
<body style="margin:20px">
<div>
    <label>Employee Name</label>
    <input type = "text" id="employeeName" ng-model="employeeName"><br />

    <label>Emploee Age</label>
    <input type = "text" id="employeeAge" ng-model="employeeAge"><br />
  </div>
  <div>
    <button class = "btn btn-default" ng-click = "saveEmployee()">
      Save <span class = "glyphicon glyphicon-ok">
    </button>

  </div>

  <div>
      Emplyee Name: {{employeeName}}<br />
      Employee Age: {{employeeAge}}
  </div>
 </body>

</html>

main.js:

function employeeCtrl($scope){
  $scope.employeeName = ""
  $scope.employeeAge = 0;
  $scope.saveEmployee = function(){
    alert('You have saved ' + $scope.employeeName)
  }
}

Upvotes: 0

Views: 67

Answers (1)

Joseph Didion
Joseph Didion

Reputation: 142

You need ng-app and ng-controller, this should work

<body ng-app="" ng-controller="employeeCtrl" style="margin:20px">
  <div>
    <label>Employee Name</label>
    <input type = "text" id="employeeName" ng-model="employeeName"><br />

    <label>Emploee Age</label>
    <input type = "text" id="employeeAge" ng-model="employeeAge"><br />
  </div>
  <div>
    <button class = "btn btn-default" ng-click = "saveEmployee()">
      Save <span class = "glyphicon glyphicon-ok">
     </button>

</div>

  <div>
      Emplyee Name: {{employeeName}}<br />
      Employee Age: {{employeeAge}}
  </div>
</body>

Upvotes: 2

Related Questions