Angularjs contiene
En AngularJS, puede incluir archivos HTML en HTML.
Incluir archivos HTML en HTML
En HTML, la funcionalidad que contiene archivos HTML no es compatible actualmente.
El servidor contiene
La mayoría de los scripts del lado del servidor admiten la función de archivo de inclusión (SSI: el lado del servidor incluye).
Usando SSI, puede incluir archivos HTML en HTML y enviarlos al navegador del cliente.
Instancia de PHP
<? Php requiere ("Navigation.php"); ?>
El cliente incluye
Hay muchas formas de incluir archivos HTML en HTML con JavaScript.
Por lo general, usamos la solicitud HTTP (AJAX) para obtener datos del servidor, y podemos escribir los datos devueltos en elementos HTML utilizando InnerHTML.
Angularjs contiene
Usando AngularJS, puede usar la Directiva NG-Include para incluir contenido HTML:
Ejemplo
<Body> <Viv> <div ng -include = "'myusers_list.htm'"> </div> <div ng -include = "'myusers_form.htm'"> </div> </div>
Los pasos son los siguientes:
Paso 1: crear una lista HTML
myusers_list.html
<h1> usuario </h1> <table> <thead> <tr> <th> editar </th> <th> name </th> <th> name </th> </tr> </thead> <tbody> <tr ng-epeat = "user en los usuarios"> <td> <botón ng-click = "edituser (user.id)"> <pan> </span> edit </button </tdm. user.fname}} </td> <td> {{user.lname}} </td> </tr> </tbody> </table>Resultados de ejecución:
usuario
| editar | nombre | apellido |
|---|---|---|
| {{user.fname}} | {{user.lname}} |
Paso 2: Crear formulario HTML
myusers_form.html
<Botton ng-click = "edituser ('new')"> <span> </span> Crear un nuevo usuario </boton> <hr> <h3 ng-show = "editar"> crear un nuevo usuario: </h3> <h3 ng-hide = "editor"> user del editor: </h3> <form> <div> <label> nombre: </selabel> <divs> <ivy tipo = "text" ng-mmodel = "form> <form> <viv>" name> name: </selt> <divs> <ivy tipo = "text" ngmodel = "form> <form> <div" fname "fname" ngmodel "ngmodel" ng-mmodel "ngmodel =" form> <iv "fname" fname "fname" ngmodel "ngmodel" ngmodel = "form> <bit" fname "fname" name " ng-disabled = "! Edit" PlaceHolder = "Name"> </div> </div> <div> <label> sujeto: </label> <div> <input type = "text" ng-model = "lname" ng-disable = "! edit" placeholder = "último"> </div> </div> <div> <label> contraseña: </etiqueta> <div> <diM-type = "contraseña" nw1 "nw1" nw1 " placeHolder = "Password"> </div> </div> <viv> <label> Repita la contraseña: </etiqueta> <viv> <input type = "contraseña" ng-model = "passw2" placeholder = "repetir contraseña"> </div> </div> </form> <hr> <botte ng-disable = "Error || incompleto"> <pan> </span> save </br boxiResultados de ejecución:
Paso 3: crear un controlador
myusers.js
angular.module ('myApp', []). Controller ('UserCtrl', function ($ scope) {$ scope.fname = ''; $ scope.lname = ''; $ scope.passw1 = ''; $ scope.passw2 = '' '; $ scope.users = [{{fname:' hege ', lname: lname: "Pege," Id "," Id "," Id ",", "," ",", "," ",", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "". 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 ",", ",", ",", ",", "," Peter ",", "," Peter ",", ",", ",", "," peter "," Peter ",", ",", ",", ", 6," peter ", }]; $ scope.edit = true; $ scope.error = false; $ scope.incomplete = false; $ scope.edituser = function (id) {if (id == 'new') {$ scope.edit = true. $ scope.fname = $ scope.users [id-1] .fname; {$ scope.test ();}); $ scope. $ watch ('fname', function () {$ scope.test ();}); $ scope. $ watch ('lname', function () {$ scope.test ();}); $ scope. $ watch ('lname', function () {$ scope.test ();}); {if ($ scope.passw1! == $ scope.passw2) {$ scope.error = true; ! $ scope.passw2.length)) {$ scope.incomplete = true;Paso 4: crear una página de inicio
myusers.html
< src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-app = "myapp" ng-controller = nginclude = "'myusers_form.htm'"> </div> </div> <script src = "myusers.js"> </script> </body> </html>
Resultados de ejecución:
Lo anterior es una compilación de información de AngularJS. Espero que pueda ayudar a los amigos de la programación de Angularjs.