My config.js file looks like:
angular.module('mean').config(['$routeProvider', '$translateProvider', '$locationProvider',
function($routeProvider, $translateProvider, $locationProvider) {
$routeProvider.
when('/items', {
templateUrl: '/views/main.html',
controller: 'ItemsController'
}).
when('/items/create', {
templateUrl: '/views/main.html',
controller: 'ItemsController'
}).
when('/articles/create', {
templateUrl: 'views/articles/create.html'
}).
when('/articles/:articleId/edit', {
templateUrl: 'views/articles/edit.html'
}).
when('/articles/:articleId', {
templateUrl: 'views/articles/view.html'
}).
when('/', {
templateUrl: '/views/index.html'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
$translateProvider.useStaticFilesLoader({
prefix: '/lang/',
suffix: '.json'
});
$translateProvider.fallbackLanguage('en-US');
$translateProvider.useCookieStorage();
$translateProvider.preferredLanguage('en-US');
}
]);
I have an en-US.json file in the lang folder. But for some reason, this file loads twice as seen in the Firebug console:
Any thoughts as to why that might be?
That's because you're setting the fallbackLanguage and preferredLanguage as the same one, so he needs to load "both". In this case preferredLanguage should be enough.
Related
I have web application where I need to load a template with different parameters like.
.when('/form/:ProjectID/:FormID', {
templateUrl: 'partials/Form.ashx?fid=' + FormID,
controller: 'FormController'
})
I am not able to get the above code working. Can someone tell me how I can fix this issue? I am new to AngularJS and not an expert.
This is the full code.
var app = angular.module('MyApp', ['ui.grid', 'ngSanitize', 'angularTrix', 'ui.codemirror', 'ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'partials/Home.ashx',
controller: 'HomeController'
})
.when('/project/:ProjectID', {
templateUrl: 'partials/Projects.ashx',
controller: 'ProjectController'
})
.when('/form/:ProjectID/:FormID', {
templateUrl: 'partials/Form.ashx?fid=1',
controller: 'FormController'
})
.otherwise({ redirectTo: '/home' });
});
We can use $stateParams and templateProvider to load dynamic templateurl
.state('general', {
url: '/{type}',
//templateUrl: 'pages/home.html',
templateProvider: ['$stateParams', '$templateRequest',
function($stateParams, $templateRequest)
{
var tplName = "pages/" + $stateParams.type + ".html";
return $templateRequest(tplName);
}
],
// general controller instead of home
//controller: 'homeController',
controller: 'generalController',
controllerAs: 'ctrl'
When I hit my angular application url it loads all the css and works as it should. However, when click any link to route to different links I am not able to css files. Below is my code.
(function () {
'use strict';
angular.module('app')
.config(["$routeProvider", "$translateProvider",
function($routeProvider, $translateProvider) {
$routeProvider.
when('/', {
templateUrl: 'src/login/login.html',
controller: 'LoginController',
controllerAs: 'ctrl'
}).
when('/home', {
templateUrl: 'src/login/home.html',
controller: 'RegistrationController',
controllerAs: 'regCtrl'
}).
otherwise({
redirectTo: '/'
});
$translateProvider.useStaticFilesLoader( {
"prefix": "src/locale/", "suffix": ".json"
} );
$translateProvider.preferredLanguage( "en" );
}])
Batter to write a service to add CSS and JS files to the
Here is a example..
https://github.com/Yappli/angular-css-injector
I try to declare a route to use angular,in my security.yml after authentication i well be redirect to #/welcome but consider it a comment
default_target_path: #/welcome
my app.js
routeApp.config(['$routeProvider',function($routeProvider) {
// Routing system
$routeProvider
.when('/login', {
templateUrl: Routing.generate('login'),
controller: 'SecurityController'
})
.when('/welcome', {
templateUrl: Routing.generate('ard_backend_test'),
controller: 'WelcomeController'
})
.otherwise({
redirectTo: '/login'
});
}]);
Just add a double quote for your string and the hash # character will be able to escape.
default_target_path: "#/welcome"
Update: Do not define the default client route in your yml configuration.
This should be part of your angular router configuration. Depending which router you are using of course.
Here is an example with angular's default routeService:
angular.module('MyApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/welcome', {
templateUrl: 'partials/welcome.tpl.html',
controller: 'WelcomeCtrl'
}).
when('/some-other-route', {
templateUrl: 'partials/some-other-route.tpl.html',
controller: 'SomeOtherCtrl'
}).
otherwise({
redirectTo: '/welcome'
});
}]);
I have a single page application where I route to different pages based on url address, I would like to redirect to Homepage when user enters non existing page in the url, so I use otherwise statement, however it causes 404 error, here is my routing config.:
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
redirectTo: '/products'
}).
when('/products/:id?', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
}).
when('/orders/:id?', {
templateUrl: 'partials/orders.html',
controller: 'OrdersController'
}).
when('/auto', {
templateUrl: 'partials/AutoComplete.html',
controller: 'TypeaheadCtrl'
}).
otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
}]);
EDIT:
Changed it as suggested below buts till the same affect, when I type non existing page it goes to Error 404 instead of /products
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
redirectTo: '/products'
}).
when('/products', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
}).
when('/products/:id?', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
}).
when('/orders/:id?', {
templateUrl: 'partials/orders.html',
controller: 'OrdersController'
}).
when('/auto', {
templateUrl: 'partials/AutoComplete.html',
controller: 'TypeaheadCtrl'
}).
otherwise({ redirectTo: function () { return '/' } });
$locationProvider.html5Mode(true);
}]);
You don't need the when('/'... and the otherwise as they essentially do the same thing.
The otherwise is a catchall to get anything that isn't matched so you don't need to route the '/' specifically.
$routeProvider.
when('/products/:id?', ...).
when('/orders/:id?', ...).
when('/auto', ...).
otherwise({
redirectTo: '/products'
});
EDIT The problem is that redirecting to '/products' won't match '/products/:id'. You'll need to add another route like as follows:
when('/products', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
})
In the following code:
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
Is it possible to somehow acces the 'phoneId' value in the templateURL, for example something like this (I know it doesn't work but it's to explain what I'm asking):
when('/phones/:phoneId', {
templateUrl: 'partials/' + $routeParams.phoneId + '.html',
controller: 'PhoneDetailCtrl'
}).
The aim being to load an HTML file named with the phoneId.
.when('/phones/:phoneId', {
controller: 'PhoneDetailCtrl'
templateUrl: function (params) {
return 'partials/' + params.phoneId + '.html';
}
})