I have a menu in _Adminlayout.cshtml and i define my Route in it , this is all i did in:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/Styles/ThirdParties/Glazzed/Main.css" rel="stylesheet" />
<link href="~/Content/Styles/GlazzedOverride.css" rel="stylesheet" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/Scripts/ThirdParties/Glazzed/Main.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/Scripts/ThirdParties/Angular.js"></script>
<script src="~/Scripts/Scripts/ThirdParties/AngularRoute.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
#DefineApp()
</head>
<body>
<div>
<div class="container">
<div class="col col-md-9 pull-left">
#RenderBody()
#*<ng-view></ng-view>*#
<div ng-view></div>
</div>
<div class="col col-md-2 bg1">
<ul class="main-nav" ng-controller="menuController">
<li ng-repeat="menuItem in menuItems" class="{{ menuItem.submenuItems && menuItem.submenuItems.length > 0 ? 'main-nav--collapsible' : '' }}">
<a class="main-nav__link" ng-href="{{ menuItem.url || 'javascript:void(0);' }}">
<span class="main-nav__icon"><i class="{{ menuItem.icon }}"></i></span>
{{ menuItem.title }}
</a>
<ul ng-if="menuItem.submenuItems && menuItem.submenuItems.length > 0" class="main-nav__submenu">
<li ng-repeat="submenuItem in menuItem.submenuItems"><span>{{ submenuItem.title }}</span></li>
</ul>
</li>
</ul>
</div>
</div>
and this is the script :
<script>
App.config(['$routeProvider', function ($routeProvider) {
debugger;
$routeProvider
.when('/Admin/GetProducts', {
templateUrl: '#Url.Action("GetProducts","Product")'
})
.otherwise({
redirectTo: '/'
});
}]);
App.controller("menuController", function ($scope) {
debugger;
$scope.menuItems = [
{
title: 'ProductList',
icon: 'pe-7f-check',
url: '#/Admin/GetProducts'
}
]});
</script>
</div>
#helper DefineApp()
{
<script>
var App = angular.module("app", ['ngRoute']);
</script>
}
but my route does not work, what is the problem?
You're mixing Angular routing which was designed for SPA's and you also have MVC routing which isn't for SPA's. You have both technologies essentially fighting each other.
If you want to use Angular routing or Angular is general, I would recommend that you stop having your ASP.NET MVC controllers from returning any Views except for maybe "Index.cshtml"
Related
Here is my code.
home.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css"
href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<script
src="https://code.jquery.com/jquery-3.0.0.js"
integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo="
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4 /angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
</head>
<body ng-controller="myCtrl">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Spring Boot Test</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a ng-click="">Home</a></li>
<li>About</li>
<li>Contact </li>
</ul>
</div>
</nav>
<div data-ng-view = ""></div>
</div>
<!-- /.container -->
<script type="text/javascript"
src="webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
script
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.config(['$locationProvider', '$routeProvider',function config($locationProvider, $routeProvider) {
$routeProvider.
when('/about', {
templateUrl: 'about.html',
controller: 'aboutCtrl'
});
}
]);
app.controller('aboutCtrl',function($scope){
console.log("aknk");
});
app.controller('myCtrl',['$scope','$location','$window', function($scope,$location,$window){
$scope.about = function()
{
console.log("hello");
/*$location.path('about');*/
$window.location.assign('/about');
}
$scope.contact = function()
{
console.log("hello");
$location.path('/contact');
}
}]);
</script>
What i am doing worng? The links on about and contact do not work at all with this code and If I remove $routeProvider code /about call has been sent to the server. Actually what I want is to get the about.html in ng-view div so that I can have common header for all pages.
Your config should look like this.
app.config(function($routeProvider) {
$routeProvider
.when('/about', {
templateUrl: "views/view-queue.html",
caseInsensitiveMatch: true,
})
.otherwise({
templateUrl: "404.html"
})
});
The above code will work.
TFC.config(function($routeProvider){
$routeProvider
.when('/bookings', {
templateUrl: '/mybookings.html',
controller: 'accountCtrl'
})
.when('/credits', {
templateUrl: '/mycredits.html',
controller: 'myCreditsCtrl'
})
.when('/membership', {
templateUrl: 'membership.html',
controller: 'membershipCtrl'
})
.when('/profile', {
templateUrl: 'profile.html',
controller: 'profileCtrl'
})
.when('/invoices', {
templateUrl: 'invoice.html',
controller: 'invoiceCtrl'
})
.when('/team', {
templateUrl: 'team.html',
controller: 'teamCtrl'
})
.when('/benefits', {
templateUrl: 'benefits.html',
controller: 'benefitsCtrl'
})
.when('/refer', {
templateUrl: 'refer.html',
controller: 'referCtrl'
})
.when('/support', {
templateUrl: 'support.html',
controller: 'supportCtrl'
})
.when('/about', {
templateUrl: 'accountabout.html',
controller: 'accountAboutCtrl'
})
})
and this my html in which I am injecting views
<!DOCTYPE html>
<html ng-app="TFC">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Founder's Cafe</title>
<link href="https://fonts.googleapis.com/css?family=Lato:400,900" rel="stylesheet">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<section style="background: black;">
<div class="navbar navbar-default" style="position: static;">
<div class="navigation-wrapper">
<img src="assets/img/webLogo.png" alt="TFC Logo">
<ul class="custom-navbar nav navbar-nav">
<li class="about-link active">About Us</li>
<li>Facilities</li>
<li>Pricing</li>
<li>Events</li>
<li>Gallery</li>
<li><button type="button" class="btn btn-default btn-lg navbar-btn" name="button">LOGIN</button></li>
</ul>
<div class="ham-wrapper">
<div class="hambar-1"></div>
<div class="hambar-2"></div>
<div class="hambar-3"></div>
</div>
</div>
</div>
<div style="position: relative; height: 35em; overflow: hidden; background: url('http://www.planwallpaper.com/static/images/cool-wallpapers-hd-8087-8418-hd-wallpapers.jpg'); background-attachment: fixed;">
<div class="overlay"> </div>
</div>
</section>
<section>
<div class="account-wrapper">
<div class="account-items">
<div class="header">
<div class="user-image"><img src="" alt=""></div>
<div class="user-header">
<h3>{{user.name}}</h3>
<h4>heading</h4>
</div>
</div>
<div class="user-items">
<div class="item">
<div class="item-main">
<img src="assets/img/account/icn-booking.png" alt="">
<h5 class="item-name">My Booking</h5>
</div>
<div class="item-arrow"><img src="" alt=""></div>
</div>
<hr>
<div class="item">
<div class="item-main">
<img src="assets/img/account/icn-logout.png" alt="">
<h5 class="item-name">Logout</h5>
</div>
</div>
</div>
</div>
<div class="account-display">
<div ng-view=""></div>
</div>
</div>
</section>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
<script src="node_modules/angular/angular.min.js" charset="utf-8"></script>
<script src="node_modules/ng-dialog/js/ngDialog.min.js" charset="utf-8"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js" charset="utf-8"></script>
<script src="node_modules/jwt-decode/build/jwt-decode.min.js" charset="utf-8"></script>
<script src="assets/js/style.js" charset="utf-8"></script>
<script src="assets/js/app.js" charset="utf-8"></script>
</body>
</html>
the mybookings.html is in the root folder.
<div class="bookings-header">
<img src="assets/img/account/icn-booking.png" alt=""><h4>My Bookings</h4>
</div>
<div class="bookings-info-wrapper"></div>
<div class="bookings-info">
<h5>Coworking:</h5>
<div class="coworking-info">
<div></div>
<div>
<p>Dedicated Desk(Dec 1-Dec 30)</p>
</div>
</div>
</div>
the ng-view directive is inside div.account-display and as a test I am trying to show just the mybookings.html when user clicks on the my bookings list item which is inside the first div.item inside div.user-items
The ng-view isn't showing anything, nor am I getting any error. An interesting thing is that when I looked into the network tab of my dev console, mybookings.html is not mentioned in it.
My angular js and angular-route versions are 1.6.2. The jquery version is 3.1.1
Need help with this
i created demo and it seems to working fine. If you sure the html file paths are exist then other possible downfall might be version conflict.Check the angular route and angular version is compatible with each other.
<script data-require="angular.js#1.6.1" data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js"></script>
<script data-require="angular-route#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-route.js"></script>
Edited
Routes in Angular 1.6 need to add ! when redirecting to state.
<h5 class="item-name">My Booking</h5>
Use <ng-view></ng-view> tag
instead of <div ng-view=""></div>
and also the default URL in route provider
.otherwise({
redirectTo: '/bookings'
})
For the mybookings.html file to load default, you have to specify the default url parameter in the route provider. This is the method for that. I hope this will fix your issue.
TFC.config(function($routeProvider){
$routeProvider
.when('/bookings', {
templateUrl: '/mybookings.html',
controller: 'accountCtrl'
})
....
.otherwise({
redirectTo: '/bookings'
})
})
now by default mybookings.html will load
I have a ng-repeat that is displaying a list of items. I want them to be a col width of 2
This is the index.html body
index.html
<!DOCTYPE html>
<html ng-app="games">
<head>
<title>Games</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" type="text/css" href="/static/css/fontello.css">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<meta name=viewport content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="/static/app/app.js"></script>
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body ng-controller="gamesCtrl">
<a ui-sref="games">Games</a>
<div class="container">
<div class="row">
<div ui-view></div>
</div>
</div>
</body>
</html>
And here is the HTML I am pulling for the ui-view
list.html
<div ng-repeat="game in games">
<div ng-class="col-xs-2">
{{ game.title }}
<img src="{{game.thumbnailUrl100}}"/>
</div>
</div>
What's happening though is its just stacking everything on top of each another and not putting it next to each other.
Here is the inspect element code
<div class="row">
<!-- uiView: -->
<div ui-view="" class="ng-scope">
<!-- ngRepeat: game in games -->
<div ng-repeat="game in games" class="ng-scope">
<div class="ng-binding">Cut The Rope</div>
<img src="https://az680633.vo.msecnd.net/thumbnail/40071/100/40071.png">
</div>
<!-- end ngRepeat: game in games -->
<div ng-repeat="game in games" class="ng-scope">
<div class="ng-binding">Cut The Rope: Time Travel</div>
<img src="https://az680633.vo.msecnd.net/thumbnail/40072/100/40072.png">
</div>
</div>
Just incase something else is wrong here is the js
angular.module('games', ['ui.router', 'ui.bootstrap'])
.config(function($urlRouterProvider, $locationProvider, $stateProvider) {
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/");
//take out #
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
// Now set up the states
$stateProvider
.state('games', {
url: "/",
templateUrl: "/static/app/list.html",
controller: 'gamesCtrl'
})
})
.controller('gamesCtrl', ['$scope', '$state', 'gamesFactory',
function($scope, $state, gamesFactory) {
$scope.$state = $state;
$scope.games = null;
function init() {
gamesFactory.getGames().success(function(games) {
$scope.games = games.data;
console.log($scope.games.data)
});
}
init();
}
])
.factory('gamesFactory', function($http) {
var factory = {};
factory.getGames = function() {
return $http.get('/games.json');
};
return factory;
});
ng-class is expecting an Angular expression. In this case, you are giving it the actual CSS class name. Angular tries to evaluate that as an expression, which results in undefined (or null or the empty string).
Since you don't need to do anything but apply the class name here, just use the regular class attribute instead of ng-class:
<div ng-repeat="game in games">
<div class="col-xs-2">
{{ game.title }}
<img src="{{game.thumbnailUrl100}}"/>
</div>
</div>
ng-class expects an expression. Change your markup like this:
<div ng-repeat="game in games">
<div ng-class="'col-xs-2'">
{{ game.title }}
<img src="{{game.thumbnailUrl100}}"/>
</div>
</div>
https://docs.angularjs.org/api/ng/directive/ngClass
The problem is that you're repeating the div around the columns, not the columns themselves. Try this:
<div class="col-xs-2" ng-repeat="game in games">
{{ game.title }}
<img src="{{game.thumbnailUrl100}}"/>
</div>
Try using ng-src on your image. At the time the page is first rendered, the image size probably can't be determined.
Edit, so the complete html should be:
<div ng-repeat="game in games">
<div class="col-xs-2">
{{ game.title }}
<img src= "" ng-src="{{game.thumbnailUrl100}}"/>
</div>
As others have pointed out, you shouldn't be using ng-class here.
my code seems ok but i cannot view the html using angularjs (exercise "reader" in codecademy course")
according to my knowledge seems to be working but I am beginner so likely i have to do some tweaking
here my codes
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300,900' rel='stylesheet' type='text/css'>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<script src="js/vendor/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="ReaderApp">
<div class="header">
<div class="container"> Reader </div>
</div>
<div class="main">
<div class="container">
<div ng-view></div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/BookshelfController.js"></script>
<script src="js/controllers/BookController.js"></script>
<script src="js/controllers/ChapterController.js"></script>
<!-- Services -->
<script src="js/services/books.js"></script>
</body>
</html>
the service
app.factory('books', ['$http', function($http) {
return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/books-api/books.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
the view (routed)
<div class="bookshelf row">
<!-- TODO: Loop through myBooks and display each one with this HTML -->
<div class="book col-md-3" ng-repeat="book in myBooks">
<a href="#/books/{{$index}}"> <img ng-src="{{ book.cover }}" />
<h3 class="title">{{ book.title }} </h3>
<p class="author"> {{ book.author }} </p>
</a>
</div>
</div>
controller
app.controller('BookshelfController', ['$scope','books', function($scope, books) {
books.success(function(data) {
$scope.myBooks = data;
});
}]);
and the module that create the app
var app = angular.module('ReaderApp', ['ngRoute ']);
app.config(function ($routeProvider) {
$routeProvider
.when('/books', {
controller: 'BookshelfController',
templateUrl: 'views/bookshelf.html'
})
.otherwise({
redirectTo: '/books'
});
});
thanks
Paolo
Typo in module dependency array.
var app = angular.module('ReaderApp', ['ngRoute ']);
^ remove this space!
I have a Angularized bootstrap menu that fully collapses the entire navbar if it is loaded in a view, but not when in the index.html. When loaded into my index.html, it only collapses the dropdown and not the whole navbar when an item is clicked on.
I need it in the index.html before the views (data-ng-view) since I have content between the menu and views (AdSense). When placed before my views in the index.html page, if I click on a link, I am able to go that link... but the overall menu stays open instead of closing after going to a link. However, the dropdown will of "Categories" will collapse as intended, it is just the overall menu that won't.
I am using AngularUI and have injected 'ui.bootstrap' into the App (that is how it works when loaded in a view). The controllers for my views are tied to the page they relate to.
Example:
when('/home', { templateUrl: './views/home.html', controller: 'homeCtrl' }).
Here is my navigation:
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-ng-init="isCollapsed = true" data-ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><h1 id="pfch1">My Title</h1></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" data-ng-class="{collapse: isCollapsed}">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown" data-ng-class="{ open : dd1 }" data-ng-init="dd1 = false" data-ng-click="dd1 = !dd1">
<a class="dropdown-toggle" role="button" aria-expanded="false" href="#">Categories <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>cat1</li>
<li>cat2</li>
<li>cat3</li>
<li>cat4</li>
<li>cat5</li>
<li>cat6</li>
</ul>
</li>
<li>Add Article Link</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<div data-ng-controller="userInfo">
<div data-ng-controller="loginCtrl" data-ng-hide="loggedin">
<input class="btn btn-default" type="submit" value="Login" data-ng-click="login()" />
</div>
<div data-ng-controller="loginCtrl" data-ng-show="loggedin">
<input class="btn btn-default" type="submit" value="Signout" data-ng-click="logout()" />
</div>
</div>
</div>
</form>
</div>
</nav>
Here is the index.html (please note that the menu above is included via an ng-include. I have tried it without the ng-include but it still doesn't collapse):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" data-ng-app="pfcModule">
<head>
<!-- Inform Search Bots that this is a SPA -->
<meta name="fragment" content="!" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="{{pageDescription | limitTo: 155}}">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<base href="/">
<title>{{pageTitle}}</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/custom.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet" />
<!-- Just for debuggidata-ng- purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warnidata-ng-.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Analytics -->
<script></script>
</head>
<body>
<!-- Container start -->
<div class="container">
<!-- Top Menu -->
<div data-ng-include="'templates/topmenu.html'"></div>
<!-- Responsive AdSense included here -->
<div data-ng-view></div>
<!-- Responsive AdSense included here -->
<hr>
<footer>
<p>© My Site 2015 | Terms and Conditions</p>
</footer>
</div>
<!-- Container end -->
<!-- Scripts placed at end of Body for execution -->
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/libs/angular-resource.min.js"></script>
<script src="js/libs/dirPagination.js"></script>
<!-- Auth0 Scripts -->
<!-- We use client cookies to save the user credentials -->
<script src="//code.angularjs.org/1.2.16/angular-cookies.min.js"></script>
<!-- Auth0 Lock script and AngularJS module -->
<script src="//cdn.auth0.com/js/lock-6.js"></script>
<!-- angular-jwt and angular-storage -->
<script type="text/javascript" src="//rawgit.com/auth0/angular-storage/master/dist/angular-storage.js"></script>
<script type="text/javascript" src="//rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script>
<!-- Auth0 Scripts -->
<script src="//cdn.auth0.com/w2/auth0-angular-4.0.1.js"> </script>
<!-- Application Scripts -->
<script src="js/app.js"></script>
<script src="js/services/services.js"></script>
<script src="js/controllers/addArticle.js"></script>
<script src="js/controllers/articleID.js"></script>
<script src="js/controllers/articlesCategory.js"></script>
<script src="js/controllers/articlesCount.js"></script>
<script src="js/controllers/articleVoting.js"></script>
<script src="js/controllers/homeArticles.js"></script>
<script src="js/controllers/loginManagement.js"></script>
<script src="js/controllers/modalDependency.js"></script>
<script src="js/directives/directives.js"></script>
</body>
</html>
Here is my App.js:
var pfcModule = angular.module('pfcModule', [
'ngRoute',
'ui.bootstrap',
'auth0',
'angular-storage',
'angular-jwt',
'angularUtils.directives.dirPagination',
'pfcServices',
'pfcAddArticle',
'pfcArticleID',
'pfcArticlesCategory',
'pfcArticlesCount',
'pfcArticleVoting',
'pfcHomeArticles',
'pfcLoginManagement',
'pfcModalDependency',
'pfcDirectives']);
pfcModule.config([
'$routeProvider',
'authProvider',
'$httpProvider',
'$locationProvider',
'jwtInterceptorProvider',
'paginationTemplateProvider',
function ($routeProvider, authProvider, $httpProvider, $locationProvider, jwtInterceptorProvider, paginationTemplateProvider) {
$routeProvider.
when('/home', { templateUrl: './views/home.html', controller: 'pfcHomeArticlesCtrl' }).
when('/categories/:articlecategoryID/:articlecategoryName', { templateUrl: './views/categories.html', controller: 'pfcArticlesCategoryCtrl' }).
when('/article/:articleTitle/:articleID', { templateUrl: './views/article.html', controller: 'pfcArticleIDCtrl' }).
when('/add-article', { templateUrl: './views/add-article.html', controller: 'pfcArticlePostCtrl', requiresLogin: true }).
when('/login', { templateUrl: './views/login.html', controller: 'loginPageCtrl' }).
when('/termsandconditions', { templateUrl: './views/terms.html' }).
otherwise({ redirectTo: '/home' });
$httpProvider.defaults.headers.common['X-ZUMO-APPLICATION'] = '1111111111111111111';
$httpProvider.defaults.headers.common['Content-Type'] = 'Application/json';
authProvider.init({
domain: 'aurl.com',
clientID: '1111111111111111',
callbackURL: location.href,
loginUrl: '/login'
});
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
jwtInterceptorProvider.tokenGetter = function (store) {
return store.get('token');
}
$httpProvider.interceptors.push('jwtInterceptor');
// Pagination provider
paginationTemplateProvider.setPath('js/libs/dirPagination.tpl.html');
}])
.run(function ($rootScope, auth, store, jwtHelper, $location) {
$rootScope.$on('$locationChangeStart', function () {
if (!auth.isAuthenticated) {
var token = store.get('token');
if (token) {
if (!jwtHelper.isTokenExpired(token)) {
auth.authenticate(store.get('profile'), token);
} else {
$location.path('/login');
}
}
}
});
});
In order to cause the menu to collapse when you click one of the links you can toggle the value of isCollapsed with ng-click. The reason it was collapsing when inside a view was likely because it was actually reloading the navigation, not collapsing it.
Modify your navigation like this:
<ul class="nav navbar-nav">
<li ng-click="isCollapsed=!isCollapsed">Home</li>
<li" class="dropdown" data-ng-class="{ open : dd1 }" data-ng-init="dd1 = false" data-ng-click="dd1 = !dd1">
<a class="dropdown-toggle" role="button" aria-expanded="false" href="#">Categories <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li ng-click="isCollapsed=!isCollapsed">cat1</li>
<li ng-click="isCollapsed=!isCollapsed">cat2</li>
<li ng-click="isCollapsed=!isCollapsed">cat3</li>
<li ng-click="isCollapsed=!isCollapsed">cat4</li>
<li ng-click="isCollapsed=!isCollapsed">cat5</li>
<li ng-click="isCollapsed=!isCollapsed">cat6</li>
</ul>
</li>
<li ng-click="isCollapsed=!isCollapsed">Add Article Link</li>
</ul>
Plunker