Latest web development tutorials

AngularJS와는 포함

AngularJS와, 당신은 HTML에서 HTML 파일을 포함 할 수 있습니다.

그것은 HTML에서 HTML 파일을 포함

HTML에서이 함수를 포함하는 HTML 파일에 의해 지원되지 않는다.

서비스 측면을 포함

(: 서버 사이드 포함 SSI)는 대부분의 서버 측 스크립트 지원 기능은 파일을 포함한다.

SSI를 사용하여 클라이언트 브라우저로 전송되는 HTML의 HTML 파일에 포함될 수있다.

PHP의 예

<? PHP는 ( "navigation.php"을 요구 ?)>

클라이언트 포함

되는 HTML에서 HTML 파일을 포함 할 수있는 자바 스크립트에 의해 여러 가지가 있습니다.

일반적으로 우리가 서버로부터 데이터를 얻기 위해 HTTP 요청 (AJAX)를 사용하여, 우리는 HTML 요소 innerHTML을 사용하여 리턴 데이터를 기록 할 수있다.

AngularJS와는 포함

AngularJS와를 사용하여, 당신은 HTML 콘텐츠를 포함하는 지시문을 NG-포함 사용할 수 있습니다 :

예

<바디>

<사업부 클래스 = "컨테이너">
<사업부 NG-포함 = " ' myUsers_List.htm'"> </ DIV>
<사업부 NG-포함 = " ' myUsers_Form.htm'"> </ DIV>
</ DIV>

</ BODY>

다음과 같이 진행하십시오 :

1 단계 : HTML 목록 만들기

myUsers_List.html

<H3> 사용자 </ H3>

<표 클래스 = "테이블 테이블 -의 스트라이프">
<THEAD> <TR>
<목> 수정 </ 일>
<목> 이름 </ 일 >
<목> 성 </ 일 >
</ TR> </ THEAD>
<TBODY> <TR-반복 ng를 "사용자의 사용자"=>
<TD>
<Button 클래스 = "BTN"NG - 클릭 = "editUser (user.id)">
<스팬 클래스 = "glyphicon glyphicon- 연필"> </ SPAN> & NBSP; & NBSP; 편집
</ 버튼>
</ TD>
<TD> {{user.fName}} </ TD>
<TD> {{user.lName}} </ TD>
</ TR> </ TBODY>
</ 테이블>

»시도

2 단계 : HTML 양식 만들기

myUsers_Form.html

<버튼 클래스 = "btn을 btn- 성공"NG 클릭 = "editUser ( '새')">
<스팬 클래스 = "glyphicon glyphicon- 사용자"> </ SPAN> 새 사용자 만들기
</ 버튼>
<HR>

<H3의 NG 쇼 = "편집 "> 새 사용자 만들기 : </ H3>
<H3의 NG 숨기기 = "편집 "> 사용자 편집 : </ H3>

<Form 클래스 = "폼 수평 ">
<사업부 클래스 = "폼 그룹 ">
<Label 클래스 = "COL-SM -2 제어 라벨"> 이름 : </ 라벨>
<사업부 클래스 = "COL-SM -10">
<입력 유형 = "텍스트"NG -Model = "FNAME"NG 장애인 = "! 수정 '자리 ="이름 ">
</ DIV>
</ DIV>
<사업부 클래스 = "폼 그룹 ">
<Label 클래스 = "COL-SM -2 제어 라벨"> 성 : </ 라벨>
<사업부 클래스 = "COL-SM -10">
<입력 유형 = "텍스트"NG -Model = "LNAME"NG 장애인 = "! 수정 '자리 ="성 ">
</ DIV>
</ DIV>
<사업부 클래스 = "폼 그룹 ">
<Label 클래스 = "COL-SM -2 제어 라벨"> 비밀번호 : </ 라벨>
<사업부 클래스 = "COL-SM -10">
<입력 유형 = "암호"NG -Model = "passw1"자리 = "비밀번호">
</ DIV>
</ DIV>
<사업부 클래스 = "폼 그룹 ">
<Label 클래스 = "COL-SM -2 제어 라벨"> 반복 : </ 라벨>
<사업부 클래스 = "COL-SM -10">
<입력 유형 = "암호"NG -Model = "passw2"자리 = "반복 암호">
</ DIV>
</ DIV>
</ FORM>

<HR>
<버튼 클래스 = "btn- btn을 성공"NG 장애인 = "오류 || 불완전">
<스팬 클래스 = "glyphicon glyphicon- </ SPAN> 변경 사항 저장 저장">
</ 버튼>

»시도

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

4 단계 : 홈페이지 만들기

myUsers.html

<! DOCTYPE html로>
<HTML>
<링크 REL = "스타일 시트"HREF = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<스크립트 SRC = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </ script>

<바디 NG-응용 프로그램 = "을 myApp "NG 컨트롤러 = "userCtrl">

<사업부 클래스 = "컨테이너">
<사업부 NG-포함 = " ' myUsers_List.htm'"> </ DIV>
<사업부 NG-포함 = " ' myUsers_Form.htm'"> </ DIV>
</ DIV>

<스크립트 SRC = "myUsers.js"> </ script>

</ BODY>

</ HTML>

»시도