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.
Related
I was expecting to see this question on Stackoverflow but didn't. Apparently I'm the only one having this problem that seems to me to be very common.
I have a basic project I am working on but the routes don't seem to work even though everything I've done so far seems to be right.
I have this piece of html in my index.html file:
<html>
<head ng-app="myApp">
<title>New project</title>
<script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.0/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
Add Quote
<div ng-view ></div>
</body>
</html>
and here is my app.js:
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/add-quote', {
templateUrl: 'views/add_quote.html',
controller: 'QuoteCtrl'
})
.otherwise({ redirectTo: '/' });
}]);
Now when I just visit the page, here is what I get in the url:
http://localhost:8000/admin#!/
and when I click on the Add quote button, I get this:
http://localhost:8000/admin#!/#%2Fadd-quote
What can be the problem here?
Thanks for help
Simply use hashbang #! in the href:
Add Quote
Due to aa077e8, the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!').
If you actually want to have no hash-prefix, then you can restore the previous behavior by adding a configuration block to your application:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
For more information, see
AngularJS GitHub Pull #14202 Changed default hashPrefix to '!'
AngularJS Guide - Migration - aa0077e8
Sorry to get on my high horse but... How did this get released? This is massive, breaking bug. — #MiloTheGreat
The breaking change as by #14202 should be reverted as the reference specification was already officially deprecated #15715
I'm going to close this issue because we haven't got any feedback. Feel free to reopen this issue if you can provide new feedback.
— https://github.com/angular/angular.js/issues/15715#issuecomment-281785369
Simply include the ! into the href:
<body>
Add Quote
<div ng-view ></div>
</body>
I couldn't get routing to work in 1.6.4 so I decided to use angular 1.5.11 and routing works fine although I needed to define all my routings in when(..) functions with trailing "/"
If sticking to an older version of angular is an option for you then consider it since it may save your nerves...
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/layoutandviewbox", {
templateUrl : "views/layout-and-viewbox.html"
})
.when("/basicshapes", {
templateUrl : "views/basic-shapes.html"
})
.when("/advancedshapes", {
templateUrl : "views/advanced-shapes.html"
})
.when("/groups", {
templateUrl : "views/groups.html"
})
.when("/transformations", {
templateUrl : "views/transformations.html"
})
.when("/effects", {
templateUrl : "views/effects.html"
})
.when("/", {
templateUrl : "views/basic-shapes.html"
});
});
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when('/add-quote', {
templateUrl: 'views/add_quote.html',
controller: 'QuoteCtrl'
})
.otherwise({ redirectTo: '/' });
}]);
Try this one might Help...
In html or view Page
<body>
Home
<div ng-view></div>
</body>
In Script Page
var app=angular
.module('myModule',['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Home', {
templateUrl: 'FolderName/Home.html',
controller: 'homeCtr'
})
$locationProvider.hashPrefix('');
});
I was expecting to see this question on Stackoverflow but didn't. Apparently I'm the only one having this problem that seems to me to be very common.
I have a basic project I am working on but the routes don't seem to work even though everything I've done so far seems to be right.
I have this piece of html in my index.html file:
<html>
<head ng-app="myApp">
<title>New project</title>
<script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.0/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
Add Quote
<div ng-view ></div>
</body>
</html>
and here is my app.js:
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/add-quote', {
templateUrl: 'views/add_quote.html',
controller: 'QuoteCtrl'
})
.otherwise({ redirectTo: '/' });
}]);
Now when I just visit the page, here is what I get in the url:
http://localhost:8000/admin#!/
and when I click on the Add quote button, I get this:
http://localhost:8000/admin#!/#%2Fadd-quote
What can be the problem here?
Thanks for help
Simply use hashbang #! in the href:
Add Quote
Due to aa077e8, the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!').
If you actually want to have no hash-prefix, then you can restore the previous behavior by adding a configuration block to your application:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
For more information, see
AngularJS GitHub Pull #14202 Changed default hashPrefix to '!'
AngularJS Guide - Migration - aa0077e8
Sorry to get on my high horse but... How did this get released? This is massive, breaking bug. — #MiloTheGreat
The breaking change as by #14202 should be reverted as the reference specification was already officially deprecated #15715
I'm going to close this issue because we haven't got any feedback. Feel free to reopen this issue if you can provide new feedback.
— https://github.com/angular/angular.js/issues/15715#issuecomment-281785369
Simply include the ! into the href:
<body>
Add Quote
<div ng-view ></div>
</body>
I couldn't get routing to work in 1.6.4 so I decided to use angular 1.5.11 and routing works fine although I needed to define all my routings in when(..) functions with trailing "/"
If sticking to an older version of angular is an option for you then consider it since it may save your nerves...
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/layoutandviewbox", {
templateUrl : "views/layout-and-viewbox.html"
})
.when("/basicshapes", {
templateUrl : "views/basic-shapes.html"
})
.when("/advancedshapes", {
templateUrl : "views/advanced-shapes.html"
})
.when("/groups", {
templateUrl : "views/groups.html"
})
.when("/transformations", {
templateUrl : "views/transformations.html"
})
.when("/effects", {
templateUrl : "views/effects.html"
})
.when("/", {
templateUrl : "views/basic-shapes.html"
});
});
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when('/add-quote', {
templateUrl: 'views/add_quote.html',
controller: 'QuoteCtrl'
})
.otherwise({ redirectTo: '/' });
}]);
Try this one might Help...
In html or view Page
<body>
Home
<div ng-view></div>
</body>
In Script Page
var app=angular
.module('myModule',['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Home', {
templateUrl: 'FolderName/Home.html',
controller: 'homeCtr'
})
$locationProvider.hashPrefix('');
});
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?
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.
This is my app.js:
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'partials/home.html',
controller: 'homeController',
resolve: {
loggedUser: getLoggedUser
}
}]);
The function getLoggedUser() returns a promise which is resolved in userService when it has found the logged in user. In my index.html I include a navigation bar:
<ng-include src="'partials/navbar.html'" ng-controller="homeController"></ng-include> // Navbar
<div ng-view></div> // Angular views
The problems are:
ng-controller cannot be used with resolve since it creates an AngularJs error of 'unknown provider'. Therefore, the ng-include creates trouble for the '/' route.
I cannot/do not know how to specify a resolve for the navbar since it has no route, but is included in every view in index.html. And the navbar needs to show the name of the logged in user.
EDIT1:
I tried an ugly solution, by returning myPromise.$$state.value in homeController and removing the resolve {...}. However, it feels like I shouldn't use the $q promises like this. Any other suggestions?
EDIT2:
What I mean is that the loggedUser is unknown because of ng-controller="". Here is an explanation: AngularJS, resolve and unknown provider.
I think the reason why you get an error about 'unknown provider' is that you need to inject the service userService into the resolve function :
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'partials/home.html',
controller: 'homeController',
resolve: {
loggedUser: function(userService) {
return userService.getLoggedUser();
}
}
}]);
You can separate the navbar from the rest of your app.
Use something like
<body>
<div ng-controller = "navbarController as nav">
<div ng-show=" userIsLoggedIn"> <!-- show navbar only if true -->
<!-- navbar markup-->
</div>
</div>
<div ng-view> <!-- display other templates here --> </div>
</body>
You can then use a service in which us store the login status and credentials of the user. As services can be accessed app wide, you can access its data (like the username) in your navbarController.