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.
Related
I have used $location.path in my cordova application
I am having cordova application with angularjs. I have successfully loggedIn to the dashboard page.
When I am clicking the events and the organization tabs, I am getting error for some specific pages having the $location.path('') for all the tabs.
$location.path is working properly when I am using it in browser platform, but getting
Error: [$compile:tpload] when running in debug mode in android devices.
$scope.aboutus = function () {
$location.path("/aboutus");
}
$scope.notifications = function () {
$location.path("/notifications");
}
$scope.cardHolderPage = function () {
$location.path("/cardHolderPage");
}
$scope.getOwnCard = function () {
$location.path('/ownCards');
}
$scope.getEvents = function () {
$location.path("/events");
}
$scope.getOrganizations = function () {
$location.path('/organizations');
}
$scope.aboutus() and $scope.contactus() functions are working, but getEvents() and getOrganizations() is working, giving errors:
Error: [$compile:tpload] Failed to load template: views/loggedIn/VisitingCard/createVisitingCard.html (HTTP status: -1 )
http://errors.angularjs.org/1.6.9/$compile/tpload?p0=views%2FloggedIn%2FVisitingCard%2FcreateVisitingCard.html&p1=-1&p2=
Error: $templateRequest:tpload
Error Loading Template
Failed to load template: views/loggedIn/VisitingCard/createVisitingCard.html (HTTP status: -1 )
RouteConfig.js
myApp.config(["$routeProvider", function ($routeProvider) {
$routeProvider
when("/aboutus", {
templateUrl: "views/LoggedIn/AboutUs/aboutus.html",
controller: "DashboardController"
}).when("/notifications", {
templateUrl: "views/loggedIn/Notification/notifications.html",
controller: "NotificationController"
}).when("/events", {
templateUrl: "views/loggedIn/Events/events.html",
controller: "ViewEventController"
}).when("/organizations", {
templateUrl: "./views/loggedIn/Organizations/viewOrganizations.html",
controller: "ViewOrganizationController"
}).when("/cardHolderPage", {
templateUrl: "views/loggedIn/CardHolders/cardHolder.html",
controller: "CardHolderController"
})
}])
Html Page
<li class="list-group-item clickable" ng-if="premium_status == 'Premium'">
<a class="list-group-item list-group-item-action" ng-click="getOrganizations()">
<i class="far fa-building"></i> Organization
</a>
</li>
<li class="list-group-item clickable" ng-if="premium_status == 'Premium'">
<a class="list-group-item list-group-item-action" ng-click="getEvents()">
<i class="far fa-calendar-alt"></i> Event
</a>
</li>
<li class="list-group-item clickable" ng-if="premium_status != 'Premium'">
<a class="list-group-item list-group-item-action" ng-click="premium()">
<i class="fa fa-th"></i> Go Premium!
</a>
</li>
<li class="list-group-item clickable">
<a class="list-group-item list-group-item-action" ng-click="aboutus()">
<i class="far fa-address-card"></i> About Us
</a>
</li>
I just want to route it to the another page.
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.
I'm using UI-router in my app and I'd like to so a simple "scrollTo" to an anchor when the URL/state changes. I want to load new controller and template when state changes.
I'm using ng-boilerplate.
Index file
<div class="collapse navbar-collapse" collapse="menuCollapsed" ng-click="collapse()">
<ul class="nav navbar-nav navbar-right nav-link">
<li ui-sref-active="active">
<a href ui-sref="home">
<i class="fa fa-home"></i>
Home
</a>
</li>
<li ui-sref-active="active">
<a href ui-sref="service">
<i class="fa fa-info-circle"></i>
Service
</a>
</li>
<li ui-sref-active="active">
<a href ui-sref="portfolio">
<i class="fa fa-briefcase"></i>
Portfolio
</a>
</li>
<li ui-sref-active="active">
<a href ui-sref="team">
<i class="fa fa-users"></i>
Team
</a>
</li>
<li ui-sref-active="active">
<a href ui-sref="testimonial">
<i class="fa fa-comments"></i>
Testimonial
</a>
</li>
<li ui-sref-active="active">
<a href ui-sref="contact">
<i class="fa fa-envelope"></i>
Contact
</a>
</li>
</ul>
</div>
</div>
</div>
<div ui-view="main">
</div>
Home template and js
<div class="banner">
<div class="intro-body">
<h1>CREATIVE DIGITAL<br> SOLOUTIONS</h1>
<p>Proin iaculis consequat sem cure.</p>
<a href ui-sref="portfolio" class="btn btn-success">VIEW PORTFOLIO</a>
</div>
</div>
angular.module( 'ngBoilerplate.home', [
'ui.router',
'plusOne'
])
/**
* Each section or module of the site can also have its own routes. AngularJS
* will handle ensuring they are all available at run-time, but splitting it
* this way makes each module more "self-contained".
*/
.config(function config( $stateProvider ) {
$stateProvider.state( 'home', {
url: '/home',
views: {
"main": {
controller: 'HomeCtrl',
templateUrl: 'home/home.tpl.html'
}
},
data:{ pageTitle: 'Home' }
});
})
/**
* And of course we define a controller for our route.
*/
.controller( 'HomeCtrl', function HomeController( $scope ) {
})
;
Service Template & Js
<div class="container" id="service">
<div class="service-intro">
<h2>Why to choose company?</h2>
</div>
</div>
angular.module( 'service', [
'ui.router'
])
.config(function config( $stateProvider ) {
$stateProvider.state( 'service', {
url: '/service',
views: {
"main": {
controller: 'ServiceCtrl',
templateUrl: 'service/service.tpl.html'
}
},
data:{ pageTitle: 'service' }
});
})
.controller( 'ServiceCtrl', function HomeController( $scope ) {
})
;
APP JS
angular.module( 'ngBoilerplate', [
'templates-app',
'templates-common',
'ngBoilerplate.home',
'ngBoilerplate.about',
'service',
'portfolio',
'team',
'testimonial',
'contact-us',
'ui.router',
'ngAnimate'
])
.config( function myAppConfig ( $stateProvider, $urlRouterProvider ) {
$urlRouterProvider.otherwise( '/home' );
})
.run( function run () {
})
.controller( 'AppCtrl', function AppCtrl ( $scope, $location,$rootScope ) {
$rootScope.$on('$stateChangeStart', function () {
$scope.slide = $scope.slide || 'slide-left';
});
$scope.collapse = function() {
$scope.menuCollapsed = true;
};
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
if ( angular.isDefined( toState.data.pageTitle ) ) {
$scope.pageTitle = toState.data.pageTitle + ' | Teknuk' ;
}
});
})
;
So, when you enter the page the URL would be domain.com/home
When you click the first button I'd like my controller code to change the URL to domain.com/#/service and scroll down to the "service" div and controller + template updated.
Ideally, when the user hits the back button it would revert to the first URL and scroll back up to home.
Anybody know how to do this?
Why you dont use native scrolling ? https://github.com/angular-ui/ui-router/wiki/Quick-Reference#autoscroll
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'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>