Forum


HomeHomePremiumPremiumDevelopmentDevelopmentDNN Spa module in DNN 8 CTP 7DNN Spa module in DNN 8 CTP 7
Previous
 
Next
New Post
11/17/2015 12:56 PM
 

Trying to use Joe Brinkman's SPA methodology in Video on 10/8 together with Scott's training on Angular without using view.ascx.  Using View.HTML as view module but getting an Angular error.

Error Message is:  

SCRIPT5022: [$injector:modulerr] http://errors.angularjs.org/1.2.27/$injector/modulerr?p0=myCTLApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.27%2F%24injector%2Fnomod%3Fp0%3DmyCTLApp%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Fdnndev.me%2FResources%2Flibraries%2FAngularJS%2F01_02_27%2Fangular.min.js%3Fcdv%3D38%3A20%3A488)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Fdnndev.me%2FResources%2Flibraries%2FAngularJS%2F01_02_27%2Fangular.min.js%3Fcdv%3D38%3A20%3A376)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Fdnndev.me%2FResources%2Flibraries%2FAngularJS%2F01_02_27%2Fangular.min.js%3Fcdv%3D38%3A33%3A265)%0A%20%20%20at%20r%20(http%3A%2F%2Fdnndev.me%2FResources%2Flibraries%2FAngularJS%2F01_02_27%2Fangular.min.js%3Fcdv%3D38%3A7%3A288)%0A%20%20%20at%20e%20(http%3A%2F%2Fdnndev.me%2FResources%2Flibraries%2FAngularJS%2F01_02_27%2Fangular.min.js%3Fcdv%3D38%3A33%3A207)%0A%20%20%20at%20ec%20(http%3A%2F%2Fdnndev.me%2FResources%2Flibraries%2FAngularJS%2F01_02_27%2Fangular.min.js%3Fcdv%3D38%3A36%3A307)%0A%20%20%20at%20c%20(http%3A%2F%2Fdnndev.me%2FResources%2Flibraries%2FAngularJS%2F01_02_27%2Fangular.min.js%3Fcdv%3D38%3A18%3A168)%0A%20%20%20at%20dc%20(http%3A%2F%2Fdnndev.me%2FResources%2Flibraries%2FAngularJS%2F01_02_27%2Fangular.min.js%3Fcdv%3D38%3A18%3A380)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Fdnndev.me%2FDesktopModules%2FDMAngular8%2FResources%2Fjs%2Fdnnuclear-dnn.js%3Fcdv%3D38%3A27%3A13)%0A%20%20%20at%20fire%20(http%3A%2F%2Fdnndev.me%2FResources%2Flibraries%2FjQuery%2F01_09_01%2Fjquery.js%3Fcdv%3D38%3A1037%3A5) 

 

angular.min.js, line 33 character 487

 

 

Any help would be greatly appreciated.  New to Angular and JS

 
New Post
11/17/2015 2:21 PM
 

Dan,

That error is no module defined.  Look at your code defining the angular module for your view.  The user in this article fixed because of a syntax error in the module declaration.  http://stackoverflow.com/questions/15475072/script5022-argument-module-is-not-a-function-got-undefined-angular-js-line

 

 
New Post
11/17/2015 3:36 PM
 

Here is a little more information...Below is the View.html code.:

 

[JavaScript:{ jsname: "AngularJS" }]
[JavaScript:{ path: "~/DesktopModules/DMAngular8/Resources/js/dnnuclear-dnn.js"}]
[JavaScript:{ path: "~/DesktopModules/DMAngular8/Resources/js/Scripts/01-item-controllers-debug.js.js"}]
[JavaScript:{ path: "~/DesktopModules/DMAngular8/Resources/js/Scripts/03-item-app-debug.js"}]

<!--[JavaScript:{ path: "~/Resources/Shared/scripts/dnn.jquery.js"}]-->

