Angular 某处结构不正确

Question

我想做的就是通过 ng-Click 和 $http.get 调用我的后端。然后我试图设置我在 html 中显示的项目的值。这是我的结构。没有真正得到任何错误，所以任何关于如何查看我的代码在哪里不正确的信息都会很棒。谢谢。

HTML

<head>
<title>Hello</title>
<script src="~/Scripts/profileController.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js">    </script>

<section ng-controller="profileController as vm">

    <div class="container">

        <div style="padding-left:20px; padding-right: 1000px; height:700px;">

            <h2>Create Profile</h2>

            <img src="app/img/user.png" />
            <label for="eventName">UserName: {{vm.newUser.UserName}}</label>
            <input id="eventName" ng-model="UserName" type="text" placeholder="Edit User Name" />
            <label for="eventName">Name: {{vm.nameName}}</label>
            <input id="eventName" ng-model="nameName" type="text" placeholder="Edit Name" />
            <label for="eventName">Age: {{vm.age}}</label>
            <input id="eventName" ng-model="age" type="text" placeholder="Edit age" />
            <label for="eventName">College: {{vm.college}}</label>
            <input id="eventName" ng-model="college" type="text" placeholder="Edit college" />
            <label for="eventName">City: {{data.city}}</label>
            <input id="eventName" ng-model="name" type="text" placeholder="Edit city" />

            <a class="btn btn-default btn-lg" ng-click="vm.getUserList()">Register</a>

        </div>
    </div>


</section>

CONTROLLER/FACTORY

 angular.module("app", [])
 .controller('profileController', ['$scope', 'profileFactory', function ($scope, profileFactory) {

var vm = this;
this.getUserList = function () {

    profileFactory.getUserList($scope).success(function (data) {
        $scope.UserList = data;
    });
}
 }])

 .factory('profileFactory', ['$http', '$q', function ($http, $q) {
var urlBase = "/api/saveUser";
var dealerProcessReportSetupFactory = {

    getUserList: function () {

        return $http.get(urlBase + "/UserList");
    }
};

return dealerProcessReportSetupFactory;
 }]);

API 控制器

 public class profileController : ApiController
{
    // GET api/DealerProcessReportSetup
    [HttpGet]
    [ActionName("saveUser")]
    public tblOwl getUserList()
    {
        using (VSCDevEntities db = new VSCDevEntities()) 
        {
            var Owl = (from z in db.tblOwls select z).FirstOrDefault();

            return Owl;

        }

    }
}

Answer 1

下面东西不见了

ng-app 指令必须位于 body/html 标记中，例如 ng-app="app".
脚本应该加载到您页面的 header 中。
您必须在加载任何其他使用 angular 的文件之前加载 angular.js object

参考应

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="~/Scripts/profileController.js"></script>

更新

当您使用 controllerAs 语法时，您的控制器应该使用 this 关键字，或者至少您应该像使用 ng-click="vm.getUserList()" 一样在此关键字中定义 getUserList() 方法。

控制器

 angular.module("app", [])
 .controller('profileController', ['$scope', 'profileFactory', function ($scope, profileFactory) {
   var vm = this;
   this.getUserList = function () {

      profileFactory.getUserList($scope).success(function (data) {
          $scope.UserList = data;
      });
   } 
 }])

Angular 某处结构不正确

Angular Structure Incorrect Somewhere

c#

angularjs

visual-studio-2012

angularjs-controller

angularjs-controlleras