CODEWITHSUNDEEP
angularjstypescript
Shian JA
Shian JA

Reputation: 812

Getting Error of Angular is not defined & Uncaught Error:No Module in type Script Angular Js

I have implemented a code where i stuck with this problem. Problem 1:- Uncaught ReferenceError: angular is not defined Problem 2:-Uncaught Error: No module: CustomerSearch

I have written my code:-

and here is my view page

<view>
   <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="QuickSearch.ascx.cs" Inherits="CustomerSearch.QuickSearch1" %>
    <!DOCTYPE html>
    <%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>

    <html >
    <head id="Head1" >
       <script src ="http://code.jquery.com/jquery-latest.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/Contoller/QuickSearchController.js"  />
        <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/Interface/module.js"  />
       <%-- <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/app.routes.js"  />--%>

        <title></title>


        <script type="text/javascript">





        </script>
    </head>
    <body ng-app="CustomerSearch">
    <form id="form1" >
    <div>



    <div id="page"  ng-controller="CustomerCtrl as custom">

              <div id="menuleftcontent">
         <table>
                 <tr id="menu">
                               <td width="25px !important;"><input type="text" id="txtActId" value="Search" class="tftextinput2" ng-model="search.txtActId" />  </td>
                               <td><input type="button" value="Search"  class="tfbutton2" data-ng-click="search(search)" /> </td>

                         </tr>
                  <tr id="TableRow1">
                      <td colspan="2">
                          <asp:DropDownList ID="listCustomerType" runat="server" CssClass="dropdown" Width="194px" Height="27px" ng-model="search.listCustomerType">

                          </asp:DropDownList>
                      </td>
                      </tr>
              <tr>
                 <td colspan="2">
                     <input type="checkbox" id="checkActiveOnly"  class="NormalTextBox" value="Active Customers Only" ng-model="search.checkActiveOnly" />Active Customers Only
                    <br>
                      <input type="checkbox" id="checkParentsOnly" class="NormalTextBox" value="Parent Accounts Only" ng-model="search.checkParentsOnly" />Parent Accounts Only


                 </td>
             </tr>
            </table>

     <div >

    <div>
        <div>

Upvotes: 1

Views: 3671

Answers (4)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123901

Unknown provider almost always means: we forgot to register our controller(provider).

That error is related to our setting

<div ... ng-controller="CustomerCtrl" ...

There is a broken example - which will give us this kind of error:

Error: [ng:areq] Argument 'CustomerCtrl' is not a function, got undefined

So, what is wrong in our code:

module CustomerSearch.controllers {
    var app = angular.module('CustomerSearch');

    export class CustomerCtrl {
        // ...
    }
    //app.controller("CustomerCtrl", CustomerSearch.controllers.CustomerCtrl);
}

There is missing call app.controller("")

This WORKING plunker has this def:

module CustomerSearch.controllers {
    var app = angular.module('CustomerSearch');

    export class CustomerCtrl {
        // ...
    }
    app.controller("CustomerCtrl", CustomerSearch.controllers.CustomerCtrl);
}

And (once we registered controller to our app) there is no error when we use search.aspx with this line:

<div id="page"  ng-controller="CustomerCtrl as custom">

Upvotes: 1

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123901

To reproduce this kind of issue, we can either

1) "remove" angular script reference, or
2) just place it at the very "late" position, after our modules.

There is a broken plunker which will provide us with this error:

Uncaught ReferenceError: angular is not defined

because we skipped angular script

<!--<script data-require="angular.js@*"
        src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"
  ></script>-->        

<script src="MainApp.js"></script>
<script src="CustomerSearch.dirc.js"></script>

The same issue (with many other errors) we would face, if we place angular in the page too late (after our module definition). Check this broken example

Uncaught ReferenceError: angular is not defined(anonymous function) @ MainApp.js:1 Uncaught Error: [$injector:nomod] Module 'CustomerSearch' 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.

This lines were the culprit:

<script src="MainApp.js"></script>

<script data-require="angular.js@*"
        src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"
  ></script>  

<script src="CustomerSearch.dirc.js"></script>

In case, that all is properly ordered in page, it will work (this is WORKING plunker):

<script data-require="angular.js@*"
        src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"
  ></script>  
<script src="MainApp.js"></script>
<script src="CustomerSearch.dirc.js"></script>

These are standard issues with that kind of error...

Also, in case we get

Uncaught Error: [$injector:nomod] Module 'CustomerSearch' 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.

That could be caused by wrong placement of our own scripts:

<script data-require="angular.js@*"
        src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"
  ></script>  

<script src="CustomerSearch.dirc.js"></script> 
<script src="MainApp.js"></script> // this one should be before the other one

because MainApp.js defines modules:

var app = angular.module('MainApp', [
  'CustomerSearch'
  ]);

angular.module('CustomerSearch',[])

And the CustomerSearch.dric.js uses them

var app = angular.module('CustomerSearch');

so, we need the declaration to happen first

EXTEND:

This code snippet from the question:

<html >
<head id="Head1" >
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/app/Contoller/QuickSearchController.js"  />
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/app/Interface/Interface.js"  />
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/Scripts/angular.js"  />
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/Scripts/angular.min.js"  />
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/app/app.routes.js"  />
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/app/app.module.js"  />
    <script src ="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

Should be (I guess) reorganized:

<html >
<head id="Head1" >
    // THIS MUST be first
    <script src ="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

    // MODULES must be defined first    
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/app/app.module.js"  />


    // the rest most likely could be as is
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/app/Contoller/QuickSearchController.js"  />
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/app/Interface/Interface.js"  />
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/Scripts/angular.js"  />
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/Scripts/angular.min.js"  />
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/app/app.routes.js"  />

Upvotes: 1

Kop4lyf
Kop4lyf

Reputation: 4590

The sequence of files should be jquery, then angular then your module file.

Explanation: First you declare jquery, which is an independent library.

Second, you include angular which is also independent, but since you are using it with jquery, you want angular to know that jquery is available so that angular can utilize the power of jquery.

Third comes your script because it should be parsed when it has already parsed angular(since then only your angular code makes sense)

UPDATE:

  1. You need to define the module as

    var CustomerSearch = angular.module('module_name')

    and store it in some variable before you use it. I cannot see this your code(I might be wrong since I don't know typescript(or whatever you used syntax) but you can check that the variable is defined or not)

  2. Now, the file where you did this should be at the top of all your JS files after jQuery and angularJS. That will make define your module before you try to use that.

Upvotes: 1

Pankaj Parkar
Pankaj Parkar

Reputation: 136194

I believe module.js contains angular controller code, then it is using angular objects while creating different components.

module.js should be moved after angular.d.ts file

Upvotes: 2

Related Questions