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) {
// ...
}]);
Related
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
I started a huge change in my AngularJs code to improve it. I was looking this reference and found it pretty interesting, so i was changing my code to follow thos guides.
When i got to the rout configuration i couldn't make it work.
If i use a .config like the code below, everything works fine.
angular
.module('agApp')
.config(
['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.when("/", "/First");
$urlRouterProvider.when("", "/First");
$urlRouterProvider.otherwise("/First");
$stateProvider
.state('first', {
url: "/First",
views: {
"main": {
templateUrl: "app/component/first.html",
controller: 'FirstController',
controllerAs: 'vm'
}
}
})
.state('second', {
url: "/Second",
views: {
"main": {
controller: 'SecondController',
controllerAs: 'vm',
templateUrl: "app/component/second.html"
}
}
})
}]);
But when i try to use the code as recomended on the guide, like this:
angular
.module('agApp')
.config('ConfigRouter', ConfigRouter);
/* #ngInject */
function ConfigRouter($locationProvider,$stateProvider,$urlRouterProvider) {
$urlRouterProvider.when("/", "/First");
$urlRouterProvider.when("", "/First");
$urlRouterProvider.otherwise("/First");
$stateProvider
.state('first', {
url: "/First",
views: {
"main": {
templateUrl: "app/component/first.html",
controller: 'FirstController',
controllerAs: 'vm'
}
}
})
.state('second', {
url: "/Second",
views: {
"main": {
controller: 'SecondController',
controllerAs: 'vm',
templateUrl: "app/component/second.html"
}
}
})
}
Then it stops working and i keep getting this error:
Failed to instantiate module agApp due to: Error: [ng:areq]
Argument 'fn' is not a function, got string
I toke care of the proper injection (at least, I think I did) because the output minified code looks like this:
function ConfigRouter(a,b,c){c.when( [.... rest of the code...] ),ConfigRouter.$inject=["$locationProvider","$stateProvider","$urlRouterProvider"],
On the uglify process I'm using ngAnnotate in this order: concat, ngAnnotate and finaly uglify
Am I missing something here? What may be happening to my code?
Do I need any extra file to enable $inject?
I'm trying to structure my AngularJs this way for the first time. By the way, the functionality of the controllers is not affect (also because there is no injection, just a simple function and name definitions), when i can run the app, the rest is working, the problem starts when I try to use the $inject.
The error says it all: you're providing a string as an argument while it should be a function. That's because config blocks don't have names. It has to be
angular
.module('agApp')
.config(ConfigRouter);
I am building an angular app with several modules close to john papas styleguide. Following that, I have several independent modules with their own route definitions and others with interceptors. My Problem is: when I run it on Cordova / Android, state definitions only seem to work, when I put them in the main module. In my Browser the work. Did anybody come over this issue yet?
E.g. this works on both local browser and on device with cordova:
//main.js
'use strict';
angular.module('main', [
'app.core',
'auth'
])
.config(function ($stateProvider, $urlRouterProvider) {
// ROUTING with ui.router
$urlRouterProvider.otherwise('/main/list');
$stateProvider
// this state is placed in the <ion-nav-view> in the index.html
.state('main', {
url: '/main',
abstract: true,
templateUrl: 'main/templates/menu.html',
controller: 'MenuCtrl as menu'
})
.state('main.login', {
url: '/login',
views: {
'pageContent': {
templateUrl: 'auth/templates/auth.login.html',
controller: 'LoginCtrl'
}
}
})
/* more states here */
This only works in local browser (main module same as above):
//auth.routes.js
'use strict';
angular
.module('auth.routes')
.config(config);
function config ($stateProvider) {
$stateProvider
.state('main.login', {
url: '/login',
views: {
'pageContent': {
templateUrl: 'auth/templates/auth.login.html',
controller: 'LoginCtrl'
}
}
})
}
//auth.module.js
'use strict';
angular.module('auth', [
'app.core',
'auth.constants',
'auth.routes',
'auth.controllers',
'auth.services',
'auth.interceptors',
'auth.config'
]);
angular.module('auth.constants', []);
angular.module('auth.routes', []);
angular.module('auth.controllers', []);
angular.module('auth.services', []);
angular.module('auth.interceptors', []);
angular.module('auth.config', []);
Error says that the state was not found on navigation.
Try
angular
.module('test', [])
.config(config);
config.$inject = ['$routeProvider'];
function config($routeProvider) {
$routeProvider
.when('/login', {
title: 'Calculators',
templateUrl: 'modules/views/login.html',
controller: ''
});
}
remove state provider ,check for simple routing it will work.
I'm using the ngClip plugin to attempt to add a "copy to clipboard" option to my web app. I am also using the ui-router in my module config. The problem is that when I add the ngClipProvider dependency to my .config, the $urlRouterProvider becomes undefined. When I remove it, $urlRouterProvider is an object again. Below is my code:
var app = angular.module('app',['ui.router', 'ui.date', 'ngAnimate', 'angular-loading-bar', 'orders-directives', 'orders-controllers', 'orders-services', 'orders-factories', 'ngClipboard']);
//Config
app.config(['ngClipProvider', function($stateProvider, $urlRouterProvider, ngClipProvider){
$urlRouterProvider.otherwise('/');
$stateProvider.state('/', {
url: '/',
templateUrl: 'templates/admin-view.html',
controller: 'ordersController as ordersCtrl'
}).state('order', {
url: '/order/:ordernum?id',
templateUrl: 'templates/order-details.html',
controller: 'orderDetailsController as orderCtrl'
}).state('export', {
url: '/export',
templateUrl: 'templates/review-export.html',
controller: 'reviewExportController as reviewExportCtrl'
});
//ngClipProvider.setPath("../plugins/ZeroClipboard/ZeroClipboard.swf");
}]);
If I remove the "['ngClipProvider .....]" section and the "ngClipProvider" from the function parameters, everything works. As is above, $urlRouterProvider is null.
You are messing with inline dependency injection array , missed to add '$stateProvider', '$urlRouterProvider' before 'ngClipProvider'
app.config(['$stateProvider', '$urlRouterProvider', 'ngClipProvider',
function($stateProvider, $urlRouterProvider, ngClipProvider){
//code here...
}])
I have a very simple AngularJs app.
Here my app.js file:
angular.module('myApp', [
'ngRoute',
'ngResource',
'ui.bootstrap',
'ui.router',
'myApp.controllers'
]).
config(['$stateProvider', function($stateProvider) {
$stateProvider.
state('home', {
url: "/{Id:[0-9]}",
templateUrl: 'html/home.html',
controller: 'HomeCtrl'
});
}]);
And my controllers.js file:
angular.module('myApp.controllers', []).
controller('HomeCtrl', ['$stateParams', function($stateParams) {
console.log($stateParams.Id);
}]);
The return of the console.log($stateParams.Id) is undefined. While I'm expecting "1" (my Id).
Otherwise if I ask for console.log($stateParams) it returns a function (?!?):
function l(a){function c(a){var b=r({},a,{data:Dc(a.data,a.headers,d.transformResponse)});return 200<=a.status&&
300>a.status?b:m.reject(b)}var d={method:"get",transformRequest:e.transformRequest,transformResponse:e.transformResponse},f=function(a){function b(a){var c;q(a,function(b,d){Q(b)&&(c=b(),null!=c?a[d]=c:delete a[d])})}var c=e.headers,d=r({},a.headers),f,g,c=r({},c.common,c[A(a.method)]);b(c);b(d);a:for(f in c){a=A(f);for(g in d)if(A(g)===a)continue a;d[f]=c[f]}return d}(a);r(d,a);d.headers=f;d.method=Ia(d.method);(a=Mb(d.url)?b.cookies()[d.xsrfCookieName||e.xsrfCookieName]:s)&&(f[d.xsrfHeaderName||
e.xsrfHeaderName]=a);var h=[function(a){f=a.headers;var b=Dc(a.data,Cc(f),a.transformRequest);w(a.data)&&q(f,function(a,b){"content-type"===A(b)&&delete f[b]});w(a.withCredentials)&&!w(e.withCredentials)&&(a.withCredentials=e.withCredentials);return u(a,b,f).then(c,c)},s],k=m.when(d);for(q(x,function(a){(a.request||a.requestError)&&h.unshift(a.request,a.requestError);(a.response||a.responseError)&&h.push(a.response,a.responseError)});h.length;){a=h.shift();var l=h.shift(),k=k.then(a,l)}k.success=
function(a){k.then(function(b){a(b.data,b.status,b.headers,d)});return k};k.error=function(a){k.then(null,function(b){a(b.data,b.status,b.headers,d)});return k};return k}
While I'm expecting {Id: "1"}.
What am I doing wrong???
Just to try I changed my state in the following way:
$stateProvider.
state('home', {
url: "/{Id:[0-9]}",
templateUrl: 'html/home.html',
controller: function($stateParams){
console.log($stateParams);
}
});
}]);
And it works! It returns {Id: "1"} but unfortunately this is not an option for me since what I described here is a small portion of a much bigger and complicated App (so I'd like to have app.js and controllers.js files).
Any suggestion?