Develop Reference

'Controller' defining separately returns is not a function, got undefined

Don't know why this is not working this time..Previously every where its working bt this time its creating issues like this..
here i've like app.js
var testApp= angular.module('test',[]);
testApp.controller('testCtrl',function($scope){
$scope.testValue='testttttttttt';
})
view file index.html
<div ng-app="test" ng-controller="testCtrl">
{{testValue}}
</div>
it working fine..
but when i make controller file seprately and call it in view
<div ng-app="test" ng-controller="testCtrl">
{{testValue}}
</div>
<script src="testCtrl.js"></script>
it returns its not function, undefined...
but if in app.js
i convert
var testApp= angular.module('test',[]);
to
var testApp= angular.module('test');
it works again..
here, whats the main problem?? like this i can't pass any dependecies.. Any suggestions please..

You're declaring and redeclaring a global variable for your module. This global variable will probably be hoisted or some other kind of javascript execution voodoo that will make your code behave in an unpredictable manner. To protect from this, just use angular's built in module getter call instead of declaring it on the global namespace.
Like so:
App.js
angular.module('testApp', [
// dependencies here'
]);
TestCtrl.js
angular.module('testApp')
.controller(function($scope) {
$scope.testValue = "value";
});
Again, the important distinction here is that angular.module('testApp', []) with the second argument (the dependency list) creates a new module, overwriting whatever testApp was before. On the other hand, angular.module('testApp') called without the second argument simply retrieves the module so that you can add more directives/controllers/config/constants to it.
Also, you should probably ditch stand alone controller, as they're not really considered best practice anymore. The directive/component route is much more in vogue right now.
For a brief overview of current angular best practices, check out John Papa's https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

Place the controller file after loading the app.js file.
So the content of the app.js will be,
var testApp= angular.module('test',[]);
Controller.js will be,
angular.module('test').controller('testCtrl',function($scope){
$scope.testValue='testttttttttt';
})
In index.html , order will be,
<script src="app.js"></script>
<script src="testCtrl.js"></script>
DEMO

Why does ng-click not work?

Moved this question to this post - Angular events, ng-click, do not work with other libraries Dojo, Knockout, KendoUI, ESRI JSAPI
No matter what I try, ng-click does not work. However, onclick works. Inside the scope, wiring up an on click event dos not work. What is going on?
EDIT: I can call the $scope.myClick() from the command line. But it will not hit the breakpoint. It will show an alert window, but if this is called from within HTML directive, the function is not hit.
EDIT 2: heres a plunker - https://plnkr.co/edit/kK3NmWB9wfOopG7m5MYv?p=preview
EDIT 3: Ok, so the plunker works, but the horrible application I need to add angular to must messing with something in angular. Any ideas what could be breaking Angular in an existing app? This other app uses dojo, dojo loaders, and require.js. Everything works, except for the ng-click event.
EDIT 4: I commented out an Init() call from this application which loads Dojo, Kendo UI, Knockout, and ESRI JSAPI components, and this Angular code with ng-click works. My gut feeling is knockout is messing with this. Is it possible to completely isolate Angular from the rest of this application? Any suggestions?
here is the app:
var myApp = angular.module('myApp ', []);
directive:
myApp.directive('rapidReport',
function () {
return {
restrict: 'E'
}
});
<div class="ls-rapidReports">
<div ng-app="myApp">
<div id="rapidreportCtrl" ng-controller="rrController">
<button type="button" ng-click="myClick()">hehe</button>
</div>
</div>
</div>
controller:
myApp.controller('rrController',
function rrController($scope) {
$scope.myClick = function () {
debugger;
};
});

Here is the problem:
var myApp = angular.module('myApp ', []);
which should be:
var myApp = angular.module('myApp', []); //myApp without space before '
-
EDIT: Now I see it fixed in the plnkr. If you infact try to add the space again in myApp declaration you will see the following error message in the console.
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' 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.
As you can deduct from the error log, the app declaration in the script.js wasn't matching with the one in the ng-app directive in index.html, so the app wasn't working.

How do load the angularJS module into an application?

I am receiving the following error:
Unhandled exception at line 24, column 180 in
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
0x800a139e - JavaScript runtime error: [$injector:nomod]
http://errors.angularjs.org/1.4.8/$injector/nomod?p0=undefined,
I have my scripts loaded within the page and am not referencing any JavaScript files except for the app.js and module for controllers within the project like below:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="Scripts/someApp.js"></script>
<script src="Scripts/someModule.js"></script>
<title>Box labeling Program</title>
</head>
<body ng-app="someApp">
<div ng-controller="someCtrl">
</div>
</body>
</html>
The angularJS that I thinking I need below (someApp.js):
angular.module('someApp'['someModule'])
.config([function () {
console.log("Config hook")
}])
.run([function () {
console.log("Run the hook");
}])
There seems to be an issue with angular.min.js, it does not seem to know what object it needs from the reference. I have changed the placement of the script to below the body tag, though this does not seem to change anything.
Also, here is the what I suspect that I need to use for the creating controllers,
angular.module('someModule', [])
.config([function () {
console.log("Some Module:: config");
}])
.run([function () {
console.log("Some Module:: running");
}])
.controller('SomeCtrl', ['$scope', function ($scope) {
$scope.theName ="Julie"
}])
}])

