AngularJS 데모 프로젝트: AngularJS로 앱을 빌드하는 방법

게시 됨: 2020-09-10

풀스택 개발을 배우고 있다면 "AngularJS 프로젝트를 실행하는 방법"이라는 질문에 직면했을 것입니다. 이 기사에서는 AngularJS를 사용하여 앱을 빌드하는 방법에 대한 자세한 자습서를 공유하므로 걱정하지 마십시오.

이 프로젝트를 완료하면 AngularJS의 기본 사항과 구현에 익숙해지고 친구에게 자랑할 수 있는 작동하는 앱을 갖게 될 것입니다. 코드와 함께 다양한 개발 단계에 대한 단계를 나열했으므로 이 튜토리얼을 북마크에 추가할 수 있습니다.

코드를 구현하기 전에 코드를 이해해야 합니다. 그렇기 때문에 코드를 복사하여 붙여넣는 것을 권장하지 않습니다. 그러나 모든 코드 행이 어떻게 작동하는지 안다면 자유롭게 복사하여 붙여넣을 수 있습니다. 코드 작동 방식을 이해하면 가장 효율적으로 학습할 수 있습니다.

AngularJS 란 무엇입니까? 간략한 소개

AngularJS 프로젝트에 대해 논의하기 전에 먼저 기술에 대해 조금 이야기해 보겠습니다. AngularJS를 사용하면 사용자가 애플리케이션용 HTML을 확장할 수 있습니다. JavaScript를 기반으로 하는 프론트엔드 웹 프레임워크입니다. HTML은 웹 앱의 동적 보기에서 지연되며 Angular는 이 문제를 해결합니다.

AngularJS에는 질문을 하고 혼란을 제거할 수 있는 번성하는 사용자 및 개발자 커뮤니티가 있습니다. Angular는 사용자에게 데이터 바인딩, 컨트롤러 및 기타 여러 강력한 도구를 제공하여 웹 페이지의 프론트 엔드를 향상시킵니다. 튜토리얼에서 구현할 것이므로 프로젝트에서 많은 개념을 발견하게 될 것입니다.

초보자를 위한 AngularJS 프로젝트의 전제 조건

AngularJS 프로젝트 작업을 시작하기 전에 다음 개념에 익숙해야 합니다.

HTML

HTML은 HyperText Markup Language의 약자입니다. 모든 웹 페이지 구조를 담당하며 웹 개발을 위한 첫 번째 빌딩 블록입니다. 이 프로젝트 작업을 시작하기 전에 HTML의 구문, 해당 요소 및 구현에 익숙해야 합니다.

CSS

CSS는 Cascading Style Sheets의 약자이며 웹 페이지에 시각적 개체를 추가하기 위한 기본 언어입니다. 웹 페이지를 더 보기 좋게 만들고 더 쉽게 액세스할 수 있도록 하기 때문에 HTML만큼 중요합니다. HTML은 AngularJS 프로젝트의 첫 번째 단계에 필요하지만 나중에 CSS를 추가해야 합니다. 그렇기 때문에 초보자를 위한 AngularJS 프로젝트 작업을 시작하기 전에 이에 익숙해져야 합니다.

자바스크립트

AngularJS는 자바스크립트를 기반으로 합니다. JS 구문, 코드 및 구현에 익숙해지면 AngularJS의 많은 기술적 측면도 단순화할 수 있습니다. 이 작업을 시작하기 전에 JS의 기본 사항을 잘 이해하고 있는지 확인하십시오.

이러한 전제 조건 외에도 AngularJS의 기본 사항에도 익숙해야 합니다. 이 프로젝트는 HTML, CSS, JS 및 AngularJS에 대한 작업 지식이 있다고 가정합니다. 이제 문제를 해결했으므로 시작하겠습니다.

AngularJS 프로젝트 실행 방법 – 튜토리얼

이 튜토리얼에서는 AngularJS 스포츠 피드 앱을 빌드합니다. 스포츠 피드 앱은 경기 또는 이벤트에 대한 통계를 보여줍니다. 예를 들어, 경기의 스코어카드 또는 IPL 팀 스코어 테이블을 표시하는 앱을 작성할 수 있습니다. 백엔드 개발이 많이 필요하지 않기 때문에 스포츠 피드 앱에서 작업하기로 결정했습니다.

HTML

먼저 애플리케이션용 HTML을 만드는 것으로 시작합니다. 다음은 HTML 코드용 템플릿입니다.

<표>

<머리>

</thead>

<바디>

<td>{{$index + 1}}</td>

<td>

{{driver.Driver.givenName}} {{driver.Driver.familyName}}

