jQuery Nav's anchor click not working with AngularJS - javascript

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

Related

Views are not loading with ngRoute

Hi I am having an issue with my code here where I can't seem to get my views to load within my template.
Here are my tags:
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script>
Here is my JS:
angular.module('dnsApp', ["ngRoute"])
var app = angular.module('dnsApp');
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/reporting.html'
})
.when('/reporting', {
templateUrl: 'views/reporting.html'
})
.when('/detectionSummary', {
templateUrl: 'views/detection-summary.html'
})
.when('/operationalMetrics', {
templateUrl: 'views/operational-metrics.html'
});
}]);
Here is my HTML:
<ul class="nav navbar-nav">
<li class="active"><i class="fa fa-dashboard"></i> <span class="sr-only">(current)</span></li>
<li><i class="fa fa-bolt"></i></li>
<li><i class="fa fa-bar-chart"></i></li>
</ul>
Nothing shows up and I am relatively new to AngularJs so any help would be much appreciated. Thanks!
You should not declare the module again, change it as
//remove this line angular.module('dnsApp', ["ngRoute"])
var app = angular.module('dnsApp', ["ngRoute"])
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/reporting.html'
})
.when('/reporting', {
templateUrl: 'views/reporting.html'
})
.when('/detectionSummary', {
templateUrl: 'views/detection-summary.html'
})
.when('/operationalMetrics', {
templateUrl: 'views/operational-metrics.html'
});
}]);
you should add your module js to your tags in your "index".
also a ng-view in your main index.
documentation:https://docs.angularjs.org/api/ngRoute/directive/ngView

How to show one div on click and hide others on click using ui-route?

my js:
var app = angular.module("dashboardApp", ["ngMaterial", "ngAnimate", "ngSanitize", "ui.bootstrap", "ngAria", "ui.router", "datatables", "gridshore.c3js.chart"]);
app.config(function($stateProvider, $urlRouterProvider, $locationProvider){
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise('/systems');
$stateProvider
.state('systems',{
url:"/systems",
templateUrl: 'pages/systems.html'
})
.state('summary', {
url:"/summary",
controller:"maxeCtrl",
templateUrl: 'pages/summary.html'
});
});
app.run(function($rootScope, $location, $anchorScroll, $stateParams, $timeout) {
$rootScope.$on('$stateChangeSuccess', function(newRoute, oldRoute) {
$timeout(function() {
$location.hash($stateParams.scrollTo);
$anchorScroll();
}, 100);
});
});
Here i am trying to inject $anchorScroll and it will scroll you to any element with the id found in $location.hash() ----> which in case here is incident.
page1:
<div class="system_row2">
<div class="col-sm-3">Today Incident's:</div>
<div class="col-sm-9 ">
<div class="col-sm-12">
<a ui-sref="summary({scrollTo:'incident'})">
</a>
</div>
Page2: i am using accordion here and providing id="incident" which will scroll to this element.
<div id="abc">
this is div 1
</div>
<div uib-accordion-group id="incident" class="panel-default">
<uib-accordion-heading>
<div class="accordion_heading">Incidents</div>
</uib-accordion-heading>
<uib-accordion-body> </uib-accordion-body>
<table>
</table>
</div>
Mycontroller:
app.controller("maxeCtrl", ["$scope", "MAXeService", "DTOptionsBuilder", "$timeout", function($scope, MAXeService, DTOptionsBuilder, $timeout) {
console.log("Angular: MAXeCtrl in action")
$scope.oneAtATime = true;
$scope.status = {
isFirstOpen: true,
isSecondOpen: true
};
I want div id="incident" to be displayed when user clicks on "summary({scrollTo:'incident'})" and the other div with id="abc" should hide.
Appreciate any kind of help in advance.
I think you are looking for named views. Check here
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
Sample from above link
<!-- index.html -->
<body>
<div ui-view="filters"></div>
<div ui-view="tabledata"></div>
<div ui-view="graph"></div>
</body>
Routing
$stateProvider
.state('report',{
views: {
'filters': {
templateUrl: 'report-filters.html',
controller: function($scope){ ... controller stuff just for filters view ... }
},
'tabledata': {
templateUrl: 'report-table.html',
controller: function($scope){ ... controller stuff just for tabledata view ... }
},
'graph': {
templateUrl: 'report-graph.html',
controller: function($scope){ ... controller stuff just for graph view ... }
}
}
})
for ui-router >=1.0 check here https://ui-router.github.io/guide/views#multiple-named-uiviews

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'
}
}
})

Re-route to a different subview based on language

I wrote an app with angular.js and trying to load different subviews based on the page they land on. Specifically, when the user is landing on the english version a partial view is loaded and when they land on the french version a different one is loaded. But whatever I'm not seeing in my code makes the subview always land on the ELSE (or '/') route. This is the current code in my appRoutes.js file...
angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
var homeLang = document.documentElement.getAttribute('lang');
var english = 'en';
var homeView = function (homeLang) {
if (homeLang === english) {
homeView = '/';
return homeView;
} else {
homeView = '/accueil';
return homeView;
}
};
$routeProvider
// client routes
.when('/', {
templateUrl: 'views/home.html',
controller: 'MainController'
})
.when('/web', {
templateUrl: 'views/web.html',
controller: 'MainController'
})
.when('/design', {
templateUrl: 'views/design.html',
controller: 'MainController'
})
.when('/hosting', {
templateUrl: 'views/hosting.html',
controller: 'MainController'
})
.when('/contact', {
templateUrl: 'views/contact.html',
controller: 'MainController'
})
.when('/accueil', {
templateUrl: 'views/accueil.html',
controller: 'MainController'
})
.when('/sites', {
templateUrl: 'views/sites.html',
controller: 'MainController'
})
.when('/services', {
templateUrl: 'views/services.html',
controller: 'MainController'
})
.when('/hebergement', {
templateUrl: 'views/hebergement.html',
controller: 'MainController'
})
.when('/contactez', {
templateUrl: 'views/contactez.html',
controller: 'MainController'
})
.otherwise({ redirectTo: homeView });
$locationProvider.html5Mode(true);
}]);
Here is the HTML that loads the different views.
<body ng-app="myApp">
<div class="navbar-wrapper">
<div class="container">
<div role="navigation" class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div class="navbar-collapse collapse">
<div class="nav navbar-nav">
<li>Accueil</li>
<li>Sites & Apps</li>
<li>Design</li>
<li>Hébergement</li>
<li>Contact</li>
</div>
</div></div></div></div></div>
<section class="content">
<div ng-view></div></section></body>
in your view, you can load a different template based on language without changing routing.
for example have in the routed view something like
than you can also add a ng-if before each span to check the language value.
I actually went back to the code and used ui-router instead and created states with building blocks (several views) and it solved all my issues!! :)

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'});
}]);

Categories