Angularjs содержит
В AngularJS вы можете включить HTML -файлы в HTML.
Включите HTML -файлы в HTML
В HTML функциональность, содержащая HTML -файлы, в настоящее время не поддерживается.
Сервер содержит
Большинство сценариев на стороне сервера поддерживают функцию File include (SSI: Серверная сторона включает).
Используя SSI, вы можете включить HTML -файлы в HTML и отправить их в клиент -браузер.
Экземпляр PHP
<? PHP требует ("vaigation.php"); ?>
Клиент включает
Есть много способов включить HTML -файлы в HTML с JavaScript.
Обычно мы используем HTTP -запрос (AJAX) для получения данных с сервера, и мы можем записать возвращенные данные в элементы HTML, используя innerhtml.
Angularjs содержит
Используя AngularJS, вы можете использовать директиву NG-include, чтобы включить контент HTML:
Пример
<body> <div> <div ng-include = "'' myusers_list.htm '"> </div> <div ng-include = "' myusers_form.htm '"> </div> </div>
Шаги следующие:
Шаг 1: Создайте список HTML
myusers_list.html
<h1> user </h1> <table> <thead> <tr> <th> Edit </th> <Th> name </th> <Th> name </th> </tr> </thead> <tbody> <tr ng-repeat = "Пользователь в пользователях"> <Td> <tood Ng-click = "EditUser (user.id)"> <prop> <prop> </td> </button-click = "Edituser (user.id)" <td> {{user.fname}} </td> <td> {{user.lname}} </td> </tr> </tbody> </table>Результаты работы:
пользователь
| редактировать | имя | фамилия |
|---|---|---|
| {{user.fname}} | {{user.lname}} |
Шаг 2: Создать форму HTML
myusers_form.html
<button ng-click="editUser('new')"><span></span>Create a new user</button><hr><h3 ng-show="edit">Create a new user:</h3><h3 ng-hide="edit">Editor user:</h3><form> <div> <label>Name:</label> <div> <input type="text" ng-model = "fname" ng-disabled = "! Редактировать" Placeholder = "name"> </div> </div> <div> <babel> Субъект: </label> <div> <input type = "text" ng-model = "lname" ng-disablet = "! edit" PlaceSter = "last"> </diver> </divel> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <input type = "password" ng-model = "passw1" placehalder = "password"> </div> </div> <div> <babel> Повторите пароль: </label> <div> <input type = "password" ng-model = "passw2" Placehalder = "Повторите пароль"> </div> </div> </form> <hr> <buttrover ngdabled = "</div> </div> </form> <hr> <buttrowntabled ="> " неполный "> <pan> </span> Сохранить </button>Результаты работы:
Шаг 3: Создайте контроллер
myusers.js
Angular.Module ('myApp', []). Controller ('userctrl', function ($ scope) {$ scope.fname = '' '; $ scope.lname =' ''; $ scope.passw1 = ''; $ scope.passw2 = ''; $ scope.users = [{id: 1, fname: 'hege', lname ', ", й ID:" fname: 'kim', lname: "pim"}, {id: 3, fname: 'sal', lname: "smith"}, {id: 4, fname: 'jack', lname: "jones"}, {id: 5, fname: 'John', lname: "doe"}, {id: fname: "PETRAME", ",", "PETRAME": }]; $ scope.fname = $ scope.users [id-1] .fname; {$ scope.test ();}); $ scope. $ watch ('fname', function () {$ scope.test ();}); $ rack. {if ($ scope.passw1! == $ scope.passw2) {$ scope.error = true; ! $ scope.passw2.length)) {$ scope.incomplete = true;Шаг 4: Создайте домашнюю страницу
myusers.html
<! Doctype html> <html> <head> <meta charset = "utf-8"> <link rel = "stylesheet" href = "// apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-app = "myApp" ng-controller = "userctrl"> <div> <div ng-include = "Myusers_loller. ng-include = "'myusers_form.htm'"> </div> </div> <script src = "myusers.js"> </script> </body> </html>
Результаты работы:
Вышеуказанное представляет собой сборник информации AngularJS. Я надеюсь, что это может помочь Angularjs программировать друзей.