Angularjs의 뷰와 지시문에 대해 자세히 알아보세요.-JS 튜토리얼-php.cn

이 기사는 Angularjs의 보기와 지침을 안내합니다. 도움이 되기를 바랍니다.

Angularjs의 뷰와 지시문에 대해 자세히 알아보세요.

AngularJS 뷰 및 지시문 소개

첫 번째 기사에서 AngularJS가 애플리케이션을 뷰, 컨트롤러 및 모델(MVC)로 분할하는 방법을 살펴보았습니다. 이 글에서는 AngularJS 뷰를 생성하는 방법을 살펴보겠습니다. [관련 튜토리얼 추천: "angular Tutorial"]

시작하기 전에 먼저 이 글의 예제를 경험하는 데 사용할 수 있는 간단한 AngularJS 애플리케이션을 설정하겠습니다:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<body ng-app="myapp">

  <div ng-controller="MyController" >
      <span></span>
  </div>

  <script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
      //empty controller function
    });
  </script>

</body>
</html>

로그인 후 복사

AngularJS Commands

AngularJS Views mix 모델의 데이터를 HTML 템플릿으로 변환합니다. AngularJS 지시어 를 사용하여 AngularJS에 데이터를 HTML 템플릿에 혼합하는 방법을 알려줄 수 있습니다. 이 기사에서는 가장 일반적으로 사용되는 AngularJS 지시문을 다룰 것입니다.

Interpolation 지시어

Interpolation 지시어는 AngujarJS의 가장 기본적인 지시어 중 하나입니다. 보간 지시문은 표현식 결과를 HTML 템플릿에 삽입합니다. {{ }} 표기법을 사용하여 표현식을 삽입하려는 위치를 표시할 수 있습니다. 예는 다음과 같습니다. {{ }}符号标记插入表达式的位置。下面是一个例子：

<div ng-controller="MyController" >
    <span> {{myData.text}} </span>
</div>

로그인 후 복사

HTML 模板包含在div具有ng-controller 属性的元素中。HTML 模板内部是一个span元素，内部是一个插值指令。该指令指示 AngularJSmyData.text在给定位置插入数据值。

插值指令还可以插入从模型对象的函数返回的数据。下面是一个例子：

 <div ng-controller="MyController" >
      <span>{{myData.textf()}}</span>
  </div>

  <script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
      $scope.myData = {};
      $scope.myData.textf = function() { return "A text from a function"; };
    });
  </script>

로그인 후 복사

在此示例中，插值指令{{myData.textf()}}将调用模型对象myData.textf()上的函数$scope，并将从该函数返回的文本插入到 HTML 模板中。

该textf()函数被插入到$scope.myData控制器函数内的对象中，如您在示例中所见。

ng-bind 指令

该ng-bind指令是插值指令的替代。您可以通过ng-bind在您希望 AngularJS 插入数据的 HTML 元素中插入一个属性来使用它。下面是一个例子：

<div ng-controller="MyController" >
  <span ng-bind="myData.textf()"></span>
</div>

로그인 후 복사

这会将myData.text()函数返回的数据插入到span元素的主体中。请注意属性{{ }}内的表达式周围的不是必需的ng-bind。

从模型中转义 HTML

如果从模型获得的数据包含 HTML 元素，则这些元素在插入 HTML 模板之前会被转义。转义意味着 HTML 显示为文本，而不是 HTML。

这样做是为了防止 HTML 注入攻击。例如，在聊天应用程序中，有人可能会<script>在聊天消息中插入带有 JavaScript的元素。如果此元素未转义，则任何看到聊天消息的人都可能会<script>执行该元素。随着 HTML 转义，<script> 元素将仅显示为文本。

您可以使用ng-bind-html-unsafe指令禁用 HTML 转义，如下所示：

<div ng-controller="MyController" >
  <span ng-bind-html-unsafe="myData.textf()"></span>
</div>

로그인 후 복사

在禁用 HTML 转义时，您应该非常小心。确保没有显示不受信任的 HTML。

