템플릿 및 데이터의 기본 작동 프로세스는 다음과 같습니다.
사용자 요청 애플리케이션 시작 페이지
사용자의 브라우저는 서버에 대한 HTTP 연결을 시작한 다음 템플릿이 포함 된 index.html 페이지를로드합니다.
Angular는 페이지에로드되어 페이지가로드 될 때까지 대기하고 템플릿의 한계를 정의하기위한 NG-APP 지시문을 찾고 있습니다.
각도 트래버스 템플릿, 지정되고 바인딩 된 관계를 찾고 일부 열 작업을 트리거합니다. 리스너를 등록하고 일부 DOM 작업을 수행하며 서버에서 초기화 데이터를 얻습니다. 마지막으로 응용 프로그램이 시작되고 템플릿이 DOM View로 변환됩니다.
서버에 연결하여 사용자에게 표시 해야하는 다른 데이터를로드하십시오.
텍스트 표시
하나는 {{greeting}}과 같은 양식 {{}} 형식을 사용합니다.
첫 번째 유형을 사용하면 사용자가 렌더링되지 않은 페이지를 볼 수 있습니다. 두 번째 유형의 인덱스 페이지를 사용하는 것이 좋습니다. 나머지 페이지는 첫 번째 유형을 사용할 수 있습니다.
양식 입력
코드 사본은 다음과 같습니다.
<html ng-app>
<헤드>
<title> 양식 </title>
<script type = "text/javaScript"src = "angular.min.js"> </script>
<script type = "text/javaScript">
함수 startupcontroller ($ scope) {
$ scope.funding = {SarthingEstimate : 0};
computeneeded = function () {
$ scope.funding.needed = $ scope.funding.startingestimate * 10;
};
$ SCOPE. $ WATCH ( 'Funding.StartingEstimate', Computeneeded); // 시계 모델 변경
}
</스크립트>
</head>
<body>
<form ng-controller = "startupcontroller">
시작 : <input ng-change = "computeneeded ()"ng-model = "Funding.startingStimate"> // 변경시 함수 호출
추천 : {{funding.needed}}
</form>
</body>
</html>
어떤 경우에는 변화가있을 때 즉시 움직이고 싶지 않지만 기다려야합니다. 예를 들어:
코드 사본은 다음과 같습니다.
<html ng-app>
<헤드>
<title> 양식 </title>
<script type = "text/javaScript"src = "angular.min.js"> </script>
<script type = "text/javaScript">
함수 startupcontroller ($ scope) {
$ scope.funding = {SarthingEstimate : 0};
computeneeded = function () {
$ scope.funding.needed = $ scope.funding.startingestimate * 10;
};
$ scope. $ watch ( 'funding.startingestimate', computeneeded); // 시계는 표현식을 모니터링 하며이 표현식이 변경되면 콜백 함수가 호출됩니다.
$ scope.requestFunding = function () {
window.alert ( "죄송합니다. 더 많은 고객을 먼저 얻으십시오.")
};
}
</스크립트>
</head>
<body>
<form ng-submit = "requestFunding ()"ng-controller = "startUpController"> // ng-submit
시작 : <입력 ng-change = "computeneeded ()"ng-model = "Funding.StartingStimate">
추천 : {{funding.needed}}
<button> 내 스타트 업에 자금을 지원하십시오! </button>
</form>
</body>
</html>
비 형식 제출 상호 작용, 예제로 클릭하십시오
코드 사본은 다음과 같습니다.
<html ng-app>
<헤드>
<title> 양식 </title>
<script type = "text/javaScript"src = "angular.min.js"> </script>
<script type = "text/javaScript">
함수 startupcontroller ($ scope) {
$ scope.funding = {SarthingEstimate : 0};
computeneeded = function () {
$ scope.funding.needed = $ scope.funding.startingestimate * 10;
};
$ SCOPE. $ WATCH ( 'Funding.StartingEstimate', Computeneeded);
$ scope.requestFunding = function () {
window.alert ( "죄송합니다. 더 많은 고객을 먼저 얻으십시오.")
};
$ scope.reset = function () {
$ scope.funding.startingestimate = 0;
};
}
</스크립트>
</head>
<body>
<form ng-controller = "startupcontroller">
시작 : <입력 ng-change = "computeneeded ()"ng-model = "Funding.StartingStimate">
추천 : {{funding.needed}}
<button ng-click = "requestFunding ()"> 시작 내 시작! </button>
<button ng-click = "reset ()"> reset </button>
</form>
</body>
</html>
목록, 테이블 및 기타 반복 요소
NG-REPEAT는 현재 참조 된 요소 번호를 $ index를 통해 반환합니다. 샘플 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<html ng-app>
<헤드>
<title> 양식 </title>
<script type = "text/javaScript"src = "angular.min.js"> </script>
<script type = "text/javaScript">
var student = [{name : 'mary', score : 10}, {이름 : 'Jerry', score : 20}, {이름 : 'Jack', score : 30}]
함수 StudentListController ($ scope) {
$ SCOPE.STUDENTS = 학생;
}
</스크립트>
</head>
<body>
<TABLE NG-CONTROLLER = "StudentListController">
<tr ng-repeat = '학생의 학생'>
<td> {{$ index+1}} </td>
<td> {{whient.name}} </td>
<td> {{wiching.score}} </td>
</tr>
</테이블>
</body>
</html>
숨기고 보여주십시오
NG-SHOW 및 NG-HIDE 기능은 동일하지만 작동 효과는 정확히 반대입니다.
코드 사본은 다음과 같습니다.
<html ng-app>
<헤드>
<script type = "text/javaScript"src = "angular.min.js"> </script>
<cript>
함수 DeathRaymenucontroller ($ scope) {
$ scope.menustate = {show : false}; // menustate.show = false로 변경하면 효과가 표시되지 않습니다. 앞으로 변수를 {}에 넣습니다.
$ scope.togglemenu = function () {
$ scope.menustate.show =! $ scope.menustate.show;
};
}
</스크립트>
</head>
<body>
<div ng-controller = 'deathraymenucontroller'>
<button ng-click = 'togglemenu ()'> 토글 메뉴 </button>
<ul ng-show = 'menustate.show'>
<li ng-click = 'stun ()'> stun </li>
<li ng-click = 'disintegrate ()'> desintegrate </li>
<li ng-click = 'rase ()'> 역사에서 지우기 </li>
</ul>
</div>
</body>
</html>
CSS 클래스와 스타일
NG 클래스 및 NG 스타일 모두 표현식을 수용 할 수 있으며, 표현 실행의 결과는 다음 값 중 하나 일 수 있습니다.
공백으로 구분되는 CSS 클래스 이름을 나타내는 문자열
CSS 클래스 이름 배열
CSS 클래스 이름을 부울 값에 매핑합니다
코드 예제는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<html ng-app>
<헤드>
<스타일 유형 = "텍스트/CSS">
.Error {
배경색 : 빨간색;
}
.경고 {
배경색 : 노란색;
}
</스타일>
<script type = "text/javaScript"src = "angular.min.js"> </script>
<cript>
함수 HeaderController ($ scope) {
$ scope.iserror = false;
$ scope.iswarning = false;
$ scope.showerror = function () {
$ SCOPE.MESSAGETEXT = "ERROR !!!"
$ scope.iserror = true;
$ scope.iswarning = false;
}
$ scope.showwarning = function () {
$ scope.messagetext = "경고 !!!"
$ scope.iswarning = true;
$ scope.iserror = true;
}
}
</스크립트>
</head>
<body>
<div ng-controller = "headercontroller">
<div ng-class = "{error : iserror, 경고 : iswarning}"> {{messagetext}} </div>
<버튼 ng-click = "shower ()"> 오류 </button>
<button ng-click = "showWarning ()"> 경고 </button>
</div>
</body>
</html>
CSS 클래스 이름을 부울 값에 매핑합니다
샘플 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<html ng-app>
<헤드>
<스타일 유형 = "텍스트/CSS">
.Selected {
배경색 : Lightgreen;
}
</스타일>
<script type = "text/javaScript"src = "angular.min.js"> </script>
<cript>
기능 레스토랑 ($ SCOPE) {
$ scope.list = [{이름 : "잘 생긴", 요리 : "BBQ"}, {이름 : "녹색", 요리 : "샐러드"}, {이름 : "House", Cuisine : 'Seafood'}];
$ scope.selectrestaurant = function (row) {
$ scope.selectedrow = 행;
}
}
</스크립트>
</head>
<body>
<테이블 ng-controller = "레스토랑">
<tr ng-repeat = '레스토랑의 레스토랑'ng-click = 'selectrestaurant ($ index)'ng-class = '{selected : $ index == selectedrow}'> CSS 클래스 이름의 부울 값에 대한 맵. 선택된 모델 속성 값 SelectedRow가 NG-Repeat의 $ index와 같으면 SelectD 스타일이 해당 라인으로 설정됩니다.
<td> {{Restaurant.name}} </td>
<td> {{Restaurant.cuisine}} </td>
</tr>
</테이블>
</body>
</html>