AngularJS 표현식 자세히 설명 및 예제 코드

이전에 AngularJS의 기본 사용법을 배웠다면, 이제 PDF와 함께 표현식에 대한 내용을 배웁니다.

　　AngularJS의 표현식은 js와 완전히 다릅니다.

　　먼저 표현식을 {{}}에 넣어 사용해야 하며, javascript의 표현식 개념에 비해 다음과 같은 차이점이 있습니다:

　　1 역할 차이

　　javascript에서 기본적인 동작은 window입니다만, angularjs에서는 다릅니다. $scope를 사용하여 동작을 제어합니다.

　　2 미정의된 값 허용

　　angularjs에서 미정의된 표현식을 사용했을 때도 오류가 발생하지 않으며, 직접 빈 값을 반환합니다.

　　3 필터

　　표현식에서 | 파이프 명령어를 사용하여 필터를 추가할 수 있으며, UNIX 명령 줄과 유사합니다.　

　　4 $표시

　　angular의 메서드와 사용자 정의 메서드를 구분하는 데 사용됩니다.

　　아래는 작은 코드를 보여줍니다:

!doctype html>
<html ng-app>
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="ctl">
      name:<input ng-model="name" type="text">
      <button ng-click="reset()">reset</button>
      <br>
      {{name}}
      <br>
      hello ! {{test}}
      <br>
      filter : {{name | uppercase}}
    </div>
    <script type="text/javascript">
      function ctl($scope){
        var str = "init";
        $scope.name = str;
        $scope.reset = function(){
          $scope.name = str;
        }
      }
    </script>
  </body>
</html>

　　reset을 통해 reset 메서드를 트리거하여 name 변수의 내용을 초기화합니다;

　　표현식에서 정의되지 않은 test를 호출했지만 오류가 발생하지 않았습니다. 직접 빈 문자열로 표시됩니다. —— {{test}}

　　최종 필터를 사용하여 표현식에서 name의 값을 대문자로 변환합니다. —— {{name | uppercase}}

　　실행 결과:

　　　　 이上是 AngularJS 표현식의 자료 정리입니다. 이후 관련 자료를 계속 보충하겠습니다. 많은 지지를 감사합니다!

기본 튜토리얼

추천해드립니다