AngularJS Hello World 애플리케이션: 첫 번째 예제 프로그램

작성자 : 제임스 하트만 제임스 하트만
Hours 업데이트

AngularJS 애플리케이션의 성능을 확인하는 가장 좋은 방법은 Angular.JS에서 첫 번째 기본 프로그램인 "Hello World" 앱을 만드는 것입니다.

AngularJS 개발에 사용할 수 있는 통합 개발 환경은 다양하며, 인기 있는 환경 중 일부는 아래에 언급되어 있습니다. 이 예에서는 Webstorm 우리 IDE로.

  1. Webstorm
  2. Sublime Text
  3. AngularJS와 Eclipse
  4. 비주얼 스튜디오

안녕하세요, AngularJS

아래 예는 AngularJS에서 첫 번째 "Hello world" 애플리케이션을 만드는 가장 쉬운 방법을 보여줍니다.

AngularJS Hello World 프로그램

<!DOCTYPE html>  
<html ng-app="app">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

코드 설명 :

  1. "ng-앱” 키워드는 이 애플리케이션이 각도 js 애플리케이션으로 간주되어야 함을 나타내는 데 사용됩니다. 이 애플리케이션에는 어떤 이름이라도 지정할 수 있습니다.
  2. 컨트롤러는 비즈니스 로직을 유지하는 데 사용됩니다. h1 태그에서 우리는 "HelloWorld"를 표시하는 로직을 포함하는 컨트롤러에 액세스하려고 합니다. 따라서 이 태그에서 "HelloWorldCtrl"이라는 컨트롤러에 액세스하려고 한다고 말할 수 있습니다.
  3. 우리는 "Hello World" 메시지를 표시하기 위한 자리 표시자에 불과한 "message"라는 멤버 변수를 사용하고 있습니다.
  4. "스크립트 태그"는 각도 js에 필요한 모든 기능을 갖춘angular.js 스크립트를 참조하는 데 사용됩니다. 이 참조가 없으면 AngularJS 함수를 사용하려고 하면 작동하지 않습니다.
  5. "컨트롤러"는 실제로 컨트롤러인 비즈니스 로직을 생성하는 곳입니다. 각 키워드의 구체적인 내용은 다음 장에서 설명하겠습니다. 중요한 점은 2단계에서 참조되는 'HelloWorldCtrl'이라는 컨트롤러 메서드를 정의하고 있다는 점입니다.
  6. 우리는 코드가 이 컨트롤러를 호출할 때 호출될 "함수"를 생성하고 있습니다. $scope 객체는 Angular.js 내에서 사용되는 전역 객체인 AngularJS의 특수 객체입니다. $scope 객체는 컨트롤러와 뷰 사이의 데이터를 관리하는 데 사용됩니다.
  7. 우리는 "message"라는 멤버 변수를 생성하여 "HelloWorld" 값을 할당하고 멤버 변수를 범위 개체에 연결합니다.

주의사항: ng-controller 지시문은 다음에 정의된 키워드입니다. AngularJS와 (2단계) 애플리케이션에서 컨트롤러를 정의하는 데 사용됩니다. 여기 애플리케이션에서는 ng-controller 키워드를 사용하여 'HelloWorldCtrl'이라는 컨트롤러를 정의했습니다. 컨트롤러의 실제 로직은 (5단계)에서 생성됩니다.

명령이 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음 출력이 표시됩니다.

출력:

'Hello World'라는 메시지가 표시됩니다.

AngularJS Hello World 프로그램