I'm building a Chrome extension and surprisingly, I could create one AngularJS app for the extension side and another for the content script side. The latter is useful to work with a modal-like element injected in the page. I injected this app with this content script:
var myApp = angular.module('ContentApp', []);
/**
* Append the app to the page.
*/
$.get(chrome.runtime.getURL('templates/modal.html'), function(data) {
$($.parseHTML(data)).appendTo('body');
// Manually bootstrapping AngularJS app because template was also manually imported.
angular.element(document).ready(function() {
angular.bootstrap(document, ['ContentApp']);
});
});
The problem comes now that modal.html is getting big and I still have to add more elements. I thought that I could start creating components in Angular and did it like this:
angular.module('ContentApp').
component('greetUser', {
template: 'Hello, {{$ctrl.user}}!',
controller: function GreetUserController() {
this.user = 'world';
}
});
This actually works. I can see the Hello, world message in the rendered page. But when I changed template for templateUrl, it failed:
// This doesn't work
templateUrl: 'templates/component.html',
// Neither does this
templateUrl: 'templates/component.html',
// Although this is similar to the way I got the main template, it didn't worked either
templateUrl: chrome.runtime.getURL('templates/component.html'),
Worth to mention that I added the permission to manifest.json:
"web_accessible_resources": [
"templates/*"
],
The error that I got in the console is this:
Error: [$sce:insecurl] http://errors.angularjs.org/1.5.11/$sce/insecurl?p0=chrome-extension%3A%2F%2Fext_id%2Ftemplates%2Fmodal.html
at chrome-extension://ext_id/scripts/lib/angular.min.js:6:426
at getTrusted (chrome-extension://ext_id/scripts/lib/angular.min.js:154:156)
Does anyone know how to make it work? Or am I asking too much for a Chrome extension?
I found the answer in this link. Thanks to faboolous who pointed me in the right direction ;)
Since templateURL is processed before $scope execution, the proper way to secure a template path in a Chrome extension is this:
// This works. Yay!
angular.module('ContentApp').
component('greetUser', {
templateUrl: ['$sce', function ($sce) {
return $sce.trustAsResourceUrl(chrome.runtime.getURL('templates/component.html'));
}],
controller: function ($scope) {
...
I was able to successfully implement the API on web, here is what it looks like, I have a button in a regular html file...
<div>
<span class="radio-button radio-left" id="sandboxLinkButton">Sandbox Mode</span>
</div>
I include the script tag...
<script src="https://cdn.plaid.com/link/stable/link-initialize.js"></script>
and I include the following javascript in the html body...
<script type="text/javascript">
var sandboxHandler = Plaid.create({
clientName: 'SUM',
env: 'tartan',
product: 'auth',
key: 'test_key',
onSuccess: function(token) {
//window.location = '/accounts.html?public_token=' + token;
console.log("yes");
},
});
// Open the "Institution Select" view using the sandbox Link handler.
document.getElementById('sandboxLinkButton').onclick = function() {
sandboxHandler.open();
};
</script>
Now I want to do the same using angular js. I'm using an ionic framework (not that it really matters). So I first display the necessary html using the following...
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/app');
$stateProvider
.state('app', {
url: '/app',
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
});
My menu.html file contains the following button...
<span ng-click="create()" class="radio-button radio-left" id="sandboxLinkButton">Sandbox Mode</span>
on ng-click it reaches the following controller. I tried to implement the API in this controller to no avail...
app.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
var sandboxHandler = Plaid.create({
clientName: 'SUM',
env: 'tartan',
product: 'auth',
key: 'test_key',
onSuccess: function(token) {
console.log("yes");
},
});
$scope.create = function() {
sandboxHandler.open();
}
});
I get the error Plaid is not defined in the controller. Why is that?
EDIT
I replicated a web app version using angular and it worked. I used the following CDN instead of the ionic/angular one
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
But I still can't get it to work on my ionic web app. Has anyone else ever come across this issue?
When I included the library I immediately got the following error in the browser: Uncaught TypeError: Cannot read property 'appendChild' of null
There are similar questions about this error regarding different libraries here and here, however I was not able to solve the problem based on those answers.
The closest thing to a solution that I found was in this issue report within the Plaid repository on GitHub. It describes a problem with the library not working when placed in the <head> tag. A commit within this issue report describes that this problem can be solved by including the script inside the <body> tag instead of the <head> tag.
I would recommend subscribing to the issue report to see whether other solutions will be introduced in the future.
So tldr; Try moving the <script> tag from <head> to the <body>.
You can simply use the Plain angular wrapper that I created:
https://github.com/khashayar/ng-plaid
Why am I forced to declare the provider before the config function that will uses it?
In others words, this code works:
angular.module('app')
.provider('testService', function() {
// ...
})
.config(function(testServiceProvider) {
// ...
});
but not this one (got an [$injector:unpr] Unknown provider: testServiceProvider):
angular.module('app')
.config(function(testServiceProvider) {
// ...
})
.provider('testService', function() {
// ...
});
(in my real code, these 2 blocks are defined in separate files, and thus the order of loading these files really matters)
My understanding was that when I call module('app').config(...) and module('app').provider(...), the code is not executed immediately, but when the Angular application is bootstraped, and thus, that's the role of Angular to execute the differents code in correct order (i.e. the provider code and then the config code).
Thanks
ps1: I already saw this question, which is quite the same but the answer was more about suggestion or guessing...
ps2: I'm still working with Angular 1.2, maybe things changed with Angular 1.3 - 1.4?
I've tested on several Angular versions, and it appears to be a "bug" in 1.2.x version. Starting from 1.3.0 version, the order of the definition of the provider and config is not important.
in Angular 1.2.29: http://jsfiddle.net/c4Lg3da4/ --> KO
in Angular 1.3.0: http://jsfiddle.net/c4Lg3da4/1/ --> OK
in Angular 1.4.8: http://jsfiddle.net/40arcz2p/ --> OK
test code:
angular.module('myApp',[])
.provider('testService', function() {
console.log('.. service');
this.$get = function () {
return {};
};
})
.config(function(testServiceProvider) {
console.log('.. config');
});
I am developing a MEAN app. My Angular folder structure is the following:
and get the following errors on my app:
but when I rename the 'users' folder to anything else, like 'user', it works:
why is that?
EDIT:
app.js as requeseted:
var mainModuleName = 'mean';
var mainModule = angular.module(mainModuleName, ['ngRoute', 'example', 'users']);
mainModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('!');
}]);
if (window.location.hash === '#_=_') window.location.hash - '#!';
angular.element(document).ready(function() {
angular.bootstrap(document, [mainModuleName]);
});
I think you're missing the second argument for angular.module in your first case. You should have
angular.module('users',[]).factory('auth',[auth]);
Because you don't have the brackets, you're not actually creating a new instance of user and that's where the error is coming from.
This link might help
https://docs.angularjs.org/api/ng/function/angular.module
Bwah! Silly me.
I have a method as my API that is at the following:
http://localhost:3000/users
so instead of serving files, it reaches for the API and that is also why Mongoose throws an error there in the console picture.
I am writing a sample application using angularjs. i got an error mentioned below on chrome browser.
Error is
Error: [ng:areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined
Which renders as
Argument 'ContactController' is not a function, got undefined
Code
<!DOCTYPE html>
<html ng-app>
<head>
<script src="../angular.min.js"></script>
<script type="text/javascript">
function ContactController($scope) {
$scope.contacts = ["abcd#gmail.com", "abcd#yahoo.co.in"];
$scope.add = function() {
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
};
}
</script>
</head>
<body>
<h1> modules sample </h1>
<div ng-controller="ContactController">
Email:<input type="text" ng-model="newcontact">
<button ng-click="add()">Add</button>
<h2> Contacts </h2>
<ul>
<li ng-repeat="contact in contacts"> {{contact}} </li>
</ul>
</div>
</body>
</html>
With Angular 1.3+ you can no longer use global controller declaration on the global scope (Without explicit registration). You would need to register the controller using module.controller syntax.
Example:-
angular.module('app', [])
.controller('ContactController', ['$scope', function ContactController($scope) {
$scope.contacts = ["abcd#gmail.com", "abcd#yahoo.co.in"];
$scope.add = function() {
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
};
}]);
or
function ContactController($scope) {
$scope.contacts = ["abcd#gmail.com", "abcd#yahoo.co.in"];
$scope.add = function() {
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
};
}
ContactController.$inject = ['$scope'];
angular.module('app', []).controller('ContactController', ContactController);
It is a breaking change but it can be turned off to use globals by using allowGlobals.
Example:-
angular.module('app')
.config(['$controllerProvider', function($controllerProvider) {
$controllerProvider.allowGlobals();
}]);
Here is the comment from Angular source:-
check if a controller with given name is registered via $controllerProvider
check if evaluating the string on the current scope returns a constructor
if $controllerProvider#allowGlobals, check window[constructor] on the global window object (not recommended)
.....
expression = controllers.hasOwnProperty(constructor)
? controllers[constructor]
: getter(locals.$scope, constructor, true) ||
(globals ? getter($window, constructor, true) : undefined);
Some additional checks:-
Do Make sure to put the appname in ng-app directive on your angular root element (eg:- html) as well. Example:- ng-app="myApp"
If everything is fine and you are still getting the issue do remember to make sure you have the right file included in the scripts.
You have not defined the same module twice in different places which results in any entities defined previously on the same module to be cleared out, Example angular.module('app',[]).controller(.. and again in another place angular.module('app',[]).service(.. (with both the scripts included of course) can cause the previously registered controller on the module app to be cleared out with the second recreation of module.
I got this problem because I had wrapped a controller-definition file in a closure:
(function() {
...stuff...
});
But I had forgotten to actually invoke that closure to execute that definition code and actually tell Javascript my controller existed. I.e., the above needs to be:
(function() {
...stuff...
})();
Note the () at the end.
I am a beginner with Angular and I did the basic mistake of not including the app name in the angular root element. So, changing the code from
<html data-ng-app>
to
<html data-ng-app="myApp">
worked for me. #PSL, has covered this already in his answer above.
I had this error because I didn't understand the difference between angular.module('myApp', []) and angular.module('myApp').
This creates the module 'myApp' and overwrites any existing module named 'myApp':
angular.module('myApp', [])
This retrieves an existing module 'myApp':
angular.module('myApp')
I had been overwriting my module in another file, using the first call above which created another module instead of retrieving as I expected.
More detail here: https://docs.angularjs.org/guide/module
I just migrate to angular 1.3.3 and I found that If I had multiple controllers in different files when app is override and I lost first declared containers.
I don't know if is a good practise, but maybe can be helpful for another one.
var app = app;
if(!app) {
app = angular.module('web', ['ui.bootstrap']);
}
app.controller('SearchCtrl', SearchCtrl);
I had this problem when I accidentally redeclared myApp:
var myApp = angular.module('myApp',[...]);
myApp.controller('Controller1', ...);
var myApp = angular.module('myApp',[...]);
myApp.controller('Controller2', ...);
After the redeclare, Controller1 stops working and raises the OP error.
Really great advise, except that the SAME error CAN occur simply by missing the critical script include on your root page
example:
page: index.html
np-app="saleApp"
Missing
<script src="./ordersController.js"></script>
When a Route is told what controller and view to serve up:
.when('/orders/:customerId', {
controller: 'OrdersController',
templateUrl: 'views/orders.html'
})
So essential the undefined controller issue CAN occur in this accidental mistake of not even referencing the controller!
This error might also occur when you have a large project with many modules.
Make sure that the app (module) used in you angular file is the same that you use in your template, in this example "thisApp".
app.js
angular
.module('thisApp', [])
.controller('ContactController', ['$scope', function ContactController($scope) {
$scope.contacts = ["abcd#gmail.com", "abcd#yahoo.co.in"];
$scope.add = function() {
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
};
}]);
index.html
<html>
<body ng-app='thisApp' ng-controller='ContactController>
...
<script type="text/javascript" src="assets/js/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
If all else fails and you are using Gulp or something similar...just rerun it!
I wasted 30mins quadruple checking everything when all it needed was a swift kick in the pants.
If you're using routes (high probability) and your config has a reference to a controller in a module that's not declared as dependency then initialisation might fail too.
E.g assuming you've configured ngRoute for your app, like
angular.module('yourModule',['ngRoute'])
.config(function($routeProvider, $httpProvider) { ... });
Be careful in the block that declares the routes,
.when('/resourcePath', {
templateUrl: 'resource.html',
controller: 'secondModuleController' //lives in secondModule
});
Declare secondModule as a dependency after 'ngRoute' should resolve the issue. I know I had this problem.
I was getting this error because I was using an older version of angular that wasn't compatible with my code.
These errors occurred, in my case, preceeded by syntax errors at list.find() fuction; 'find' method of a list not recognized by IE11, so has to replace by Filter method, which works for both IE11 and chrome.
refer https://github.com/flrs/visavail/issues/19
This error, in my case, preceded by syntax error at find method of a list in IE11. so replaced find method by filter method as suggested https://github.com/flrs/visavail/issues/19
then above controller not defined error resolved.
I got the same error while following an old tutorial with (not old enough) AngularJS 1.4.3. By far the simplest solution is to edit angular.js source from
function $ControllerProvider() {
var controllers = {},
globals = false;
to
function $ControllerProvider() {
var controllers = {},
globals = true;
and just follow the tutorial as-is, and the deprecated global functions just work as controllers.