In Angular SPA application, login screen is show/hide based on ng-show directive variable which is in $rootScope.
If user is in home page and refresh the page (F5), Login screen is shown as Complete page is refreshed and lost root scope variable value.
How to fix this issue?
Code Sample::
<body ng-controller="mainController">
<div class="container" ng-controller="schoolLoginCtrl"
ng-show="showLogin">
<form class="form-signin" ng-submit="login()">
<h2 class="form-signin-heading">Login Page</h2>
<label for="userName" class="sr-only">User Name</label> <input
type="text" id="userName" ng-model="user.userName"
class="form-control" placeholder="User Name" required autofocus>
<label for="inputPassword" class="sr-only">Password</label> <input
type="password" id="inputPassword" ng-model="user.password"
class="form-control" placeholder="Password" required>
<div class="alert alert-danger">{{errorMsg}}</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign
in</button>
</form>
</div>
<div class="container" ng-show="!showLogin">
<div ng-view></div>
</div>
.controller('mainController', function($scope, $rootScope,
$location) {
$rootScope.showLogin = true;
});
use ngcookie or pouchdb or localstorage to store user session
this can help you https://github.com/sahat/satellizer
You'll need to implement some type of stateful storage functionality. This can be accomplished using $cookies or local storage (there are many 3rd party implementations of this).
Whenever you refresh the page, all the javascripts and other resources are loaded again and so the angularjs, which will basically re-initialize the $rootScope with its initial value and everything bind to it will be lost.
I will suggest to use the web storage(local/session storage) or cookies as per your use cases and requirements.
Related
I am new in angular JS, working with existing project on angular 1.2.16
please check the code sample
<form role="form" name="UserCreateForm"
novalidate class="biocheck-form">
<div class="row">
<div class="col-xs-4"> <input class="input-forms" placeholder="Usuario" aa-field-group="UserCreate.data.username" type="text" aa-label="Usuario"
required maxlength="20"> </div>
<div class="col-xs-4"> <input class="input-forms" placeholder="ejemplo#mail.com" aa-field-group="UserCreate.data.email" type="email"
aa-label="Email" required> </div>
<div class="col-xs-4"> <input class="input-forms" placeholder="" aa-field-group="UserCreate.data.newPassword" type="password" aa-label="Contraseña"
required> </div>
</div>
Rol
</div> <button type="submit" class="btn btn-primary pull-right" aa-submit-form="UserCreate.on.doUserCreate()"> Guardar </button> <button class="btn btn-cancel pull-right" ng-click="UserCreate.on.toUserList()"> Cancelar </button> </form>
I want to check debug the next flow of the code. If anything is unclear please comment.
I want to check how it is save the data in DB this project used yii for handling server side request.
Thanks
If i understand correctly you need to open the developer tools in your browser, go to the Source tab and find the js file that holds the function on your ng-click. Then put a breakpoint there and click the button. The browser should stop in the breakpoint and with F10 you can go line by line to your code.
How can I divide one single dynamically generated form to multiple page in angularJs with "required" validation??
You put each page in one Div and bind that div's visibility to a model variable that will store your current page. Here is Plunker http://plnkr.co/edit/ZU7h68iHaFK0k2zSfZhS?p=preview
<form name="myForm">
<h1>{{currentPage}}</h1>
<div ng-show="currentPage==1">
Page1<input type="text" ng-model="page1" ng-required="currentPage==1"/>
</div>
<div ng-show="currentPage==2">
Page2<input type="text" ng-model="page2" ng-required="currentPage==2"/>
</div>
<div ng-show="currentPage==3">
Page3<input type="text" ng-model="page3" ng-required="currentPage==3"/>
</div>
<input type="submit" value="Next" ng-click="NextPage()" ng-disabled="myForm.$invalid" />
</form>
Can anyone please suggest me How to implement a POP UP function in Angular + Node js?
I want to implement a login which should pop up when the user clicks login button.
Thanks
Depends on what CSS framework you are using. I often use Bootstrap, and the ui-bootstrap directives. This allows easy modal dialog display.
This is dummy html with bootstrap content that will trigger pop up on button click. You will notice I've placed ng-click directive on the login button, so you should just create angular function on your controller that is combined with this view.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modalExample">Login modal</button>
<div class="modal fade modalExample" tabindex="-1" role="dialog" aria-labelledby="myModallable">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form>
<div class="form-group">
<input type="email" class="form-control" ng-model="username" placeholder="Username" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" ng-model="password" />
</div>
<div class="form-group">
<button class="btn btn-default" ng-click="login(username,password)">Login</button>
</div>
</form>
</div>
</div>
</div>
This will handle your problem on the client side, and related to Node.js I suppose you will have some api controller that will listen for the request that you can send from angular factory that represents service.
Several ways of doing this either with jQuery or angular.js.
ngDialog plugin is available you can go through it if you want popup with pure angular.
I'm working on a site where a user can submit several different kinds of forms. I would like to include the type of form submitted (basic, advanced, other). I've read that using hidden fields with AngularJS is possible, but not recommended. Rather than finding a hack to solve the problem, I'd prefer to do things right. What is the proper way to submit information that does not need to be displayed to the user but should be included with a submission?
Here's the HTML for the form:
<form name="myForm">
<div class="control-group">
<label>Name</label>
<input type="text" name="name">
</div>
<label>Description</label>
<textarea name="description"></textarea>
<button ng-click="editProject.save()" class="btn btn-primary">Save</button>
<!--{{formselection}}-->
</form>
If you use ng-model the hidden fields are in the object memory context, only show the data to the user fill.
HTML:
<form name="myForm">
<div class="control-group">
<label>Name</label>
<input type="text" name="name" ng-model="form.name">
</div>
<label>Description</label>
<textarea name="description" ng-model="form.description"></textarea>
<button ng-click="editProject.save(form)" class="btn btn-primary">Save</button> <!-- Pass the form to the method in controller-->
</form>
Controller:
$scope.form = {
hiddenField1: "anyValue",
hiddenField2: "anotherValue"
};
$scope.editProject = {save: function(form){
//http request given the form, this contain the name, description and the two hidden field
}}
http://plnkr.co/edit/fjnGc4Q4f8ZfwhupkOdR
I am new in angular js, i want create a app using multiple ngview please help me
Index.html
<html ng-app="firstGenApp">
<body>
<div >
<ng-view></ng-view>
</div>
</body>
1)here i include login.html while loading index.html
Login.html
<h1>Login Page</h1>
<form ng-submit="login(userName, userPass)" ng-controller="LoginCtrl" class="ng-scope ng-pristine ng-valid">
<label>User name</label>
<input type="text" ng-model="userName" class="ng-pristine ng-valid">
<label>Password</label>
<input type="password" ng-model="userPass" class="ng-pristine ng-valid">
<br/>
{{loginError}} {{loggedUser}}
<br/><br/>
<button class="btn btn-success" ng-click="">Login</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</form>
2)after login success i am including homepage.html
Homepage.html
<div ng-view></div>
3) while including homepage.html its giving error
4) This homepage.html having one ng-view i want use this ng-view after including abc.html etc..
please help me how to use multiple ng-view ?
You can have only one ng-view per angularjs application.
You can change its content in several ways: ng-include, ng-switch or mapping different controllers and templates through the $routeProvider.
If you want to have nested views, or multiple parallel views, then you definitely want to try UI-Router : https://github.com/angular-ui/ui-router