I am getting a 404 and cannot figure out why. I know my mongoDB server and node server are working because I can query and view my services. Now I am trying to implement an angular.js frontend on top of the services but I keep getting a 404 when I try to access my "home state".
// Configure the app to use routing. These $ tags are referencing the angular ui-router import.
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// tells your route what controller to use when it gets there
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
resolve: {
postPromise: ['posts', function(posts){
return posts.getAll();
}]
}
});
$stateProvider
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
// .otherwise means "route to this place if the url is anything else" || like an if/else for url routing
$urlRouterProvider.otherwise('home');
}]);
This is some code from app.js that is throwing the code. Standard express generated code here.
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
This is the javscript that should be displaying, which is located in my index.ejs view page in node.
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-repeat="post in posts | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up"
ng-click="incrementUpvotes(post)"></span>
{{post.upvotes}}
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
<span>
Comments
</span>
</div>
<form ng-submit="addPost()"
style="margin-top:30px;">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Title"
ng-model="title"></input>
</div>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Link"
ng-model="link"></input>
</div>
<button type="submit">Post</button>
</form>
</script>
Also for reference, my imports on the index.ejs page
<head>
<title>Flapper News</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="/javascripts/angularApp.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
I am baffled by this 404 because I feel like I have a good understanding of this in-line templating routing set up. I have tried everything I can think of and nothing will resolve this 404.
GET /home 404 19.131 ms - 1246
It looks like you made the same mistake I did following this tutorial: you deleted the root route in routes/index.js which is need to serve up the initial index.ejs file. Here it is to add back to your route:
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
Related
This is a pretty standard question, however I can't seem to find a solution in anything online. Below is the router/index.html page I'm using. I'm not getting any errors in the console, however when the url resolves, correctly, to the login page the entire page is blank. Any ideas, looking at the code below, as to what I'm missing?
router
(function(){
'use strict'
var app = angular.module('app.core');
app.config(AppRouter);
AppRouter.$inject = ['$stateProvider', '$urlRouterProvider'];
function AppRouter($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('main', {
url: '/main',
abstract: true,
resolve:{
Config: 'Config',
config: function(Config){
console.log(Config);
return Config;
}
}
})
.state('main.login', {
url: '/login',
templateUrl: 'app/components/login/login.html',
controller: 'LoginController',
controllerAs: 'vm',
reloadOnSearch: false
})
}
})();
index.html
<div class="slide-animation-container">
<div ui-view id="ng-view" class="slide-animation"></div>
{{scrollTo}}
</div>
login.html
<div class="container" ui-view>
<div class="row vertical-center-row">
<form id="loginForm" class="form-signin" style="max-width:300px;" autocomplete="off" ng-if="attemptLogin">
<h2 class="form-signin-heading" style="font-size:22px">Please Sign In</h2>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span></span>
<input type="text" class="form-control" id="username" placeholder="User Name" ng-model="user.username" required>
</div>
</form>
</div>
</div>
EDIT
The router above resides in my config.js file for my core module:
core.module.js
(function(){
'use strict'
angular.module('app.core', ['angulartics', 'angulartics.google.analytics', 'angulartics.scroll', 'ngRoute', 'ngAnimate', 'ng.deviceDetector', 'ui.router',
'ui.bootstrap', 'ngTable', 'ngSanitize', 'ngCsv', 'toastr', 'angular.chosen', 'rzModule', 'publicServices']);
})();
Your otherwise logic changes the url to /login when no states match.
$urlRouterProvider.otherwise('/login');
However, your state definitions do not have a url that matches /login.
Because main.login is a child of main, it inherits the URL from main.
Therefore, you should use the full URL for main.login in your otherwise() call.
$urlRouterProvider.otherwise('/main/login');
Your module should have injected ui.router as a dependency ,
var app = angular.module('app',['ui.router']);
DEMO
I want to redirect to another page by clicking a button, but when I click on a button, URL is changed, but it is not redirected, I have to refresh the page with new URL. The same is also happening when I click on link.
locationController.js
angular.module('reservationModule').controller('locationController', function($scope, $location){
$scope.setLocation = function (url) {
$location.path(url);
};
})
reservationModule.js
(function () {
var resModule = angular.module('reservationModule', ['ngRoute']);
resModule.controller('HomeController', function ($scope) { // here $scope is used for share data between view and controller
$scope.Message = "Yahoooo! we have successfully done our first part.";
});
resModule.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '/Home/Index.cshtml',
controller: 'locationController'
})
.when('/Home/Index', {
templateUrl: '/Home/Index.cshtml',
controller: 'locationController'
})
.when('/Home/Registration', {
templateUrl: '/Home/Registration.cshtml',
controller: 'registerController'
})
.when('/Home/Login', {
templateUrl: '/Home/Login.cshtml',
controller: 'loginController'
})
.otherwise({ redirectTo: '/' });
});
})();
Index.cshtml
#{
// Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Webový rezervační systém";
}
<base href="/">
<div class="container" ng-controller="locationController">
<header class="header">
<div class="headerleft">
<div class="headerlogo">
<img alt="reservation" src="../Content/pics/vetstoria-logo.jpg" width="50" height="50">
</div>
</div>
<div class="headerright">
<p class="headerlogintext">
<a class="btn headerlogin" href="/Home/Login" style="text-decoration:none">Přihlašte se</a>
</p>
</div>
</header>
<div class="content">
<h1 class="content-title">Webový rezervační systém</h1>
<p class="content-title-text">V našem rezervačním systému se můžete rezervovat na cokoliv chcete. Ať už si chcete rezervovat sportoviště, nějaký kurz nebo jiné, u nás to jde snadno.</p>
<p class="content-title-text">Pro začátek vám stačí jediné.</p>
<button class="btn-big" ng-click="setLocation('/Home/Registration')">Registrovat</button>
</div>
<!-- <ul class="menuUl">
<li>#Html.ActionLink("Register", "Registration")</li>
</ul>-->
#section Scripts{
<script src="~/Scripts/Angular_Controllers/locationController.js"></script>
}
I read some topics about this, but I don't know, if an error is in the module, or in the controller.
I had a similar issue. The template url should point to ".html" rather than ".cshtml". When you try to access files inside the Default Folders created by Visual Studio, for some reason you cannot access it. So try changing your path.
Intially when i use / i can see home.html getting sucessufully to index.html then i click <a ng-href="#/club> the club page is loaded successfully, but then i press back button then only header and footer of home.html is seen and in between complete blank page
Below are following files:
appRoutes.js --> for routing on angular side
clubCtrl.js --> club controller
clubService.js --> club service to fill data from node
Routes.js --> partial sample of retriving data from database and sending response
club.html --> partial club view file
home.html --> partial home page
index.html --> file on which club.html will get dynamically displayed using ng-view.
app.js -> injecting all modules
appRoutes.js
angular.module('appRoutes', []).config(['$routeProvider', function($routeProvider) {
$routeProvider
// home page
.when('/', {
templateUrl: 'views/home.html',
controller: 'MainController'
})
// nerds page that will use the NerdController
.when('/club', {
templateUrl: 'views/club.html',
controller: 'ClubController'
});
}]);
ClubCtrl.js
angular.module('ClubCtrl', []).controller('ClubController', [ '$http','Club', function($http, Club) {
var club = this;
club.data = {};
Club.getClubData().then(function(response){
club.data = response.data;
});
}]);
ClubService.js
angular.module('ClubService', []).factory('Club', ['$http', function($http) {
return {
getClubData : function() {
return $http.get('/api/club');
}
};
}]);
Routes.js
module.exports = function(app) {
app.get('/', function(req, res) {
console.log("routes send get(*)");
res.sendFile(path.resolve('public/index.html')); // load our public/index.html file
});
app.get('/api/club', function(req, res){
console.log("routes send get /club");
con.query("select * from club_data", function(err, rows,field) {
if (!err)
{
console.log('The solution is: ', rows);
res.json(rows);
}
else
console.log('Error while performing Query. ', err);
});
});
};
Club.html
</div>
<div class="row " >
<div class="col-md-3 col-sm-6 image-feature" ng-repeat='dat in main.data'>
<div class="thumbnail">
<img ng-src="images/club/{{dat.imagename}}"alt="">
<div class="caption">
<h3>{{ dat.name }}</h3>
<p>{{dat.desccription}}</p>
<p>{{dat.date}}</p>
<p>
I'm Going!
</p>
</div>
</div>
</div>
home.html
<h1>Party</h1>
<div class="divider"></div>
<p>"Anytime I'm at a club or a party, I'm dancing from beginning to end."<br>--Agnes Bruckner</p>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6">
<div class="about-item scrollpoint sp-effect2">
index.html
<body ng-app="staygala" ng-controller="MainController">
<!-- ANGULAR DYNAMIC CONTENT -->
<div ng-view></div>
</body>
app.js
angular.module('staygala', ['ngRoute', 'appRoutes', 'MainCtrl', 'ClubCtrl', 'ClubService']);
On browser console:
Uncaught TypeError: Cannot read property 'restart' of undefined i'm seeing this error while i press back. Also it looks there is no call to Get / when i press back button but when page starts there is call to same
I'm trying to complete the Codecademy project - CalendarApp using AngularJS which using services and routing. For some reason its not running properly. The data isnt being displayed and the expression: {{ day.date | date }} is just showing up as is.
Can anyone spot where I've gone wrong? I have checked other people's examples but can't spot the error.
index.html:
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<script src="js/vendor/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="CalendarApp">
<div class="header">
<div class="container">
<img src= "img/logo.svg" width="51" height="54">
</div>
</div>
<div class="main">
<div ng-view></div>
<div class="container">
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/DayController.js"></script>
<script src="js/controllers/EventController.js"></script>
<!-- Services -->
<script src="js/services/events.js"></script>
</body>
</html>
app.js:
var app = angular.module('CalendarApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
controller: 'DayController',
templateUrl: 'views/day.html'
})
.when("/:id", {
controller: 'EventController',
templateUrl: 'views/event.html'
})
.otherwise({
redirectTo: "/"
});
});
events.js
app.factory('events', ['$http', function($http) {
return
$http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/events-api/events.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
DayController.js
app.controller('DayController', ['$scope', 'events', function($scope, events) {
events.success(function(data) {
$scope.day = data;
});
}]);
EventController.js
app.controller('EventController', ['$scope', 'events', '$routeParams', function($scope, events, $routeParams) {
events.success(function(data) {
$scope.event = data.events[$routeParams.id];
});
}]);
day.html:
<h2 class="date"> {{ day.date | date }} </h2>
<div class="event" ng-repeat="event in day.events">
<a href="#/{{$index}}">
<h3 class="name">{{ event.name }} </h3>
<p><span class="from">{{ event.from }} </span> - <span class="to">{{ event.to }} </span></p>
</a>
</div>
event.html:
<div class="event-detail">
<h2 class="event-name">{{ event.name }}</h2>
<p class="time"><span class="from">{{ event.from }} </span> - <span class="to">{{ event.to }} </span></p>
<p class="where">{{ event.where }} </p>
</div>
Angular application is showing {{}} with content means it has broken somewhere. I think I know where the problem is.
The problem with your factory and controller, you returned promise from the factory but that $http has .success & .error callback with it. But you can't return the data from the callbacks as you are trying in your current code, and once you do .success & .error on the promise you can't continue that promise chain. Instead I'd suggest you to return the promise from the service then the callback will be attached to it by controller.
Factory
app.factory('events', ['$http', function($http) {
return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/events-api/events.json');
}]);
By changing your code, your problem will get solved.
I'm using AngularJS + Laravel for my web-application. AngularJS install in public/app folder, the view for my web-application is not from public/app, is from Laravel/app/view folder.
-views
--web-app
---partials
---chat-rooms.blade.php
--index.blade.php
Index.blade.php
<body ng-app='chatApp'>
<div class="page-header">
<h1> Chat application </h1>
</div>
<div ng-view class="container"></div>
{{ HTML::script('app/libs/angular/angular.min.js')}}
{{ HTML::script('app/libs/angular-route/angular-route.min.js')}}
{{ HTML::script('app/scripts/app.js')}}
{{ HTML::script('app/scripts/controllers/chat-rooms.js')}}
</body>
Chat-rooms.blade.php
<div class="row">
<div class="col-md-12">
<select class="form-control" ng-model="selectedChatRoom" ng-options="chatRoom.name for chatRoom in chatRooms">
</select>
<button type="button" ng-click="selectChatRoom(selectedChatRoom)">Select chat room</button>
</div>
<div class="col-md-12">
<input type="text" class="form-control" ng-model="chatRoom.name" placeholder="Enter chat room name">
<button type="button" ng-click="createChatRoom(chatRoom)">Create</button>
</div>
My app.js is from public/app folder :
'use strict';
angular.module('chatApp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/chat-rooms',
controller: 'ChatRoomsCtrl'
})
.when('/chat-room/:chatRoom', {
templateUrl: 'partials/chat-room.html',
controller: 'ChatRoomCtrl'
});
});
The problem now is "ChatRoomsCtrl" cause this problem, the function is undefined.
Here's the js:
'use strict';
angular.module('chatApp')
.controller('ChatRoomsCtrl', function($scope, ChatRoom, $location) {
var chatRoomsLoaded = function(chatRooms) {
$scope.chatRooms = chatRooms;
}
var handleErrors = function(response) {
console.error(response);
}
$scope.selectChatRoom = function(chatRoom) {
$location.path('chat-room/' + chatRoom.id);
}
$scope.createChatRoom = function(chatRoom) {
ChatRoom.create(chatRoom).then($scope.selectChatRoom);
}
ChatRoom.getAll()
.then(chatRoomsLoaded)
.catch(handleErrors);
});
Again, everything seems work, the front-end can work, but the backends couldn't. The create button "ng-click" doesn't toggle at all. Seems like controller is causing this.
Part of my index.blade.php is actually put inside my video template.
My video template consist of videoController and route...
VideoController
public function getChatRoom()
{
return View::make('chat-app.partials.chat-rooms');
}
Route
Route::get('video/{slug}', array(
'as' => 'showVideo',
'uses' => 'VideoController#show'
));
Route::get('video/partials/chat-rooms', array(
'uses' => 'VideoController#getChatRoom'
));
When I load the chat-rooms, the web address must be video/partials/chat-rooms.. Currently I'm surfing the video template, part of it was chat-app, the web address is video/{slug}/ which slug could be any name...
ERROR : Click here to view the error