条件渲染

AngularJS 可以根据模型中数据的状态显示或隐藏 HTML。您可以使用一组专门为此目的创建的 AngularJS 指令。我将在以下部分中介绍这些指令。

ng-show + ng-hide 指令

的ng-show和ng-hide指令用于显示或隐藏根据模型中的数据的HTML元素。这两个指令做同样的事情，但彼此相反。这里有两个例子：

  <div ng-controller="MyController" >
      <span ng-show="myData.showIt"></span>
      <span ng-hide="myData.showIt"></span>
  </div>

  <script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
      $scope.myData = {};
      $scope.myData.showIt = true;
    });
  </script>

로그인 후 복사

此示例创建两个span元素。一个有一个ng-show指令，另一个有一个ng-hide指令。这两个指令都查看myData.showIt 布尔变量以确定它们是否应该显示或隐藏span元素。该ng-show 指令将显示元素如果模型值为true，并隐藏元素如果模型值为false。该ng-hide指令将执行相反的操作：span

<div ng-controller="MyController" >
    <div ng-switch on="myData.switch">
        <div ng-switch-when="1">Shown when switch is 1</div>
        <div ng-switch-when="2">Shown when switch is 2</div>
        <div ng-switch-default>Shown when switch is anything else than 1 and 2</div>
    </div>
</div>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
      $scope.myData = {};
      $scope.myData.switch = 3;
    });
</script>

로그인 후 복사

HTML 템플릿은 ng-controller 속성이 있는 div 요소에 포함되어 있습니다. HTML 템플릿 내부에는 span 요소가 있고 내부에는 보간 명령이 있습니다. 이 지시문은 AngularJSmyData.text에 지정된 위치에 데이터 값을 삽입하도록 지시합니다. 🎜🎜보간 지시문은 모델 객체의 함수에서 반환된 데이터를 보간할 수도 있습니다. 예는 다음과 같습니다. 🎜

<div ng-controller="MyController" >
    <div ng-if="myData.showIt">ng-if Show it</div>
</div>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.showIt = true;
    });
</script>

로그인 후 복사

🎜이 예에서 보간 명령 {{myData.textf()}}는 모델 개체 myData.textf()에 대한 함수를 호출합니다. $scope를 입력하고 함수에서 반환된 텍스트를 HTML 템플릿에 삽입하세요. 🎜🎜예제에서 볼 수 있듯이 textf() 함수는 $scope.myData 컨트롤러 함수 내부의 개체에 삽입됩니다. 🎜🎜🎜🎜🎜🎜🎜🎜ng-bind 지시문 🎜🎜🎜🎜 ng-bind 지시문은 보간 지시문을 대체합니다. AngularJS가 데이터를 삽입하려는 HTML 요소에 속성을 삽입하여 ng-bind하여 사용할 수 있습니다. 예는 다음과 같습니다. 🎜

<div ng-controller="MyController" >
    <div ng-include="&#39;angular-included-fragment.html&#39;"></div>
</div>

로그인 후 복사

🎜이렇게 하면 myData.text() 함수에서 반환된 데이터가 span 요소의 본문에 삽입됩니다. {{ }} 속성 내 표현식을 둘러싸는 ng-bind는 필요하지 않습니다. 🎜

🎜모델에서 HTML을 이스케이프하세요🎜🎜🎜모델에서 얻은 데이터에 HTML 요소가 포함된 경우 이러한 요소는 HTML 템플릿에 삽입되기 전에 이스케이프됩니다. 이스케이프 처리는 HTML이 HTML이 아닌 텍스트로 표시된다는 의미입니다. 🎜🎜이는 HTML 삽입 공격을 방지하기 위해 수행됩니다. 예를 들어, 채팅 애플리케이션에서 누군가 <script> JavaScript가 포함된 요소를 채팅 메시지에 삽입할 수 있습니다. 이 요소가 이스케이프되지 않으면 채팅 메시지를 보는 사람은 누구나 <script> 요소를 실행할 수 있습니다. HTML 이스케이프를 사용하면 <script> 요소가 텍스트로만 표시됩니다. 🎜🎜아래와 같이 ng-bind-html-unsafe 지시문을 사용하여 HTML 이스케이프를 비활성화할 수 있습니다. 🎜

