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>
Related
I have a trouble with starting an example in JSFiddle, it's simple code with AngularJS module, but I get a error with injecting module.
Javascript code:
angular
.module('App', ['ngMaterial'])
.controller('Ctrl', function($scope) {
$scope.text = 'Hello';
});
Html code:
<div ng-app="App" ng-controller="Ctrl">
{{ text }}
</div>
Please, help me to fix it.
Link to my JSFiddle
You need to change you javascript Load Type configuration. For example:
No wrap - in <body> or <head>
Updated JSFiddle
I am developing a web application. In my application, I am using Angular JS. I am new to Angular JS. But now I am having a problem my declaring controller. Here is my code.
<html>
<head>
//files references
</head>
<script>
var app = angular.module('memeApp',['ngRoute','ui.bootstrap']);
</script>
<nav class="nav-bar">
Home
Account
</nav>
<div class="content" ng-app="memeApp" ng-controller="DefaultController">
//content
</div>
</div>
</body>
</html>
As you can see I did nothing yet. I declare a controller named DefaultController. So when I check log, it is giving me following error:
So my controller is totally not working. When I add js code for controller as well. If I removed controller directive, errors gone. Why is my controller not working?
You need to define a controller function 'DefaultController' before you use it in html div tag.
Add below code in your script tag.
app.controller('DefaultController', ['$scope', function($scope){
}]);
You need to define your controller somewhere and add it as a dependency to the app first.
Example:
angular.module('app.controllers', [])
.controller('DefaultController' function() {
//do stuff
};
and in your app definition:
var app = angular.module('memeApp',['ngRoute','ui.bootstrap', 'app.controllers']);
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.
Just started on AngularJS, and it has been a challenging ordeal so far.
My problem today is I'm trying to configure a controller through a variable on the URL. I don't want the "real" controller to have to know where a given parameter came from, so long as it's there. The main app controller is therefore responsible of getting the parameter from the URL, and setting a constant that the "real" controller will use.
For the life of me, I cannot see what I am doing wrong in the initialization. Any help would be greatly appreciated (including what are standard practices to troubleshoot these kind of issues :))
Here is the html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- the base tag is required for th Angular.js $location.search() function to work correctly -->
<base href='/' />
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script>
angular.module("myController.constants", []);
angular.module("myApp", ["myController", "myController.constants"], function($locationProvider) {
$locationProvider.html5Mode(true);
})
.controller("myAppCtrl", ['$scope', '$location', function ($scope, $location) {
var searchObject = $location.search();
angular.module("myController.constants").constant('myConstant', searchObject['theConstant']);
}]);
</script>
<script src="js/controllerExample.js"></script>
</head>
<body ng-controller="myAppCtrl">
<div ng-controller="myControllerCtrl">
<p>The constant is {{theConstant}}</p>
</div>
</body>
</html>
Here is the js for the controller:
angular.module("myController", ["myController.constants"])
.controller("myControllerCtrl", ['$scope', 'myConstant', function ($scope, myConstant) {
$scope.theConstant = myConstant;
}]);
With the code above, I keep getting this error message
Error: [$injector:unpr] Unknown provider: myConstantProvider <- myConstant <- myControllerCtrl
Thanks!
I could be mistaken but I don't think you can declare a module inside a controller declaration. Try putting
angular.module("myController.constants").constant('myConstant', searchObject['theConstant']);
outside "myAppCtrl" declaration.
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!!!