How to user otherwise on stateProvider similar like angular UI router provider otherwise
angular.module('myApp', ['ui.router'])
.config(['$urlRouterProvider','$stateProvider', function($urlRouterProvider, $stateProvider){
$urlRouterProvider
.otherwise('/');
$stateProvider
.state('home',{
url : '/',
template: 'path_to_template',
controller: 'homeCtrl'
})
}])
Related
We are continuing the development of our website that uses AngularJS on the frontend, and Yii 1.1 on the backend.
Our application allows users to create their own community groups
When a user clicks on a group called "ABC Group" (who's ID is 9), the url is
http://ourwebsite.com/#/app/group/9/content/list
We want to change this however to look like:
http://ourwebsite.com/abcgroup/
we are using ui-router
Any ideas how to do this?
Also, why does angular use the "#" at all?
You have to inject $locationProvider and set the property html5Mode true as follow:-
$locationProvider.html5Mode(true);
Eg:-
angular.module('myModule', [])
.config(['$routeProvider', '$locationProvider', function($routeProvider,
$locationProvider) {
$routeProvider.
when('/contact', {templateUrl: 'xyz/contact.html', controller: mycontroller})
.otherwise({redirectTo: '/home.html'});
$locationProvider.html5Mode(true);
}]);
Even you can check the answer here
if you are using ui-router you can do the same with $stateProvider
angular.module('myModule', [])
.config(['$stateProvider', '$locationProvider', function($stateProvider,
$locationProvider) {
$stateProvider
.state("contact",
{
url: "xyz/contact",
views: {
'content': {
templateUrl: "Views/xyz/contact.html",
controller: "contactController"
}
}
})
$locationProvider.html5Mode(true);
]);
I have using the Angular unsavedChanges Plugin to find the dirty forms and alert the user when he leave the page and state. Plugin working fine but is gives the alert twice. I have changed the UI router config but still the issue not fixed
angular
.module('app', ['unsavedChanges', 'ui.router'])
.config(['$stateProvider', '$urlRouterProvider', 'unsavedWarningsConfigProvider',
function($stateProvider, $urlRouterProvider, unsavedWarningsConfigProvider) {
$stateProvider
.state('admin', {
url: '/dashboard',
abstract: true,
templateUrl: "app/app.html"
})
.state('admin.dashboard', {
url: '/home',
templateUrl: 'app/dashboard/dashboard.html',
controller: 'DashboardCtrl'
})
unsavedWarningsConfigProvider.useTranslateService = false;
}
]);
I can't seem to get my angular app to work with routes. The basic app itself works but breaks the moment I try to add in routes
Here's a link to the plunker: broken routes
var app = angular.module('appModule', ['ui.router']).config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
controller: 'homeController'})}])
app.controller('homeController', ['$scope', function($scope) {$scope.hello = "flarg";}])
and here is the the same simple app without routes link to plunker here: working app
You configuration should be like this,
var myApp = angular.module("myApp", ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/home");
$stateProvider
.state("home", {
url: "/home",
templateUrl: "home.html",
controller: 'homeController'
});
});
myApp.controller('homeController', ['$scope', function($scope) {
$scope.hello = "flarg";
}]);
DEMO
How can I share the scope with angular ui router ? I tried this :
angular.module('myApp').controller('detailCtrl', ['$scope',
function($scope) {
$scope.test=$scope.$parent.services;
angular
.module('myApp', ['ngAnimate', 'ngCookies', 'ngResource'
, 'ui.router', 'ngSanitize', 'ngTouch'])
.config ($stateProvider) ->
$stateProvider.state('home',
url: "/"
templateUrl: "home.html"
).state('services',
url: "/services"
templateUrl: "services.html"
).state('services.detail',
url: "/detail/"
templateUrl: "detail.html"
)
in servicesCtrl :
$scope.services = getServices.query();
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...
}])