<div ng-controller="MyController" >
    <div ng-include="myData.showIt &&
                        &#39;fragment-1.html&#39; ||
                        &#39;fragment-2.html&#39;"></div>
</div>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.showIt = true;
    });
</script>

로그인 후 복사

🎜HTML 이스케이프를 비활성화할 때는 매우 주의해야 합니다. 신뢰할 수 없는 HTML이 표시되지 않는지 확인하세요. 🎜🎜🎜🎜🎜

조건부 렌더링🎜🎜AngularJS는 모델의 데이터 상태에 따라 HTML을 표시하거나 숨길 수 있습니다. 이 목적을 위해 특별히 만들어진 AngularJS 지시문 세트를 사용할 수 있습니다. 다음 섹션에서 이러한 지침을 다루겠습니다. 🎜🎜🎜🎜🎜🎜🎜🎜ng-show + ng-hide 지시문 🎜🎜🎜🎜 ng-show 및 ng-hide 지시문은 기본적으로 표시하거나 숨기는 데 사용됩니다. 모델의 HTML 요소에 있는 데이터입니다. 이 두 명령은 동일한 작업을 수행하지만 서로 반대입니다. 다음은 두 가지 예입니다. 🎜

<ol>
   <li ng-repeat="theItem in myData.items">{{theItem.text}}</li>
</ol>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"} ];
    });
</script>

로그인 후 복사

🎜이 예는 두 개의 span 요소를 만듭니다. 하나에는 ng-show 지시문이 있고 다른 하나에는 ng-hide 지시문이 있습니다. 두 지시문 모두 myData.showIt 부울 변수를 확인하여 span 요소를 표시할지 아니면 숨겨야 할지 결정합니다. ng-show 지시어는 모델 값이 true이면 요소를 표시하고, 모델 값이 false이면 요소를 숨깁니다. ng-hide 지시문은 반대 작업을 수행합니다. span은 모델 값이 true이면 요소를 숨기고 모델 값이 false이면 표시합니다. 🎜

注意控制器函数如何将设置myData.showIt为true。这意味着上面的示例将显示第一个 span 元素并隐藏第二个。

HTML 元素（span在本例中为元素）使用 CSS 属性隐藏display: none;。这意味着 HTML 元素仍然存在于 DOM 中。它们只是不可见。

ng-switch 指令

ng-switch如果您想根据模型中的数据从 DOM 中添加或删除 HTML 元素，则使用该指令。下面是一个例子：

<div ng-controller="MyController" >
    <div ng-switch on="myData.switch">
        <div ng-switch-when="1">Shown when switch is 1</div>
        <div ng-switch-when="2">Shown when switch is 2</div>
        <div ng-switch-default>Shown when switch is anything else than 1 and 2</div>
    </div>
</div>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
      $scope.myData = {};
      $scope.myData.switch = 3;
    });
</script>

로그인 후 복사

此示例包含一个div具有ng-switch属性和on属性的元素。该on属性指示要打开模型中的哪些数据。

div元素内部是三个嵌套div元素。前两个嵌套div元素包含一个ng-switch-when属性。该属性的值告诉on父属性中引用的模型数据div应该具有什么值，以便嵌套div可见。在此示例中，第一个嵌套div在myData.switch为 1时可见，第二个嵌套div在myData.switch为 2时可见。

该third嵌套div有一个ng-switch-default属性。如果没有其他ng-switch-when指令匹配，则显示div withng-switch-default属性。

在上面的示例中，控制器函数设置myData.switch为 3。这意味着将显示嵌套div的ng-switch-default属性。另外两个嵌套div元素将从 DOM 中完全删除。

ng-if 指令

