Error: [$compile:tpload] when running in debug mode in android devices - angularjs

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.

Related

Getting Resource not found error on AngularJS Route

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.

Clicking on menu item list it routes to login page

When we click on Menu item list, it routes to login page:
How can i solve this problem?
This my sidemenu-template:
<ul class="page-sidebar-menu page-header-fixed page-sidebar-menu-hover-
submenu " data-keep-expanded="false" data-auto-scroll="true" data-
[enter image description here][1]slide-speed="200">
<li class="nav-item" data-ng-repeat="menu in sideBarCntrl.menuList">
<a href="#/{{menu.menuUrl}}" class="nav-link nav-toggle">
<i class="{{menu.menuIcon}}"></i>
<span class="title"> {{menu.menuDisplayName}}</span>
<span class="arrow"></span>
</a>
<ul class="sub-menu">
<li class="nav-item" data-ng-repeat="childmenu in menu.childMenuItems">
<a href="#{{childmenu.menuUrl}}" class="nav-link ">
<span class="title">{{childmenu.menuDisplayName}}</span>
</a>
</li>
</ul>
</li>
</ul>
This is my sidemenu- main list directive calling Api Using ASP.Net:
sideBarCntrl.getMenuList = function() {
user.allowWeb = true;
dashboardService.getMenuList(user).then(function(response) {
//console.log(response.data);
sideBarCntrl.menuList = response.data;
angular.forEach(sideBarCntrl.menuList, function(value, key) {
if ($state.current.url == ('/' + value.menuUrl)) {
value.isActive = true;
}
})
}, function(error) {
if (error.data.message) {
toastr.error(error.data.message);
}
});
}
I would recommend using ng-href instead of href in your case. This way you are sure the link is not broken even if the user clicks the link before AngularJS has evaluated the code.

angular Js url navigation after getting rid of #

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.

Angular ui-router, scroll to next step on state change with different controller and template

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

Using UI Router in order to implement a navbar/header that changes according to whether the user is logged in or not

I have a navbar template that is meant to adapt and change according to whether or not the user is logged in.
I have a root state inherited by all the other states and an authenticated state inherited by all states that assume the user is logged in.
My root state:
.state('root', {
abstract: true,
template: '<ui-view />'
data: {
requiresLogin: false
},
views: {
'header#': {
//Issue: navbarCtrl is not defined here...
templateUrl: 'app/navbar/views/navbar.view.html'
},
'footer#': {
templateUrl: 'app/footer/views/footer.html'
}
}
})
and my authenticated state:
.state('authenticated', {
abstract: true,
parent: 'root',
views: {
'header#': {
controller: 'NavbarCtrl',
templateUrl: 'app/navbar/views/navbar.view.html'
}
},
data: {
requiresLogin: true
},
resolve: {
currentUserAccount: ['domainService', function (domainService) {
return domainService.currentUserAccount();
}]
}
})
Now the issue is that I need my navbarCtrl in the root state but this controller would not work there if the user is not logged in since the controller relies on data obtained when the user logs in:
.controller('NavbarCtrl', ['$scope', '$interval', 'messageService', 'currentUserAccount', function ($scope, $interval, messageService, currentUserAccount) {
$scope.currentUserAccount = currentUserAccount.data;
...
Here is also my navbar template:
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navmenu" collapse="isCollapsed">
<!--if user is not connected-->
<ul ng-if="!authenticated" class="nav navbar-nav navbar-right">
<li>Fonctionnalités</li>
<li>À propos</li>
<li>Contact</li>
<li><a class="btnNav btn btn-primary" role="button" ui-sref="signup.form" href="#">S'inscrire</a></li>
</ul>
<!--if user is connected-->
<ul ng-if="authenticated" class="nav navbar-nav navbar-right">
<li ng-if="messageCount"><a ui-sref="message" href="#"><span style="font-size:16px;" class="glyphicon icon-email NewMail" aria-hidden="true"></span> {{messageCount}}</a></li>
<li class="visible-xs"><a ui-sref="dashboard.useraccount.summary" href="#">Mon compte</a></li>
<li class="visible-xs" ng-controller="SignoutCtrl"><a ng-click="signout()" href="#">Se déconnecter</a></li>
<li class="hidden-xs">
<section class="btn-group" dropdown>
<button type="button" class="btn btn-link" id="dropdown" dropdown-toggle>
<img ng-if="currentUserAccount.userAccountType==='PARENTS_TYPE'" src="assets/media/img/parents.svg" width="46" height="46" class="img-circle">
<img ng-if="currentUserAccount.userAccountType==='CHILDCARE_WORKER_TYPE'" src="assets/media/img/professionel.svg" width="46" height="46" class="img-circle">
{{currentUserAccount.firstName}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown">
<li><a ui-sref="dashboard.useraccount.summary" href="#"><span class="glyphicon icon-settings" aria-hidden="true"></span> Mon compte</a></li>
<li ng-controller="SignoutCtrl">
<a ng-click="signout()" href="#"><span class="glyphicon icon-lock" aria-hidden="true"></span> {{'SIGNOUT' | translate}}</a>
</li>
</ul>
</section>
</li>
</ul>
</div>
So I am not sure how to proceed with my navbar issue. I was thinking of checking whether $rootScope.authenticated is defined within NavbarCtrl but it does not seem right.
Your header controller should be in ancestor root abstract state and the dynamic functionality which you wants to handle (i.e. if the user is not logged in since the controller relies on data obtained when the user logs in) should be handled in it .You can handle the 2 header templates.(i.e. with login and without login) through ng-show/ng-hide in the header controller through scope variable states. In other words, header controller should be written in a way that without authentication it should return the without login header and with authentication it should written the after login header.

Resources