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
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 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.
I have injection problem. I have no idea why my html is not rendering.
Render HTML in the view; it should be processed/created in the controller, and then rendered in the html view.
This code is currently not working as the html appears as text:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', myController);
myController.$inject = ['$scope']
function myController($scope) {
$scope.html = "<b>HTML inserted</b>";
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-controller="MyCtrl as vm">
<div>Html</div>
<div>{{html}}</div>
<br/>
</div>
For rendering of html in angular try the ng-bind-html attribute.
In your case:
<div ng-bind-html="html"></div>
More info:
ngBindHtml in AngularJS
Edit: Also add ngSanitize dependence:
ngSanitize
try adding 'ngSanitize' in your module dependencies if you're using ng-bind-html
I am kind of new to angular JS and this might be the simple question but i am stuck on this.
What i am trying to do is, I have one page and on that page I want to add a template. My template is kind of dynamic and have it's own controller. My code is something like this..
-- Main Page HTML --
<html ng-app="myApp">
<body ng-controller="MyAppCtrl">
<my-component>
</my-component>
</body>
</html>
-- Main page JS --
var myAppModule = angular.module('myApp');
myAppModule.controller('MyAppCtrl', function ($scope) {
})
.directive('myComponent', function () {
return {
restrict: 'E',
templateUrl: 'myComponent.aspx'
};
});
-- Template(myComponent.aspx) --
<html>
<!-- include template script -->
<body ng-controller="ComponentCtrl">
<div ng-click="showAlert()">
myBtn
</div>
</body>
</html>
-- Template page JS --
var templareModule = angular.module('myApp', []);
templareModule.controller('ComponentCtrl', function ($scope, $http) {
$scope.showAlert = function () {
alert("clicked");
}
});
So for this I am unable to get alert on click.
Thanks in advance.
You really don't need to create a custom directive to be able to do what you describe in your question and since you're a beginner I would suggest you start simple and do without the directive. You will need to use the ng-view tag and routing. There are some other minor issues with your code, some of which were already pointed out by others in the comments. The following code worked for me.
index.html:
<html ng-app="myApp">
<body>
<h1>Test</h1>
<div ng-view></div>
<script> (Insert paths to required Angular scripts and your JS files)</script>
</body>
</html>
App JS file:
Note: You will need to download the ngRoute JavaScript file from Angular's website and include it in your project to get the routing to work correctly. (Go to Downloads on their website, pick your version of Angular, then download ngRoute)
angular.module('myApp', [ 'ngRoute' ])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'myComponent.aspx',
controller: 'ComponentCtrl'
})
}])
.controller('ComponentCtrl', function ($scope) {
$scope.showAlert = function () {
alert("clicked");
}
});
myComponent.aspx:
<div class="ComponentCtrl">
<div ng-click="showAlert()">
myBtn
</div>
</div>
Let me know if you have questions or are still unable to get it to work. I would also suggest you check out some tutorial videos on Egghead.io's website. It helped me figure out the basics of Angular.