该ng-if指令可以包括/从DOM删除HTML元素，就像ng-switch指令，但它有一个简单的语法。下面是一个例子：

<div ng-controller="MyController" >
    <div ng-if="myData.showIt">ng-if Show it</div>
</div>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.showIt = true;
    });
</script>

로그인 후 복사

ng-if和ng-show+ 之间的主要区别ng-hide是 ng-if从 DOM 中完全删除 HTML 元素，而ng-show+ ng-hide只是将 CSS 属性display: none;应用于元素。

ng-include 指令

该ng-include指令可用于将来自其他文件的 HTML 片段包含到视图的 HTML 模板中。下面是一个例子：

<div ng-controller="MyController" >
    <div ng-include="&#39;angular-included-fragment.html&#39;"></div>
</div>

로그인 후 복사

T此示例将文件包含angular-included-fragment.html到div具有ng-include属性的 HTML 模板内。注意文件名是如何引用的（单引号）。

您可以根据条件包含 HTML 片段。例如，您可以在两个文件之间进行选择，如下所示：

<div ng-controller="MyController" >
    <div ng-include="myData.showIt &&
                        &#39;fragment-1.html&#39; ||
                        &#39;fragment-2.html&#39;"></div>
</div>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.showIt = true;
    });
</script>

로그인 후 복사

此示例将包括fragment-1.htmlifmyData.showIt为 true 和fragment-2.htmlifmyData.showIt为 false。

ng-repeat 指令

该ng-repeat指令用于迭代一组项目并从中生成 HTML。在初始生成之后，ng-repeat监视用于生成 HTML 的项目的更改。如果项目发生变化，该ng-repeat指令可能会相应地更新 HTML。这包括重新排序和删除 DOM 节点。

这是一个简单的ng-repeat例子：

<ol>
   <li ng-repeat="theItem in myData.items">{{theItem.text}}</li>
</ol>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"} ];
    });
</script>

로그인 후 복사

此示例将为数组中的li每个项目创建一个元素myData.items。

您还可以迭代从函数调用返回的集合。下面是一个例子：

<ol>
   <li ng-repeat="theItem in myData.getItems()">{{theItem.text}}</li>
</ol>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"} ];
        $scope.myData.getItems = function() { return this.items; };
    });
</script>

로그인 후 복사

您可以使用稍微不同的语法迭代 JavaScript 对象的属性：

<ol>
   <li ng-repeat="(name, value) in myData.myObject">{{name}} = {{value}}</li>
</ol>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.myObject = { var1 : "val1", var2 : "val3", var3 : "val3"};
    });
</script>

로그인 후 복사

注意指令的(name, value)部分ng-repeat。这会通知 AngularJS 迭代对象的属性。该name 参数将被绑定到的属性名称和value参数将被绑定到的属性值。该name和value参数可以输出到HTML模板，就像任何其他JavaScript变量或对象的属性，你可以从上面的HTML模板见。

特殊的 ng-repeat 变量

该ng-repeat指令定义了一组特殊变量，您可以在迭代集合时使用这些变量。这些变量是：

$index
$first
$中
$last

该$index变量包含被迭代元素的索引。

的$first，$middle并且$last包含根据当前的项目是否正在迭代集合中的第一，中间或最后一个元素的布尔值。如果一个项目既不是第一个也不是最后一个，它就是“中间”。您可以使用这些变量使用例如生成不同的HTML ng-show/ ng-hide，ng-switch， ng-if和ng-include指令如前所述。

重复多个元素

到目前为止，您只看到了如何使用ng-repeat. 如果您想重复多个 HTML 元素，您必须将这些元素嵌套在容器元素中，并让容器元素具有该ng-repeat 元素，如下所示：

<div ng-repeat="(name, value) in myData.myObject">
   <div>{{name}}</li>
   <div>{{value}}</li>
</div>

로그인 후 복사

但是，将要重复的元素包装在根元素中可能并不总是可行的。因此 AngularJS 有ng-repeat-start和ng-repeat-end指令，用于标记开始和结束重复的元素。下面是一个例子：

