For some reason my ngRoute dosent work properly? I dont know but it dosent show any error on the console either. Here is my Cloud9 File. And here is my script.js:
var app = angular.module('ChattApp', ["firebase", "ngRoute"])
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'HtmlFiles/login.html',
controller: 'LoginController'
})
.when('/Register', {
templateUrl: 'HtmlFiles/registration.html',
controller: 'RegistrationController'
})
.otherwise({
redirectTo: '/'
});
});
app.factory("Auth", ["$firebaseAuth",
function($firebaseAuth) {
var ref = new Firebase("https://uniquecoders.firebaseio.com/");
return $firebaseAuth(ref);
}
]);
It looks like you're not injecting the $routeProvider into the config function.
Take a look at the tutorial for the $routeProvider here or take not of the screenshot below.
Related
I have index file
<div ng-app="myApp" data-ng-init="init()">
<ng-view></ng-view>
</div>
script looks like this
var app = angular.module('myApp', ['ngRoute'])
app.config(function ($routeProvider, $locationProvider)
{
$locationProvider.html5Mode(true);
$routeProvider
.when('/home/',
{
template: 'home.html',
controller: 'homeController'
}) .
when('/menu/',
{
templateUrl: 'menu.html',
controller: 'menuController'
})
app.controller('homeController',function($scope,$rootScope){
$scope.init=function(){
alert('executing the init function')
}
})
app.controller('menuController',function($scope,$location){
if($scope.var1){
$location.path('/home/')
}
})
the first time the path is /home/ the alert is triggered.but from the menu controller when the variable var1 is true then path is changed to /home/ again but the init function is not running and alert is not triggered. how can this be fixed. i want the init in homecontroller to run everytime the path is changed to /home/
You can try this. It might work.
var app = angular.module('myApp', ['ngRoute'])
app.config(function ($routeProvider, $locationProvider)
{
$locationProvider.html5Mode(true);
$routeProvider
.when('/home/',
{
template: 'home.html',
controller: 'homeController'
}) .
when('/menu/',
{
templateUrl: 'menu.html',
controller: 'menuController'
})
app.controller('homeController',function($scope,$rootScope){
var init=function(){
alert('executing the init function')
};
init();
})
app.controller('menuController',function($scope,$location){
if($scope.var1){
$location.path('/home/')
}
})
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 am trying to use html5Mode for urls in AngularJS.
This code runs fine:
.config(["$routeProvider", "$locationProvider",
function($routeProvider, $locationProvider){
$routeProvider.when("/editor", {
templateUrl: "pages/editor/index.html"
})
.when("/docs", {
templateUrl: "pages/docs/index.html"
}).otherwise({
templateUrl: "pages/home/index.html"
});
}
]);
But this code gives me the error url is undefined
.config(["$routeProvider", "$locationProvider",
function($routeProvider, $locationProvider){
$routeProvider.when("/editor", {
templateUrl: "pages/editor/index.html"
})
.when("/docs", {
templateUrl: "pages/docs/index.html"
}).otherwise({
templateUrl: "pages/home/index.html"
});
$locationProvider.html5Mode(true);
}
]);
Could the issue be that I have instead of
What could be the source of this?
I just had the same problem and I just figured out how to solve this. Well my errors were:
I hadn't injected "$locationProvider" I was trying to call the "html5Mode" without referencing the "$locationProvider" at the begining of the function, now I have this:
app.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when("/", {
templateUrl: "Views/home/home.html",
controller: "HomeController"
})
.otherwise({ redirectTo: '/'});
$locationProvider.html5Mode(true);}]);
I had the wrong, I had: " href="/" "
but I'm running all the app with a local server with Wampp so the base path for my project is "/NAME_OF_THE_PROJECT/" like this:
<base href="/SEQUOIA/">
With this two corrections I solved all the errors, as I see, you have your base without the last '/', maybe your app is searching "www.localhost.com/staticCONTENT" instead of ".../static/CONTENT".
Ah! I almost forget, I have my .htaccess just the same as shown here and here
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'm trying to use angular-route, but when I change the div tag from <div ng-include="'views/main.html'" ng-controller="MainCtrl"></div> to <div ng-view></div> that tag is suddenly empty.
The app.js code I have is:
angular .module('testApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateURL:'views/main.html',
controller: 'MainCtrl'
})
.when('/adoption', {
templateURL: 'views/foo.html',
controller: 'fooCtrl'
})
.otherwise({
redirectTo: '/'
});
});
and the html pages and controllers are made, but pretty much empty, save some placeholder stuff.
I'm not 100% sure how I'm supposed to include the angular-route code, but what I have seems to be working.
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
you app.js should be like this:
angular .module('testApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/main', {
templateURL:'views/main.html',
controller: 'MainCtrl'
})
.when('/adoption', {
templateURL: 'views/foo.html',
controller: 'fooCtrl'
})
.otherwise({
redirectTo: '/main'
});
});