Using application services via AngularJS in MPA Front end? #877

otgontugsmiimaa created 8 years ago

Hi,

I decided to develope a web which is based on ASP.NET Zero Front end. But i want to use AngularJS to call Application service methods. So i included following refs in FrontEndBundleConfig.cs:

bundles.Add(
                new ScriptBundle("~/Bundles/Frontend/libs/js")
                    .Include(
                        ScriptPaths.Json2,
                        ScriptPaths.JQuery,
                        ScriptPaths.JQuery_Migrate,
                        ScriptPaths.Bootstrap,
                        ScriptPaths.Bootstrap_Hover_Dropdown,
                        ScriptPaths.JQuery_Slimscroll,
                        ScriptPaths.JQuery_BlockUi,
                        ScriptPaths.JQuery_Cookie,
                        ScriptPaths.SpinJs,
                        ScriptPaths.SpinJs_JQuery,
                        ScriptPaths.Angular,
                        ScriptPaths.Angular_Sanitize,
                        ScriptPaths.Angular_Touch,
                        ScriptPaths.Angular_Ui_Router,
                        ScriptPaths.Angular_Ui_Utils,
                        ScriptPaths.Angular_Ui_Bootstrap_Tpls,
                        ScriptPaths.Angular_Ui_Grid,
                        ScriptPaths.Angular_OcLazyLoad,
                        ScriptPaths.Angular_File_Upload,
                        ScriptPaths.Angular_DateRangePicker,
                        ScriptPaths.SweetAlert,
                        ScriptPaths.Toastr,
                        ScriptPaths.MomentJs,
                        ScriptPaths.Abp,
                        ScriptPaths.Abp_JQuery,
                        ScriptPaths.Abp_Toastr,
                        ScriptPaths.Abp_BlockUi,
                        ScriptPaths.Abp_SpinJs,
                        ScriptPaths.Abp_SweetAlert,
                        ScriptPaths.Abp_Angular
                    ).ForceOrdered()
                );

And then added following codes to _Layout.cshtml:

<body class="corporate" ng-app="MyApp" ng-cloak>

Also in /Views/Home/Index.cshtml

@Html.IncludeScript("~/Views/Home/Index.js")

Created a new JS file /Views/Home/Index.js and added following code to it:

(function () {
    'use strict';
    angular
        .module('MyApp', ['ngMaterial', 'abp'])
        .controller('DemoCtrl', ['$scope', 'abp.services.app.carModel', 
    function ($scope, carModelService) {
        var self = this;
        self.carModels = {};

        function init() {
            self.carModels= carModelService.getCarModels({}).success(function (data) {
                self.carModels = data.items;
            }).finally(function () {                
            });
        }

        init();
    }
])
})();

When i run the project following error is thrown: <a class="postlink" href="https://docs.angularjs.org/error/$injector/unpr?p0=abp.services.app.carModelProvider%20%3C-%20abp.services.app.carModel%20%3C-%20DemoCtrl">https://docs.angularjs.org/error/$injec ... 20DemoCtrl</a>

Please help me to find what i did wrong?

2 Answer(s)