0

i am new to angular and designing web forms using the framework. I am working on a project which is a one page application. The development is mostly in JavaScript, HTML and for this specific feature of web forms, we have used angular framework. The forms that have been designed work fine in a stand alone mode / POC mode. But ever since i have integrated it into the main application i am getting:

Failed to instantiate module webFormUI due to: [$injector:nomod] Module 'webFormUI' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I will now describe the flow of integration. My application homepage has a list of links.

<ul>
    <li><span>Heading</span></li>
        <li>Sub heading</li>
            <li><a>Web forms link</a></li>
            .
            .
<ul>

When i click the "Web forms link" i call the following ajax request to load the Webforms.html page:

$.ajax({
"url" : "/projectname/webform/Webforms.html",
"type" : "GET",
"success" : function(data)
  {
      $("#container").html(data); //container is an id for a div on the main page.
  }
})

My Webforms.html contains the code which uses angular framework and hence, has the following static includes:

<script type="text/javascript" src="/projectname/webform/libraries/angular-v1.5.0.js"></script>

<script type="text/javascript" src="/projectname/webform/libraries/ng-flow-standalone.js"></script>
<script type="text/javascript" src="/projectname/webform/libraries/fusty-flow-factory.js"></script>

<script type="text/javascript" src="/projectname/webform/js/app.js"></script>

and Webforms.html looks like:

<body>
    <div id="webformContainer" ng-app="webFormUI">
        <div class="webformHolder" ng-controller="formController" ng-cloak>
        .
        .
       </div>
    </div>
</body>

My app.js contains the code:

var webFormApp = angular.module("webFormUI", ["flow"]);
webFormApp.controller('formController',function($scope, $http, $filter){

console.log("$scope: " + String($scope));
.
.
});

I have never seen this console statement. :(

When the Webforms.html file is loaded the above mentioned error is what i get as an output on the firebug console. Nothing gets rendered on the screen. Hope this information helps.

I tried to include the files on the main home page and load the HTML, also, tried to include the app.js code in <script> tags (internal) on the HTML page, but no luck.Hope to find some help on this. :)

I also tried by placing the ng-app=webFormUI on div with id container, nothing happened.

Swanand Phadke
  • 77
  • 7
  • The html is just being dumped into the page and Angular isn't processing it. I can't remember off the top of my head how to trigger that - have a look at this page and see if the answer helps: http://stackoverflow.com/questions/9381926/angularjs-insert-html-into-view – Lee Willis May 17 '16 at 08:07
  • @LeeWillis : Thanks for the quick response, but no luck with my problem. – Swanand Phadke May 17 '16 at 09:23

0 Answers0