Unknown provider: NavbarController - yeoman generator - angularjs

I generated a project with Generator Angular Fullstack v3.0.2. I opend the server, all worked well. But on the client side I have a problem, I received an error in console error:
[$injector:unpr] Unknown provider: $locationAuthProvider <-
$locationAuth <- NavbarController
Controller
class NavbarController {
//start-non-standard
menu = [{
'title': 'Home',
'link': '/'
}];
isCollapsed = true;
//end-non-standard
constructor($locationAuth) {
this.$location = $location;
this.isLoggedIn = Auth.isLoggedIn;
this.isAdmin = Auth.isAdmin;
this.getCurrentUser = Auth.getCurrentUser;
}
isActive(route) {
return route === this.$location.path();
}
}
angular.module('rideSharingApp')
.controller('NavbarController', NavbarController);
HTML
<div class="navbar navbar-default navbar-static-top" ng-controller="NavbarController">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-click="nav.isCollapsed = !nav.isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
ride-sharing
</div>
<div collapse="nav.isCollapsed" class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li ng-repeat="item in nav.menu" ng-class="{active: nav.isActive(item.link)}">
<a ng-href="{{item.link}}">{{item.title}}</a>
</li>
<li ng-show="nav.isAdmin()" ng-class="{active: nav.isActive('/admin')}">Admin</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ng-hide="nav.isLoggedIn()" ng-class="{active: nav.isActive('/signup')}">Sign up</li>
<li ng-hide="nav.isLoggedIn()" ng-class="{active: nav.isActive('/login')}">Login</li>
<li ng-show="nav.isLoggedIn()"><p class="navbar-text">Hello {{ nav.getCurrentUser().name }}</p> </li>
<li ng-show="nav.isLoggedIn()" ng-class="{active: nav.isActive('/settings')}"><span class="glyphicon glyphicon-cog"></span></li>
<li ng-show="nav.isLoggedIn()">Logout</li>
</ul>
</div>
</div>
</div>
I don't know very well angular, so can you help me to fix this error?
Thanks.

$locationAuth should be ($location, Auth).
I think this may also be fixed in a more recent commit so you might be able to just update your generator.

Related

Navbar works but clicked element not highlighted

I generated an AngularJS app with yeoman. The navbar works and when I click on the an element the enw page loads, however the clicked button don't get highlighted.
This is the navbar code
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<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="#!/">myApp</a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">1</li>
<li><a ng-href="#!/page2">2</a></li>
<li><a ng-href="#!/page3">3</a></li>
<li><a ng-href="#!/page4">4</a></li>
<li><a ng-href="#!/page5">5</a></li>
<li><a ng-href="#!/page6">6</a></li>
</ul>
</div>
</div>
</div>
</div>
There are many ways you can do this. Here there is one of them
Create a controller and set a var called currentLink like this
//...
.controller('headerCtrl', function($scope){
$scope.currentLink = 1;
$scope.set = function(link){
$scope.currentLink = link;
}
});
//...
now in your html modify your code like this:
<div class="header" ng-controller="headerCtrl">
<!--...-->
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li ng-class="{'active': currentLink == 1}">1</li>
<li ng-class="{'active': currentLink == 2}"><a ng-href="#!/page2" ng-click="headerCtrl.set(2);">2</a></li>
<li ng-class="{'active': currentLink == 3}" ><a ng-href="#!/page3" ng-click="headerCtrl.set(3);">3</a></li>
<li ng-class="{'active': currentLink == 4}"><a ng-href="#!/page4" ng-click="headerCtrl.set(4);">4</a></li>
<!-- and so on-->
</ul>
<!--...-->
</div>
This way with ng-class you switch from active or not every link and with ng-click you set that link as active when clicked;

Click on caret does not show li items

