Angular JS初学者示例无法运行

时间:2016-05-22 09:22:09

标签: angularjs

我正在尝试学习AngularJs,我正在尝试运行一个非常简单的示例,如下所示,

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Angular Forms</title>
    <!-- LOAD BOOTSTRAP CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="js/common.js" type="text/javascript"></script>
  </head>
  <body ngApp="formApp" ngController="formController">
    <div class="container">
      <div class="col-md-6 col-md-offset-3">
        <!-- PAGE TITLE -->
        <div class="page-header">
          <h1>Submitting Forms with Angular</h1>
        </div>
        <!-- SHOW ERROR/SUCCESS MESSAGES -->
        <div id="messages"></div>
        <!-- FORM -->
        <form ngSubmit="process()">
          <!-- NAME -->
          <div id="name-group" class="form-group">
          <label>Name</label> 
          <input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ngModel="formData.name"/></div>
          <!-- SUPERHERO NAME -->
          <div id="superhero-group" class="form-group">
          <label>Superhero Alias</label> 
          <input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader" ngModel="formData.superhero"/></div>
          <!-- SUBMIT BUTTON -->
          <button type="submit" class="btn btn-success btn-lg btn-block">Submit!</button>
        </form>
      </div>
    </div>
    <script type="text/javascript">
        var app = angular.module('formApp',[]);

        app.controller('formController', ['$scope','$http', function ($scope, $http) {
            console.log("form controller called");
            $scope.formData = {};

            $scope.process = function() {
                console.log("test.php?" + JSON2Params($scope.formData))
                $http({method:"GET", 
                       url: "test.php?" + JSON2Params($scope.formData),
                        headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
                })
            };
        }]);

    </script>
  </body>
</html>

但是,我没有得到角度js工作的任何迹象。例如,我没有看到任何记录到控制台或应用程序发出我想要的http get请求。

1 个答案:

答案 0 :(得分:0)

您有语法错误

更改

发件人

 <body ngApp="formApp" ngController="formController">

 <body ng-app="formApp" ng-controller="formController">