I have a site with multiple angularjs app inside. The structure is the following :
index.html
js
js_controller.js
js_directives.js
js_filters.js
js_routes.js
js_home.js
sub_app
index.html
js
subapp_controller.js
subapp_directives.js
subapp_filters.js
subapp_routes.js
subapp_home.js
On the first app I added the following in js_routes.js :
angular.module('jsroutes.routes', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {templateUrl: 'templates/mytemplates.html'});
$routeProvider.otherwise({redirectTo: '/'});
}])
No problem with this. It works well.
The problem concern my subapp. I added the following in subapp_routes.js :
angular.module('subapproutes.routes', ['ngRoute'])
.config(['$routeProvider','$locationProvider', '$httpProvider', function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider.when('/subapp', {templateUrl: '/subapp/templates/mytemplate.html', controller: 'myCtrl'});
$routeProvider.when('/subapp/:id', {templateUrl: '/subapp/templates/mysecond.html', controller: 'myCtrl'});
$routeProvider.otherwise({redirectTo: '/subapp'});
}])
The problem is : if the url is /subapp works, /subapp/1 not work for example. It returns to home with templates/mytemplates.html
I don't know why.
If someone can help me.
Thanks in advance
Related
Yo everyone.
I searched how to remove the hash(#) from the routing (source: AngularJS routing without the hash '#') but I encountered a problem.
I'll explain.
$locationProvider.html5Mode(true);
$routeProvider
.when('/test', {
controller: TestCtrl,
templateUrl: 'test.html'
})
.when ('/test/:idPage', {
controller: PageCtrl,
templateUrl: 'page.html'
})
.otherwise({ redirectTo: '/test' });
For the first redirection
- I've got something like : www.my-website.com/test
all is working fine.
For the second :
- www.my-website.com/test/hello
and here, there is a prob, when I put more than one " / " in the route, no page is loaded and I've got two
Failed to load resource: the server responded with a status of 404
(Not Found)
in my console.
One called : www.my-website.com/test/page.html and the other : www.my-website.com/test/hello
Hope someone can help me. Thanks in advance.
Angular 1.4.x requires that 'ngRoute' be included in the module to use $routeProvider and $locationProvider so include it as a <script...>:
angular-router (see here).
I am assuming you see something like:
To include it in your module:
var app = angular.module('someModule', ['ngRoute']);
And the controller needs to be in quotes controller: 'someCtrl' like:
$locationProvider.html5Mode(true);
$routeProvider
.when('/test', {
controller: 'TestCtrl',
templateUrl: 'test.html'
})
.when ('/test/:idPage', {
controller: 'PageCtrl',
templateUrl: 'page.html'
})
.otherwise({ redirectTo: '/test' });
Here is an example that I put together: http://plnkr.co/edit/wyFNoh?p=preview
var app = angular.module('plunker', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/hello/:idHere', {
templateUrl: 'resolveView.html',
controller: 'helloCtrl',
resolve: {
exclamVal: function(){
return '!!!!!!!!!!'
}
}
})
.when('/default', {
templateUrl: 'default.html',
controller: 'defaultCtrl'
})
.when('/test', {
controller: 'testCtrl',
templateUrl: 'test.html'
})
.otherwise({ redirectTo: '/default' });
$locationProvider.html5Mode(true);
}]);
app.controller('MainCtrl', function($scope, $location, $routeParams) {
});
app.controller('testCtrl', function($scope, $routeParams) {
console.log('hi')
});
app.controller('defaultCtrl', function($scope, $routeParams) {
console.log('Inside defaultCtrl')
});
app.controller('helloCtrl', function($scope, exclamVal, $routeParams) {
$scope.exclamVal = exclamVal;
$scope.myVar = $routeParams.idHere;
});
I'm trying to trigger a controller for this URL http://crm.dev/accounts, I'm just using an anonymous function in this example for the controller, but the alert inside doesn't get triggered. I can't figure out why, guess it is something stupid I'm missing?
I don't want to use a template or view, I just need to get my controller fired.
Please note that I've already set $locationProvider.html5Mode(true);.
'use strict';
angular.module('crm', [
'ngSanitize',
'ngRoute',
'angularMoment',
'ui.bootstrap',
'ui.select',
'ui.bootstrap.datetimepicker'
]);
angular.module('crm').config(function(uiSelectConfig) {
uiSelectConfig.theme = 'bootstrap';
});
angular.module('crm').constant('angularMomentConfig', {
preprocess: 'utc',
timezone: 'Europe/Berlin'
});
angular.module('crm').config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider.
when('/accounts', {
controller: function($scope) {
alert('TEST');
}
}).
otherwise({
redirectTo: '/'
});
// enable html5Mode for pushstate ('#'-less URLs)
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
}]);
you need to have a
<ng-view></ng-view>
in your main template, otherwise routing system won't work
I have the following code in my app.js:
var myApp = angular.module('myApp', ['ngRoute'])
myApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/products', {
templateUrl: '/angularjs/public/angular/views/product.html'
}).
otherwise({
templateUrl: '/angularjs/public/angular/views/home.html'
});
$locationProvider.html5Mode(true);
}]);
When I go to home at http://localhost/angularjs/public, the .otherwise kicks in correctly.
If I go to http://localhost/angularjs/public/products, nothing happens, or more precisely, I believe .otherwise is invoked again, since is displayed the home.html view. Also no error is throwed in batarang's console.
What could be the problem?
you need to add "public" to product slug in your route
when('public/products', {
templateUrl: '/angularjs/public/angular/views/product.html'
}).
I am using AngularJs with Ruby on Rails.
I set the html5 option to true in angular: $locationProvider.html5Mode(true)
But now when I try to navigate through pages in my application, it will only change the URL in my browsers URL bar. But the page it self will nto change unless I reload the page. Only then will it go to the page specified.
This is how my Angular routing looks like:
#test.config(['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider) ->
# Route for '/'
$routeProvider.when('/', { templateUrl: '../../views/visitors/index.html.erb', controller: 'VisitorsCtrl' } )
$routeProvider.when('/users', { templateUrl: '../../views/users/index.html.erb', controller: 'UsersCtrl' } )
# Default
$routeProvider.otherwise( { redirectTo: "/" } )
$locationProvider.html5Mode(true)
])
On the root page I have a element: <h2><a ng-click="viewUsers()">Users</a></h2>
And viewUsers() is called here:
#test.controller 'VisitorsCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
$scope.viewUsers = ->
$location.path('/users')
console.log("Redirected")
]
What could be needed more to get this kind of routing to work?
New angular route:
Test.config ($routeProvider, $locationProvider) ->
$routeProvider
.when '/',
templateUrl: '../../views/visitors/index.html.erb',
controller: 'VisitorsCtrl'
.when '/users',
templateUrl: '../../views/users/index.html.erb',
controller: 'UsersCtrl'
try to use following instead:
$window.location.href = '/users'
Here's my problem : for some reason, on valid links, Angular can't find what I'm looking for and return the 404. Here's the route configuration :
$routeProvider.when('/', {templateUrl: 'partials/home.html'});
$routeProvider.when('/home', {templateUrl: 'partials/home.html'});
$routeProvider.when('/menus', {templateUrl: 'partials/menus.html'});
$routeProvider.when('/menu/:menuId', {templateUrl: 'partials/menu.html', controller: 'ShowMenuCtrl'});
$routeProvider.when('/products', {templateUrl: 'partials/products.html'});
$routeProvider.when('/product/:productId', {templateUrl: 'partials/product.html', controller: 'ShowProductCtrl'});
$routeProvider.when('/drink/:productId', {templateUrl: 'partials/product.html', controller: 'ShowProductCtrl'});
$routeProvider.when('/drinks', {templateUrl: 'partials/drinks.html'});
$routeProvider.when('/order', {templateUrl: 'partials/order.html'});
$routeProvider.when('/404', {templateUrl: 'partials/404.html'});
$routeProvider.otherwise({redirectTo: '/404'});
For example : a link ( such as <a href="#/menu/{[{menu.id}]}" translate >SEE</a>) pointing to /menu/45122245, will work when I'm on /menus/ view, but not on /home/ (and return the 404).
Same URL is used, same object with same ID, so I don't know what is going on. I don't know if any other code could help you, let me know what you need :)
May be I am too late to reply to this post, but nevertheless I believe the following solution should do the trick,
angular.module('moduleName')
..config(['$compileProvider', '$routeProvider', function ($compileProvider, $routeProvider) {
$routeProvider.when('/', {templateUrl: 'partials/home.html'});
$routeProvider.when('/home', {templateUrl: 'partials/home.html'});
$routeProvider.when('/menus', {templateUrl: 'partials/menus.html'});
$routeProvider.when('/menu/:menuId', {templateUrl: 'partials/menu.html', controller: 'ShowMenuCtrl'});
$routeProvider.when('/products', {templateUrl: 'partials/products.html'});
$routeProvider.when('/product/:productId', {templateUrl: 'partials/product.html', controller: 'ShowProductCtrl'});
$routeProvider.when('/drink/:productId', {templateUrl: 'partials/product.html', controller: 'ShowProductCtrl'});
$routeProvider.when('/drinks', {templateUrl: 'partials/drinks.html'});
$routeProvider.when('/order', {templateUrl: 'partials/order.html'});
$routeProvider.when('/404', {templateUrl: 'partials/404.html'});
$routeProvider.otherwise({redirectTo: '/404'});
}])
.run(['$location', function ($location) {
if ($location.path() === '' && $location.$$absUrl.indexOf('/partials') > -1) {
$location.path('/home')
}
}]);
Angular requires you to specify the url base in the head of your main html file () unless html5Mode.requireBase is set to false in the html5Mode definition object passed to $locationProvider.html5Mode(). With that, relative urls will always be resolved to this base url, even if the initial url of the document was different.