需要AngularJS和MVC控制器指南

时间:2017-02-22 06:38:19

标签: javascript angularjs asp.net-mvc

所以我今天开始学习angularJS,我还创建了一个演示代码。 不知怎的,代码没有运行。我从某处复制此代码并更改为我的名字。运行html后。代码显示extends SpringBootServletInitializer可以提供一个很好的链接或简单的示例代码逐步拉动角度Js和MVC的数据?

{{CU.name}}

  <script>
var TestCtrl = function ($scope, $http) {

    $scope.firstCall = function () {

        $http({
            url: "@Url.Action("RetriveRecordList", "recordController")",
            dataType: 'json',
        method: 'GET',
        data: '',
        headers: {
            "Content-Type": "application/json"
        }
    }).success(function (response) {
        debugger;
        alert("haha")
        $scope.DemoList = response;
    })
       .error(function (error) {
           alert(error);
       });
}
}

2 个答案:

答案 0 :(得分:1)

在hs中定义ng-app并在js文件中定义模块。在定义:属性时,还要添加逗号和$http

$http({
    url: "@Url.Action(",
    RetriveRecordList: ", ",
    recordController: ")",
    dataType: 'json',
    method: 'GET',
    data: '',
    headers: {
        "Content-Type": "application/json"
    }
})

使用then代替success来捕获响应。它从角度版本6.1.1中删除

&#13;
&#13;
angular.module('app',[])
.controller('TestCtrl',TestCtrl);

function TestCtrl($scope, $http) {
	$scope.firstCall = function() {
		$http({
				url: "@Url.Action(",
				RetriveRecordList :", ",
				recordController :")",
				dataType: 'json',
				method: 'GET',
				data: '',
				headers: {
					"Content-Type": "application/json"
				}
			}).then(function(response) {
				debugger;
				alert("haha")
				$scope.DemoList = response;
			},function(error) {
				alert(error);
			}) 
	}
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 

<div ng-app="app" ng-controller="TestCtrl" ng-init="firstCall()">

<div class="table-responsive com-table">

    <table class="table table-bordered table-hover table-striped">
        <thead>
            <tr>
                <th width="5%">Customer ID</th>
                <th width="15%">Customer Name</th>
                <th width="15%">Email</th>
                <th width="20%">Mobile No.</th>
                <th width="25%">Address</th>
                <th width="20%">Registration Date</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="CU in DemoList">
                <td width="5%">{{CU.name}}</td>
                <td width="15%">{{CU.name}}</td>
                <td width="15%">{{CU.name}}</td>
                <td width="20%">{{CU.name}}</td>
                <td width="25%">{{CU.name}}</td>
                <td width="20%">{{CU.name}}</td>
            </tr>
        </tbody>
    </table>

    <div class="collapse">
        <div class="well">
        </div>

    </div>
</div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

angular.module('ngSampleApp', []).controller('TestCtrl', `function($scope) {`

});

首先,您必须将角度框架引用到您的应用程序中。然后定义模块和控制器。之后在HTML文件中使用ng-app指令引用模块名称。