I'm trying to follow the tutorial using notepad and Chrome, here's the code I have but it comes up with the error
Error: [ng:areq] Argument 'testhere' is not a function, got undefined
http://errors.angularjs.org/1.3.15/ng/areq?p0=testhere&p1=not%20a%20function%2C%20got%20undefined
Any idea what on earth I'm missing here? I'm sure it's trivial and daft but can't find it for the life of me!
<html ng-app>
<head>
<script>
function testhere($scope)
{
$scope.totalcount=4;
}
</script>
<script type="text/javascript" src="js/angular.js"></script>
</head>
<body>
<div ng-controller="testhere">
{{totalcount}}
</div>
</body>
</html>
From Angular 1.3.x you cant define global controllers by defualt
there are two ways
1) register controllers with .controller()
First make an module by providing name of module in first argument and dependencies in second(there are no dependencies for now)
angular.module('myModule',[])
use .controller()
angular.module('myModule',[])
.controller('testhere'.function CommentsCtrl($scope) {
...
})
2) or set global controller option
angular.module('myModule',[])
.config(['$controllerProvider', function($controllerProvider) {
$controllerProvider.allowGlobals();
}]);
in html
<html ng-app="myModule">
Go through this jsbin example comment the required version of angular and see the difference.
Please see https://docs.angularjs.org/guide/controller to see how to define a controller in Angular. Your testthere now is just a function in javascript, not a controller
And also, your application javascript (controller, etc) should be after angular library in the head section
Related
I declare this module:
angular.module('dashboard', [])
.controller('dashboardController', ['$scope',
function ($scope) {
$scope.data = "555";
}]);
And here is view:
<div ng-app="dashboard" data-role="page" id="layersProperty" data-add-back-btn="true" >
<div ng-controller="dashboardController">
{{data}}
</div>
</div>
And here is FIDDLE.
In console I get this error:
Error: [$injector:nomod] Module 'dashboard' 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.
Any idea why I get error above?
No issue with your code, since you are adding external scripts you just need to change
Javascript settings -> Load type -> Wrap in <Head>
This is due to the javascript Load Type you have set on JSFiddle. When you use onLoad, JSFiddle will wrap your javascript in a $(window).load(function (){}); block. This means the angular.module() code that registers your Angular app will not run until after the DOM has been processed. So Angular tries to find a dashboard module that has not been created yet.
Basically your code looks good and by the way its working check it Plnkr .
check your code (did you include angular?) or just post your full code.
code in Plnkr :
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="dashboard" ng-controller="dashboardController">
{{ data }}
</div>
<script>
angular.module('dashboard', [])
.controller('dashboardController', ['$scope',
function($scope) {
$scope.data = "555";
}
]);
</script>
</body>
</html>
I'm trying to get Tiny MCE to work in angular and having less than stellar success with it.
Currently I cant get past this error:
Unable to get property 'body' of undefined or null reference
I even tried to just get a basic fiddle running with it but failed at that too. http://jsfiddle.net/m0z0n6dL/
As far as I understand all you need is the tinymce-angular script and then decorate your textbox with <textarea ui-tinymce="tinymceOptions" ng-model="text" type="text"><textarea>
and to include it in the module
var myApp = angular.module('myApp', ['ui.tinymce']);
But this is failing on:
Unknown provider $sceProvider <- $sce <- uiTinymceDirective
If anyone could show me a simple example using CDNs for angular and tinymce dependencies I would be really happy.
Well, it seems you MUST instantiate your module as ui.tinymce, otherwise it doesn't work.
Here's an example:
angular.module('ui.tinymce')
.controller('mainCtrl', function($scope, $sce) {
$scope.updateHtml = function() {
$scope.tinymceHtml = $sce.trustAsHtml(ctrl.tinymce);
};
});
<!DOCTYPE html>
<html ng-app="ui.tinymce">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/tinymce.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/ui-tinymce/master/src/tinymce.js"></script>
</head>
<body ng-controller="mainCtrl">
<form method="post">
<textarea ui-tinymce
ng-model="tinymce"
ng-change="updateHtml()"></textarea>
</form>
<div ng-bind-html="tinymceHtml"></div>
</body>
</html>
Note: The example above won't compile well because the stacksnippets is blocking the url of tinymce.
You can see the full demo here without errors.
I've just started learning AngularJS and built a small yet simple application, which consists of multiple controllers as shown here:
I have a SiteMaster.html page, inside this page I use ng-view as shown here:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/app.js"></script> <!-- Consists of Routing -->
<script src="Templates/Params/paramsController.js"></script>
<title>Angular Routing Tutorial</title>
</head>
<body ng-app="mainApp">
<h1>sitemaster Template</h1>
<div ng-view></div>
</body>
</html>
As you can see the last script tag is the controller for the params page, Ideally I don't want this script tag reference on the SiteMaster instead I would like to place it inside the params.HTML page that way it's only loaded when it's required, now I've moved this script tag from the SiteMaster.Html to the params.Html page as shown here:
<script src="paramsController.js"></script>
<div ng-controller="paramsCtrl">
<h1>
Passed a parameter via url
</h1>
</div>
Yet when I run the project I get the following error:
Error: [ng:areq] http://errors.angularjs.org/1.5.2/ng/areq?p0=paramsCtrl&p1=not%20a%20function%2C%20got%20undefined
So my question is, how do I get this paramsController.js reference to work within the params.html page? instead of having it on the SiteMaster.html page?
Please note, when the paramsController.js is placed inside the SiteMaster.Html page it works as expected.
Any help would be appreciated.
Update
After adding ocLazyLoad I have done the following:
Added the script reference to sitemaster.html
Inside my app.js I have done the following:
var app = angular.module('mainApp', ['ngRoute', "oc.lazyLoad"]);
Inside my paramsController.js I have the following:
angular.module("mainApp").controller('paramsCtrl', function ($scope, $routeParams, $ocLazyLoad) {
console.log($routeParams);
var param1 = $routeParams.page_number;
alert(param1);
});
And now I've hit a road block I'm unsure where or how I go about loading this controller via ocLazyLoad ? I following this documentation : https://oclazyload.readme.io/docs
First of all, your path is wrong. Change
<script src="paramsController.js"></script>
to
<script src="Templates/Params/paramsController.js"></script>
Also, include the following in your <head> section:
<base href="/">
And the second thing, I'm not sure, even that will not work as Angular has already been initialized. So you need to use a library like ocLazyLoaded to dynamically load resources.
Also, consider reading this post https://stackoverflow.com/a/17675432/2405040
Update:
In your params.html
<!-- Remove this line
<script src="paramsController.js"></script>
-->
<div ng-controller="paramsCtrl">
<h1>
Passed a parameter via url
</h1>
</div>
And now modify your $routeProvider configuration:
(From the docs https://oclazyload.readme.io/docs/with-your-router)
$routeProvider.
when('/foo', {
templateUrl: 'Templates/Params/params.html',
resolve: {
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load('Templates/Params/paramsController.js');
}]
}
})
Hello I want to print content from an array of objects using angular js. I know that there are a lot of questions like this but there isn't any case where the same problem occurs. I want to print an attribute of an object as html. I use ng-sanitize as seen in many examples and it works fine though i get an error in console.
Here my test case:
<body ng-controller="myCtrl">
<div ng-repeat="widget in widgets track by $index">
<div ng-bind-html="widget.content">
</div>
</div>
</body>
<script>
var app = angular.module("MainCtrl", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
function Widget(){
this.content='<p>test</p>';
}
$scope.widgets=[];
$scope.widgets.push(new Widget(),new Widget(),new Widget());
console.log( $scope.widgets);
});
</script>
which works fine and print the elements as it should but in the console i get this error:
TypeError: c.push is not a function
at Function.K.$$addBindingInfo (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:78:223)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:252:330
at ea (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:73:293)
at D (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:62:190)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:105)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:122)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:54:249
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:56:79
at k (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:60:377)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:281:253 <div ng-bind-html="widget.content" class="ng-binding">
I use angular 1.4.8
Do you have any ideas why this error occurs or how to solve it?
Thx in advance
I forked your plunkr to show the problem you are encountering.
Whenever you use angular modules like ngRoute or ngSantize, it is important that the version of the module match exactly to the version of the angular library. In your case, you were using angular 1.4.8, but angular ngSanitize 1.0.3.
Updating the code to the proper version of ngSanitize from the CDN (and using angular.js instead of angular.min.js for debugging) shows that the error does not occur with ng-bind-html.
Use correct Versions for .js files... here is the code.... This is running perfectly
this is index.html
<html ng-app = "myapp">
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.4.8/angular-sanitize.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body ng-controller = "myController">
<h1>Welcome to the Angular</h1>
{{4/3}}
<div ng-repeat="widget in widgets track by $index">
<div ng-bind-html="widget.content">
</div>
</div>
</body>
</html>
and this is test.js
var app1 = angular.module('myapp',['ngSanitize']);
app1.controller("myController" , function($scope){
function Widget(){
this.content='<p>test</p>';
}
$scope.widgets=[];
$scope.widgets.push(new Widget(),new Widget(),new Widget());
console.log( $scope.widgets);
});
save these two files in one folder and run.. it gives output perfectly
Found the bug, don't use ng-bind-html, that causes the issue.
Use single angular expression inside your html and it'll just work.
However I don't know what causes the issue.
Plunkr: http://plnkr.co/edit/xiSGVIPXb27GcKRh9yR1
Why doesn't this code work? I am trying to find it during last four days...
Error: [ng:areq] Argument 'mainCtrl' is not a function, got undefined
HTML:
<!doctype html>
<html ng-app>
<head>
<title> test angular html </title>
<script src="bower_components/angular/angular.js"> </script>
<script>
function mainCtrl($scope) {
$scope.value = 100;
}
</script>
</head>
<body ng-controller="mainCtrl">
<h1> {{value}} </h1>
</body>
</html>
When you are using a framework like angular you must declare some logic to work (angular 1.3+), for example.
You must create the main module of your app:
angular.module('yourmodule', []) // the last parameter [] create the module, that array are the dependencies
With your module created you must attach the controller to the module, you have a function mainCtrl created, i'm gonna use it:
var module = angular.module('yourmodule') // without the second argument, get the module with that name
module.controller('mainCtrl', mainCtrl) // This assign the name mainCtrl the function mainCtrl
And finally, add to ng-app the module created:
<html ng-app="yourmodule">
I hope this work, and welcome to angular world!!!