We Keep Coding

Angular giving a weird templateURL

I am trying to navigate to another page by using the selected objectID.
Angular Routing,
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider.when('/',{
controller: 'BooksController',
templateUrl: 'views/books.html'
})
.when('/books/details/:id',{
controller: 'BooksController',
templateUrl: 'views/book_details.html'
})
});
Angular Controller:
var myApp = angular.module('myApp');
myApp.controller('BooksController', ['$scope', '$http', '$location', '$routeParams', function($scope, $http, $location, $routeParams){
console.log('BooksController loaded...');
// This To get request all the books: it works fine
$scope.getBooks = function(){
$http.get('/api/books').then(function(response){
$scope.books = response.data;
});
}
// This to get request a book with specific id it works fine
$scope.getBook = function(){
var id = $routeParams.id;
$http.get('/api/books/'+id).then(function(response){
$scope.book = response.data;
});
}
}]);
And then I have this html page which work also fine accept the button in the page, this button supposed to give me a clean templateUrl to navigate to another html page but it give me weird URL:
<div class="panel panel-default" ng-init="getBooks()">
<div class="panel-heading">
<h3 class="panel-title">Latest Books</h3>
</div>
<div class="panel-body">
<div class="row">
<div ng-repeat="book in books">
<div class="col-md-6">
<div class="col-md-6">
<h4>{{book.title}}</h4>
<p>{{book.description}}</p>
<a class="btn btn-primary" href="#/books/details/{{book._id}}">View Details</a>
</div>
<div class="col-md-6">
<img class="thumbnail" src="{{book.image_url}}">
</div>
</div>
</div>
</div>
</div>
And once I press the button I'm supposed to get a clean url such as:
http://localhost:3000/#!/books/details/599701c1f3da51117535b9ab
but instead I get this url!
http://localhost:3000/#!/#%2Fbooks%2Fdetails%2F599701c1f3da51117535b9ab

Seems like you have hashprefix !, then your URL should also have ! after hash(#)
href="#!/books/details/{{book._id}}"
Since Angular 1.6 hashprefix is defaulted to !, you can disable this behavior by setting hashPrefix to ''(blank).
.config(['$locationProvider',
function($locationProvider) {
$locationProvider.hashPrefix('');
}
]);

Its because your url is getting converted into codes. %2f means a /.
You need to have this configuration to avoid this behavior of angular
myApp.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);

You have Prefix in url which is converting into character i.e url encoding.
So you need to fix $locationProvider's hashPrefix property by replacing its value with empty/blank string
$locationProvider.hashPrefix('');

jQuery Nav's anchor click not working with AngularJS

I have a Home.html screen and its corresponding Angularjs controller(HomeController.js). I am using jQuery Navigation sidebar on home screen. This navigation sidebar has a logout list item (li). I have given ng-click="logout()" to this li (list item), and I have defined logout() in HomeController.js.
When I click on logout, It doesn't give alert, probably it's not going to this controller.
Home.html
<nav id="menu">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 sidebar-nav-menu">
<div class="menu_nav">
<ul>
<li>
<a href="#" ng-click="logout();">
<img src="img/left-pannel/logout#2x.png" id="nav-icn-home" alt="" class="sidebar-menu-icons">
<span class="nav-menu-text">Logout</span>
</a>
</li>
</ul>
</div>
</div>
</div></nav>
HomeController.js
app.controller("HomeController", function ($scope, $location, $window, $compile) {
$scope.logout = function(){
alert("Click");
$location.path("/Login");
}});
config.js
var tkitApp = angular.module('tkit', ['ngRoute']);tkitApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'views/LaunchScreen.html',
controller: 'LaunchScreenController'
}).when('/Login', {
templateUrl: 'views/Login.html',
controller: 'LoginScreenController'
}).when('/Home', {
templateUrl: 'views/Home.html',
controller: 'HomeController'
}).otherwise({ redirectTo: '/' });}]);
I am not even getting alert on click of logout list item.
Logcat when Home.html gets loaded
03-11 17:34:37.530: I/chromium(29156): [INFO:CONSOLE(2)] "HomeController loaded", source: file:///android_asset/www/js/controller/HomeScreenController.js (2)

Your controller name is different in routing
$routeProvider.when('/', {
templateUrl: 'views/LaunchScreen.html',
controller: 'LaunchScreenController'
}).when('/Login', {
templateUrl: 'views/Login.html',
controller: 'LoginScreenController'
}).when('/Home', {
templateUrl: 'views/Home.html',
controller: 'HomeController'
}).otherwise({ redirectTo: '/' });}]);
And Controller is
app.controller("HomeController", function ($scope, $location, $window, $compile) {
$scope.logout = function(){
alert("Click");
$location.path("/Login");
}});
Please change your controller name like this
app.controller("HomeScreenController", function ($scope, $location, $window, $compile) {
$scope.logout = function(){
alert("Click");
$location.path("/Login");
}});
It will work

templateURL in ui-router using express

I generate a express project with ejs views engine.
I'm trying to set a templateURL for my home views, but it always feedback a 404 error.
Here are my codes.
In my public/javascripts/angularApp.js
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
$stateProvider
.state('home',{
url: '/home',
templateUrl: 'home.html',
controller: 'MainCtrl',
resolve:{
postPromise:['posts', function(posts){
return posts.getAll();
}]
}
})
And in views/index.ejs
<div class="row container">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
In views/home.html
<div class="page-header">
<h1>Flapper News</h1>
</div>
Please help me for this problem.
thanks alot~