</td>

<td>{{driver.Constructors[0].name}}</td>

<td>{{driver.points}}</td>

</tr>

</t바디>

</표>

</바디>

{{ 및 }}를 눈치채셨을 것입니다. 이를 표현식이라고 하며 필요한 값을 반환하기 위한 계산 작업을 수행할 수 있습니다. 예를 들어 다음은 몇 가지 유효한 표현입니다.

{{ 2 + 2 }}
{{ 내 이름 }}

JavaScript의 스니펫이라고 할 수 있습니다. 그러나 고급 논리를 구현하기 위해 표현식을 사용하지 않는 것이 가장 좋습니다. 그렇게 하려면 지시문을 사용해야 합니다. 표현식은 저수준 논리 구현에만 적합합니다. 표현식의 기본 작업은 필요한 애플리케이션 데이터를 HTML에 바인딩하는 것입니다.

배우기: 인도의 HTML 개발자 급여: 신입 및 경험자용

우리 강령의 지시문

AngularJS 프로젝트에서 작업하는 동안 발견할 가장 중요한 개념 중 하나는 지시문입니다. 지시문은 개별 요소에 특정 동작을 첨부해야 함을 AngularJS에 알리는 DOM 요소의 마커입니다. 지시문은 Angular에게 DOM 요소와 그 자식을 다른 DOM 요소로 바꾸는 것과 같은 다양한 작업을 수행하도록 지시할 수 있습니다. 대부분의 강력한 지시문은 "ng"가 Angular를 나타내는 "ng-"로 시작합니다.

다음은 애플리케이션과 함께 위의 코드에서 사용한 다양한 지시문입니다.

ng-app

이 지시문은 앱을 부트스트랩하고 범위를 정의합니다. AngularJS에 여러 앱을 가질 수 있고 각 앱의 시작점과 끝점을 프로그램에 알려주기 때문에 필수적인 지시문입니다.

ng 컨트롤러

이 지시문은 사용자 보기의 권한을 가질 컨트롤러를 정의합니다. 이 점에서 우리는 앱에서 드라이버 목록(driversList)을 제공할 driversController를 표시했습니다.

ng-반복

이 지시문은 Angular 개발자들 사이에서 가장 일반적으로 사용되는 것 중 하나입니다. 컬렉션을 통해 루핑하는 동안 템플릿 범위를 정의합니다.

Angular에는 많은 지시문이 있으며 초보자를 위한 더 많은 AngularJS 프로젝트에서 작업하면서 더 많은 응용 프로그램을 발견하게 될 것입니다. 그렇기 때문에 특정 기술을 배우면서 다른 프로젝트에 참여하는 것이 좋습니다.

컨트롤러

컨트롤러를 추가하지 않는 한 뷰를 갖는 것은 쓸모가 없습니다. 따라서 여기에 driversController를 추가합니다.

angular.module('F1FeederApp.controllers', []).