If this is your actual code then you are missing a comma between 'someApp' and the injected dependency ['someModule']. Although angular gives pretty generic error messages you can infer something to this point by the fact that it is a runtime error. That suggests an error in code not in logic. it also states: [$injector:nomod]. Which means there is no module to inject.
If this is just an approximation of your code and not the actual code then we really can't help you. I only say this because what you've provided is exceptionally generic and is either an exercise you're performing or your attempt to hide code for some reason. If that's the case then our ability to help is limited.

undefined angularJS control function error

I am discovering angularJS, but I get an error Argument 'LawContrl' is not a function, got undefined. In my form, I have in my rails app
%div{"ng-controller" => "LawContrl"}
=form-for ...
%li{"ng-repeat"=>"entry in entries"} {{entry.name}} //I am using haml file
in my laws.js.coffee file, I have
#LawContrl = ($scope) ->
$scope.entries = [
{ name: "hi"}
{name: "ho"}
]

Ok, I think I got it. I don't know what ide you're using, but rename (or refactor then rename if you're using Eclipse or Rubymine) your application.js.coffee to application.js and everything must be working just fine. Btw, you should declare some LawContrl module in your angularJS so the controller can be passed to the view

Not sure what it could be, some things to check that might help with debugging this:
angular.js library script is included only once in the page
LawContrl script is included in the page after angular.js
ng-app attribute (it can be empty) is present in the HTML
If ng-app has a value, e.g. ng-app="foo", then LawContrl should be part of the foo module

Using AngularJS with innerHTML

I have some AngularJS stuff that holds a bunch of arrays and data. Once a user uploads a file, the file gets parsed up and saved into the scope with its different arrays. However, after all of this and the file is held in the scope, I try to update the innerHTML, but the AngularJS code does not work. I use ng-repeat to create a table based on the arrays, but it remains a single cell with content looking like {{column}} and the like.
I have had extreme difficulty using directives and templates because my index.html says that app and module, etc, are undefined when I do something such as app.directive(...
The significant parts of my index.html file include:
<html ng-app>
... //once a file is uploaded, total.js is called;
//this was so the app didn't try to run before a file was uploaded
<div id="someStuff">This will become a table once a file is uploaded</div>
This is a simple example of how my scope is set up in total.js:
function sheet($rootScope, $parse){
$rootScope.stuff = text;
//text is a variable that contains the file's contents as a string
};
document.getElementById('someStuff').innerHTML="<div ng-controller='sheet'>{{stuff}}</div>";
The HTML changes but instead of printing the file's contents, it only prints {{stuff}}.
How can I get the innerHTML to understand that it contains AngularJS, preferably without using a partial or a directive, unless you can thoroughly explain where I'd input it and the syntax of it.
Edit 1:
I have tried using $compile but it is marked as undefined. I looked at this to figure out the compile problem, but I don't understand rtcherry's syntax, and how I should apply it to my own code.
Edit 2:
I still receive $compile undefined errors when I include it like so:
function sheet($rootScope, $parse, $compile){...};
document.getElementById('someStuff').innerHTML=$compile("<div ng-controller='sheet'>
{{stuff}}</div>")(scope);
Edit 3:
While itcouldevenbeaboat's comment was extremely unhelpful, I decided I should perhaps show you the directive way I attempted to do it.
I included this code under my sheet function:
var app = angular.module('App', []);
app.directive('spreadsheeet', function($compile){
return{
templateUrl: innerHTML.html
}
});
Where innerHTML contains <div ng-controller='sheet'>{{stuff}}</div>and on index.html I've included <div spreadsheet></div>
With this, I receive no errors, but the text does not show up, neither as {{stuff}} or as the file's contents. Even when I do something simple, such as provide template: "<h2>Hello!</h2>" instead of a templateUrl, I cannot get Hello! to print.

It works for me
document.getElementById('someStuff').innerHTML = "<div ng-controller='sheet'>{{stuff}}</div>";
$compile( document.getElementById('someStuff') )($scope);

Simple solution (it will work 100%):
In controller, don't forget to inject $document in controller as a dependency, like this:
App.controller('indiaController', function ($scope, $document,$filter, $location) {
var text_element = angular.element($document[0].querySelector('#delhi');
text_element.html('your dynamic html placed here');
}