Latest web development tutorials

AngularJS contiene

En AngularJS, puede incluir archivos HTML en HTML.

Contiene el archivo HTML en HTML

En HTML, esto no es apoyado por el archivo HTML que contiene la función.

Incluye Servicio Side

La mayoría de las funciones de soporte de script del lado del servidor incluyen archivos (SSI: lado del servidor incluye).

El uso de SSI, es posible que se incluye en el archivo HTML en el código HTML enviado al navegador del cliente.

Ejemplos de PHP

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

cliente contiene

Hay muchas maneras de JavaScript pueden contener archivos HTML en el código HTML.

Por lo general, usamos petición http (AJAX) para obtener datos desde el servidor, podemos escribir los datos devueltos por el uso de innerHTML para el elemento HTML.

AngularJS contiene

Utilice AngularJS, puede utilizar ng-directiva include para incluir contenido HTML:

Ejemplos

<Cuerpo>

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

</ Body>

Proceder de la siguiente manera:

Paso 1: Crear listas HTML

myUsers_List.html

<H3> Usuarios </ h3>

<Tabla class = "mesa- mesa de rayas">
<Culata en T> <tr>
<TH> Editar </ th>
<TH> Nombre </ th >
<TH> Apellidos </ th >
</ Tr> </ culata en T>
<Tbody> <tr ng-repeat = "usuario en usuarios">
<Td>
<Clase Button = "btn" ng -clic = "editUser (user.id)">
<Span class = "glyphicon glyphicon- lápiz"> </ span> & nbsp; & nbsp; Editar
</ Button>
</ Td>
<Td> {{}} user.fName </ td>
<Td> {{}} user.lName </ td>
</ Tr> </ tbody>
</ Table>

Trate »

Paso 2: Crear un formulario HTML

myUsers_Form.html

<Clase Button = "btn btn- éxito" ng clic = "editUser (" nuevo ")">
<Class = "glyphicon glyphicon- Span usuario"> </ span> Crear nuevo usuario
</ Button>
<Hr>

<H3 ng-show = "editar "> Crear nuevo usuario: </ h3>
<H3-ng = ocultar "editar "> Editar usuario: </ h3>

<Clase Form = "forma horizontal ">
<Div class = "forma-grupo ">
<Clase Label = "col-sm -2 control de etiqueta"> Nombre: </ label>
<Div class = "col-sm -10">
<Input type = "text" ng -model = "fName" ng-disabled = "! Editar" marcador de posición = "Nombre">
</ Div>
</ Div>
<Div class = "forma-grupo ">
<Etiqueta class = "col-sm -2 control de etiqueta"> Apellido: </ label>
<Div class = "col-sm -10">
<Input type = "text" ng -model = "lName" ng-disabled = "! Editar" marcador de posición = "Apellido">
</ Div>
</ Div>
<Div class = "forma-grupo ">
<Etiqueta class = "col-sm -2 control de etiqueta"> Contraseña: </ label>
<Div class = "col-sm -10">
<Entrada type = "contraseña" ng -model = "passw1" marcador de posición = "contraseña">
</ Div>
</ Div>
<Div class = "forma-grupo ">
<Etiqueta class = "col-sm -2 control de etiqueta"> Repetir: </ label>
<Div class = "col-sm -10">
<Entrada type = "contraseña" ng -model = "passw2" marcador de posición = "Repetir contraseña">
</ Div>
</ Div>
</ Form>

<Hr>
<Clase Button = "btn btn- éxito" = "error || incompleta" ng-desactivado>
<Span class = "glyphicon glyphicon- guardar"> </ span> Guardar cambios
</ Button>

Trate »

Paso 3: Crear controlador

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 ;
  }
};
})

Paso 4: Crear una Página de inicio

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>

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

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

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

</ Body>

</ Html>

Trate »