<ol>
    <li ng-repeat-start="(name, value) in myData.myObject">{{name}}</li>
    <li ng-repeat-end>{{value}}</li>
</ol>

로그인 후 복사

此示例将为中的li每个属性重复这两个元素 myData.myObject。

过滤

上面介绍的一些指令支持过滤。本节将解释过滤的工作原理。

该ng-repeat指令可以接受这样的过滤器：

<div ng-repeat="item in myData.items | filter: itemFilter"></div>

로그인 후 복사

注意| filter: itemFilter上面声明的部分。那部分是过滤器定义。该| filter:部分告诉 AngularJS 将过滤器应用于 myData.items数组。该itemFilter是过滤函数的名称。此函数必须存在于$scope对象上，并且必须返回 true 或 false。如果过滤器函数返回 true，则ng-repeat指令使用数组中的元素。如果过滤器函数返回 false，则忽略该元素。下面是一个例子：

<script>
  angular.module("myapp", [])
    .controller("MyController", function($scope) {
      $scope.myData = {};
      $scope.myData.items  = [ {text : "one"}, {text : "two"}, {text : "three"}, {text : "four"} ];

      $scope.itemFilter = function(item) {
        if(item.text == "two") return false;
          return true;
        }
      }
    });
</script>

로그인 후 복사

格式化过滤器

AngularJS 带有一组内置格式过滤器，可以与插值指令和ng-bind. 以下是格式过滤器的列表：

过滤器	说明
`date`	根据给定的日期格式将变量格式化为日期
`currency`	将变量格式化为带有货币符号的数字
`number`	将变量格式化为数字
`lowercase`	将变量转换为小写
`uppercase`	将变量转换为大写
`json`	将变量转换为 JSON 字符串

这是一个日期过滤器示例：

