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
Related
I was hoping someone could tell me what I was doing wrong with the ngMessages directive. The code I am using is:
<script type="text/ng-template" id="error-messages">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">This field is too short</div>
</script>
<div ng-controller="SomeController">
<div class="row">
<div class="col-md-6">
<form name="profileForm" ng-submit="model.submit()" novalidate>
<div>
<label for="username">Your user name:</label>
<input type="text" id="username" name="username" required placeholder="User name" ng-model="model.user.username">
<div class="help-block" ng-messages="profileForm.username.$error">
<div ng-messages-include="error-messages"></div>
</div>
</div>
<button>submit</button>
</form>
</div>
</div>
</div>
And I created a plunk here ng-messages-include plunk
Been at this for hours.
Thanks
ngMessages does not ship with angular by default. So, when you add ng-messages directive, angular doesn't compile it and nothing happens.
What you should do is add ng-messages to a script tag and add the module ngMessages in your app definition.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-messages.min.js"></script>
var anApp = angular.module('anApp', ['ngMessages']);
See the updated plunker: http://plnkr.co/edit/1CtamfeVCpggDApH9Enp?p=preview
I need am not able to access the $scope.mainform.subform.submitted property in my script. My html goes as below.
<div ng-form="mainform">
<div ng-repeat="dependent in DependentDetails">
<ng-form name="subform">
<input type="text" class="textbox" ng-model="dependent.FirstName"/>
#*Same goes for other personal details*#
<input type="button" id="submitbutton" value="Save" ng-model="Submit" ng-click="saveDependentDetailsClick($event, $index, dependent)" />
</ng-form>
</div>
</div>
Can anyone help?
First of all, I think that it's not correct to use <ng-form name="subform">...</div> in ng-repeat in a way you have used it because you will end up with multiple forms having same name(subform) within the same scope therefore you can't refer to each of these forms as they have not unique name providing you with reference to them.
You will also end up with multiple submit buttons with the same id="submitbutton" in same html document which is an invalid html.
try this.
var app = angular
.module('MyApp', [
])
.controller('Main', ['$scope', function ($scope) {
$scope.DependentDetails = [{"FirstName":""},{"FirstName":""}];
$scope.saveDependentDetailsClick = function(DependentDetails){
console.log(DependentDetails);
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="main-content" ng-app="MyApp" ng-controller="Main as myCtrl">
<div ng-form="mainform">
<div ng-repeat="dependent in DependentDetails">
<ng-form name="subform">
<input type="text" class="textbox" ng-model="dependent.FirstName"/>
<input type="button" value="Save" ng-click="saveDependentDetailsClick(dependent)" />
</ng-form>
</div>
</div>
</div>
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.
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 have an AngularJS Modal Bootstrap form working. How do I style the text inside the form? In the example below, I'd like 'Name' to be Bold. I've tried label, divs, ng-class but that seems to get stripped out when Angular processes the form.
<form novalidate class="simple-form">
<div ng-class="col-sm-2 control-label">Code:</div> {{Code}}
<label>Name:</label> {{Name}}
<label>Our Name:</label><input type="text" ng-model="Our_Name" />
</form>
When I view the source it always comes out:
<form novalidate="" class="simple-form ng-scope ng-pristine ng-valid ng-binding">
Code: C11 Name: Accredited Surety Cas Co.
Our Name: <input type="text" ng-model="Our_Name" class="ng-pristine ng-valid"><br>
</form>
Thanks for looking.
I hope you have included bootstrap.css in your code. And for modal window you need to add modal specific classes like below.
<form novalidate>
<div class="modal-dialog simple-form">
<div class="modal-content">
<div class="modal-header">
//your rest html
</div>
</div>
</div>
</form>
Here is an updated fiddle.
I hope this is what you are looking for.
Thanks