angular - 在 Sitefinity 内容中使用角度元素的具体示例

我有一个使用 AngularJS 版本 1.x 的示例。就我而言，我需要在页面上显示信用卡费率，使用 AngularJS 从 Web 服务中提取费率。

第 1 步：创建自定义 MVC 小部件。理论上，您甚至可以在步骤 2 中使用内容块来保存标记，而不是使用自定义小部件。

文件：SitefinityWebApp/MVC/Controllers/FeaturedRateController.cs

namespace Website.Mvc.Controllers
{
    [ControllerToolboxItem(Name = "FeaturedRate", Title = "Featured Rate", SectionName = "...", CssClass = "sfNewsViewIcn sfMvcIcn")]
    public class FeaturedRateController : BaseController<FeaturedRateViewModel>
    {
        public override ActionResult Index()
        {
            // Some code is omitted to set model properties.
            return View("Default", Model);
        }
    }
}

第 2 步：创建小部件视图。

文件：SitefinityWebApp/MVC/Views/FeaturedRate/Default.cshtml

@model Website.Mvc.Models.FeaturedRateViewModel

<!-- Some markup is omitted -->
<div>
    <featured-rate rateId="@Model.RateId" rateType="@Model.RateType">...</featured-rate>
</div>

第 3 步：创建 AngularJS 组件。我喜欢将我的 javascript 文件保存在与 razor 视图相同的目录中，这样我在处理某个功能时就不必在文件资源管理器中跳来跳去。

文件：SitefinityWebApp/MVC/Views/FeaturedRate/featured-rate.component.js

(function () {
    angular
        .module('mymodule')
        .component('featuredRate', {
            template: '<span class="rate">{{vm.rate.value}}</span><span class="units">{{vm.rate.units}}</span>',
            transclude: true,
            controllerAs: 'vm',
            controller: featuredRate,
            bindings: {
                rateid: '@',
                ratetype: '@'
            }
        });

    featuredRate.$inject = ['$http'];

    function featuredRate($http) {
        this.$onInit = function () {
            var vm = this;

            getCurrentRate(vm.ratetype, vm.rateid)
                .then(function (response) {
                    vm.rate = parseResponse(vm.ratetype, response.data);
                }, function (response) {
                    console.log(response.status);
                    vm.rate = {
                        value: '...',
                        units: ''
                    };
                });
        };

        function getCurrentRate(type, id) {
            // implementation omitted.
        }
    }
})();

我正在使用 Gulp 任务将我的所有 js 文件/角度组件连接到文件 /assets/dist/js/main.js。然后，我从我的默认模板加载该文件。

文件：SitefinityWebApp/ResourcePackages/Bootstrap4/MVC/Views/Layouts/Base.cshtml

@Html.Script(Url.Content("~/assets/dist/js/main.js"), true, "bottom")

angular - 在 Sitefinity 内容中使用角度元素的具体示例

问题描述

解决方案

推荐阅读