In my single page application I have used ngRoute for angular routing. But I am facing some problems for angular routing.
configuration :
app.config(function($routeProvider,$locationProvider){
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/product',{
templateUrl : 'views/product/template/product.html',
controller : 'productCtrl'
})
.when('/product/add',{
templateUrl : 'views/product/template/add-product.html',
controller : 'productCtrl'
})
});
When my routing path is /product then everything is ok. But when my routing path is /product/add then it seems an error. But if "/product/add"
replace with just "/add" then that route is also ok. So I cant recognize whats the main problem on routing "/product/add".
Error :
http://localhost:3000/product/views/product/template/add-product.html 404 (Not Found)
here I have seen a problem. other route seems like :
http://localhost:3000/views/product/template/product.html
But error route has /product after server link.
Need some clarification & solution for this problem.
Thanks in advance
configure the route properly with error pages. You can follow this fiddle example.
HTML
<div ng-controller="MainCtrl">
<ul>
<li>product</li>
<li>add</li>
<li>Other</li>
</ul>
<ng-view></ng-view>
</div>
Angular
var app = angular.module( "myApp", [] );
app.config( function ( $routeProvider,$locationProvider ) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$routeProvider
.when( '/product', { template: 'I am product root' } )
.when( '/product/add', { template: 'Adding a product' } )
.when( '/other', { template: 'Other pages' } )
.otherwise( { redirectTo: '/product' } );
});
app.controller( 'MainCtrl', function ( $scope ) {
});
for more https://jsfiddle.net/zahiruldu/jLdce3vj/186/
You can use UI Router for handling parent routing properly that will give you advance nested route facilities.
Related
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'junk.html',
})
. .when('/:pageuniqueid', {
templateUrl : 'page.html',
})
// route for the about page
.when('/first', {
templateUrl : 'first.html',
})
// route for the contact page
.when('/second', {
templateUrl : 'second.html',
});
});
If i type 'example.com/first' in the URL then instead of getting first.html i am getting page.html.
I am implementing the page that user can access directly with their dynamic pageid after base URL.
I want to get page.html only if it is not matched with the other routes. Is there a way to achieve this?
The order of the route definitions matters.
If you define the '/first' route before the '/:pageuniqueid', it should work.
The angular router stops evaluating the routes after the first match.
So in order to get the page.html as a fallback, you should put it as last entry in the list.
Below is my CODEIGNITER 'testing_route' view page code
<div ng-app="tutorialWebApp">
Home<br />
About<br />
<div ng-view></div>
</div>
//angularjs
<script>
var app = angular.module('tutorialWebApp',['ngRoute']);
app.config(function ($routeProvider,$locationProvider) {
$routeProvider
.when("/home", {templateUrl: "<?php echo site_url('Main/demo1');?>"})
.when("/about", {templateUrl: "<?php echo site_url('Main/demo2');?>"})
// else 404
.otherwise({redirectTo: '/testview'});
$locationProvider.html5Mode(true);
});
</script>
and my 'main' CONTROLLER code is as follows
function testing_route()
{
$this->load->view('admin/testing_route');
}
function demo1()
{
$this->load->view('admin/demo1');
}
function demo2()
{
$this->load->view('admin/demo2');
}
whenever i click on home/about the page is not working and not getting any errors also,i tried all the solutions using $locationProvider also but nothing done helpfull,please help me how to load pages or how to do spa application on page loading using CODEIGNITER and ANGULARJS
Change your routes, as you define in routes.php
.when("/home", {templateUrl : "Main/demo1"})
.when("/about", {templateUrl : "Main/demo2"})
This will work.
in index.html
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
controller
angular.module("testCtrl",[]).controller('TestController', ["$scope", function($scope) {
$scope.Myname = "my first route";
}]);
app.js
var app = angular.module('testApp',["ngRoute", "testCtrl"]);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when("/",{
templateUrl: "Views/main.html"
})
.when("/details",{
templateUrl: "Views/details.html",
controller : TestController
})
.otherwise({
redirectTo : "/"
});
}]);
my homepage loads fine but with some reason /details show error like --- No webpage was found for the web address: http://127.0.0.1:8080/details
I am new to angular and I am learning. I am not able to understand whats wrong ..do we have any tools to debug route error? I am using angular 1.5.8 version for now.
server console - "GET /details" Error (404): "Not found"
The issue is that TestController isn't defined in app.js. You should use the controller name as a string, like so.
.when("/details",{
templateUrl: "Views/details.html",
controller : "TestController"
})
See this plunk for a working example.
https://plnkr.co/edit/xi20MmchJY6TO1SG2o0d?p=preview
I think you have omitted the dependency on ngRoute:
angular.module('testCtrl', ['ngRoute'])...
Are you referencing ng-app in your HTML as well (can't see your HTML code)
Presumably you have included your scripts in the HTML page too?
I need to set Angularjs routing to do nothing on "otherwise" method.
var townApp = angular.module('townApp', ["ngRoute"]);
townApp.config(function($routeProvider){
$routeProvider
.when("/dashboard", {
templateUrl : "/profile/dashboard/"
})
.when("/payments", {
templateUrl : "/profile/payments/",
})
.otherwise(
/* DO NOTHING.*/
)
});
Right now, it cleans the ng-view directive upon changing url to an undefined one and that's not what I need.
How can I make it stay on the same page and do nothing?
I found this Here.
I have no idea what is happening but it works as i want.
townApp.config(function($routeProvider){
$routeProvider
.when("/dashboard", {
templateUrl : "/profile/dashboard/"
})
.when("/payments", {
templateUrl : "/profile/payments/",
})
.otherwise({redirectTo: $routeProvider});
});
I'm working on a AngularJS + OnsenUI project, and I'm having problems with the navigation.
Let's say that I have a module:
angular
.module('app.home', ['ui.utils','ngRoute','ngAnimate'])
.controller('HomeCtrl', HomeCtrl)
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'path/to/home/template',
controller: 'HomeCtrl'
})
.when('/test1', {
templateUrl: 'path/to/template',
controller: 'TestOneCtrl'
})
.when('/test2', {
templateUrl: 'path/to/template',
controller: 'TestTwoCtrl'
})
.otherwise({
redirectTo: 'path/to/home/template'
});
});
In the HomeCtrl I'm supposed to (depending on the result of certain functions) navigate to either test1.html or test2.html. My problem is that I don't know how to link the routeProvider to the the ons.navigator.pushPage function.
This doesn't work:
var url = '/test1';
$scope.navigator.pushPage( url, { animation : 'slide' } );
This works:
var url = '/absolute/path/to/template';
$scope.navigator.pushPage( url, { animation : 'slide' } );
My question is what do I need to do so I don't have to write the absolute path to the template in the url variable? Apparently I'm missing out on something, but I can't figure out what.
Thanks in advance!
I think it's because the path used in $routeProvider is not the same type of that of pageUrl used in navigator.pushPage().
$routeProvider.when(path, route);
and
navigator.pushPage(pageUrl, option);
Path is like the pattern or string of your app url found in the browser address bar. For example, "http://localhost:8000/app/index.html#/test1". That's when you can refer to this in the routeProvider as "/test1". However, in the navigator.pushPage(), you will need to specify exact url to the page just like how you set ur templateUrl inside $routeProvider. In other words, pageUrl = route.
That's just from my understanding though.