Angular 转发器和第一次尝试使用 Angular
Angular Repeater and First attempt at using Angular
我第一次尝试在 ASP.Net/DotNetNuke MVC 项目中使用 angular。
查看:
@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<IEnumerable<IMT.AdvancedProductSearchMVC.Models.SearchTerm>>
@using DotNetNuke.Web.Mvc.Helpers
<script src="/DesktopModules/RazorCart/Core/Content/Scripts/angular.min.js"></script>
<div ng-app="APSApp" class="container">
<br />
<br />
<input type="text" placeholder="Search Terms" ng-model="searchTerms" />
<br />
<div ng-controller="apsCtl">
<table class="table">
<tr ng-repeat="r in searchTerms">
<td>{{r.DisplayText}}</td>
<td><input type="text" ng-model="r.SearchInput"></td>
</tr>
</table>
</div>
</div>
<script src="DesktopModules/MVC/AdvancedProductSearchMVC/Scripts/AdvancedProductSearch.js"></script>
AdvancedProductSearch.js
aps = angular.module('APSApp', []);
aps.controller('apsCtl',
function(APSService, Features, $scope, $http) {
alert("calling factory");
$scope.searchTerms = [];
APSService.getAPS(successFunction, failureFunction);
successFunction = function(data) {
alert("success");
$scope.searchTerms = data;
};
failureFunction = function(data) {
alert("failure");
};
});
aps.factory('APSService',
function($http) {
alert("getting factory");
return {
getAPS: function(onSuccess, onFailure) {
//var APSService = {};
$http.get('/Desktopmodules/MVC/AdvancedProductSearchMVC/AdvancedProductSearch/GetAPS').success(onSuccess).error(onFailure);
}
};
});
当然,这是行不通的。例如,我的控制器永远不会被调用,而且我不知道自己在做什么。
我如何更正我的代码以使其正常工作?
您的 AdancedProductSearch.js 具有不同的模块名称,并且您在 HTML 中使用了不同的模块名称。
重命名脚本中的模块名称并添加一个空依赖项,如下所示
angular
.module('APSApp',[])
.controller('apsCtl', apsCtl)
;
经过几个小时的阅读 angular 文档和示例以及大量测试,它现在可以工作了:
我的AdvancedProductSearch.js
var aps = angular.module("APSApp", []);
aps.config(function($httpProvider) {
$httpProvider.defaults.transformRequest = function(data) {
return data !== undefined ? $.param(data) : null;
};
});
aps.factory('SearchTerms',
function($http) {
return {
getSearchTerms: function(onSuccess, onFailure) {
const rvtoken = $("input[name='__RequestVerificationToken']").val();
$http({
method: "post",
url: "/DesktopModules/MVC/AdvancedProductSearchMVC/AdvancedProductSearch/GetAPS",
headers: {
"ModuleId": moduleId,
"TabId": tabId,
"RequestVerificationToken": rvtoken
}
}).success(onSuccess).error(onFailure);
}
};
});
aps.controller('APSCtl',
function(SearchTerms, $scope) {
$scope.searchTerms = [];
successFunction = function(data) {
$scope.searchTerms = data;
console.log($scope.searchTerms);
};
failureFunction = function(data) {
console.log('Error' + data);
};
SearchTerms.getSearchTerms(successFunction, failureFunction);
});
我第一次尝试在 ASP.Net/DotNetNuke MVC 项目中使用 angular。
查看:
@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<IEnumerable<IMT.AdvancedProductSearchMVC.Models.SearchTerm>>
@using DotNetNuke.Web.Mvc.Helpers
<script src="/DesktopModules/RazorCart/Core/Content/Scripts/angular.min.js"></script>
<div ng-app="APSApp" class="container">
<br />
<br />
<input type="text" placeholder="Search Terms" ng-model="searchTerms" />
<br />
<div ng-controller="apsCtl">
<table class="table">
<tr ng-repeat="r in searchTerms">
<td>{{r.DisplayText}}</td>
<td><input type="text" ng-model="r.SearchInput"></td>
</tr>
</table>
</div>
</div>
<script src="DesktopModules/MVC/AdvancedProductSearchMVC/Scripts/AdvancedProductSearch.js"></script>
AdvancedProductSearch.js
aps = angular.module('APSApp', []);
aps.controller('apsCtl',
function(APSService, Features, $scope, $http) {
alert("calling factory");
$scope.searchTerms = [];
APSService.getAPS(successFunction, failureFunction);
successFunction = function(data) {
alert("success");
$scope.searchTerms = data;
};
failureFunction = function(data) {
alert("failure");
};
});
aps.factory('APSService',
function($http) {
alert("getting factory");
return {
getAPS: function(onSuccess, onFailure) {
//var APSService = {};
$http.get('/Desktopmodules/MVC/AdvancedProductSearchMVC/AdvancedProductSearch/GetAPS').success(onSuccess).error(onFailure);
}
};
});
当然,这是行不通的。例如,我的控制器永远不会被调用,而且我不知道自己在做什么。 我如何更正我的代码以使其正常工作?
您的 AdancedProductSearch.js 具有不同的模块名称,并且您在 HTML 中使用了不同的模块名称。
重命名脚本中的模块名称并添加一个空依赖项,如下所示
angular
.module('APSApp',[])
.controller('apsCtl', apsCtl)
;
经过几个小时的阅读 angular 文档和示例以及大量测试,它现在可以工作了:
我的AdvancedProductSearch.js
var aps = angular.module("APSApp", []);
aps.config(function($httpProvider) {
$httpProvider.defaults.transformRequest = function(data) {
return data !== undefined ? $.param(data) : null;
};
});
aps.factory('SearchTerms',
function($http) {
return {
getSearchTerms: function(onSuccess, onFailure) {
const rvtoken = $("input[name='__RequestVerificationToken']").val();
$http({
method: "post",
url: "/DesktopModules/MVC/AdvancedProductSearchMVC/AdvancedProductSearch/GetAPS",
headers: {
"ModuleId": moduleId,
"TabId": tabId,
"RequestVerificationToken": rvtoken
}
}).success(onSuccess).error(onFailure);
}
};
});
aps.controller('APSCtl',
function(SearchTerms, $scope) {
$scope.searchTerms = [];
successFunction = function(data) {
$scope.searchTerms = data;
console.log($scope.searchTerms);
};
failureFunction = function(data) {
console.log('Error' + data);
};
SearchTerms.getSearchTerms(successFunction, failureFunction);
});