I'm working on one of my first projects in AngularJS, and I'm using ng-view with $routeProvider for my templating, but I've run into a small problem. On a few of my pages (landing, login, and registration) I don't want the navbar to show; but I want the navbar to show on all my other views. What are my options in fixing this problem using AngularJS?
The link below includes the index.html, login.html, and my $routeProvider
index.html
<body ng-app="hello">
<!-- FIXED NAVBAR -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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="#">hello</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Add Group</li>
<li>Upload File</li>
<li class="active">Notifications</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div ng-view></div>
</div>
</body>
login.html
<div class="container">
<form ng-controller="AdminUserCtrl" class="form-signin" role="form" method="post">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="email" class="form-control" id="inputUsername" placeholder="Email address" ng-model="login.email" required autofocus>
<input type="password" class="form-control" id="inputPassword" placeholder="Password" ng-model="login.password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember Me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit" ng-click="logIn(login.email, login.password)">Sign In</button>
<p style="text-align: center; margin-top: 5px;"><a style="text-align: center;" href="#/register">Register A New Account</a></p>
</form>
$routeprovider
hello.config([ '$locationProvider', '$routeProvider',
function($location, $routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/login.html',
controller: 'AdminUserCtrl',
access: { requiredLogin: false}
}).
when('/feed', {
templateUrl: 'views/feed.html',
controller: 'FeedListCtrl',
access: { requiredLogin: true}
otherwise({
redirectTo: '/'
});
}]);
The hack I'm currently thinking of to fix this is taking out the html code for the navbar out of the index and only adding it in the pages I need it, but i was wondering if there is another fix?
The navigation bar and other components that are separate from ng-view should have their own controllers. You can communicate information to these controllers from controllers within the view using a service. Properties of this service can be bound to the navigation views and their display can be updated based on the values of the properties. For example.
app.factory("navBarService", function () {
return {show: true};
});
app.controller("NavBarController", function (navBarService) {
this.show = navBarService.show;
});
app.controller("SomeControllerYouRouteToController", function (navBarService) {
navBarService.show = false;
});
Related
I'm working on a NodeJS Project that uses Sails.js as a framework.
What I'm trying to accomplish is a permissions system where the permissions per group are set by Check Boxes, I'm using a typical form with AngularJS.
When I click my "Sumbit" button it throws this error at my Browser's console:
angular.1.3.js:11594 TypeError: Cannot read property '0' of null
at $parseFunctionCall (angular.1.3.js:12333)
at callback (angular.1.3.js:22949)
at Scope.$eval (angular.1.3.js:14383)
at Scope.$apply (angular.1.3.js:14482)
at HTMLFormElement.<anonymous> (angular.1.3.js:22954)
at HTMLFormElement.eventHandler (angular.1.3.js:3011)(anonymous function) # angular.1.3.js:11594
Any help with this would be greatly appreciated.
EDIT Forgot the Code:
Here is the code that receives the information POSTed from the form
createGroup: function(req, res) {
Groups.create({
groupName: req.param('groupName'),
canViewUsers: req.param('canViewUsers'),
canEditUsers: req.param('canEditUsers'),
canPromoteToStaff: req.param('canPromoteToStaff'),
canViewNotes: req.param('canViewNotes'),
canEditPermissions: req.param('canEditPermissions')
});
Here is the code for that catches the information and POSTs it to the create function
angular.module('GroupsModule').controller('GroupsController', ['$scope', '$http', 'toastr', function($scope, $http, toastr) {
$scope.createGroup = {
loading: false
};
$scope.createGroupForm = function(){
// Set the loading state (i.e. show loading spinner)
$scope.createGroup.loading = true;
// Submit request to Sails.
$http.post('/createGroup', {
groupName: $scope.createGroupForm.groupName,
canViewUsers: $scope.createGroupForm.canViewUsers,
canEditUsers: $scope.createGroupForm.canEditUsers,
canPromoteToStaff: $scope.createGroupForm.canPromoteToStaff,
canViewNotes: $scope.createGroupForm.canViewNotes,
canEditPermissions: $scope.createGroupForm.canEditPermissions
})
.then(function onSuccess(sailsResponse){
window.location = '/groups';
})
.catch(function onError(sailsResponse){
// Handle known error type(s).
// If using sails-disk adpater -- Handle Duplicate Key
var groupAlreadyExists = sailsResponse.status == 409;
if (groupAlreadyExists) {
toastr.error('That group already exists', 'Error');
}
})
.finally(function eitherWay(){
$scope.createGroup.loading = false;
})
There are closing brackets but they aren't getting formatted correctly in the post.
And finally here is the code for the Form itself:
<!--STYLES-->
<link rel="stylesheet" href="/styles/angular-toastr.css">
<link rel="stylesheet" href="/styles/bootstrap.3.1.1.css">
<link rel="stylesheet" href="/styles/importer.css">
<link rel="stylesheet" href="/styles/style.css">
<link rel="stylesheet" href="/styles/theme.css">
<link rel="stylesheet" href="/styles/theme.min.css">
<!--STYLES END-->
<body ng-app="DashboardModule" ng-controller="DashboardController" ng-cloak>
<div class="bs-docs-section clearfix">
<div class="row">
<div class="bs-component">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="/">Insomnia eSports</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><i class="fa fa-users" aria-hidden="true"></i> Group Management </li>
</ul>
<!--
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
-->
<ul class="nav navbar-nav navbar-right">
<li>Sign Out</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<form ng-submit="createGroupForm()" id="create-group-form" class="form-signin" name="createGroupForm">
<h2 class="form-signin-heading">Create an account</h2>
<div class="row">
<!-- Group Name -->
<label>Group Name</label>
<input type="text" class="form-control" placeholder="Group Name" name="groupName" ng-model="createGroupForm.name" ng-maxlength="25" required>
</div>
<!-- Can View Users -->
<label>View Users?</label>
<input type="checkbox" name="canViewUsers" ng-model="canViewUsers.value">
<!-- Can View Users -->
<label>Edit Users?</label>
<input type="checkbox" name="canEditUsers" ng-model="canEditUsers.value">
<!-- Can Promote To Staff -->
<label>Promote to Staff?</label>
<input type="checkbox" name="canPromoteToStaff" ng-model="canPromoteToStaff.value">
<!-- Can Promote To Staff -->
<label>Can view notes?</label>
<input type="checkbox" name="canViewNotes" ng-model="canViewNotes.value">
<!-- Can Promote To Staff -->
<label>Can edit permissions?</label>
<input type="checkbox" name="canEditPermissions" ng-model="canEditPermissions.value">
<br/>
<!-- Disable signup button until the form has no errors -->
<button class="btn btn-success btn-lg btn-block" type="submit" ng-disabled="createGroupForm.$invalid">
<span ng-show="!createGroupForm.loading">Create Group</span>
<span class="overlord-loading-spinner fa fa-spinner" ng-show="createGroupForm.loading" ></span>
<span ng-show="createGroupForm.loading">Preparing your new group...</span>
</button>
<input type="hidden" name="_csrf" value="<%= _csrf %>" />
</form>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/angular.1.3.js"></script>
<script src="/js/dependencies/Base64.js"></script>
<script src="/js/dependencies/angular-toastr.js"></script>
<script src="/js/dependencies/compareTo.module.js"></script>
<script src="/js/public/signup/SignupModule.js"></script>
<script src="/js/public/groups/GroupsModule.js"></script>
<script src="/js/private/dashboard/DashboardModule.js"></script>
<script src="/js/public/homepage/HomepageModule.js"></script>
<script src="/js/private/dashboard/DashboardController.js"></script>
<script src="/js/public/groups/GroupsController.js"></script>
<script src="/js/public/homepage/HomepageController.js"></script>
<script src="/js/public/signup/SignupController.js"></script>
<!--SCRIPTS END-->
</body>
This was solved by me incorrectly using $scope on createGroupForm instead of just createGroup. The corrected code bit is below:
Instead of:
$scope.createGroupForm.canViewUsers
Use:
$scope.createGroup.canViewUsers
I was trying to use bootstrap-ui module but I have the following error:
angular.min.js:6Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=delyApp&p1=Error%3A…%20q%20(http%3A%2F%2Flocalhost%3A8080%2Fscripts%2Fangular.min.js%3A7%3A355)
I've this file:
index.html
<!-- Navigation -->
<nav class="navbar navbar-inverse 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="#bs-example-navbar-collapse-1">
<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="#">Delivery Online</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Listado de deliverys
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div ng-view></div>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/ui-bootstrap-tpls-2.0.1.min.js"></script>
<script src="app/route.js"></script>
<script src="app/controller.js"></script>
and in the route.js I injected the ui.bootstrap module:
var app = angular.module("delyApp", ["ngRoute"], ['ui.bootstrap']);
app.config(function ($routeProvider) {
$routeProvider
.when("/agregar", {
templateUrl: "agregar.html",
controller: "controller"
})
.when("/deliverys", {
templateUrl: "deliverys.html",
controller: "controller"
})
.otherwise({
templateUrl: "deliverys.html",
controller: "controller"
});
});
But it's currently not working.. giving the modulerr error... any idea? I guess that the js files are in the correct order. Thanks
There is an issue with injection,
Change the code ,
From
var app = angular.module("delyApp", ["ngRoute"], ['ui.bootstrap']);
To
var app = angular.module("delyApp", ['ngRoute','ui.bootstrap']);
I am working on Angular 2 project with following file structure.
HeaderComponent.ts
AppComponent.ts
Page1Component.ts
Page2Component.ts
I have following template in my HeaderComponent.ts
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a [routerLink]="['']">Home</a></li>
<li><a [routerLink]="['/page1']" >Page1</a></li>
<li><a [routerLink]="['/page2']">Page2</a></li>
</ul>
</div>
</div>
</nav>
with following routes in my AppComponent
#Component({
selector: 'my-app',
template: `
<my-header></my-header>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES, HeaderComponent]
})
#Routes([
{path: '/', component: HomeComponent},
{path: '/page1', component: Page1Component}
{path: '/page2', component: Page2Component}
])
export class AppComponent {
ngAfterViewInit() {
//To show the active tab in navbar
$(".nav a").on("click", function () {
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
}
}
and my Page1Component has following sample form
<section class="col-md-8 col-md-offset-2">
<form [ngFormModel]="myForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="firstName">First Name</label>
<input [ngFormControl]="myForm.find('firstName')" type="text" id="firstName" class="form-control">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input [ngFormControl]="myForm.find('lastName')" type="text" id="lastName" class="form-control">
</div>
<div class="form-group">
<label for="email">Mail</label>
<input [ngFormControl]="myForm.find('email')" type="email" id="email" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input [ngFormControl]="myForm.find('password')" type="password" id="password" class="form-control">
</div>
<button type="submit" class="btn btn-primary" [disabled]="!myForm.valid">Sign Up</button>
</form>
</section>
So when I click on Page1 routerLink in header <li><a [routerLink]="['/page1']">Page1</a></li>, it loads the Page1Component in <router-outlet></router-outlet>. I fill some details in form and when I click on Page1 routerLink again in header before submitting the form, I want Page1Component to reload so my form comes to initial state but it doesn't do anything on click. I tried to reset form in routerOnActivate() and routerCanDeactivate() but none of the functions being called. So basically, I want my component to load again when I click on [routerLink]
Please let me know if I can explain better.
You can take care of this scenario by using dummy route,
<a (click)="changeRoute(url)">
Add one dummy route to your router:
{ path: 'dummy', component: dummyComponent }
dummyComponent.ts
//Dummy component for route changes
#Component({
selector: 'dummy',
template: ''
})
export class dummyComponent{}
Now inside your component add changeRoute function:
changeRoute(url) {
this.router.navigateByUrl('/dummy', { skipLocationChange: true });
setTimeout(() => this.router.navigate(url));
}
// 'skipLocationChange' will avoid /dummy to go into history API
This will re render your component and rest all will be taken care by Angular.
You could use the (click) event an navigate in code to some dummy component and then again back to the previous component. There is a parameter in router.navigate() to skip history changes so the back button keeps working with this hack.
Another approach would be to remove the routerLink, and naviagate via code:
<a (click)="gotoPage1()">
Now gotoPage1 just appends a #X number to existing url
...
count: number = 2;
gotoPage1(){
count++;
return this.router.navigate(...'#'+count);
}
How to create dropdown menu in AngularJs 2 Javascript?
I have watched alot of tutorials but there is only available for Typescript. i need it in Javascript. Please help.
(function(app) {
app.HeaderComponent = ng.core
.Component({
selector: 'header',
template:
`<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class=" navbar-brand">
<span class="brandname">Slant<sub> AngulatJS</sub></span>
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dashboarddiv">
Dashboard
</li>
<li></li>
<li>
<div [hidden]="submitted">
<form (ngSubmit)="onSubmit()" #Header="ngForm">
<button type="submit" [disabled]="!Header.form.valid"><span class="glyphicon glyphicon-envelope"></span></button>
</form>
</div>
<div [hidden]="!submitted">
<button (click)="submitted=false"><span class="glyphicon glyphicon-envelope"></span></button>
<h2>You submitted</h2>
<div class="row">
<div class="col-xs-3">Name</div>
<div class="col-xs-9 pull-left">rrr</div>
</div>
<div class="row">
<div class="col-xs-3">Alter Ego</div>
<div class="col-xs-9 pull-left">r</div>
</div>
<div class="row">
<div class="col-xs-3">Power</div>
<div class="col-xs-9 pull-left">r</div>
</div>
</div>
</li>
</ul>
</div>
</nav>`
})
.Class({
constructor: function() {
this.submitted = false;
},
onSubmit: function() {
this.submitted = true;
},
});
})(window.app || (window.app = {}));
I have tried this. but it creates div hide and show. I want dropdown menu in navigation bar.
This is the result of this code
i am new one with angularJs so i saw many post how to make controller etc but in every controller we pass scope to get particular values which is defined in specific view which handles controller.i am sending my code that why i don't getting my views value using $scope when i am debuging so and want to get values $scope.LoginName
Error:- Undefined can'nt read property.
it's accessing $scope.loggedIn but not accessing login view values .
index.html
<body ng-controller="LoginController">
<div ng-switch="loggedIn">
<div ng-switch-when="false">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<b>Consumely</b>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right" data-ng-controller ="inventoryNavController">
<li data-ng-class="{'active':getClass('/Login')}">Login</li>
<li data-ng-class="{'active':getClass('/SignUp')}">SignUp</li>
</ul>
</div>
</div>
</div>
<div ng-view class="viewStyle"></div>
</div>
<div ng-switch-when="true">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<b>Consumely</b>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-left">
<li class=""><a ng-click='logout()' >Log Out</a></li>
<li>Send Invite</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li data-ng-class="{'active':getClass('/Stores')}">Stores</li>
</ul>
</div>
</div>
</div>
<div ng-view class="viewStyle"></div>
</div>
</div>
<!-- Controllers -->
<!-- login Controller -->
<script src="app/controllers/loginController.js"></script>
<!-- services -->
<!-- login service -->
<script src="app/services/loginService.js"></script>
</body>
LoginView.html
<div class="form-group">
<label for="login-Name" class="col-lg-3 form-label">User Name:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="login-Name" ng-model="LoginName" name="login-Name" placeholder="User Name"/>
</div>
</div>
<div class="form-group">
<label for="login-Password" class="col-lg-3 form-label">Password:</label>
<div class="col-lg-8">
<input type="password" class="form-control" id="login-Password" ng-model="LoginPass" name="login-Password" placeholder="Password"/>
</div>
</div>
loginController.js
app.controller('LoginController', function ($rootScope, $scope, loginService, $location) {
$rootScope.loggedIn = false;
$scope.login = function() {
var user = {
"username" : $scope.LoginName,
"password" : $scope.LoginPass
}
};
});
Please kindly if any one know help me out.