I want to use angular's routing function only to bind views and controllers without indicating template and ng-view.
This is what I have so far, and is working well.
JavaScript
angular.module('myModule', [])
.config([
'$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
controller:"myCtrl", template:"whatever"
})
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
}
])
.controller('myCtrl', function($scope){
angular.bootstrap(document, ['myModue'])
HTML
hello!
<div ng-view></div>
This is what I want, and is not working
JavaScript
angular.module('myModule', [])
.config([
'$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
controller:'myCtrl'
})
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
}
])
.controller('myCtrl', function($scope){})
angular.bootstrap(document, ['myModule'])
HTML
hello!
How can I do this?
The way you are trying to do it seems conflicting with the concept of Single Page Application
However what you want to do is possible in a different way, the Deep Linking cookbook example may help shed some light for you:
http://docs.angularjs.org/cookbook/deeplinking
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 use next configuration for routing:
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/appointments', {
controller: 'AppointmentController'
})
}])
And Controller:
.controller('AppointmentController', ['$scope', '$http', '$sce', function ($scope, $http, $sce) {
alert('Test')
}]);
Url is looks like as: http://blogapp.com/appointments
So, I have not error on page, but alert() does not work when I enter URL
Try going to
http://blogapp.com/#/appointments
The hash would be included by default for Angular.
As Arthur commented, you would need to go to http://blogapp.com/#/appointments
To stop this and remove the #, replace your config with:
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/appointments', {
controller: 'AppointmentController'
})
$locationProvider.html5Mode(true);
}])
I am trying to get rid of the url looking like http://example.com/#/album/0 and have it look more like http://example.com/album/0.
I have the following code
(function() {
var app = angular.module('chp', ['ngRoute', 'projectControllers']);
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/directory.html',
controller: 'ProjectsCtrl'
}).
when('/album/:id', {
templateUrl: 'partials/album.html',
controller: 'ProjectDetailCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
var projectControllers = angular.module('projectControllers', []);
projectControllers.controller('ProjectsCtrl', ['$scope', '$http',
function ($scope, $http) {
$scope.projects = albums;
$scope.filters = { };
}]);
projectControllers.controller('ProjectDetailCtrl', ['$scope', '$routeParams', '$sce',
function($scope, $routeParams, $sce) {
$scope.project = albums[$routeParams.id];
})();
but this is causing my app the break entirely once I add in $locationProvider in the three places shown. Any idea as to why this is not working for me? Also I am including angular-route.js just after jquery and angular.js so that cant be the problem
At a glance it looks all right to me, but you must make sure your server is set up to serve http://example.com/index.html for any route, otherwise it will try to load http://example.com/album/0/index.html before bootstrapping your angular application. What do you see when you enable html5? 404 not found? Console error?
You might also need to add
<base href="/" /> inside <head></head> in your index.html file
I'm developing my first AngularJS app.
master.html is the shell/main page which will load child pages and has it's own logic (i.e. users, search, etc).
The following image shows conceptual structure of my project-
My app.js -
var myApp= angular.module('myApp', ['ngRoute', 'ngResource']);
myApp.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/',
{
templateUrl: '/app/views/blogslist.html'
controller: 'BlogListController'
})
});
I want a controller for master.html also. I know I can use ng-controller anywhere. But How and where I'll configure the controller for this page?
Thanks.
May be you are looking for something like this:
var myApp= angular.module('myApp', ['ngRoute', 'ngResource']);
myApp.controller('masterCtrl', ['$scope', function($scope){
// all your logic here
}]);
myApp.config(function ($routeProvider, $locationProvider) {
.........
});
and you can use ng-controller attribute to the wrapper div or body.
Use Angular UI Router instead of ngRoute. It allows nested views and states - exactly what you need here.
var app = angular.module('TaskApp', []);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/Home', {
templateUrl: '/Home/Index',
controller: 'IndexController'
});
$locationProvider.html5Mode(true);
//$locationProvider.hashPrefix('');
}]);
This code is not working properly ,When I remove $routeProvider all reference it work properly but I need $routeProvider how I solve it ?
app.config(['$routeProvider', '$locationProvider',
function ($locationProvider, $routeProvider) {
Oops
EDIT
var app = angular.module('TaskApp', ['ngRoute']);
You also need to add the route service to the app.