It's working locally (localhost:3000) but not when I deploy to heroku
( https://get-started.herokuapp.com/ ). I get a jquery error saying
[$injector:unpr] Unknown provider
this is the main
function config($locationProvider, $urlRouterProvider) {
'ngInject';
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
}
home
function config($stateProvider) {
'ngInject';
$stateProvider
.state('home', {
url: '/',
template: '<home></home>'
});
}
about
function config($stateProvider) {
'ngInject';
$stateProvider
.state('about', {
url: '/about',
template: '<about></about>'
});
}
It's happen because of minification. When you minify, that $scope variable may be called something totally different, like a, and Angular won't know what that means -- it uses the strings to solve that issue
You need smth like this :
app.controller('HeadMenuController', ['$scope', '$log',
function($scope, $log){...}
]);
This way, Angular can still match the dependencies up
Related
I treid to make a contoller for each of my page but have a broblem. Mistakes in console, and the elements of controller don`t work on html page.
I use $stateProvider cod below is the cod of config, it`s work normal.
var app = angular.module("appmyApp", ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
// For any unmatched url, redirect to root
$urlRouterProvider.otherwise("/");
$stateProvider
.state('header', {
abstract: true,
templateUrl: '/app/pages/header.html'
})
.state('home', {
url: '/',
templateUrl: 'app/pages/home.html',
controller: 'HomeController'
})
}]);
When I add in the config the row - controller: 'HomeController'. I have a mistake in console.
angularjs.js:127 Error: [$controller:ctrlreg]
http://errors.angularjs.org/1.7.5/$controller/ctrlreg?p0=HomeController
at angularjs.js:7
at angularjs.js:97
at Object.<anonymous> (viewDirective.ts:410)
at angularjs.js:17
at Ba (angularjs.js:89)
at q (angularjs.js:73)
at g (angularjs.js:64)
at angularjs.js:64
at angularjs.js:69
at n (viewDirective.ts:328) "<div ui-view="" class="ng-scope">"
When I delete it, it is not any mostakes in console.
.state('home', {
url: '/',
templateUrl: 'app/pages/home.html'
})
In both case page opens good. Route is work. But controller is not work.
The cod of controller
var app = angular.module("appTradeRoom", []);
app.controller("HomeController", function ($scope) {
$scope.name = "Hello";
});
But on the view I have this.
http://prntscr.com/lzeyy5
Scripts home-controller.js I added in the head of home.html
<script src="/app/pages/home-controller.js"></script>
I added ng-controller="HomeController" to body in html page home.html but it does not work. What a problem. I Use last angularJS
Here is the reference on index.html
http://prntscr.com/lzf0cd
Change:
var app = angular.module("appTradeRoom", []);
app.controller("HomeController", function ($scope) {
To
var app = angular.module("appTradeRoom");
// ^^ no dependencies
app.controller("HomeController", function ($scope) {
When there are no dependencies angular.module() will act as a getter of existing module, otherwise it will create a new one
Please consider the this code where the routeProvider is needed to inject page(n).html in ng-view.
In addition to the console error:
unknown provider: $routeProviderProvider <- $routeProvider
The argument to function routeIt is the name of the page to navigate to, How can I mix a conditional switch with routeProvider.when in order to call the page matching the argument in the most efficient manner? Thanks
(function () {
'use strict';
angular
.module('appModule')
.controller('MainMenuCtrl', ['$scope', '$http', 'TogglerFactory', '$routeProvider', MainMenuCtrl]);
function MainMenuCtrl($scope, $http, Toggler, routeProvider) {
$http.get('models/mainMenu.json').then(
function (response) {
$scope.menuItems = response.data;
},
function (error) {
alert("http error");
}
)
function routeIt (page) {
routeProvider
.when('/page1', {
url: "/page1",
templateUrl: 'views/page1.html',
controller: 'Page1Ctrl'
})
.when('/page2', {
url: "/page2",
templateUrl: 'views/page2.html',
controller: 'Page2Ctrl'
})
}
$scope.itemClicked = function (item){
Toggler.menuToggle();
routeIt(item);
}
}
})();
Service providers aren't available for injection in run phase (i.e. anywhere but provider services and config blocks). It is possible to make route provider injectable and configure it after config phase,
app.config(function ($provide, $routeProvider) {
$provide.value('$routeProvider', $routeProvider);
});
And controllers aren't the best places to implement any logic (e.g. route hot-plug).
Ok you're using your routeProvider wrong you need to configure your routes inside .config blocks
angular.module('myApp', [])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/page1', {
url: "/page1",
templateUrl: 'views/page1.html',
controller: 'Page1Ctrl'
}
})
If you want to change the url from your controller use $location.path('/page1'); inside your controller.
I wish to use ng-annotate and the following syntax in my app (using ng-strict-di) to avoid minification issues but I keep getting this error in the console as if I was missing the /** ng#Inject */ comment above the routeConfig function.
What am I missing?
This is the error:
**Uncaught Error: [$injector:modulerr] Failed to instantiate module something due to:
Error: [$injector:strictdi] routeConfig is not using explicit annotation and cannot be invoked in strict mode**
And this is the route config file.
(function () {
'use strict';
angular
.module('something')
.config(routeConfig);
/** #ngInject */
function routeConfig($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/',
controller: 'MainController'
})
.state('properties', {
url: '/properties',
templateUrl: 'app/components/properties/properties.html',
controller: 'PropertiesController',
controllerAs: 'properties'
})
.state('properties.map', {
templateUrl: 'app/components/properties-map/properties-map.html'
})
.state('properties.grid', {
templateUrl: 'app/components/properties-grid/properties-grid.html'
})
.state('property', {
url: '/property/:id',
templateUrl: 'app/components/property/property.html',
controller: 'PropertyController',
controllerAs: 'property'
});
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
}
})();
Many thanks for your help.
I have some problems to use $state service on my tutorial project.
Here is my module and config definition:
(function () {
"use strict";
angular.module("gameManagement", ["ui.router", "ngAnimate", "ngResource"])
.config(["$stateProvider", "$urlRouterProvider","$state", function ($stateProvider, $urlRouterPorvider,$state) {
$urlRouterPorvider.otherwise("/game/MultiStepForm/step1");
$urlRouterProvider.otherwise("/game/Home");
$stateProvider
.state("Home", {
url: "/game/Home",
templateUrl: "/app/game/GameView.html",
controller: "GameController",
controllerAs: "vm"
});
$stateProvider
.state("Log", {
url: "/Game/Log",
templateUrl: "/app/Log/GameLogView.html",
controller: "GameLogController",
controllerAs: "vm"
onEnter: function () {
$state.go("MultiStepForm");
}
});
$stateProvider
.state("MultiStepForm.view", {
url: "/Game/MultiStepFormView",
templateUrl: "/app/MultiStepForm/MultiStepFormView.html",
controller: "MultiStepFormViewController",
controllerAs: "MultiStepViewLogic"
})
$stateProvider
.state("MultiStepForm.Edit", {
url: "/Game/MultiStepFormEdit",
templateUrl: "/app/MultiStepFormEdit/MultiStepForm.html",
controller: "MultiStepFormEditController",
controllerAs: "MultiStepEditLogic"
})
}]);
})();
I want to use this row:
$state.go();
for this purpose I add $state service to references but, when I add to
references the $state service I start to get this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module sensorManagement due to:
Error: [$injector:unpr] Unknown provider: $state
http://errors.angularjs.org/1.4.2/$injector/unpr?p0=%24state
...
Any idea why I get the error above? What am I missing?
You could only access provider inside config phase of angular, $state dependency won't be available inside that phase because $state is provider, and you are already accessing it inside config function by appending Provider prefix like $stateProvider.
If you aim is to redirect the route then you could use $state dependency in run block. Do use $state.go from there
app.run(function($state){
$state.go('somestate')
})
I believe you are missing a resolution in your state. You could try something like this:
$stateProvider
.state("Log", {
url: "/Game/Log",
templateUrl: "/app/Log/GameLogView.html",
controller: "GameLogController",
controllerAs: "vm",
resolve: {$state: '$state'},
onEnter: function ($state) {
$state.go("MultiStepForm");
}
});
See the documentation for more information on how the onEnter and onExit callbacks work. Basically the above question doesn't inject the $state service correctly and thus, is unable to transition state(s) due to the callback lacking access to $state.
You will also want to remove the injection into the config:
.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
I am new with Angularjs
and I want to use angular-translate
here is the site
http://pascalprecht.github.io/angular-translate/
I refer it document , and I got the error
Uncaught TypeError: Cannot call method 'useStaticFilesLoader' of undefined from remoteApp
here is my code
app.js
angular.module('remoteApp', ['ui.bootstrap', 'ui.router', 'ngResource', 'truncate',
'pascalprecht.translate'])
.config(['$translateProvider', function ($routeProvider, $stateProvider, $urlRouterProvider,
$translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: 'languange/locale-',
suffix: '.json'
});
$translateProvider.preferredLanguage('en');
$translateProvider.useLocalStorage();
$stateProvider
.state('index', {
url: "",
views: {
"viewA": {
templateUrl: "views/main.html",
controller: 'MainCtrl'
},
"viewB": {
templateUrl: "views/appList.html",
controller: 'MainCtrl'
},
"viewC": {
templateUrl: "views/appTree.html",
controller: 'ApptreeCtrl'
}
},
})
.state('applicatoion', {
url: "/applicatoion",
views: {
"viewA": {
templateUrl: "views/main.html",
controller: 'MainCtrl'
},
"viewB": {
templateUrl: "views/appList.html",
controller: 'MainCtrl'
},
"viewC": {
templateUrl: "views/appTree.html",
controller: 'ApptreeCtrl'
}
}
})}]);
I have no idea about it ,
please help
Right now this is how you are calling .config
config(['$translateProvider', function ($routeProvider, $stateProvider, $urlRouterProvider,
$translateProvider) {
// ...
}]);
.config has its parameters ( dependencies ) injected by AngularJS, there are two ways to call config;
1 - Pass in a function and AngularJS will read the parameter names and find the matching dependencies.
2 - Pass in an array, of which the last item is a function, and the other items are names of dependencies, if you use this, AngularJS will not read the function's parameter names. The reason this exists is so you can minify your code; because minifying would change the parameter names, and AngularJS uses those names to find dependencies.
What you have now is you specify only one dependency, '$translateProvider', which means the first parameter being passed to the function is the translateProvider, and the other parameters end up being undefined, because you didn't ask for more dependencies.
What you can do is either let AngularJS read your dependency names like this
config(function ($routeProvider, $stateProvider, $urlRouterProvider, $translateProvider) {
// ...
});
Or you can specify all of the dependencies, matching the function parameter list like this, allowing you ( only if you do this consistently ) to minify your code without breaking it.
config(['$routeProvider', '$stateProvider', '$urlRouterProvider', '$translateProvider',
function ($routeProvider, $stateProvider, $urlRouterProvider, $translateProvider) {
// ...
}]);