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.
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 read through the other related threads on the subject and tried their recommended solutions but I can't figure it out. As far as I can tell, ngRoute is being correctly linked to the project via the tag and then injected as a dependency. I've tried many different things (like using ui-router instead) and nothing seems to be working. Any help would be much appreciated!
The full error reads:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: $stateProvider
http://errors.angularjs.org/1.4.5/$injector/unpr?p0=%24stateProvider
at REGEX_STRING_REGEXP (http://localhost:8000/static/bower_components/angular/angular.js:68:12)
at http://localhost:8000/static/bower_components/angular/angular.js:4284:19
at getService (http://localhost:8000/static/bower_components/angular/angular.js:4432:39)
at Object.invoke (http://localhost:8000/static/bower_components/angular/angular.js:4464:13)
at runInvokeQueue (http://localhost:8000/static/bower_components/angular/angular.js:4379:35)
at http://localhost:8000/static/bower_components/angular/angular.js:4388:11
at forEach (http://localhost:8000/static/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:8000/static/bower_components/angular/angular.js:4369:5)
at createInjector (http://localhost:8000/static/bower_components/angular/angular.js:4294:11)
at doBootstrap (http://localhost:8000/static/bower_components/angular/angular.js:1655:20)
http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=myApp&p1=Error%3A%2…host%3A8000%2Fstatic%2Fbower_components%2Fangular%2Fangular.js%3A1655%3A20)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body ng-app="myApp">
<div ng-controller="MainCtrl">
{{ test }}
</div>
<script src="static/bower_components/angular/angular.js"></script>
<script src="static/bower_components/angular-route/angular-route.min.js"></script>
<script src="static/components/app.js"></script>
</body>
</html>
app.js:
'use strict';
function() {
angular.module('myApp', ['ngRoute'])
.controller('MainCtrl', function ($scope) {
$scope.test = 'hello world';
});
})();
It's not a routing problem. You have missing parenthesis in your app.js, your code should be like this.
'use strict';
(function () {
angular.module('myApp', ['ngRoute'])
.controller('MainCtrl', function ($scope) {
$scope.test = 'hello world';
});
})();
I think that ngRoute (angular-route.js) uses the provider $routeProvider, and ui-router (angular-ui-router.js) uses the provider $stateProvider.
Check out this answer.
What is the difference between angular-route and angular-ui-router?
If this is the case.
Solution 1. change the script from angular-route.js to angular-ui-router.js
Solution 2. change the provider to $routeProvider
Hope it helps
If all the above answers fail, Just try this one.
I think the problem is with the included script...
Solution 1: Copy the angular.min.js as well as angular-route.min.js to the current folder and include it as
<script src="angular.min.js"></script>
If it doesn't work,
Solution 2:
Try adding the above script, on your head tag just after the end of the title tag.
I have a standard angular page that is not associated with any ui.router functionality(index.html). From that page I click a link that triggers an angular call and than after some operation the flow needs to be redirected to a page inside a folder that is using angular-ui.route template.
I have created a plunker that represents this:
http://plnkr.co/edit/7UQTlMRQBMXGaRdHlPfs?p=preview (current plunker is working but there's a loop on first page trying to call default state created with $urlRouterProvider.otherwise('events');)
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.3.16" data-semver="1.3.16" src="https://code.angularjs.org/1.3.16/angular.js"></script>
<script data-require="ui-router#*" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="LoginController as lgCtrl">
<h1>This page does not use ui.router</h1>
Login
</body>
</html>
The page with ui-view tag is inside a manage folder:
manage/home.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.angularjs.org/1.3.16/angular.js" data-semver="1.3.16" data-require="angular.js#1.3.16"></script>
<script data-require="ui-router#*" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
<script type="text/javascript" src="../app.js"></script>
</head>
<body ng-controller="EventsController as evtCtlr">
<h1>Hello manage/home.html</h1>
<div ui-view></div>
</body>
</html>
The templateUrl page to be inserted is:
manage/events.html
<div ng-controller="EventsController as evtCtrl">
<h3>Events Page</h3>
<div>Some user email</div>
</div>
app.js
'use strict';
(function () {
var app = angular.module('app', ['ui.router']);
/**
* Configuration for ui-router module. Handles navigation based on app states.
*/
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('events');
$stateProvider
.state('events', {
url: '/events',
views:{
'#manage/home':{
templateUrl: 'manage/events.html'
}
}
});
});
app.controller('LoginController', ['$scope','$window', '$state',
function($scope, $window, $state){
$scope.goToEvents = function(){
console.log('trying to load events');
//this call doesn't work, 404 - It should?? -->> see reference
//https://github.com/angular-ui/ui-router/wiki/URL-Routing
$window.location.href = 'manage/home.html/events';
//don't work
//$state.transitionTo('events');
//also don't work
//$state.go('events');
};
}]);
app.controller('EventsController', [function(){
console.log('EventsController');
}]);
})();
I have created a plunker that represents this:
http://plnkr.co/edit/7UQTlMRQBMXGaRdHlPfs?p=preview
I have tried different ways of moving from the first non ui.router page but none worked so far.
What's the best way of doing this?
Firstly , do not inject $state as dependency in the LoginController as the view related to this controller isn't an UI route. Adding the $state dependency causes the loop that you are seeing in your example as UI-Router then considers this view a route. As no state matches this route , it tries to load the default state , whose template has a relative URL , which then looks it up inside wrong directory of Plunkr , which causes 404 error.
Secondly , the URL to redirect should via location.href should have a hash otherwise it will also give 404
The code for the LoginController
app.controller('LoginController', ['$scope', '$window',
function($scope, $window) {
$scope.goToEvents = function() {
//Do Something
$window.location.href = 'manage/home.html#/events';
};
}
]);
Check the working example at http://plnkr.co/edit/K2iBYu?p=preview
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!!!