AngularJS Includes:-
With AngularJS, you can include HTML files in HTML, by using ngInclude directive in your HTML page.
ngInclude:-
ngInclude is used for Fetches, compiles and includes an external HTML fragment.
By default, the template URL is restricted to the same domain and protocol as the
application document. But by including ngInclude in a template , we can also use another html in that html.
For example-
After including the two html page in a html page.
your html page look like this
<body>
<div class="container"> <div ng-include="'project.html'"></div> <div ng-include="'view.html'"></div></div>
</body>
where project.html and view.html are two different html, which we are using in desired html page, where we want to use these templates.
project.html
<h3>Users</h3><table class="table table-striped"> <thead><tr> <th>Edit</th> <th>First Name</th> <th>Last Name</th> </tr></thead> <tbody><tr ng-repeat="user in users"> <td> <button class="btn" ng-click="editUser(user.id)"> <span class="glyphicon glyphicon-pencil"></span> Edit </button> </td> <td>{{ user.fName }}</td> <td>{{ user.lName }}</td> </tr></tbody></table>
view.html
<button class="btn btn-success" ng-click="editUser('new')"> <span class="glyphicon glyphicon-user"></span> Create New User</button><hr>
<h3 ng-show="edit">Create New User:</h3><h3 ng-hide="edit">Edit User:</h3>
<form class="form-horizontal"><div class="form-group"> <label class="col-sm-2 control-label">First Name:</label> <div class="col-sm-10"> <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name"> </div></div> <div class="form-group"> <label class="col-sm-2 control-label">Last Name:</label> <div class="col-sm-10"> <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name"> </div></div><div class="form-group"> <label class="col-sm-2 control-label">Password:</label> <div class="col-sm-10"> <input type="password" ng-model="passw1" placeholder="Password"> </div></div><div class="form-group"> <label class="col-sm-2 control-label">Repeat:</label> <div class="col-sm-10"> <input type="password" ng-model="passw2" placeholder="Repeat Password"> </div></div></form>
<hr><button class="btn btn-success" ng-disabled="error || incomplete"> <span class="glyphicon glyphicon-save"></span> Save Changes</button>
No comments:
Post a Comment