AngularJS содержит
В AngularJS, вы можете включить HTML-файлы в формате HTML.
Он содержит файл HTML в HTML
В HTML, это не поддерживается HTML-файл, содержащий функцию.
Услуги Side Includes
Большинство функций поддержки на стороне сервера сценариев включают в себя файл (SSI: на стороне сервера Включает).
Использование SSI, вы можете включить в HTML-файл в HTML отправлен в браузер клиента.
Примеры PHP
<? Php требуют ( "navigation.php" );?>
Клиент содержит
Есть много способов, с помощью JavaScript могут содержать HTML-файл в HTML.
Обычно мы используем запрос HTTP (AJAX) , чтобы получить данные с сервера, мы можем записать данные , возвращаемые с помощью innerHTML в HTML - элемента.
AngularJS содержит
Используйте AngularJS, вы можете использовать нг-директиву включения для включения содержимого HTML:
примеров
<Body>
<Div класс = "контейнер">
<Div нг-включают в себя = " ' myUsers_List.htm'"> </ DIV>
<Div нг-включают в себя = " ' myUsers_Form.htm'"> </ DIV>
</ Div>
</ Body>
<Div класс = "контейнер">
<Div нг-включают в себя = " ' myUsers_List.htm'"> </ DIV>
<Div нг-включают в себя = " ' myUsers_Form.htm'"> </ DIV>
</ Div>
</ Body>
Выполните следующие действия:
Шаг 1: Создание списков HTML
myUsers_List.html
<H3> Пользователи </ h3>
<Таблица класс = "table- таблица полосатая">
<THEAD> <TR>
<Th> Изменить </ й>
<Th> Имя </ й >
<Th> Фамилия </ й >
</ TR> </ THEAD>
<TBODY> <TR нг-повтор = "пользователя в пользователей">
<Td>
<Класс Button = "БТН" нг -Щелкните = "editUser (user.id)">
<Span класс = "glyphicon glyphicon- карандаш"> </ SPAN> & NBSP; & NBSP; Редактировать
</ Button>
</ TD>
<Td> {{user.fName}} </ TD>
<Td> {{user.lName}} </ TD>
</ TR> </ TBODY>
</ Table>
<Таблица класс = "table- таблица полосатая">
<THEAD> <TR>
<Th> Изменить </ й>
<Th> Имя </ й >
<Th> Фамилия </ й >
</ TR> </ THEAD>
<TBODY> <TR нг-повтор = "пользователя в пользователей">
<Td>
<Класс Button = "БТН" нг -Щелкните = "editUser (user.id)">
<Span класс = "glyphicon glyphicon- карандаш"> </ SPAN> & NBSP; & NBSP; Редактировать
</ Button>
</ TD>
<Td> {{user.fName}} </ TD>
<Td> {{user.lName}} </ TD>
</ TR> </ TBODY>
</ Table>
Попробуйте »
Шаг 2: Создание формы HTML
myUsers_Form.html
<Класс Button = "БТН btn- успеха" нг-клик = "editUser (" новый ")">
<Span класс = "glyphicon glyphicon- пользователя"> </ SPAN> Создание нового пользователя
</ Button>
<Hr>
<H3 нг-шоу = "редактировать "> Создать нового пользователя: </ h3>
<H3 нг скрыть = "редактировать "> Изменить пользователя: </ h3>
<Форма класс = "Форма-горизонтальный ">
<Div класс = "Форма-группа ">
<Класс = Ярлык "Col-см -2 контрольно-метка"> Имя: </ метка>
<Div класс = "Col-см -10">
<Тип входного = "текст" нг -моделью = "Fname" нг-инвалидов = "! Редактировать" заполнитель = "First Name">
</ Div>
</ Div>
<Div класс = "Форма-группа ">
<Этикетка класс = "Col-см -2 контрольно-метка"> Фамилия: </ метка>
<Div класс = "Col-см -10">
<Тип входного = "текст" нг -моделью = "LName" нг-инвалидов = "! Редактировать" заполнитель = "Last Name">
</ Div>
</ Div>
<Div класс = "Форма-группа ">
<Этикетка класс = "Col-см -2 контрольно-метка"> Пароль: </ метка>
<Div класс = "Col-см -10">
<INPUT TYPE = "пароль" нг -моделью = "passw1" заполнитель = "Пароль">
</ Div>
</ Div>
<Div класс = "Форма-группа ">
<Этикетка класс = "Col-см -2 контрольно-метка"> Повтор: </ метка>
<Div класс = "Col-см -10">
<INPUT TYPE = "пароль" нг -моделью = "passw2" заполнитель = "Повторить пароль">
</ Div>
</ Div>
</ Форма>
<Hr>
<Класс Button = "БТН btn- успеха" нг-инвалидов = "Ошибка || неполными">
<Span класс = "glyphicon glyphicon- сохранить"> </ SPAN> Сохранить изменения
</ Button>
<Span класс = "glyphicon glyphicon- пользователя"> </ SPAN> Создание нового пользователя
</ Button>
<Hr>
<H3 нг-шоу = "редактировать "> Создать нового пользователя: </ h3>
<H3 нг скрыть = "редактировать "> Изменить пользователя: </ h3>
<Форма класс = "Форма-горизонтальный ">
<Div класс = "Форма-группа ">
<Класс = Ярлык "Col-см -2 контрольно-метка"> Имя: </ метка>
<Div класс = "Col-см -10">
<Тип входного = "текст" нг -моделью = "Fname" нг-инвалидов = "! Редактировать" заполнитель = "First Name">
</ Div>
</ Div>
<Div класс = "Форма-группа ">
<Этикетка класс = "Col-см -2 контрольно-метка"> Фамилия: </ метка>
<Div класс = "Col-см -10">
<Тип входного = "текст" нг -моделью = "LName" нг-инвалидов = "! Редактировать" заполнитель = "Last Name">
</ Div>
</ Div>
<Div класс = "Форма-группа ">
<Этикетка класс = "Col-см -2 контрольно-метка"> Пароль: </ метка>
<Div класс = "Col-см -10">
<INPUT TYPE = "пароль" нг -моделью = "passw1" заполнитель = "Пароль">
</ Div>
</ Div>
<Div класс = "Форма-группа ">
<Этикетка класс = "Col-см -2 контрольно-метка"> Повтор: </ метка>
<Div класс = "Col-см -10">
<INPUT TYPE = "пароль" нг -моделью = "passw2" заполнитель = "Повторить пароль">
</ Div>
</ Div>
</ Форма>
<Hr>
<Класс Button = "БТН btn- успеха" нг-инвалидов = "Ошибка || неполными">
<Span класс = "glyphicon glyphicon- сохранить"> </ 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: "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 ;
}
};
})
$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 ;
}
};
})
Шаг 4: Создание домашней страницы
myUsers.html
<! DOCTYPE HTML>
<HTML>
<Link отн = "таблица стилей" 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"> </ скрипт>
<Тело нг-приложение = "MyApp " нг-контроллер = "userCtrl">
<Div класс = "контейнер">
<Div нг-включают в себя = " ' myUsers_List.htm'"> </ DIV>
<Div нг-включают в себя = " ' myUsers_Form.htm'"> </ DIV>
</ Div>
<Script SRC = "myUsers.js"> </ скрипт>
</ Body>
</ HTML>
<HTML>
<Link отн = "таблица стилей" 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"> </ скрипт>
<Тело нг-приложение = "MyApp " нг-контроллер = "userCtrl">
<Div класс = "контейнер">
<Div нг-включают в себя = " ' myUsers_List.htm'"> </ DIV>
<Div нг-включают в себя = " ' myUsers_Form.htm'"> </ DIV>
</ Div>
<Script SRC = "myUsers.js"> </ скрипт>
</ Body>
</ HTML>
Попробуйте »