Reputation: 812
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
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
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
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:
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)
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
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