This are my files
app.js for routing
angular
.module('ebookApp', ['ngRoute']).config(config);
function config($routeProvider, $locationProvider){
$routeProvider
.when('/',{
templateUrl: 'angular/ebook-list/ebookList.html',
controller: EbookController,
controllerAs: 'vm'
})
.when('/ebook/:id', {
templateUrl: 'angular/ebook-display/ebookDisplay.html',
controller: EbookController,
controllerAs: 'vm'
});
$locationProvider.html5Mode(true);
}
index.html
<!DOCTYPE html>
<html ng-app="ebookApp">
<head>
<title>Ebook App</title>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/custom.css" rel="stylesheet"/>
<base href="/">
</head>
<body>
<div ng-view></div>
<footer class="footer">
<div class="container">
<p class="text-muted text-center">
<img src="/images/fullstacktraining_logo.png" height="26" alt="Full Stack Training"/>
</p>
<p class="text-muted text-center">
<small>© 2016 Full Stack Training Ltd</small>
</p>
</div>
</footer>
<script src="jquery/jquery-2.1.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="angular/app.js"></script>
<script src="angular/ebook-data-factory/ebook-data-factory.js"></script>
<script src="angular/ebook-list/ebook.list.js"></script>
<script src="angular/ebook-display/ebook.display.js"></script>
</body>
</html>
display.js
angular
.module('ebookApp')
.controller('EbookController',EbookController);
function EbookController($http, $route, $routeParams, ebookDataFactory,) {
var vm = this;
var id = $routeParams.id;
$http.get('/api/ebooks/' + id).then(function(response) {
vm.ebook = response.data;
});
};
list.js
angular
.module('ebookApp')
.controller('EbookController', EbookController);
function EbookController($route, $routeParams, ebookDataFactory) {
var vm = this;
vm.title = 'Ebook App'
ebookDataFactory.ebookList().then(function(response){
vm.ebooks = response.data;
});
}
the code does basically two things that is to show list of ebooks which it successfully does but displaying each one of them it gives the an error like a BLANK PAGE or this GET http://localhost:7080/api/ebooks/undefined 500 (Internal Server Error) the id is in api which does exists but it still gives error. Please help.
Related
i am trying to code this and just Jump form 1 page to another page using routes but doesn't why its not working i search and tricks a lot but still failed please any one?
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Angular Js</title>
<script type="text/javascript" src="angular.min.js"></script>
<script src="controller.js"></script>
<script src="angular-route.min.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
----------
Controler.js
var myRoute=angular.module('myApp',['ngRoute']);
myRoute.config(function($routeProvider){
$routeProvider
.when('/',{
template:'Welcome to Home'
})
.when('/NewPage',{
template:'This Is New Page Task'
})
otherwise('/',{
redirectTo:'/'
});
});
The order of references should be,
<script type="text/javascript" src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="controller.js"></script>
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "route/one"
})
.when("/one", {
templateUrl: "route/one"
});
});
templateUrl is the place where you define your view is...In here my view(one.cshtml) is in route folder. Try the following example. Its working example.
<body ng-app="sampleApp">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> Add New Order </li>
<li> Show Order </li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
</body>
<script>
sampleApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/AddNewOrder', {
templateUrl: '/viewStudents.html',
controller: 'AddOrderController'
})
.when('/ShowOrders', {
templateUrl: '/Home.html',
controller: 'ShowOrdersController'
})
.otherwise({ redirectTo: '/viewStudents' });
}]);
sampleApp.controller('AddOrderController', function ($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function ($scope) {
$scope.message = 'This is Show orders screen';
});
</script>
The above error i am getting when i run angularjs route simple application.
I made separate folder for partial template. only three files are there that contains simple headings.
below code for route.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Angular Js Route Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/external/reset.css" rel="stylesheet" type="text/css"/>
<link href="css/route.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
<script src="js/route.js" type="text/javascript"></script>
</head>
<body>
<div class="outerWraper">
<div class="header">
<h2>Website Header</h2>
</div>
<div class="mainContainer">
<div class="leftContainer">
<ul class="leftMenuBar">
<li>Home</li>
<li>Courses</li>
<li>Students</li>
</ul>
</div>
<div class="rightContainer">
<div class="eachContentDiv">
<ng-view> </ng-view>
</div>
</div>
</div>
<div class="footerWraper">
<h5>Website footer</h5>
</div>
</div>
</body>
Correspondence js file.
var myApp = angular
.module('myApp', ["ngRoute"])
.config(function ($routeProvider){
$routeProvider
.when("/home", {
templateUrl: "partial_route_templates/home.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "partial_route_templates/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "partial_route_templates/student.html",
controller: "studentController"
})
.controller('homeController', function ($scope){
$scope.message = "Home Page";
})
.controller('coursesController', function ($scope){
$scope.message = "courses Page";
})
.controller('studentController', function ($scope){
$scope.message = "student Page";
})
});
Your route.js file is bonkered. I'll provide the corrected code, but if you had researched the error at all, you would have seen the error is pretty clear - $routeProvider has no function controller. You're chaining your controller definitions to $routeProvider and not the angular object.
var myApp = angular
.module('myApp', ["ngRoute"])
.config(function ($routeProvider){
$routeProvider
.when("/home", {
templateUrl: "partial_route_templates/home.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "partial_route_templates/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "partial_route_templates/student.html",
controller: "studentController"
});
})
.controller('homeController', function ($scope){
$scope.message = "Home Page";
})
.controller('coursesController', function ($scope){
$scope.message = "courses Page";
})
.controller('studentController', function ($scope){
$scope.message = "student Page";
});
I'm trying to build a single page blogging site using AngularJS and I have encountered the following error message:
"Uncaught Error: [$injector:modulerr] Failed to instantiate module spBlogger due to:
Error: [$injector:modulerr] Failed to instantiate module spBlogger.posts due to:
Error: [$injector:unpr] Unknown provider: $stateProvider"
I'm not sure why this is happening although the $stateProvider service is already injected. Can you please help me identify why I'm getting this error message?
postModule.js contents:
'use strict'
angular.module('spBlogger.posts', ['spBlogger.posts.controllers', 'spBlogger.posts.directives', 'spBlogger.posts.services', 'spBlogger.posts.filters']);
angular.module('spBlogger.posts')
.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
$stateProvider.state('allPosts', {
url: '/posts',
templateUrl: 'modules/posts/views/posts.html',
controller: 'PostController'
});
$stateProvider.state('singlePost', {
url: '/posts/:id/:permalink',
templateUrl: 'modules/posts/views/singlePost.html',
controller: 'PostDetailsController'
});
}]);
index.html contents:
<!doctype html>
<html lang="en" ng-app="spBlogger">
<head>
<meta charset="utf-8">
<base href="/">
<title>The Single Page Blogger</title>
<link rel="stylesheet" href="lib/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="modules/posts/css/posts.css">
</head>
<body>
<div class="container">
<br/>
<div class="jumbotron text-center">
<h1>The Single Page Blogger</h1>
<p>One stop blogging solution</p>
</div>
<div ui-view> The angular ui-view should be displayed here!</div>
<div class="row footer">
<div class="col-xs-12 text-center">
<p>The Single Page Blogger
<app-version/>
</p>
</div>
</div>
</div>
</body>
<!-- build:js app/built/app.min.js -->
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-ui-router/angular-ui-router.min.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="lib/angular/angular-animate.js"></script>
<script src="lib/angular/angular-cookies.js"></script>
<script src="lib/angular/angular-translate.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="modules/posts/postModule.js"></script>
<script src="modules/posts/js/controllers.js"></script>
<script src="modules/posts/js/filters.js"></script>
<script src="modules/posts/js/directives.js"></script>
<script src="modules/posts/js/services.js"></script>
<!-- endbuild -->
</html>
This is the app.js
'use strict'
angular.module('spBlogger', ['ui.router', 'spBlogger.posts', 'spBlogger.controllers', 'spBlogger.directives', 'spBlogger.filters', 'spBlogger.services']);
angular.module('spBlogger').value('version', 'V1.0');
angular.module('spBlogger').run(['state', function (state) {
$state.go('allPosts');
}]);
controllers.js
'use strict'
angular.module('spBlogger.posts.controllers', [])
.controller('PostController', ['$scope', 'postService', function ($scope, postService) {
$scope.getAllPosts = function () {
return postService.getAll();
};
$scope.posts = $scope.getAllPosts();
}])
.controller('PostDetailsConstroller', ['$stateParams', '$state', '$scope', 'postService', function ($stateParams, $state, $scope, postService) {
$scope.getPostById = function (id) {
return postService.getPostById(id);
};
$scope.closePost = function () {
$state.go('allPosts');
};
$scope.singlePost = $scope.getPostById($stateParams.id);
}])
;
You missed to add a dependency to ui.router in your application module:
angular.module('spBlogger.posts', ['ui.router', 'spBlogger.posts.controllers', 'spBlogger.posts.directives', 'spBlogger.posts.services', 'spBlogger.posts.filters']);
Angular UI Router isn't part of official Angular's distribution but it's an optional module developed by a third-party dev team.
i trying to use angular js routing method to the web app i am building, bt i was not able to route through the directory, i am getting a 404 error, below is my codes.
<!doctype html>
<html ng-app="AngularStore">
<head>
<link rel="stylesheet" type="text/css" href="src/bootstrap/cerulean.css">
<script type="text/javascript" src="src/jquery/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="src/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="src/angular/angular.min.js"></script>
<script type="text/javascript" src="src/angular/angular-route.js"></script>
<script src="product.js" type="text/javascript"></script>
<script src="store.js" type="text/javascript"></script>
<script src="shoppingCart.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="controller.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span10 offset1">
<h1 class="well" >
<a href="default.html">
<img src="img/logo.png" height="60" width="60" alt="logo"/>
</a>
Angular Store
</h1>
<div ng-view></div>
</div>
</div>
</div>
</body>
</html>
here is my app.js file
var storeApp = angular.module('AngularStore', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/store', {
templateUrl: '/partials/store.html',
controller: 'storeController' }).
when('/products/:productSku', {
templateUrl: '/partials/product.html',
controller: 'storeController' }).
when('/cart', {
templateUrl: '/partials/shoppingCart.html',
controller: 'storeController' }).
otherwise({
redirectTo: '/store' });
}]);
Your code is definitely needs 'ngRoute'
var storeApp = angular.module('AngularStore', ['ngRoute']).
here is a plnkr http://plnkr.co/edit/X9gyEPm6v126kobj0lTa
Other thing you could be doing wrong is providing template paths relative to root
templateUrl: 'partials/store.html',
instead of
templateUrl: '/' + 'partials/store.html',
You should load ngRoute along with your app module declaration.
var storeApp = angular.module('AngularStore', ['ngRoute']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/store', {
templateUrl: 'partials/store.html',
controller: 'storeController' }).
when('/products/:productSku', {
templateUrl: 'partials/product.html',
controller: 'storeController' }).
when('/cart', {
templateUrl: 'partials/shoppingCart.html',
controller: 'storeController' }).
otherwise({
redirectTo: '/store' });
}]);
Make sure that you load ngRoute along with your app module declaration.
var app = angular.module("app", ['ngRoute']);
It's not enough that you load the script file. For you it should be:
var storeApp = angular.module('AngularStore', ['ngRoute']);
The index.html looks like:
<!DOCTYPE html>
<html lang="en" ng-app="HomeApp">
<head>
<link rel="stylesheet" href="css/general_style.css">
<script src="js/angular_core/angular.min.v.1.2.16.js"></script>
<script src="js/angular_core/angular-resource.min.v.1.2.16.js"></script>
<script src="js/angular_core/angular-route.min.v.1.2.16.js"></script>
<script src="js/home_apps.js"></script>
<script src="js/home_controllers.js"></script>
<script src="js/home_services.js"></script>
<title>AngularJS Routing example</title>
</head>
<body>
<div>
<ul>
<li> contact</li>
<li> login </li>
<li> home </li>
</ul>
</div>
<div ng-view></div>
</body>
</html>
The home_apps.js looks like:
var MyHomeApp = angular.module('HomeApp', [
'ngRoute',
'HomeControllers'
]);
MyHomeApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'partials/login.html'
}).
when('/contactus', {
templateUrl: 'partials/contactus.html'
}).
when('/home', {
templateUrl: 'partials/home.html',
controller: 'WGHomeLanCtrl'
}).
otherwise({
redirectTo: 'partials/home.html',
controller: 'WGHomeLanCtrl'
});
}]);
Finally, under the /partials folder, there are 3 html files:
login.html:
<div>
<p class="right_margin">
<h1>log in...</h1>
</p>
</div>
contactus.html:
<div>
<p class="right_margin">
<h1>Contactus</h1>
</p>
</div>
home.html:
<div>
<p class="right_margin">
<h1>home</h1>
</p>
</div>
In actual world, when I open the index.html from firefox, the url is something like:
{file path}/index.html#/contactus
however the content from contactus.html is not displayed - the ng-view doesnt work in this case.
I feel like there it would be a tricky place where the error hides in, as I've spent much time on it. Any debug will be greatly appreciated!!!
It working fine
Take a look at this
Working Demo
var MyHomeApp = angular.module('HomeApp', []);
MyHomeApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'login.html'
}).
when('/contactus', {
templateUrl: 'contactus.html'
}).
when('/home', {
templateUrl: 'home.html',
controller: 'WGHomeLanCtrl'
}).
otherwise({
redirectTo: 'home.html',
controller: 'WGHomeLanCtrl'
});
}]);
MyHomeApp.controller( 'WGHomeLanCtrl', function ( $scope ) {
});
Here basic example for routing:
var app = angular.module('routeApp',['ui.bootstrap','ngRoute']).
config(function($routeProvider){
$routeProvider.when('/',{
templateUrl: 'templates/main.php'
}).when('/first',{
templateUrl: 'templates/first.php'
}).when('/second',{
templateUrl: 'templates/second.php'
});
}).controller('routeController',function($scope,$timeout){
//your code
});
Mark up:
<!DOCTYPE html>
<html ng-app='routeApp' class="scope">
<head>
<meta content="text/html;charset=UTF-8"/>
<link href="./css/tether.min.css" type="text/css" rel="stylesheet" />
<link href="./css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body ng-controller='routeController' class="scope">
main
first
second
<div ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="./js/tether.min.js">
</script>
<script src="./js/bootstrap.min.js">
</script>
<script src="./js/angular.min.js">
</script>
<script src="./js/ui-bootstrap-tpls-2.5.0.min.js">
</script>
<script src="./js/angular-route.min.js">
</script>
<script src="./js/flat-ui.min.js">
</script>
<script src="./js/main.js">
</script>
</body>
</html>
Explanation:
your routing derives from your angular version,this markup is relevant for
1.6.1 version. Thus,pay attention to '#' sign in your address bar,in 1.6.1
version you will have '#!'.