I am trying to use AngularJS ngRoute along side Express but I keep getting the following error:
cannot Get /profile
Here's my code:
.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$routeProvider.when('/profile', {
templateUrl: 'views/partials/profile.html',
controller: 'kontrola'
})
$locationProvider.html5Mode('true')
$locationProvider.hashPrefix('!')
app.get('/', routes.index)
app.get('/login', routes.login)
app.get('/signup', routes.signup)
How can I fix it?
Angular's ngRoute is for client-side routing, while express is for server-side routing.
You will need to set a handler in your server to serve static files, like this (assuming your views folder is in the static folder:
app.set('views', path.join(__dirname, 'static'));
Then when you go to http://yourservername/#/profile you will get your profile view.
if you want to use html5mode you need to have a tag like this:
<head>
.....
<base href="/">
</head>
.config(['$locationProvider', '$routeProvider', '$provide', function ($locationProvider, $routeProvider) {
$routeProvider.when('/profile', {
templateUrl: 'partials/pro.html',
controller: 'kontrola'
})
$locationProvider.html5Mode(true)
$locationProvider.hashPrefix('!')
}])
instead of:
.config(['$locationProvider', '$routeProvider', '$provide', function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true)
$locationProvider.hashPrefix('!')
$routeProvider.when('/profile', {
templateUrl: 'partials/pro.html',
controller: 'kontrola'
})
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'm very new to Angular.js.
I've taken the necessary elements from this tutorial on modal windows within Angular.js: http://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial
Isolated, I can get this code to work, but after porting it to my website, I just can't get it to work.
In Jason's code, he has a file called index.controller.js, and although I've ported this file to my own page, I don't believe it's firing. Here's index.controller.js:
(function () {
angular
.module('app')
.controller('Home.IndexController', Controller);
function Controller(ModalService) {
var vm = this;
vm.openModal = openModal;
vm.closeModal = closeModal;
function openModal(id){
ModalService.Open(id);
}
function closeModal(id){
ModalService.Close(id);
}
}
})();
On my own page, I have all the controllers contained within app.js. Here's how it's laid out:
var app = angular.module('app', ['ngRoute', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: 'pages/main.html',
controller: 'mainController',
controllerAs: 'vm'
})
.state('screenings', {
url: '/screenings',
templateUrl: 'pages/screenings.php',
controller: 'Home.IndexController',
controllerAs: 'vm'
})
...
});
You can see that, in the second .state, I'm attempting to call on the index.controller.js file for this particular partial. For some reason, though, the code under screeningsController (down below) is the code that's firing.
Further down in the same app.js file, I have my controllers:
...
app.controller('screeningsController', ['$scope', '$log', function($scope, $log){
$scope.popup = function() {
// assign a message to the $scope
$scope.message = 'Hello World!';
// use the $log service to output the message in a console
$log.log($scope.message);
};
}]);
...
Is there any way I can somehow integrate what's in the index.controller.js file into my screeningsController in the app.js? I've been trying to get a modal window working on my site for about a week now. Any help is much appreciated.
Start by creating a controller with identifier Home.IndexController. Based on the route configuration this will instantiate when you navigate to "/screenings". Call the popup() function attached to $scope of Home.IndexController via a directive us ng-click for testing. As you have specified controllerAs make sure to reference controller properties and methods prefixed with vm..
You do not need both index.controller.js and app.js both loaded. It looks everything you'd need is defined in app.js, so just make sure that is being loaded in your application. Eventually you'd want to separate these into different files and/or modules as necessary.
Try the following:
Configuration:
var app = angular.module('app', ['ngRoute', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: 'pages/main.html',
controller: 'mainController',
controllerAs: 'vm'
})
.state('screenings', {
url: '/screenings',
templateUrl: 'pages/screenings.php',
controller: 'Home.IndexController',
controllerAs: 'vm'
});
...
});
Home.IndexController:
app.controller('Home.IndexController', ['$log', function($log){
var vm = this;
vm.message = '';
vm.popup = function() {
vm.message = 'foobar';
$log.log(vm.message);
}
}]);
Screenings Template:
<!-- Home.IndexController /screenings template -->
<div>
<button type="button" ng-click="vm.popup()"></button>
</div>
This also assumes you have ui-view specified somewhere in your main template like index.html or equivalent:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body ng-app="app">
<div ui-view></div>
<!-- Vendor and Custom scripts added here -->
</body>
</html>
I'm trying to get rid of the hashtag that appears in my ui-router URLs. (http://localhost:3000/email doesn't work but http://localhost:3000/#email works. After scouring SO, I haven't found a case that works for me. I'm running locally for now, so I assume I don't need any "Server configuration" and I included "" in my index.html.
(function(angular) {
'use strict';
angular.module('myApp', ['ui.router'])
.controller('MainController', function($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
})
.config([
['$stateProvider', '$locationProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider, $locationProvider, $provide) {
$urlRouterProvider.otherwise('/email');
// PAGES
$stateProvider
.state('email', {
url: '/email',
templateUrl: '../pages/email.html',
controller: 'EmailController'
})
.state('about', {
url: '/about',
templateUrl: '../pages/about.html',
controller: 'AboutController'
})
// ... the rest...
$locationProvider
.html5Mode(true); // enable html5Mode for pushstate ('#'-less URLs DOESN'T WORK)
.hashPrefix('!');
$provide.decorator('$sniffer', function($delegate) {
$delegate.history = false;
return $delegate;
});
}]);
You can either do this in your run block:
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
And your url's will be changed from domain.com/#foo to domain.com/foo (this requires no explicit base).
...or do this in your run block:
$locationProvider.html5Mode(true);
...and then add this to your html <head>:
<base href="/">
This solution provides the same outcome as the first, except that now there is a specified base.
Perhaps try this code? I think it may be down to one of these reasons.
Config dependencies weren't set correctly (out of order)
That .hasPrefix(!) was put in after a semi-colon.
Also need to assign a base location in your <head> tag using <base href='/'> (or maybe '/email' ?)
angular.module('myApp', ['ui.router'])
.controller('MainController', function ($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
})
.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $provide) {
$urlRouterProvider.otherwise('/email');
// PAGES
$stateProvider
.state('email', {
url: '/email',
templateUrl: '../pages/email.html',
controller: 'EmailController'
})
.state('about', {
url: '/about',
templateUrl: '../pages/about.html',
controller: 'AboutController'
});
$locationProvider.html5Mode(true).hashPrefix('!');
$provide.decorator('$sniffer', function ($delegate) {
$delegate.history = false;
return $delegate;
});
});
Apologies, I can't get the code sample to behave.
Did you set base in HTML-file same as follow:
<html>
<head>
<base href="/">
</head>
</html>
and you should remove .hashPrefix('!'); at config, so this code will same here:
$stateProvider
.state('email', {
url: '/email',
templateUrl: '../pages/email.html',
controller: 'EmailController'
})
.state('about', {
url: '/about',
templateUrl: '../pages/about.html',
controller: 'AboutController'
})
// ... the rest...
$locationProvider
.html5Mode(true); // enable html5Mode for pushstate ('#'-less URLs DOESN'T WORK)
$provide.decorator('$sniffer', function($delegate) {
$delegate.history = false;
return $delegate;
});
Your app config will look like this
app.config(function ($routeProvider,$locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/", {
templateUrl: 'url',
controller : 'mainController'
})
});
Use tag in your page head
<base href="abc.com/"/>
This may create problem with following href, will not load the page properly
About Us
To overcome this use target="_self" in anchor tag as follow
About Us
I'm having problem with ngRoute injection...
I have the file angular-route.min.js inclueded in the right path but still getting this error
Here is javascript code:
(function() {
var app = angular.module('ParkPlanner', ['mobile-angular-ui', 'ngRoute']);
app.config (['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'pages/home.html'
})
.state('results', {
url: '/results',
templateUrl: 'pages/results.html'
});
$urlRouterProvider.otherwise('/home');
}]);
})();
Here is the HTML head:
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/mobile-angular-ui.min.js"></script>
<script src="js/app.js"></script>
Any idea what I'm missing?
Thanks!
My Friend yo should put also route.min.js.map and ,
try importing "$routeProvider" instead of "$urlRouterProvider" , lets give a try .
It looks like you are trying to configure states with ng-router. That is not supported. You should configure routes like this in ng-router:
.when('/home', {
templateUrl: 'pages/home.html'
})
Alternatively, you should add dependency to angular-ui-router like this:
var app = angular.module('ParkPlanner', ['mobile-angular-ui', 'ui.router']);
app.config (['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'pages/home.html'
//And so on....
})
})();
I have the following in my app.js file:
// Declare app level module which depends on filters, and services
var APP = angular.module('DiagsDashboard', ['ngRoute', 'DiagsDashboard.filters',
'DiagsDashboard.services', 'DiagsDashboard.directives', 'DiagsDashboard.controllers']);
APP.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', { templateUrl: '/views/shared/Error.html' })
.when('/Error', { templateUrl: '/views/shared/Error.html' })
.when('/Diagsdashboard', { templateUrl: '/views/shared/Error.html' })
.when('/Diagsdashboard/Error', { templateUrl: '/views/shared/Error.html' })
.otherwise({ templateUrl: '/views/shared/Error.html' });
});
But when I browse to:
- /localhost/#
- /localhost/#/DiagsDashboard/
- /localhost/#/DiagsDashboard/Error
- /localhost/#/error
The whole page re-loads and everything refreshes.
I've copied this code from a project where it works and I have angular-route.js included.
This is an MVC application located within IIS as a sub-application at /localhost/DiagsDashboard.
The issue was simply I hadn't give ng-app a name in the markup. I'd read that it is possible to use ng-app without a name but obviously that isn't the case.