After reading this I was able to fix the # problem in my URL. It works fine without the URL.
In index.html
<base href="/app-name/">
My URL :
http://localhost:7001/app-name
Before applying base URL I had
http://localhost:7001/app-name/#/home
1) When I type this in browser how does the URL change to http://localhost:7001/app-name/home?
I was able to change and navigate to diff levels of application when using #. But, after applying base in index.html I am unable to perform this and the browser throws a 404. Any suggestions on how to get this working?
Here is my navigation page
<div class='navbar-header'>
<a class='navbar-brand' href="home"><img alt='img' src="appName/images/logo.PNG" type="image/png" height="30"></a>
<div class="navbar-header">
<a class="navbar-brand" href="home"><b>App - Name</b></a>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li> <span class="glyphicon glyphicon-home"></span> Home</li>
<li> <span class="glyphicon glyphicon-list-alt"></span> YYYYYYYYY </li>
<li> <span class="glyphicon glyphicon-hand-up"></span> XXXXXXXX</li>
</ul>
</div>
Router looks like this.
'use strict';
appName.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl : 'appName/models/scheduler/home.html',
controller : 'mainController'
})
.when('/logs', {
templateUrl : 'appName/models/logs/logs.html',
controller : 'logsController'
})
.when('/info', {
templateUrl : 'appName/models/quick_info/info.html',
controller : 'yyyyController'
})
.otherwise({redirectTo:'/home'});
// $locationProvider.html5Mode(true);
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Thanks for taking time to look into this.
Related
I am using AngularJS to create an SPA. I have following code in my home.ejs file:
/* Initial Code */
<li class="nav-item dropdown" >
<a class="nav-link dropdown" data-toggle="dropdown" href="#"><i class="fa fa-user"></i> <%= sess.name.split(' ')[0] %></a>
<div class="dropdown-menu" style="margin-top:6px">
<a class="dropdown-item" href="profile">Profile</a>
<a class="dropdown-item" href="#">Settings</a>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</nav>
</header>
<div ng-view>
</div>
</body>
<script>
var app = angular.module("social", ["ngRoute"]);
app.config(function ($routeProvider,$locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/", {
templateUrl: "home.ejs"
})
.when("/profile", {
templateUrl : "/pages/profile.ejs"
})
.when("/settings", {
templateUrl : "settings.ejs"
});
});
/* Rest of the code */
But the problem is that this code prints the following error in the console.. :
I made sure that the file exists in the pages directory.. I am using node.js as the backend. Nothing works.. What should I do?
This is my root directory, here the profile.ejs is located inside the pages directory:
Remove the leading "/" from your path, i.e.
templateUrl : "pages/profile.ejs"
Also try hard-reloading your google chrome before testing after you make that change.
I have my index.html page in which an ng-view is implemented. The same applies to the sidebar, which also linkes to 3 pages (main.html, product.html and customer.html).
I need to change the class of sidebar.html for example when I'm in the customer.html page.
I tried to do it from the customerController but it had no result. As I understand it, because the sidebar.html is controlled by MyController
Can anyone guide me?
Thank you
Here are the relevant parts of the code:
index.html
<html ng-app="appDataBoard">
<body ng-controller="MyController" >
<!-- SIDEBAR-->
<div ng-include="'./template/sidebar.html'" ></div>
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
<div class="col-md-12 column sortable">
<div ng-view></div>
</div>
</div>
</body>
</html>
sidebar.html
<div class="page-sidebar-wrapper">
<ul >
<li class="nav-item start open">
</li>
<li class="nav-item ">
</li>
<li ng-class="nav-item">
</li>
</ul>
</div>
<!-- END SIDEBAR -->
routing.js
var dbApp = angular.module('appDataBoard', ['ngRoute','ngMaterial', 'ngMessages', 'material.svgAssetsCache']);
// configure our routes
dbApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/main', {
templateUrl : 'template/main.html',
controller : 'mainController'
})
// route for the about page
.when('/product', {
templateUrl : 'template/product.html',
controller : 'productController'
})
// route for the contact page
.when('/customer', {
templateUrl : 'template/customer.html',
controller : 'customerController'
});
});
I am developing a web application using angular js & spring-mvc.
In the header of my application
header.jsp
<nav class="navbar navbar-default navbar-fixed-top" >
<div class="container">
<div class="navbar-header" >
<a class="navbar-brand"
href="<c:url value="/home"/>" >Pipeline Tracker
</a >
</div >
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li ui-sref-active="active">
<a ui-sref="empty">PIPELINE</a>
</li>
<li ui-sref-active="active">
<a ui-sref="employees">ADMIN</a>
</li>
</ul>
</div>
</div>
</nav>
app.js
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('empty', {
url: '/',
view: {
'main':{
templateUrl: 'views/templates/empty.html',
controller: 'EmptyController'
}
}
})
.state('employees',{
url: '/admin/employees',
view: {
'main':{
templateUrl: 'http://localhost:8070/PipelineClient/views/templates/employee.jsp',
controller: 'TestController'
}
}
});
$urlRouterProvider.otherwise('/');
});
I am unable to set the templateUrl property, so my app navigates perfectly. I can see url changing accordingly to '#/' and '#/admin/employees' but nothing is displayed. There is no error in the console also.
I tried to set templateUrl two ways. One with html and another with jsp using context url. None of them working.
I removed routing and checked the data loads pefectly. No issue with data loading.
for loading dependencies:
var app = angular.module('pipeline', [
'ngResource',
'infinite-scroll',
'angularSpinner',
'jcs-autoValidate',
'angular-ladda',
'mgcrea.ngStrap',
'toaster',
'ngAnimate',
'ui.router'
]);
index.jsp
<div class="container main-content">
<div ui-view="main"></div>
</div>
How to set this templateUrl property? I am relatively new to angular, so do let know if you need any more info on this.
I believe it's a syntax error, should be "views" and not "view".
.state('employees',{
url: '/admin/employees',
views: { <--- change view to views
'main':{
templateUrl: 'http://localhost:8070/PipelineClient/views/templates/employee.jsp',
controller: 'TestController'
}
}
});
I'm not familiar with the "view:" syntax you're using. does it work if you do:
.state("test", {
templateUrl: "views/templates/empty.html",
controller: 'EmptyController'
}
http://localhost:8070/#/test
I have this nav.html:
<ul class="nav nav-pills pull-right">
<li ng-class="{ active: $state.includes('home') }"><a ui-sref="home">Home</a></li>
<li ng-class="{ active: $state.includes('about') }"><a ui-sref="about">About</a></li>
<li ng-class="{ active: $state.includes('contact') }"><a ui-sref="contact">Contact</a></li>
</ul>
<h3 class="text-muted">my page title</h3>
</div
This Controller:
.module('app', [
'ui.router'
])
.config(['$urlRouterProvider','$stateProvider', function($urlRouterProvider,$stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('about', {
url: '/about',
templateUrl: 'templates/about.html',
controller: 'aboutCtrl'
})
// and so forth
Now when I click a button in the navigation, the ui-router correctly displays tha page and changes the url in the browser adress bar. However Bootstrap does not make the button activated, aka selected or color it grey etc. How to achieve this the angular way?
You must make sure that $state service is defined/injected in your current scope. You may have a navCtrl that handles the rendering logic of your navbar html. Remember to inject that controller in your nav.html:
<ul ng-controller = "navCtrl" class="nav nav-pills pull-right">
Next, write a boolean function inside your navCtrl to check the current state, using $state.includes:
.controller('navCtrl',['$scope','$state','$location',function($scope,$state,$location){
$scope.isState = function(states){
return $state.includes(states);
};
}])
and lastly use this function in your html:
<li ng-class="{active: isState('home') }">
<a ui-sref="home">Home</a>
</li>
Here is the working plnkr.
I'm new to angular trying to implement routing in my angularjs app. My app does the followings
user can login via facebook
then he/she can select a link to navigate
Following is my main angularjs file (with route and facebook connect, facebook connect is working :)), My problem is , routing doesnt work..
#app.js
var app = angular.module('myApp', ['facebook', 'ngRoute'])
.config([
'FacebookProvider',
function(FacebookProvider) {
var myAppId = '<FB app ID>';
FacebookProvider.init(myAppId);
}
],
function($routeProvider) {
$routeProvider
// route for the home page
.when('/add', {
templateUrl : '../pages/add_form.html',
controller : 'addCtrl'
})
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
});
}
)
and when I add a debug pointer to line .when('/add', {control flow is not coming to that line at all.
Following is my href
<li>Add & Edit Recipes</li>
I'm following this tutorial for routing , any help would be greatly appreciated
** UPDATE **
my html
<!DOCTYPE html>
<html class="gt-ie8 gt-ie9 not-ie" data-ng-app="myApp">
<head>
//stuff
<body class="theme-default no-main-menu main-navbar-fixed" data-ng-controller="MainController">
<script>var init = [];</script>
<div id="main-wrapper">
// some html
<ul class="nav navbar-nav">
<li class="dropdown">
Home <i class="navbar-icon fa fa-angle-down"></i>
<ul class="dropdown-menu" data-ng-show="logged">
<li>Add & Edit Recipes</li>
<li>Unpublished</li>
<li>Published</li>
<li class="divider"></li>
<li>Page 3</li>
</ul>
</li>
<li>Recipe</li>
</ul>
<div id="content-wrapper">
<div ng-view>
<%= yield %>
</div>
</div>
<div id="main-menu-bg"></div>
</div>
</body>
</html>