Latest web development tutorials

AngularJS contains

In AngularJS, you can include HTML files in HTML.

It contains the HTML file in HTML

In HTML, this is not supported by the HTML file containing the function.

Service Side Includes

Most server-side scripting support features include file (SSI: Server Side Includes).

Using SSI, you may be included in the HTML file in the HTML sent to the client browser.

PHP Examples

<? Php require ( "navigation.php" );?>

Client contains

There are many ways by JavaScript can contain HTML file in the HTML.

Usually we use http request (AJAX) to obtain data from the server, we can write the data returned by using innerHTML to the HTML element.

AngularJS contains

Use AngularJS, you can use ng-include directive to include HTML content:

Examples

<Body>

<Div class = "container">
<Div ng-include = " ' myUsers_List.htm'"> </ div>
<Div ng-include = " ' myUsers_Form.htm'"> </ div>
</ Div>

</ Body>

Proceed as follows:

Step 1: Create HTML lists

myUsers_List.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> & nbsp; & nbsp; Edit
</ Button>
</ Td>
<Td> {{user.fName}} </ td>
<Td> {{user.lName}} </ td>
</ Tr> </ tbody>
</ Table>

try it"

Step 2: Create an HTML form

myUsers_Form.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>

try it"

Step 3: Create Controller

myUsers.js

angular.module( 'myApp' , []).controller( 'userCtrl' , function ($scope) {
$scope.fName = '' ;
$scope.lName = '' ;
$scope.passw1 = '' ;
$scope.passw2 = '' ;
$scope.users = [
{id: 1 , fName: 'Hege' ,lName: "Pege" },
{id: 2 , fName: 'Kim' ,lName: "Pim" },
{id: 3 , fName: 'Sal' ,lName: "Smith" },
{id: 4 , fName: 'Jack' ,lName: "Jones" },
{id: 5 , fName: 'John' ,lName: "Doe" },
{id: 6 , fName: 'Peter' ,lName: "Pan" }
];
$scope.edit = true ;
$scope.error = false ;
$scope.incomplete = false ;
$scope.editUser = function (id) {
  if (id == 'new' ) {
    $scope.edit = true ;
    $scope.incomplete = true ;
    $scope.fName = '' ;
    $scope.lName = '' ;
    } else {
    $scope.edit = false ;
    $scope.fName = $scope.users[id-1].fName;
    $scope.lName = $scope.users[id-1].lName;
  }
};

$scope.$watch( 'passw1' , function () {$scope.test();});
$scope.$watch( 'passw2' , function () {$scope.test();});
$scope.$watch( 'fName' , function () {$scope.test();});
$scope.$watch( 'lName' , function () {$scope.test();});

$scope.test = function () {
  if ($scope.passw1 !== $scope.passw2) {
    $scope.error = true ;
    } else {
    $scope.error = false ;
  }
  $scope.incomplete = false ;
  if ($scope.edit && (!$scope.fName.length ||
    !$scope.lName.length ||
    !$scope.passw1.length || !$scope.passw2.length)) {
    $scope.incomplete = true ;
  }
};
})

Step 4: Create a Homepage

myUsers.html

<! DOCTYPE html>
<Html>
<Link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<Script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </ script>

<Body ng-app = "myApp " ng-controller = "userCtrl">

<Div class = "container">
<Div ng-include = " ' myUsers_List.htm'"> </ div>
<Div ng-include = " ' myUsers_Form.htm'"> </ div>
</ Div>

<Script src = "myUsers.js"> </ script>

</ Body>

</ Html>

try it"