This is answered in how-should-i-create-the-path-of-templateurl-property-in-angular-ui-router if using express. Then home.html must be inside the public folder, eg:
public
|--app
|--views
|--home.html
and the route would be:
...
templateUrl: '/app/views/home.html',
...

angular-ui router With two html pages

My project has the file home, page1, page2.
My home page has a different header layout than the rest of my pages. So, it is a separate html file. page1 and page 2 is using ui routing to load in the content of the page, but the header and footer are the same.
My Question is: if I am on the home page and click btn 1. how do I get it to load in the content of page1? (It will load index.html, but no content of btn1.)
I'm not sure if passing an id to the index.js is a solution and I'm not sure how to even do that. Would it make more sense to just make the entire thing a SPA?
My home.html with the buttons:
<a type="text/html" href="home.html" class="button home_btn">Home</a>
<a type="text/html" href="index.html" class="button my_btn1">Page1</a>
<a type="text/html" href="index.html" class="button my_btn2">Page2</a>
My idex.html:
<body>
<div class="container" ng-app="app">
<header ng-include="'html/header.html'"></header>
<div ui-view></div>
<footer ng-include="'html/footer.html'"></footer>
</div>
</body>
<script src="vendors/angular/angular.js"></script>
<script src="vendors/angular-ui-router/release/angular-ui-router.js </script>
<script src="scripts/index.js"></script>
my header.html:
<div id="headerLinks">
<a type="text/html" href="home.html" class="button home_btn">Home</a>
<a type="text/html" ui-sref="page1" class="button my_btn1">Page1</a>
<a type="text/html" ui-sref="page2" class="button my_btn2">Page2</a>
</div>
</div>
my index.js:
var app = angular.module('app', ['ui.router']);
app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('Page1', {
url: 'Page1',
templateUrl: 'Page1.html',
controller: 'Page1Ctrl'
})
.state('Page2', {
url: 'Page2',
templateUrl: 'Page2.html',
controller: 'Page2Ctrl'
})
}])

I"m kinda confused by what I was asking now that I look at it. I believe I was asking how to build a router with multiple pages. I got that to work. if this doesn't help, I'll see if I can find a resource or explain it better.
import angular-ui-router.
<script src="vendors/angular-ui-router/release/angular-ui-router.js" type="text/javascript"></script>
This is what my index.js file now looks like. it has multiply views which allow for different header or content or footer or whatever.
var app = angular.module('app', [
'ui.router',
'ctrls'
]);
app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider, $state) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home',{
url: '/home',
views: {
'header': {
templateUrl: 'html/headerHome.html',
controller: 'headCtrl'
},
'content': {
templateUrl: 'home.html',
//controller: 'ContentController'
}
}
})
.state('page1', {
url: '/page1',
views: {
'header': {
templateUrl: 'html/header.html',
controller: 'headCtrl'
},
'content': {
templateUrl: 'page1.html',
controller: 'page1Ctrl'
}
}
})
.state('page2', {
url: '/page1',
views:{
'header':{
templateUrl: 'html/header.html',
controller: 'headCtrl'
},
'content':{
templateUrl: 'page2.html',
controller: 'page2Ctrl'
}
}
})

Routing does not work in angularjs

I am very new to angular js.
I have implemented routing in angular js but it does not redirect me to the pages I have stated in the route.js
here is the code:
Route.js
var sampleApp = angular.module('sampleApp', []);
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/getplaces', {
templateUrl: 'getplaces.html',
controller: 'ListCtrl',
}).
when('/getuncategorisedplaces', {
templateUrl: 'list.html',
controller: 'uncatCtrl'
})
.otherwise ({
redirectTo: '/getplaces'
});
}]);
Controller.js
function uncatCtrl($scope, $http) {
$http.get('http://94.125.132.253:8000/getuncategorisedplaces').success(function (data) {
$scope.places = data;
console.log(data);
}
)}
// get places
function ListCtrl($scope, $http) {
$http.get('http://94.125.132.253:8000/getplaces').success(function (data) {
$scope.places = data;
console.log("Successful")
console.log(data);
}
)}
HTML code includes ng view and href such as href="#getplaces"
<body ng-app="sampleApp" >
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> <a class= "linha" href="#getplaces"> Get places </a></li>
<li><a class= "linha" href="post.html"> Post a movie </a></li>
<li><a class= "linha" href="#getuncategorisedplaces">List of uncategorised places </a></li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>

Check that you have both scripts included (angular and ngroute)
<script src='angular.js'>
<script src='angular-route.js'>
Then check that you are including that module in your app:
var sampleApp = angular.module('sampleApp', ['ngRoute']);
As of Angular 1.2.0, angular-route is a separate module
refer to the angular documentation:
https://docs.angularjs.org/api/ngRoute

Here is an example code that i have written a while ago.
var app = angular.module('test', ['ngRoute','ngGrid','ngBootstrap', 'http-auth-interceptor','ui.bootstrap','ngCookies','ngSanitize']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/sign-in', {templateUrl: 'partials/login/signin.html', controller: LoginCtrl}).
when('/admin/sign-in', {templateUrl: 'partials/login/userManagementSignin.html', controller: LoginCtrl}).
otherwise({redirectTo: '/dashboard'});
}]);