컨트롤러('드라이버 컨트롤러', 함수($scope) {

$scope.driversList = [

{

드라이버: {

주어진 이름: '세바스찬',

familyName: '베텔'

포인트: 322,

국적: "독일인",

생성자: [

{이름: "레드불"}

]

{

드라이버: {

주어진 이름: '페르난도',

familyName: '알론소'

포인트: 207,

국적: "스페인",

생성자: [

{이름: "페라리"}

]

}

];

});

눈치채셨을 수도 있는 고유 변수는 $scope입니다. 컨트롤러를 뷰와 연결하므로 이 변수를 컨트롤러에 매개변수로 전달합니다. $scope는 템플릿에서 사용할 모든 데이터를 보유하며 여기에 추가하는 모든 데이터는 보기에서 액세스할 수 있습니다.

지금은 정적 데이터 배열을 추가하고 나중에 프로젝트가 진행됨에 따라 교체하겠습니다.

먼저 컨트롤러를 app.js에 추가해 보겠습니다. 다음과 같아야 합니다.

angular.module('F1FeederApp', [

'F1FeederApp.controllers'

]);

이 작은 코드 줄은 앱을 초기화하고 앱이 의존하는 모듈을 등록했습니다. 이제 이 모든 정보를 index.html 파일에 추가해야 합니다.

<!DOCTYPE HTML>

<html>

<머리>

</head>

<표>

<머리>

</thead>

<바디>

<td>{{$index + 1}}</td>

<td>

{{driver.Driver.givenName}} {{driver.Driver.familyName}}

</td>

<td>{{driver.Constructors[0].name}}</td>

<td>{{driver.points}}</td>

</tr>

</t바디>

</표>

<스크립트 src="js/app.js"></script>

<스크립트 src="js/services.js"></script>

<스크립트 src="js/controllers.js"></script>

</바디>

</html>

이 단계에서 앱을 시작할 수 있습니다. 그러나 앱을 디버그해야 한다는 점을 염두에 두십시오. AngularJS 프로젝트를 실행하는 방법을 배우는 중요한 단계는 앱을 디버깅하는 것입니다.

서버에서 데이터 로드

이제 앱의 RESTful 서버에서 라이브 데이터를 가져오는 기능을 추가합니다. HTTP 서버와 통신하기 위해 Angularjs에는 $http 및 $resource의 두 가지 서비스가 있습니다. 우리 코드에서는 높은 수준의 추상화를 제공하는 $http를 사용할 것입니다. 서버 API 호출을 추상화하는 사용자 지정 서비스를 만들 것입니다. 데이터를 가져오고 $http를 둘러싼 래퍼가 됩니다. 따라서 services.js 파일에 다음 코드를 추가합니다.

angular.module('F1FeederApp.services', []).

팩토리('ergastAPI 서비스', 함수($http) {

var ergastAPI = {};

ergastAPI.getDrivers = 함수() {

$http({

메소드: 'JSONP',

URL: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'

});

}

ergastAPI를 반환합니다.

});

먼저 F1FeederApp.services라는 새 모듈을 만들고 ergastAPIservice 서비스를 추가했습니다. $http를 서비스에 매개변수로 전달했다는 점에 유의하십시오. 또한 Angular에 모듈을 앱에 추가하도록 지시할 것입니다. 이 모든 작업을 수행하려면 app.js의 코드를 다음으로 바꿔야 합니다.

angular.module('F1FeederApp', [

'F1FeederApp.controllers',

'F1FeederApp.services'

]);

controller.js를 약간 수정하고 ergastAPIservice를 종속성 형태로 추가하면 이 단계가 완료됩니다.

angular.module('F1FeederApp.controllers', []).

컨트롤러('드라이버 컨트롤러', function($scope, ergastAPIservice) {

$scope.nameFilter = null;

$scope.driversList = [];

ergastAPIservice.getDrivers().success(함수(응답) {

//관련 데이터를 얻기 위해 응답을 파헤친다.

$scope.driversList = 응답.MRData.StandingsTable.StandingsLists[0].DriverStandings;

});

코드가 작동하는지 확인하려면 애플리케이션을 다시 로드하세요. 템플릿을 수정하지 않고 nameFilter 변수만 포함했음을 알 수 있습니다. 다음 섹션에서는 해당 변수를 사용합니다.

필터 적용

지금까지 앱에 기능적 컨트롤러를 추가했습니다. 이제 텍스트 검색 입력 막대를 추가하여 더 많은 기능을 추가할 것입니다. <body> 태그 아래의 index.html에 다음 코드를 포함할 수 있습니다.

<입력 유형=”텍스트” ng-model=”nameFilter” 자리 표시자=”검색…”/>

여기서는 "ng-model" 지시문을 사용하고 있습니다. 텍스트 필드를 "$scope.nameFilter" 변수에 바인딩합니다. 이 지시문은 변수 값이 입력 값에 따라 업데이트된 상태로 유지되도록 합니다. 데이터를 출력하기 전에 "nameFilter"에 있는 값으로 "driversList" 배열을 필터링해야 한다고 "ng-repeat"에 알려 보겠습니다.

여기에서 두 가지 다른 데이터 바인딩을 수행하고 있습니다. 첫째, 검색 필드에 값을 입력할 때마다 Angular는 $scope.nameFilter 변수가 그에 따라 업데이트되도록 합니다. 둘째, nameFilter가 ng-repeat를 업데이트하자마자 여기에 첨부된 두 번째 지시문이 새 값과 업데이트를 가져옵니다.

Driver.familyName 및 Driver.givenName만 사용하여 필터링하려고 한다고 가정합니다. 다음과 같이 $scope.driversList = [] 아래에 driversController를 추가해야 합니다.

$scope.searchFilter = 함수(드라이버) {

var 키워드 = new RegExp($scope.nameFilter, 'i');

반환 !$scope.name필터 || 키워드.테스트(드라이버.드라이버.givenName) || 키워드.테스트(드라이버.드라이버.패밀리 이름);

};

이 프로세스를 완료하려면 ng-repeat 지시문으로 라인을 업데이트하기만 하면 됩니다.

앱을 다시 로드하여 코드가 작동하는지 확인할 수 있습니다. 이제 앱에 검색 기능이 있습니다. 다음으로 경로를 추가합니다.

경로 추가

드라이버의 세부 정보를 보여주는 페이지를 만들어야 합니다. 페이지는 사용자가 드라이버를 클릭하고 자신의 경력 정보를 볼 수 있도록 해야 합니다. app.js 파일에 $routeProvider 서비스를 추가하는 것으로 시작하겠습니다. 다양한 응용 프로그램 경로를 적절하게 처리하는 데 도움이 됩니다.

이제 드라이버 정보 경로와 챔피언십 점수판 경로를 추가하겠습니다. 이제 app.js 파일은 다음과 같습니다.

angular.module('F1FeederApp', [

'F1FeederApp.services',

'F1FeederApp.controllers',

'엔로트'

]).

config(['$routeProvider', function($routeProvider) {

$routeProvider.

when("/drivers", {templateUrl: "partials/drivers.html", 컨트롤러: "driversController"}).

when("/drivers/:id", {templateUrl: "partials/driver.html", 컨트롤러: "driverController"}).

그렇지 않으면({redirectTo: '/드라이버'});

}]);

이 코드를 추가한 후 사용자가 https://domain/#drivers로 이동하면 driversController를 로드하고 부분 보기를 찾습니다. 지금까지 이 튜토리얼을 따라왔다면 한 가지 알아차렸을 것입니다. 부분 보기를 추가하지 않았습니다! 따라서 다음 단계는 애플리케이션에 동일한 항목을 추가하는 것입니다.

부분 보기 추가

AngularJS의 가장 큰 특징은 다양한 뷰와 컨트롤러에 서로 다른 경로를 바인딩할 수 있다는 것입니다. 그러나 AngularJS가 이 작업을 수행하려면 해당 부분 보기를 렌더링할 수 있는 위치를 알아야 합니다.

그래서 우리는 ng-view 지시어를 사용하고 그것을 index.html 파일에 추가합니다:

<!DOCTYPE HTML>

<html>

<머리>

</head>

<ng-view></ng-view>

<스크립트 src="js/app.js"></script>

<스크립트 src="js/services.js"></script>

<스크립트 src="js/controllers.js"></script>

</바디>

</html>

이 구현으로 인해 앱 경로를 탐색할 때 Angular는 관련 보기를 로드하고 렌더링합니다. <ng-view> 태그를 통해 렌더링할 위치를 결정합니다. 이제 partials/drivers.html이라는 파일을 만들고 여기에 챔피언십 테이블의 HTML 코드를 넣으면 됩니다. 그 동안 우리는 또한 우리의 운전자 정보 경로를 운전자의 이름과 연결할 것입니다:

<입력 유형=”텍스트” ng-model=”nameFilter” 자리 표시자=”검색…”/>

<표>

<머리>

</thead>

<바디>

<td>{{$index + 1}}</td>

<td>

{{driver.Driver.givenName}} {{driver.Driver.familyName}}

</a>

</td>

<td>{{driver.Constructors[0].name}}</td>

<td>{{driver.points}}</td>

</tr>

</t바디>

</표>

우리는 개발의 마지막 단계에 도달하고 있습니다. 드라이버 정보 페이지에는 데이터가 필요하므로 추가할 것입니다. 그렇게 하려면 services.js에 다음 코드를 작성해야 합니다.

angular.module('F1FeederApp.services', [])

.factory('ergastAPI 서비스', 함수($http) {

var ergastAPI = {};

ergastAPI.getDrivers = 함수() {

$http({

메소드: 'JSONP',

URL: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'

});

}

ergastAPI.getDriverDetails = 기능(ID) {

$http({

메소드: 'JSONP',

URL: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json?callback=JSON_CALLBACK'

});

}

ergastAPI.getDriverRaces = 기능(ID) {

$http({

메소드: 'JSONP',

URL: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/results.json?callback=JSON_CALLBACK'

});

}

ergastAPI를 반환합니다.

});

이제 controllers.js를 편집합니다. 우리는 모든 운전자의 ID를 서비스에 연결하는 것을 목표로 하므로 정보 검색은 요청된 운전자에 한정됩니다.

angular.module('F1FeederApp.controllers', []).

/* 드라이버 컨트롤러 */

컨트롤러('드라이버 컨트롤러', function($scope, ergastAPIservice) {

$scope.nameFilter = null;

$scope.driversList = [];

$scope.searchFilter = 함수(드라이버) {

var re = 새로운 RegExp($scope.nameFilter, 'i');

반환 !$scope.name필터 || re.test(driver.Driver.givenName) || re.test(드라이버.드라이버.패밀리 이름);

};

ergastAPIservice.getDrivers().success(함수(응답) {

//관련 데이터를 얻기 위해 응답을 파헤친다.

$scope.driversList = 응답.MRData.StandingsTable.StandingsLists[0].DriverStandings;

});

}).

/* 드라이버 컨트롤러 */

컨트롤러('드라이버 컨트롤러', function($scope, $routeParams, ergastAPIservice) {

$scope.id = $routeParams.id;

$scope.races = [];

$scope.driver = null;

ergastAPIservice.getDriverDetails($scope.id).success(함수(응답) {

$scope.driver = 응답.MRData.StandingsTable.StandingsLists[0].DriverStandings[0];

});

ergastAPIservice.getDriverRaces($scope.id).success(함수(응답) {

$scope.races = 응답.MRData.RaceTable.Races;

});

드라이버 컨트롤러에 $routePrams 서비스를 추가했습니다. 이를 통해 URL 매개변수에 액세스할 수 있으며 중요한 단계입니다.

이제 필요한 모든 데이터를 추가하고 부분 보기의 나머지 부분만 처리하면 되므로 partials/driver.html이라는 파일을 만들 것입니다. 아래 코드에서 ng-show 지시문을 사용했습니다. 이 지시문은 표현식이 참일 때 앱이 필요한 HTML 요소만 표시하도록 합니다. 즉, 조건이 null인 경우에도 앱은 HTML 요소를 표시하지 않습니다. 코드는 다음과 같습니다.

<섹션 ID=”메인”>

</div>

국가: {{driver.Driver.nationality}} <br/>

팀: {{driver.Constructors[0].name}}<br/>

출생: {{driver.Driver.dateOfBirth}}<br/>

</div>

</nav>

<테이블 클래스 = "결과 테이블">

<머리>

<tr><th colspan=”5″>Formula 1 2013 결과</th></tr>

</thead>

<바디>

<tr>

</tr>

<td>{{race.round}}</td>

<td><img src="img/flags/{{race.Circuit.Location.country}}.png" />{{race.raceName}}</td>

<td>{{race.Results[0].Constructor.name}}</td>

<td>{{race.Results[0].grid}}</td>

<td>{{race.Results[0].position}}</td>

</tr>

</t바디>

</표>

</div>

</섹션>

최종 단계(CSS)

이제 제대로 작동하는 스포츠 피더 앱이 있습니다. 이전에 논의한 바와 같이 CSS는 웹페이지를 매력적으로 보이게 하는 데 중점을 둡니다. 따라서 이 단계에서는 앱에 CSS를 추가하고 모양을 향상시킬 수 있는 독립성을 갖게 됩니다. 글꼴을 변경하거나, 배경을 변경하거나, 다른 이미지를 추가하거나, 일부 전환에 애니메이션을 적용하여 애플리케이션의 UI를 개선할 수 있습니다. 프로젝트의 기술 섹션이 완료되었습니다.

확인: 인도의 전체 스택 개발자 급여

개발에 대해 자세히 알아보기

이제 AngularJS 앱을 구축했습니다! 이 튜토리얼이 즐거웠기를 바랍니다. 기억

Angular는 많은 기능을 갖춘 매우 강력한 프레임워크입니다. 이 기사에 있는 것들은 Angular가 할 수 있는 것들에 비해 매우 적습니다. 고급 AngularJS 프로젝트에서 작업하면서 강력한 기능을 더 많이 발견하게 될 것입니다.

전체 스택 개발에 대해 자세히 알아보려면 블로그를 방문하는 것이 좋습니다. 이 분야의 다양한 측면에 대한 수많은 리소스를 찾을 수 있습니다. 다음은 추가 읽을 내용입니다.

풀스택 개발자가 되기 위한 10가지 기술
풀스택 개발자가 되어야 하는 이유
전체 스택 개발자 시리즈가 되는 방법

반면에 전체 스택 개발 과정을 수강하고 프로젝트, 비디오 및 과제를 통해 업계 전문가로부터 배울 수도 있습니다.

전체 스택 개발에 대해 자세히 알아보려면 upGrad & IIIT-B의 전체 스택 소프트웨어 개발 PG 디플로마를 확인하세요. 이 PG 디플로마는 일하는 전문가를 위해 설계되었으며 500시간 이상의 엄격한 교육, 9개 이상의 프로젝트 및 과제를 제공합니다. , IIIT-B 동문 자격, 실질적인 실습 캡스톤 프로젝트 및 최고의 기업과의 취업 지원.

당신의 꿈의 직업에 착륙

소프트웨어 개발에서 업그레이드 및 IIIT-BANGALORE의 PG 디플로마

오늘 등록