<span>{{myData.theDate | date: &#39;dd-MM-yyyy&#39;}}</span>

로그인 후 복사

此示例显示了date可以根据| date: 部分后给出的日期格式模式格式化 JavaScript 日期对象的过滤器。它是myData.theDate 将被格式化为日期的属性。因此，它必须是一个 JavaScript 日期对象。

这是一个数字过滤器示例：

<span>{{myData.theNumber | number: 2}}</span>

로그인 후 복사

此示例将myData.theNumber变量格式化为带有 2 个小数位的数字。

下面是一个小写和大写过滤器示例：

<span>{{myData.mixedCaseText | lowercase}}</span>
<span>{{myData.mixedCaseText | uppercase}}</span>

로그인 후 복사

数组过滤器

AngularJS 还包含一组过滤或转换数组的数组过滤器。这些过滤器是：

数组过滤器：

过滤器	说明
`limitTo`	将数组限制为给定的大小，从数组中的某个索引开始。该`limitTo`过滤器也适用于字符串。
`filter`	通用过滤器。
`orderBy`	根据提供的条件对数组进行排序。

下面是一个limitTo例子：

<span>{{myData.theText | limitTo: 3}}</span>

로그인 후 복사

这将$scope myData.theText变量限制为 3 个字符的长度。如果将此过滤器应用于数组，则该数组将被限制为 3 个元素。

该filter过滤器是一种特殊的过滤器，可以做很多不同的事情。在最简单的形式中，它只是调用$scope对象上的函数。此函数必须返回trueor false。如果过滤器接受传递给它的值，则返回 True。如果过滤器不能接受该值，则返回 False。如果过滤器不能接受该值，则该值不包含在过滤产生的数组中。下面是一个例子：

<ol>
    <li ng-repeat="item in myData.items | filter:filterArray">
        {{item.text}} : {{$first}}, {{$middle}}, {{$last}}
    </li>
</ol>
<script>
    angular.module("myapp", [])
        .controller("MyController", function($scope) {
            $scope.myData = {};
            $scope.myData.items    = 
                [ {text : "one"}, {text : "two"}, {text : "three"}, {text : "four"} ];

            $scope.filterArray = function(item) {
                if(item.text == "two") return false;
                return true;
            }
        } );
</script>

로그인 후 복사

此示例调用filterArray()过滤掉具有text值为的属性的项目的函数two。

下面是一个orderBy例子：

<ol>
    <li ng-repeat="item in myData.items | orderBy:sortField:reverse">
        {{item.text}} : {{$first}}, {{$middle}}, {{$last}}
    </li>
</ol>
    
<script>
    angular.module("myapp", [])
            .controller("MyController", function($scope) {
                $scope.myData = {};
                $scope.myData.items    = [ {text : "one"}, {text : "two"}, {text : "three"}, {text : "four"} ];
                $scope.sortField = "text";
                $scope.reverse   = true;
            } );
</script>

로그인 후 복사

所述orderBy过滤器可以接受一个$scope变量作为参数。在此示例中，该变量名为sortField。此变量的值是已排序数据对象的属性名称，用于对数据对象进行排序。在此示例中，sortField 属性设置为text这意味着数据对象的text属性用于对数据对象进行排序。

该orderBy过滤器还可以采取的第二$scope变量作为参数。在此示例中，该变量名为reverse。该变量的值决定了数据对象是按自然顺序排序，还是按自然顺序排序。在这种情况下，reverse变量设置为true，这意味着数据对象将按相反顺序排序。

链接过滤器

可以通过简单地在过滤器部分中一个接一个地放置更多过滤器来链接过滤器。链接过滤器时，一个过滤器的输出用作链中下一个过滤器的输入。下面是一个例子：

<span>{{myData.theText | limitTo: 5 | uppercase}}</span>

로그인 후 복사

此示例首先myData.theText使用limitTo过滤器将字符串限制为 5 个字符，然后使用过滤器将 5 个字符转换为大写uppercase 。

将过滤器输出分配给变量

可以将过滤器的输出分配给一个临时变量，然后您可以稍后在视图中引用该变量。下面是一个例子：

<ol>
    <li ng-repeat="item in filteredItems = ( myData.items | filter:filterArray) ">
        {{item.text}} : {{$first}}, {{$middle}}, {{$last}}
    </li>
</ol>
<div>{{filteredItems.length}}</div>

로그인 후 복사

此示例将过滤的输出分配给filteredItems变量。该示例然后{{ }}在ol元素下的指令内引用此变量。

实现自定义过滤器

如果 AngularJS 过滤器不适合您的需要，您可以实现自己的过滤器。下面是一个例子：

<div>Filtered: {{myData.text | myFilter}}</div>
    
    
<script>
    var module = angular.module("myapp", []);

    module.filter(&#39;myFilter&#39;, function() {

        return function(stringValue) {
            return stringValue.substring(0,3);
        };
    });
</script>

로그인 후 복사

此示例向 AngularJS 注册了一个过滤器，它可以过滤字符串。过滤器返回字符串的前 3 个字符。过滤器以 name 注册myFilter。正如您在过滤器开头看到的那样，您在引用过滤器时必须使用该名称。

如果您的过滤器需要更多的输入参数，请在过滤器函数中添加更多参数，并在过滤器名称和:引用它时添加参数。下面是一个例子：

<div>Filtered: {{myData.text | myFilter :2:5}}</div>

<script>
    var module = angular.module("myapp", []);

    module.filter(&#39;myFilter&#39;, function() {

        return function(stringValue, startIndex, endIndex) {
            return stringValue.substring(parseInt(startIndex), parseInt(endIndex));
        };
    });
</script>

로그인 후 복사

注意过滤器引用 ( | myfilter:2:5) 现在在过滤器名称后面有两个值，每个值用冒号分隔。这两个值作为参数传递给过滤器。还要注意 filter 函数现在如何接受两个名为startIndex和的额外参数endIndex。这两个参数用于确定字符串的哪一部分作为子字符串从过滤器返回

更多编程相关知识，请访问：编程入门！！

위 내용은 Angularjs의 뷰와 지시문에 대해 자세히 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!