AngularJS contém
No AngularJS, você pode incluir arquivos HTML no HTML.
Inclua arquivos HTML em HTML
No HTML, a funcionalidade que contém arquivos HTML não é suportada no momento.
O servidor contém
A maioria dos scripts do lado do servidor suporta a função Incluir Arquivo (SSI: Lado do servidor inclui).
Usando o SSI, você pode incluir arquivos HTML no HTML e enviá -los para o navegador do cliente.
Instância do PHP
<? php requer ("navegação.php"); ?>
O cliente inclui
Existem muitas maneiras de incluir arquivos HTML no HTML com JavaScript.
Normalmente, usamos a solicitação HTTP (AJAX) para obter dados do servidor e podemos gravar os dados retornados nos elementos HTML usando o InnerHTML.
AngularJS contém
Usando o AngularJS, você pode usar a diretiva NG-Include para incluir conteúdo HTML:
Exemplo
<body> <div> <div ng-include = "'myusers_list.htm'"> </div> <div ng-include = "'myusers_form.htm'"> </div> </div>
As etapas são as seguintes:
Etapa 1: Crie uma lista HTML
myusers_list.html
<H1> Usuário </h1> <table> <thead> <tr> <th> editar </th> <th> nome </th> <th> nome </th> </tr> </thead> <tbody> <tr ng-repeat = "Usuário em usuários"> <Td> <butt-click = "edituser (user.id)" <td> {{user.fname}} </td> <td> {{user.lname}} </td> </tr> </tbody> </ table>Resultados em execução:
usuário
| editar | nome | sobrenome |
|---|---|---|
| {{user.fname}} | {{user.lname}} |
Etapa 2: Crie formulário HTML
myusers_form.html
<Button ng-click = "EditUser ('new')"> <pan> </span> Crie um novo usuário </butut> <hr> <h3 ng-show = "edit"> Crie um novo usuário: </h3> <h3 ng-hide = "edit"> editor: </h3> <div> <div> <bel "Nome: <batty =" edit "> editor: </h3> <Form> <div>> <bel" " ng-model = "fname" ng-disabled = "! Edit" Parholder = "Name"> </div> </div> <div> <belt> sujeito: </crety> <div> <input type = "text" ng-model = "lname" ng-diabled = "! Edit" PlaceHer = "" <//"</" type = "senha" ng-model = "passw1" placeholder = "senha"> </div> </div> <div> <breting> Repita senha: </celt> <div> <input type = "senha" ng-model = "passw2" spotleholder = "repetir senha"> </div> </div> </form> <hr> Incompleto "> <span> </span> Salvar </butut>Resultados em execução:
Etapa 3: Crie um controlador
myusers.js
angular.module ('myApp', []). 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.FNAME = $ SCOPE.USERS [ID-1] .FNAME; {$ scope.test ();}); $ scope. $ watch ('fname', function () {$ scope.test ();}); $ scope. $ watch ('lname', function () {$ scope.test ();}; {if ($ scope.passw1! == scope.passw2) {$ scope.error = true; ! $ scope.passw2.length)) {$ scope.incomplete = true;Etapa 4: Crie uma página inicial
myusers.html
<! Doctype html> <html> <head> <meta charset = "utf-8"> <link rel = "Stylesheet" href = "// apps.bdimg.com/libs/bootstrap/3.4/css/bootstrap.min.css"><script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </sCript> </head> <corpo ng -pp = "myApp" ng-CONTROLLER = "userCl. ng-include = "'myusers_form.htm'"> </div> </div> <script src = "myusers.js"> </sCript> </body> </html>
Resultados em execução:
O exposto acima é uma compilação das informações do AngularJS. Espero que possa ajudar os amigos da programação do AngularJs.