i trying to do routing for two days but it i can't. I have reviewed the other questions on stackoverflow and i did everything they said in the answers but it wansn't.
I call route script in to index.php
<script src="js/angular-route.js"></script>
I wrote that code in to app.js;
var app = angular.module("app",['ngRoute']);
app.config(function($routeProvider){
$routeProvider.
when('/', {
templateUrl:'pages/home.php'
}).
when('/notificastions', {
templateUrl:'pages/notifications.php'
}).
when('/messages', {
templateUrl:'pages/messages.php'
}).
when('/search', {
templateUrl:'pages/search.php'
}).
otherwise({
rediectTo: '/'
})
})
I wrote that codes in to a page with i connect ng-include:
<div id="ifmenu">
<div class="ifmitem" href="#/home">Home</div>
<div class="ifmitem" href="#/notifications">Notifications</div>
<div class="ifmitem" href="#/messages">Messages</div>
</div>
<div ng-view></div>
But i get an error like this;
Uncaught Error: [$injector:unpr]
http://errors.angularjs.org/1.2.32/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24route
at angular.min.js:6
at angular.min.js:36
at Object.c [as get] (angular.min.js:34)
at angular.min.js:36
at c (angular.min.js:34)
at Object.d [as invoke] (angular.min.js:35)
at angular.min.js:36
at Object.c [as get] (angular.min.js:34)
at instantiateRoute (angular-route.js:886)
at Object.d [as invoke] (angular.min.js:35)
How do i resolve this error?
I resolve 'Uncaught Error: [$injector:unpr]' error, but have exclamation mark beside hashtag. Like this: (localhost/app/#!). And none of link doesn't working except the otherwise function.
I called solution of this problem in internet and i saw that i need to attach and i added;
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
But none of them doesn't working this time. What should I do to solve this problem?
Your notifications spelling is wrong.see the routeProvider section
when('/notificastions', {
templateUrl:'pages/notifications.php'
})
notificastions should be notifications
Related
trying to learn angluar route constructs but I fail on implementing ngRoute
The Definition of my app
var app= angular.module('app', ['ngMaterial', 'ngRoute']);
The configuration
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/'});
}]);
My directive to use the router
app.directive("applicationDirective", function($router) {
return {
restrict : "E",
templateUrl: 'app/templates/application.html',
controller: 'applicationController'
};
});
And my implemention in HTML
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-messages.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.js"></script>
<script src="app/app.js"></script>
Seems to be OK; but Fails... With:
angular.js:14525 Error: [$injector:unpr] Unknown provider: $routerProvider <- $router <- applicationDirectiveDirective
http://errors.angularjs.org/1.6.4/$injector/unpr?p0=%24routerProvider%20%3C-%20%24router%20%3C-%20applicationDirectiveDirective
at angular.js:66
at angular.js:4789
at Object.getService [as get] (angular.js:4944)
at angular.js:4794
at getService (angular.js:4944)
at injectionArgs (angular.js:4969)
at Object.invoke (angular.js:4995)
at angular.js:8110
at forEach (angular.js:403)
at Object.<anonymous> (angular.js:8108)
Has anybody got a hint how to solve it.
regards
n00n
You need to set routing in your config function. This directive is not needed and it doesn't work like this.
Check this out:
https://www.w3schools.com/angular/angular_routing.asp
currently, I work for a school project and want to show some charts with angularJs and meteor.
I want to use the ui-router plugin. But when I try to use it, I get the following error:
Error: only one instance of babel/polyfill is allowed
at Object.eval (eval at <anonymous> (http://localhost:3000/packages/jquery.js?hash=22a0055f59bd150c435c5aba34c7c59076b8bcd9:397:22), <anonymous>:2872:9)
at Object.1.180 (eval at <anonymous> (http://localhost:3000/packages/jquery.js?hash=22a0055f59bd150c435c5aba34c7c59076b8bcd9:397:22), <anonymous>:2875:4)
at s (eval at <anonymous> (http://localhost:3000/packages/jquery.js?hash=22a0055f59bd150c435c5aba34c7c59076b8bcd9:397:22), <anonymous>:2863:254)
at e (eval at <anonymous> (http://localhost:3000/packages/jquery.js?hash=22a0055f59bd150c435c5aba34c7c59076b8bcd9:397:22), <anonymous>:2863:425)
at eval (eval at <anonymous> (http://localhost:3000/packages/jquery.js?hash=22a0055f59bd150c435c5aba34c7c59076b8bcd9:397:22), <anonymous>:2863:443)
at eval (eval at <anonymous> (http://localhost:3000/packages/jquery.js?hash=22a0055f59bd150c435c5aba34c7c59076b8bcd9:397:22), <anonymous>:7043:4)
at eval (eval at <anonymous> (http://localhost:3000/packages/jquery.js?hash=22a0055f59bd150c435c5aba34c7c59076b8bcd9:397:22), <anonymous>:7050:3)
at eval (<anonymous>)
at http://localhost:3000/packages/jquery.js?hash=22a0055f59bd150c435c5aba34c7c59076b8bcd9:397:22
at Function.globalEval (http://localhost:3000/packages/jquery.js?hash=22a0055f59bd150c435c5aba34c7c59076b8bcd9:398:7) <div ui-view="" class="ng-scope" data-ng-animate="1">
Also I get this warning:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
I have really no idea what this message want to tell me. I didnt load babel/polyfill more than one time. Before I got this message I even didnt know of this plugin.
This is my main.js with the ui-router code:
import angular from 'angular';
import angularMeteor from 'angular-meteor';
import uiRouter from 'angular-ui-router';
import ngMaterial from 'angular-material';
import '../../../node_modules/angular-material/angular-material.css'
import '../own.css';
import template from './main.html';
import { name as Navigation } from '../navigation/navigation';
import {name as Toolbar} from '../toolbar/toolbar';
import {name as View1} from '../view1/view1';
import {name as View2} from '../view2/view2';
class Main {}
const name = 'main';
// create a module
export default angular.module(name, [
angularMeteor,
uiRouter,
Navigation,
Toolbar,
View2,
View1,
ngMaterial
]).component(name, {
template,
controllerAs: name,
controller: Main
})
.config(config);
function config($mdThemingProvider,$urlRouterProvider,$stateProvider ) {
'ngInject';
$urlRouterProvider.otherwise('view1');
$stateProvider
.state('view1', {
url: '/',
templateUrl: 'test.html'
});
$mdThemingProvider
.theme('default')
.primaryPalette('orange')
.accentPalette('deep-orange')
.warnPalette('red');
}
And this is the code of my main.html where the view should be injected:
<div layout="column" style="height: 100%">
<toolbar scroll></toolbar>
<section layout="row" flex>
<navigation></navigation>
<md-content flex layout-padding style="margin-top: 75px">
<div ui-view=""></div>
</md-content>
</section>
Without ui-router it works fine!
What is the problem here?
Most likely you have a module that is requiring babel-polyfill to compile and it's polluting your global namespace with multiple versions of babel. Therefore you want to either tell babel to ignore node_modules directory and or figure out which dependency is requiring babel-polyfill and prevent that.
The final option is to compile the code with the runtime transformer.
https://babeljs.io/docs/plugins/transform-runtime/
I found the solution.
Something was wrong with the $stateprovider.
I copied this code
$stateProvider
.state('view1', {
url: '/',
templateUrl: 'test.html'
});
into the view and changed it to this:
function config($stateProvider) {
'ngInject';
$stateProvider
.state('view1', {
url: '/view1',
template: '<view1></view1>'
});
}
(Last code example is already the finished code from my project). So no more templateUrl, but template now.
I have REALLY no idea why this works, but it works. Maybe there is someone who can explain this?
Try to delete your local file
build/
dist/
However, it works for me.
I'm testing an ionic app created using creator.
I put the following code in services.js.
angular.module('app.services', [])
.factory('BlankFactory', [function(){
}])
.factory('EventService', ['$resource', function ($resource) {
return $resource('https://.....net/api/events/:id');
}])
.service('BlankService', [function(){
}]);
And the following code in controllers.js.
angular.module('app.controllers', [])
......
.controller('nightlifeCtrl', function ($scope, EventService) {
$scope.events = EventsService.query({category: "Nightlife"});
})
Hoever I got the following error in js console?
ionic.bundle.js:25642 Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- EventService
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24resourceProvider%20%3C-%20%24resource%20%3C-%20EventService
at ionic.bundle.js:13380
at ionic.bundle.js:17574
at Object.getService [as get] (ionic.bundle.js:17721)
at ionic.bundle.js:17579
at getService (ionic.bundle.js:17721)
at Object.invoke (ionic.bundle.js:17753)
at Object.enforcedReturnValue [as $get] (ionic.bundle.js:17615)
at Object.invoke (ionic.bundle.js:17762)
at ionic.bundle.js:17580
at getService (ionic.bundle.js:17721)
I tried to add the dependency by angular.module('...', ['ngResource']) but it got the following error.
ionic.bundle.js:17697 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module ngResource due to:
And I didn't find the file angular-resource.js in the js files. Should I avoid ngResource and use plain ajax call?
In index.html
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
Its not working because you have not loaded the angular-resource dependency. If you want to use an external module in angular, you need to load it as a dependency in your module definition by passing name of the module in the second array parameter to angular.module. In your case name of the module is ngResource. Load the script file for angular-resource.js and then add it as dependency as below:
angular.module('app.services', ['ngResource'])
Also I see that you have not loaded app.services as dependency in app.controller. You need to either load that dependency or load both these dependencies in your app definition module as:
angular.module('app', [
'app.services',
'app.controllers'
]);
Updated JSBIN with fix for console error
Your code also had one typo. You were referring to EventsService in your controller while the name was EventService. I have fixed that as well in the jsbin
I am getting error Uncaught Error: [$injector:modulerr]
I have included below js files
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src="lib/jquery-1.12.1.min.js"></script>
and my js code is
angular.module('website',['ngRoute','ngResource']).
config(function($routerProvider){
$routerProvider.
when('/about',{template:'templates/about.html'}),
when('/careers',{template:'templates/careers.html'}),
when('/signup',{template:'templates/signup.html'}),
otherwise({redirectTo : '/home', template:'/home.html'})
})
function mainController($scope){
}
Somebody please help me, where i am missing.
EDITED:
Error log is
Failed to instantiate module website due to:
Error: [$injector:unpr] http://errors.angularjs.org/1.4.5/$injector/unpr?p0=%24ro...
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:6:416
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:40:307
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:38:308)
at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:39:64)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:37:279)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:37:403
at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:7:322)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:37:180)
at eb (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:40:435
Working Plnkr
Change $routerProvider to $routeProvider. Replace , with . in config. For example:
when('/about',{template:'templates/about.html'}),
when('/careers',{template:'templates/careers.html'})
to
when('/about',{template:'templates/about.html'})
.when('/careers',{template:'templates/careers.html'})
Your JavaScript code should look like this:
var website = angular.module('website',['ngRoute','ngResource']);
website.config(function($routeProvider){
$routeProvider.
when('/about',{template:'templates/about.html'})
.when('/careers',{template:'templates/careers.html'})
.when('/signup',{template:'templates/signup.html'})
.otherwise({redirectTo : '/home', template:'/home.html'})
})
website.controller('mainController', function($scope){
});
For more information, please have a look at this example.
Hope that solve your problem.
I'm not sure what I'm doing wrong. I'm getting this error
Error: [$injector:unpr] http://errors.angularjs.org/1.2.21/$injector/unpr?p0=propertyUserDataProvider%20%3C-%20propertyUserData
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:6:450
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:36:145
at Object.c [as get] (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:34:236)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:36:213
at c (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:34:236)
at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:34:453)
at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:35:103)
at $get (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:67:253)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:53:362 <div ui-view="performance-ui-view" class="ng-scope">
Here is my code:
// the controller
app.controller('GlobalDashboardController', ['propertyUserData', function(propertyUserData) {
}])
// ui-router snippet
.state("main", {
url: "/",
views: {
'' : { templateUrl: 'views/main.html' },
'performance-ui-view#main': {
templateUrl: 'views/gdreport.html',
controller : 'GlobalDashboardController',
resolve: {
propertyUserData : function() {
return 'test';
}
}
}
}
})
Right now, I'm returning the string 'test' so I can debug. I do have a User service which I will use once the error is fixed. However, I'm really confused as to why it's failing. Once I remove resolve and the dependency injection in the controller, my application starts working fine again.
You should remove ng-controller directive from your partial view gdreport.html since you have specified the controller in the route itself, it will instantiate and bind the controller to the partial view. And you cannot instantiate this controller yourself because of the dynamic dependency provided via resolve property can only be injected by the router. And your error reflects exactly what it means, i.e propertyUserData provider does not exist.