Plnkr Link
JS Code
var id = 1;
if (id == 2) {
$scope.leftLinks = [{
Text: "Register",
Url: "/register"
}, {
Text: "Login",
Url: "/"
}];
}
else {
$scope.leftLinks =
[{
subMenus: [
{
Text: "Profile",
Url: "/profile"
},
{
Text: "Change Password",
Url: "/change-password"
},
{
Text: "Logout",
Url: "#"
}
]
}];
}
Markup
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
<ul class="nav navbar-nav navbar-right">
<li ng-repeat="leftLink in leftLinks">
{{leftLink.Text}}
{{leftLink.Text}}
<a href="javascript:void(0)" role="button" area-haspopup="true" area-expanded="false" uib-dropdown-toggle ng-show="leftLink.subMenus">Hello
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" ng-show="leftLink.subMenus">
<li ng-repeat="subMenu in leftLink.subMenus">
{{subMenu.Text}}
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Problem
Click on Navbar and then click on Hello: It does not show the li items
Please suggest.
It's clear that you are using click event with bootstrap component which require bootstrap javascript files. You must include it. Then you have to add a trigger to your menu. I belive the menu should be something like that :
<div class="dropdown">
<a role="button" href="#" class="dropdown-toggle"
data-toggle="dropdown" >Hello <b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" ng-show="true">
<li>
item 1
</li>
<li>
item 2
</li>
<li>
item 3
</li>
</ul>
That is a little Plunker figure out your problem plunker.
I hope that helps

UI-Router 1.0.0-beta.2 and UI-Bootstrap 2.1.4 dropdown not closing

I'm using ui-route ui-sref in my links with the navbar using UI-Bootstrap dropdowns and if I use the anchor tag with href, the dropdown closes on click, but the anchor tags with ui-sref does not close the dropdown. I've got the following plnkr with it showing the bug.
Angular Code
angular.module('app', ['ui.bootstrap', 'ui.router'])
.config(appRoute)
.controller('myController', myController);
appRoute.$inject = ['$stateProvider'];
function appRoute($stateProvider) {
$stateProvider.state('index', {
url: '/index',
template: '<h1>indexRoute</h1>'
})
.state('other', {
url: '/other',
template: '<h1>otherRoute</h1>'
})
}
function myController() {
var ctrl = this;
ctrl.title = 'Title';
ctrl.user = 'User#user.com';
ctrl.test = test;
ctrl.test2 = test2;
function test() {
console.log('TEST LINK!')
}
function test2() {
console.log('TEST 2')
}
}
HTML
<body ng-controller="myController as $ctrl" style="{padding-top: 70px;}">
<nav id="isec-menu" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="intelisecure-header">
<span>{{$ctrl.title}}</span>
</div>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li id="usermenu" class="dropdown user-menu-dropdown" uib-dropdown="">
<a href="" class="uib-dropdown-toggle username" uib-dropdown-toggle="">
<i class="fa fa-user fa-fw"></i>
{{$ctrl.user}} <span class="caret"></span>
</a>
<ul class="dropdown-menu" uib-dropdown-menu="" role="menu">
<li role="menuitem">
<a href="/index" ng-click="$ctrl.test()">
<i class="fa fa-fw fa-sign-out menu-icon"></i>
<span class="menu-text">index href</span>
</a>
</li>
<li role="menuitem">
<a ui-sref="other" ng-click="$ctrl.test2()">
<i class="fa fa-fw fa-sign-out menu-icon"></i>
<span class="menu-text">other sref</span>
</a>
</li>
<li role="menuitem">
<a href="" ng-click="$ctrl.logout()">
<i class="fa fa-fw fa-sign-out menu-icon"></i>
<span class="menu-text">Logout</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<ui-view>
<div>
test
</div>
</ui-view>
</body>
Not perfectly built, I was trying to see if I could replicate the issue with my
https://plnkr.co/edit/Rz3AbgnYnWI34DjuByY6?p=preview
Apparently this was a known issue and was resolved by updating to UI-Router 1.0.0-beta.3

navbar disappears but no dropdown

So been trying to set up a navbar that collapses to a drop down when the size is under a certain number of pixels. So far I have managed to make the normal menu disappear when it goes under a certain size, but once I make the window smaller and I have a icon to click (<a class="navbar-toggle">) nothing happens, well, if I look at the console, I get a "Clicked Link" on the console from chrome-extension dom.js but no drop down menu. Any idea what I am missing?
This is the menu (in ejs)
<div class="jumbotron cm_header">
<H1>Construct Mind - Internal</H1>
<div class="navbar-header">
<a class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div id="slidemenu">
<ul class="nav navbar-nav">
<li <%if (title == "Home") { %> class="cmh_active"<% } %>>Home</li>
<li <%if (title == "Whiteboard") { %> class="cmh_active"<% } %>>Whiteboard</li>
<li <%if (title == "Profile") { %> class="cmh_active"<% } %>><%if (user.updateMe) { %><i class="glyphicon glyphicon-exclamation-sign" ><% } %>Profile<%if (user.updateMe) { %></i><% } %></li>
<li <%if (title == "Addressbook") { %> class="cmh_active"<% } %>>Addressbook</li>
</ul>
<ul class="nav navbar-nav navbar-right login_move">
<li><i class="fa fa-user"> Logout</i></li>
</ul>
</div>
</div>
</div>
</nav>
CSS is loaded, and the following javascript libraries are loaded:
<link href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
... code ...
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/ngDialog/js/ngDialog.min.js"></script>
<script src="/javascripts/cmInternal.js"></script>
This is built into bootstrap already. Viewing the html for bootstrap.com I see their button looks like this:
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
with the button they have data-target="#bs-navbar".
"#bs-navbar" refers to the ID on their "nav" element
<nav id="bs-navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
Getting started
</li>
<li>
CSS
</li>
<li>
Components
</li>
<li>
JavaScript
</li>
<li>
Customize
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Expo</li>
<li>Blog</li>
</ul>
</nav>
You just need to use that combination in your situation to get it to work.