<!--[ModuleAction:{controlKey : "Edit", securityAccessLevel: "Edit", titleKey: "EditModule", localResourceFile: "~/DesktopModules/DMAngular6/App_LocalResources/View.resx"}]-->
<!--<h2>Call Tracker Lite !</h2>-->
<div id="dnnuclear-Item-[ModuleContext:ModuleId]" data-modulepath="~/DesktopModules/DMAngular8"  class="dnnuclear-item" >
    <div class="ng-scope" dnnuclear-app="myCTLApp" ng-controller="mainController as vm">

        <div ng-switch on="vm.show">
            <!--@* Default View Begin *@-->
            <div ng-switch-when="default">
                <p><a href="#a" class="btn btn-primary " ng-click="vm.addCalls()">Add New Calls</a></p>
                <table class="table table-striped ">
                    <tr>
                        <td align="Center">Call ID</td>
                        <td>Call Type</td>
                        <td>Caller Name</td>
                        <td>Caller Address</td>
                        <td>Caller City</td>
                        <td>Utility Type</td>
                        <td></td>
                    </tr>
                    <tr ng-repeat="call in vm.calls">
                        <td align="Center">{{call.CallId}}</td>
                        <td>{{call.CallType}}</td>
                        <td>{{call.CallerName}}</td>
                        <td>{{call.CallerAddress}}</td>
                        <td>{{call.CallerCity}}</td>
                        <td>{{call.UtilityType}}</td>
                        <td class="text-right ">
                            <button class="btn btn-primary ">E</button>
                            <button class="btn btn-danger ">X</button>
                        </td>
                    </tr>
                </table>
            </div>
            <!--@* End Default View  *@

            @* Add New Call Veiw Begin *@-->
            <div ng-switch-when="new">
                <p>  Add New Caller! </p>
                <table style="width:50%" class="table table-striped">
                    <tr>
                        <td align="left">Caller Name</td>
                        <td><input type="text" size="200" required ng-model="newCall.CallerName" /></td>
                    </tr>
                    <tr>
                        <td align="left">Caller Address</td>
                        <td><input type="text" size="200" required ng-model="newCall.CallerAddress" /></td>
                    </tr>
                    <tr>
                        <td align="left">Caller City</td>
                        <td><input type="text" size="200" required ng-model="newCall.CallerCity" /></td>
                    </tr>
                    <tr>
                        <td align="left">Caller Region</td>
                        <td>
                            <select ng-model="regionList" class="RegionId">
                                <option ng-repeat="region in vm.regions" value="{{region.RegionId}}">{{region.RegionDesc}}</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="left">Utility Type</td>
                        <td>
                            <select ng-model="utilityList" class="UtilityId">
                                <option ng-repeat="utiltype in vm.utilTypes" value="{{utiltype.UtilityTypeId}}">{{utiltype.UtilityTypeDesc}}</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="left">Call Type</td>
                        <td>
                            <select ng-model="calltypeList" class="CallTypeId">
                                <option ng-repeat="calltype in vm.callTypes" value="{{calltype.UtilityTypeId}}">{{calltype.UtilityTypeDesc}}</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="left">CallBack Number</td>
                        <td><input type="text" size="200" required ng-model="newCall.CallBackNumber" /></td>
                    </tr>
                    <tr>
                        <td align="left">Comments</td>
                        <td><textarea rows="4" cols="50" required ng-model="newCall.Comments"></textarea> </td>
                    </tr>
                </table>

                <button class="btn btn-primary ">Save</button>
                <button class="btn btn-warning " ng-click="vm.Cancel()">Cancel</button>
            </div>
            <!--@* Add New Call View End *@-->
        </div>

    </div>

</div>

<div>

    <h2>Hello DNN World!!</h2>

</div>

<script language="javascript" type="text/javascript" >
    jQuery(function ($) {
        var moduleId = parseInt("[ModuleContext:ModuleId]");
        var $dnnuclear = $dnnuclear || {};
        $dnnuclear.moduleId = moduleId;
    });
</script>


I know this is pretty new stuff but I sure would like to try this without an .ascx file.

 

Dan

 
New Post
11/18/2015 6:51 PM
 

Scott - Thanks for the insight.  It was a stupid mistake on my part.  The path to the java scripts had a typo...  That is what happens when you stare at something long enough you can't find the forest for the trees.

Now I am getting a NGRepeater:dupes error.  I have a feeling I am not getting to the database.  I think I will step back and let it sit for tonight and pick it back up tomorrow.

I look forward to your new videos on DNN 8.  Also having issues with the MVC modules... but that will be for another post, although, I am liking the Angular stuff...  :)

 

 

 
New Post
11/18/2015 9:40 PM
 

New error:

Angular Get Error:

http://dnndev.me/DesktopModules/DMAngular8/API/home/GetModuleCTCalls 

404 (Not Found)

I implemented the Angular controller like yours in the AngularModule  (See snippet)


$dnnuclear.myCTLApp = angular.module('$dnnuclear.myCTLApp', ['dnnuclearDnn']);

$dnnuclear.myCTLApp.controller('mainController', function ($http, $log, AppServiceFramework) {

    var vm = this;

    // Set API base url
    var serviceRoot = AppServiceFramework.getServiceRoot('DMAngular8');

    vm.EditMode = true;
    vm.calls = [];
    vm.regions = [];
    vm.EditIndex = -1;

    vm.show = 'default';


    //Get Calls
    $http.get(serviceRoot + 'home/GetModuleCTCalls')
       .success(function (results) {
           vm.calls = results;
       })
       .error(function (data) {
           console.log(data);
       })

    vm.addCalls = function () {
        vm.show = 'new';
        $http.get('/home/GetRegions')
           .success(function (results) {
               vm.regions = results;
           })
           .error(function (data) {
               console.log(data);
           })

    }

    vm.Cancel = function () {
        vm.show = 'default';
    }

});


and home controller looks has function:

        ''' <summary>
        ''' API that returns an CTCall list
        '''[baseURL]/DMAngular8/GetModuleCalls
        ''' </summary>
        ''' <returns></returns>
        <HttpPost, HttpGet>
        <ValidateAntiForgeryToken>
        <ActionName("List")>
        <DnnModuleAuthorize(AccessLevel:=SecurityAccessLevel.View)>
        Public Function GetModuleCTCalls() As HttpResponseMessage
            Try
                Dim ctcallList = _ctcallRepository.GetCTCalls(ActiveModule.ModuleID)
                Return Request.CreateResponse(HttpStatusCode.OK, ctcallList.ToList())
            Catch ex As Exception
                Return Request.CreateResponse(HttpStatusCode.InternalServerError, ex.Message)
            End Try
        End Function

 

Thanks again for help...

 

 
Previous
 
Next
HomeHomePremiumPremiumDevelopmentDevelopmentDNN Spa module in DNN 8 CTP 7DNN Spa module in DNN 8 CTP 7



Try FREE
30 days money back guaranteed