Expected Result: Opens up Title and Comment in titleDetails.html when Title is clicked in index.html.
Problem: URL changes to http://localhost:3000/titleDetails.html when Title is clicked.
But content remains the same. Page displays 0 post when I refreshed the URL.
Screenshot: (index.html) & (titleDetails.html after clicking a title in index.html)
Screenshot: (after refreshing titleDetails.html when content remains the same after redirecting from index.html)
Code:
1) index.html
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<base href="/" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<input ng-model="post.title" class="form-control" placeholder="title"/>
<textarea ng-model="post.body" class="form-control" placeholder="body"></textarea>
<button ng-click="createPost(post)" class="btn btn-primary btn-block">Post</button>
<button ng-click="updatePost(post)" class="btn btn-success btn-block">Update</button>
<div ng-repeat="post in posts">
<h2>
<a ng-click="titleDetails(post)">{{ post.title }} </a>
<a ng-click="editPost(post._id)" class="pull-right"><span class="glyphicon glyphicon-pencil"></span></a>
<a ng-click="deletePost(post._id)" class="pull-right"><span class = "glyphicon glyphicon-remove"></span></a>
</h2>
<em>{{post.posted}}</em>
<p>{{post.body}}</p>
</div>
</div>
</body>
</html>
2) titleDetails.html
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<base href="/" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<div>
<h2>
<a>{{ postDetail.title }} </a>
</h2>
<em>{{postDetail.posted}}</em>
<p>{{postDetail.body}}</p>
</div>
</div>
</body>
</html>
3) app.js
(function () {
angular
.module("BlogApp", [])
.config(function($locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
})
.controller("BlogController", BlogController);
function BlogController($scope, $http, $rootScope, $location) {
$scope.createPost = createPost;
$scope.deletePost = deletePost;
$scope.editPost = editPost;
$scope.updatePost = updatePost;
$scope.titleDetails = titleDetails;
$scope.postDetail = null;
function init() {
getAllPosts();
}
init();
function titleDetails(post)
{
$scope.postDetail = post;
$location.path('/titleDetails.html');
}
function updatePost(post){
console.log(post);
$http
.put("/api/blogpost/"+post._id, post)
.success(getAllPosts);
}
function editPost(postId){
$http
.get("/api/blogpost/"+postId)
.success(function(post){
$scope.post = post;
});
}
function deletePost(postId){
$http
.delete("/api/blogpost/"+postId)
.success(getAllPosts);
}
function getAllPosts(){
$http
.get("/api/blogpost")
.success(function(posts) {
$scope.posts = posts;
});
}
function createPost(post) {
console.log(post);
$http
.post("/api/blogpost",post)
.success(getAllPosts);
}
}
})();
AngularJS is a SPA (single page application) oriented. Your links are still tied to the classic multiple page navigation. You will have to re-work your app since $location and $http.get are not the correct services for loading templates and navigation in your scenario.
AngularJS can load the template and update the address bar accordingly as long you use the $routeProvider. Scoth.io made a simple tutorial on how to setup routing.
But you basically have to include ngRoute to your application:
angular.module('ngRouteExample', ['ngRoute'])
Then configure your routes:
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'blogPosts.html',
controller: 'BlogController'
})
.when('/post/:id', {
templateUrl: 'titleDetails.html',
controller: 'TitleController'
});
}
Since the answer can get very long, the following Plunker demonstrates a simple routing implementation for you to learn:
https://plnkr.co/edit/twmbG0G9XjOqF82JtyMC?p=preview
Related
Main page URL: http://localhost:3000/
Current second page URL: http://localhost:3000/#/titleDetails.html
Expected second page URL: http://localhost:3000/titleDetails.html
Currently when I click on the title in my main page, the URL contains an extra /# which causes the page to be redirected to titleDetails.html.
The directory of titleDetails.html and index.html is in the same directory.
May I know how can I fix this?
Original Post: AngularJS Display 1 Post in New Page
app.js
(function () {
angular
.module("BlogApp", [])
.config(function($locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
})
.controller("BlogController", BlogController);
function BlogController($scope, $http, $rootScope, $location) {
$scope.createPost = createPost;
$scope.deletePost = deletePost;
$scope.editPost = editPost;
$scope.updatePost = updatePost;
$scope.titleDetails = titleDetails;
$scope.postDetail = null;
function init() {
getAllPosts();
}
init();
function titleDetails(post)
{
$scope.postDetail = post;
$location.path('/titleDetails.html');
}
function updatePost(post){
console.log(post);
$http
.put("/api/blogpost/"+post._id, post)
.success(getAllPosts);
}
function editPost(postId){
$http
.get("/api/blogpost/"+postId)
.success(function(post){
$scope.post = post;
});
}
function deletePost(postId){
$http
.delete("/api/blogpost/"+postId)
.success(getAllPosts);
}
function getAllPosts(){
$http
.get("/api/blogpost")
.success(function(posts) {
$scope.posts = posts;
});
}
function createPost(post) {
console.log(post);
$http
.post("/api/blogpost",post)
.success(getAllPosts);
}
}
})();
index.html
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<input ng-model="post.title" class="form-control" placeholder="title"/>
<textarea ng-model="post.body" class="form-control" placeholder="body"></textarea>
<button ng-click="createPost(post)" class="btn btn-primary btn-block">Post</button>
<button ng-click="updatePost(post)" class="btn btn-success btn-block">Update</button>
<div ng-repeat="post in posts">
<h2>
<a ng-click="titleDetails(post)">{{ post.title }} </a>
<a ng-click="editPost(post._id)" class="pull-right"><span class="glyphicon glyphicon-pencil"></span></a>
<a ng-click="deletePost(post._id)" class="pull-right"><span class = "glyphicon glyphicon-remove"></span></a>
</h2>
<em>{{post.posted}}</em>
<p>{{post.body}}</p>
</div>
</div>
</body>
</html>
titleDetails.html:
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<div>
<h2>
<a>{{ postDetail.title }} </a>
</h2>
<em>{{postDetail.posted}}</em>
<p>{{postDetail.body}}</p>
</div>
</div>
</body>
</html>
Console Error in index.html:
angular.js:13708 Error: [$location:nobase] http://errors.angularjs.org/1.5.7/$location/nobase
at angular.js:38
at sf.$get (angular.js:13384)
at Object.invoke (angular.js:4709)
at angular.js:4508
at d (angular.js:4655)
at e (angular.js:4679)
at Object.invoke (angular.js:4701)
at R.instance (angular.js:10234)
at m (angular.js:9147)
at g (angular.js:8510)
Angular has 3 routing operates:
Hashbang Mode
HTML5 Mode
Hashbang in HTML5 Mode
You can configure: $locationProvider.html5Mode(true).hashPrefix('!');
Check documentation
I want to have particular variable for menu to know which class to be active. Up to now I know how to set variable inside ng-view but I want to keep my menu out of that view. If I set variable in function in controller isn't visible outside of ng-view and that is exactly what I want to, to be visible. I try with rootscoope but I couldn't manage. If someone can help me my code is like this:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="example">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
<title>Example</title>
</head>
<body>
<div class="container-fluid main-header">
<div class="main-menu-active">First page</div>
<div class="main-menu">Second page</div>
</div>
<div ng-view class="main-body"></div>
<script src="libs/jquery/dist/jquery.min.js"></script>
<script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<link href="libs/ng-dialog/css/ngDialog.min.css" rel="stylesheet">
<link href="libs/ng-dialog/css/ngDialog-theme-default.css" rel="stylesheet">
<script src="libs/ng-dialog/js/ngDialog.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/mainCtr.js"></script>
</body>
</html>
app.js
(function () {
'use strict';
angular
.module('example', ['ngRoute','ngDialog'])
.config(function ($routeProvider,$httpProvider) {
$routeProvider.when('/', {
controller: 'mainCtr',
controllerAs: 'mCtr',
templateUrl: 'app/views/firstPage.html'
});
$routeProvider.when('/second', {
controller: 'mainCtr',
controllerAs: 'mCtr',
templateUrl: 'app/views/secondPage.html'
});
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
}).run(function($http, $httpParamSerializerJQLike) {
//decode json on every submit form
$http.defaults.transformRequest.unshift($httpParamSerializerJQLike);
})
})();
controller:
(function() {
'use strict';
angular
.module('example')
.controller('mainCtr', mainCtr);
mainCtr.$inject = ['$window','$routeParams','ngDialog','$timeout'];
function mainCtr($window,$routeParams,ngDialog,$timeout) {
var vm = this;
vm.firstPage = firstPage;
vm.secondPage = secondPage;
function firstPage() {
vm.test = 'This is first page';
}
function secondPage() {
vm.test = 'This is second page';
}
}
})();
I want to have access to variable vm.test in <div class="container-fluid main-header">
I would make a Controller around the ng-view which hold the value(s):
<body ng-controller="OuterController">
<div class="container-fluid main-header">
<div class="main-menu-active">First page</div>
<div class="main-menu">Second page</div>
</div>
<div ng-view class="main-body"></div>
...
</body>
and if you want to share data between the controllers in ng-view directive use a service.
So I've made a plunker to illustrate, how data sharing is accomplished: https://plnkr.co/edit/axekEgrFwnm93aFXoMKd
So the basic idea is to use a service and in someway either by button click as in the question or automatically in contoller as plunker, set the shared value.
Service
app.service('commonInfomation', function() {
return {
test: ''
};
});
Inner controller
app.controller('FirstCtrl', function($scope, commonInfomation) {
commonInfomation.test = "Hello from first page";
});
Outer controller
app.controller('MainCtrl', function($scope, commonInfomation) {
$scope.commonInfomation = commonInfomation;
});
View
<body ng-controller="MainCtrl">
<h2>{{commonInfomation.test}}</h2>
<div class="container-fluid main-header">
<a href="#/">
<div class="main-menu-active">First page</div>
</a>
<a href="#/second">
<div class="main-menu">Second page</div>
</a>
</div>
<div ng-view class="main-body"></div>
</body>
Module
var app = angular.module('plunker', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'firstpage.html',
controller: 'FirstCtrl'
})
.when('/second', {
templateUrl: 'secondpage.html',
controller: 'SecondCtrl'
})
});
I followed tutorial on this LINK to create AJAX requests on my angularJS appliction (CRUD operations). After I finished coding I tried to perform AJAX request (get all data from database) but when I lunch my application I got this error:
TypeError: undefined is not a function
at new <anonymous> (http://localhost:49510/Scripts/application/controllers.js:4:15)
Does someone knows where's the problem and how to fix it?
Here is code:
controller:
app.controller('ContactsController', [
'$scope', '$http', '$location', 'contactsService',
function ($scope, $location, $http, contactsService) {
$http.get('/contacts/').success(function (data) { //triggers error
alert(data);
$scope.contact = data;
$scope.loading = false;
})
.error(function () {
alert ("An Error has occured while loading contacts!");
// $scope.loading = false;
});
$scope.editContact = function (id) {
$location.path('/edit-contact/' + id);
};
$scope.displayContact = function (id) {
$location.path('/display-contact/' + id);
};
$scope.showDetails = function (id) {
var el = angular.element(document.getElementById('#ct-details-' + id));
el.toggleClass('details-hidden');
}
}
]);
and here is contacts.html template:
<div class="container view">
<header>
<h3>Contacts</h3>
</header>
<div>
<a class="nav-pills hover" href="#/add-contact">Add Contact</a>
</div>
<br /><br />
<div class="row">
<ul class="span5" >
<li class="nav-pills nav-stacked contact-row" data-ng-repeat="contact in contacts | orderBy:'firstName'">
<span id="ct-details-{{contact.id}}" data-ng-click="displayContact(contact.id)" style="cursor:pointer;" class="contact-data details-hidden" href="" >
<span class="span3 contact-name" >{{contact.firstName + ' ' + contact.lastName}}
{{contact.emailAddress}}</span>
</span>
<button class="btn editContact" data-ng-click="deleteContact(contact.id)">Delete</button>
<button class="btn editContact" data-ng-click="editContact(contact.id)">Edit</button>
</li>
</ul>
</div>
</div>
and here is index.cshtml file:
<!DOCTYPE html>
<html ng-app="contactsManager">
<head>
<title>Contacts</title>
</head>
<body>
<div class="navbar navbar-top">
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/custom.css" rel="stylesheet" />
<div class="navbar-inner">
<div class="container">
<h2>Contacts</h2>
</div>
</div>
</div>
<div ng-view class="example-animate-container"
ng-animate="{enter: 'example-enter', leave: 'example-leave'}"></div>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/application/application.js"></script>
<script src="~/Scripts/application/controllers.js"></script>
<script src="~/Scripts/application/contactsService.js"></script>
</body>
</html>
The order of arguments in the controller function has to match the order in the parameter array.
You have mixed the order of $http and $location.
So change your function signature to
app.controller('ContactsController', [
'$scope', '$http', '$location', 'contactsService',
function ($scope, $http, $location, contactsService) {
Here is a small self-contained html todo application using routes...
It has two views - list.html and add.html
list.html:
<div>
Add Task
<br />
<br />
<div class="container" id="tasks">
<ul>
<li ng-repeat="task in tasks">
<button ng-show="!task.done" ng-click="markTaskAsDone(task)" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-ok-circle"></span></button>
<button ng-show="task.done" ng-click="markTaskAsNotDone(task)" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-pushpin"></span></button>
<button ng-click="removeTask(task)" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-remove-circle"></span></button>
<s ng-show="task.done">{{task.desc}}</s>
<span ng-show="!task.done">{{task.desc}}</span>
</li>
</ul>
<p ng-show="tasks.length == 0">Add few tasks</p>
</div>
</div>
add.html:
<div>
<span class="glyphicon glyphicon-arrow-left"></span> Back
<h2>Add a task</h2>
<div class="form-inline">
<input type="text" data-ng-model="newTask.desc" placeholder="Enter Task..." class="form-control" />
Add
</div>
</div>
I only have one controller.
controllers = {
ToDoController: function ($scope, $timeout, $location) {
//two items in by default...
$scope.tasks = [
{ desc: 'Buy milk', done: false },
{ desc: 'Collect newspaper', done: false }
];
$scope.newTask = { desc: '', done: false };
$scope.addNewTask = function () {
$location.path('/');
console.log('a');
$scope.tasks.push($scope.newTask);
}
$scope.markTaskAsDone = function (task) {
task.done = true;
console.log($scope.tasks);
}
$scope.markTaskAsNotDone = function (task) {
task.done = false;
};
$scope.removeTask = function (task) {
$scope.tasks.splice($scope.tasks.indexOf(task), 1);
};
//called to set newTask
$scope.setNewTask = function () {
$scope.newTask = { desc: '', done: false };
};
}
};
My shell page looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ToDo List</title>
<!-- Bootstrap -->
<link href="Content/bootstrap.min.css" rel="stylesheet">
<link href="Content/bootstrap-theme.min.css" rel="stylesheet">
<style>
#tasks ul {
margin: 0px;
padding: 0px;
list-style: none;
font-size: large;
}
</style>
</head>
<body>
<h1>TODO App</h1>
<div data-ng-app="todoApp">
<div data-ng-view=""></div>
</div>
<script src="Scripts/jquery-1.9.0.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/todo.js"></script>
<script>
var app = angular.module('todoApp', ['ngRoute']);
app.controller(controllers);
app.config(function ($routeProvider) {
$routeProvider
.when('/list', {
controller: 'ToDoController',
templateUrl: 'partials/list.html'
})
.when('/add', {
controller: 'ToDoController',
templateUrl: 'partials/add.html'
})
.otherwise({ redirectTo: '/list' });
});
</script>
</body>
</html>
Issue:
When I load index.html its shows the list.html. The two default items I've put shows up. I click on Add and navigate to the second view (add.html), enter details and click on the Add button in that page...I navigate to the list.html view, but its still showing the old list...not the updated list...
Surely missing some api call to do the update to the view...else this page is coming from some cache. What is the correct way to do this?
ToDoController is instantiated twice and separately for your two views. To maintain 1 instance of the controller to control both views, don't declare it in your routing, but declare it on a parent tag of the views.
For instance, like this:
<div data-ng-app="todoApp" data-ng-controller="ToDoController">
<div data-ng-view></div>
</div>
Even better is to write separate controllers for each view to put the view-specific logic into, and have 1 parent controller to store values that both controllers should have access to.
Another way to share scope among isolated controllers is using $rootScope, but you should normally try to avoid using that (like you would try to avoid using global variables in any programming language).
I have a very simple app. When I start the app it works fine, both angular and angular-route are loaded, the config function is executed and "otherwise" works as intended.
However, both boxes and versions do not work and no HTML is injected. The main page just says
<!-- ngView: -->
and that's it.
THERE ARE 0 ERROR MESSAGES!!! The console is just empty as a desert.
I tried everything and it should work but it doesn't. I even tried replacing the browserify calls and including angular directly in the html - no success.
HTML:
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>app</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="mainheader">
<div class="client-logo"></div>
<div class="logo"></div>
</header>
<nav class="mainmenu">
<ul>
<li class="active">Boxes</li>
<li>Versions</li>
</ul>
</nav>
<div ng-view></div>
<footer></footer>
</body>
<script src="./js/bundle.js"></script>
</html>
My JS:
'use strict';
require('angular/angular');
require('angular-route/angular-route');
var controllers = require('./controllers');
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/boxes', {
tamplate: 'views/boxes.html',
controller: 'boxController'
})
.when('/versions', {
tamplate: 'views/versions.html',
controller: 'versionsController'
})
.otherwise({
redirectTo: '/boxes'
});
}
]);
app.controller('boxController', controllers.boxController);
app.controller('versionsController', controllers.versionsController);
Example view:
<h2>Boxes</h2>
<p>{{ message }}</p>
Example controler:
'use strict';
exports.boxController = function($scope) {
$scope.message = 'Box Controller';
console.log('boxes');
};
exports.versionsController = function($scope) {
$scope.message = 'Versions Controller';
console.log('versions');
};
I'm as stupid as they come, the problem is a spelling error, it's tEmplate!
Thanks for the responses.