AngularJS with Bootstrap 3 navbar not collapsing on small device and hash tag links

So the problem comes when trying the project I'm working on the phone, the links I have inside my navbar are all with hash tag links (#) since it's AngularJS... Now I did find a way to make it to work perfectly in jQuery
$('.nav li a').not('.dropdown-toggle').on('click', function(){
$('.navbar-ex1-collapse').removeClass('in').addClass('collapse');
});
but since they always say to stop using plain jQuery or DOM manipulation...so how am I suppose to do this? I'm new to AngularJS and I'm not to good at starting to create my own directive, or should I just have $watch? but then how can I watch a certain class to be clicked then? I tried to do this example twitter-boostrap-navbar-with-angular-js-collapse-not-functioning but it was made specifically for Bootstrap 2.3 and some properties have changed too, so I'm getting a little confused. I could leave the jQuery, but you know...I'm trying to learn the proper way of doing... :)
Oh and if that help, my navbar Bootstrap 3 menu looks like this
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Portfolio<b class="caret"></b>
<ul class="dropdown-menu">
<li>Add</li>
<li>Undo</li>
<li>List</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
Probably a bit late, but here is a bootstrap 3.x version of the answer I gave in the question you referenced - http://jsfiddle.net/N99dQ/
This time, I have used ng-init instead of a controller, but both ways will work. Also worth mentioning, if you are not using the dropdowns, you'll only need to include ['ui.bootstrap.collapse']
HTML:
<nav id="navbar-example" class="navbar navbar-inverse navbar-static" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-init="isCollapsed = true" 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="#">Project Name</a>
</div>
<div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
Dropdown 2 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown">
Dropdown 3 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container-fluid -->
</nav>
Javascript:
var myApp = angular.module('myApp', ['ui.bootstrap']);
As an alternate to my previous answer, this one uses ng-repeat to condense the html. http://jsfiddle.net/m5TZw/
HTML
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" 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="#">Project Name</a>
</div>
<div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li ng-repeat="m in menu1" role="presentation"><a ng-click="go(m.link)" role="menuitem" tabindex="-1">{{m.text}}</a></li>
</ul>
</li>
<li class="dropdown">
Dropdown 2 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li ng-repeat="m in menu1" role="presentation"><a ng-click="go(m.link)" role="menuitem" tabindex="-1">{{m.text}}</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown">
Dropdown 3 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li ng-repeat="m in menu1" role="presentation"><a ng-click="go(m.link)" role="menuitem" tabindex="-1">{{m.text}}</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
JS
var myApp = angular.module('myApp', ['ui.bootstrap.collapse', 'ui.bootstrap.dropdownToggle']);
function NavBarCtrl($scope, $location) {
$scope.isCollapsed = true;
$scope.menu1 = [
{text: 'first', link : '/first'},
{text: 'second', link : '/second'},
{text: 'third', link : '/third'},
{text: 'fourth', link : '/fourth'},
{text: 'fifth', link : '/fifth'}
];
$scope.go = function(path) {
$scope.isCollapsed = true;
$location.path('#/' + path);
}
}
Rather importing a heavy "ui.bootstrap" I feel that this will be simple JS fix:
//for close, opened dropdown.
$(".nav a").click(function () {
if ($(".navbar-collapse").hasClass("in")) {
$('[data-toggle="collapse"]').click();
}
});
If this code is not working correctly then see that it's binding correctly, so place it in controller that loads page.

Resources