AngularJS를 사용하여 대규모 단일 페이지 애플리케이션(SPA) 개발 - 기술 번역
소개
(SPA) 이런 이름에는 무슨 내용이 들어있나요? 클래식 사인펠드 TV 쇼의 팬이라면 도나 창이라는 이름을 꼭 아실 겁니다. Donna를 만난 Jerry는 사실 중국인이 아니었지만, 침술에 대한 관심 등 중국에 대한 고유한 인상을 이야기하다가 우연히 중국 억양이 있는 단어를 발음했기 때문에 이름을 Chang으로 줄였습니다. Donna는 George의 어머니와 전화 통화를 하고 (공자의 말을 인용하여) 몇 가지 조언을 해주었습니다. George가 Donna를 부모에게 소개했을 때 George의 어머니는 Donna가 중국인이 아니라는 것을 알고 Donna의 제안을 받아들이지 않았습니다.
SPA(Single Page Reference)는 A 싱글을 제공하는 것을 목표로 하는 목적으로 정의됩니다. 데스크톱 애플리케이션에 가까운 원활한 사용자 경험을 제공하는 웹 페이지 애플리케이션 또는 웹 사이트 SPA에서는 단일 페이지가 로드되거나 관련 리소스가 로드될 때 HTML, JavaScript 및 CSS와 같은 모든 필수 코드를 가져옵니다. 요청 시 페이지에 동적으로 로드되고 추가되는 경우가 많습니다. HTML5에 도입된 것과 같은 최신 웹 기술은 애플리케이션에서 서로를 인식할 수 있는 독립적인 논리적 페이지와 페이지를 다시 로드하지 않고도 탐색할 수 있는 기능을 제공합니다. 단일 페이지 애플리케이션과의 상호 작용은 종종 백그라운드에서 웹 서버와 동적으로 상호 작용하도록 설계됩니다.
그러면 어떻게 해야 할까요? 이 기술은 ASP.NET의 마스터 페이지와 비교됩니까? ASP.NET의 마스터 페이지를 사용하면 응용 프로그램에서 페이지에 대한 페이지를 만들 수 있다는 것이 사실입니다. 단일 마스터 페이지는 전체 애플리케이션의 모든 페이지(또는 페이지 그룹)에 적용할 모양과 표준 작업을 정의할 수 있습니다. 그런 다음 사용자가 표시할 콘텐츠에 대해 별도의 페이지를 만들 수 있습니다. 콘텐츠 페이지에 요청하면 마스터 페이지의 레이아웃과 콘텐츠 페이지의 콘텐츠를 함께 혼합하여 출력을 생성합니다.
SPA 및 ASP 구현에 대해 자세히 알아보세요. 즉, SPA는 콘텐츠 페이지를 보유하는 간단한 셸 페이지로 간주할 수 있습니다. SPA의 셸 페이지를 다시 로드할 수 없다는 점만 제외하면 마스터 페이지와 같습니다. 마스터 페이지처럼 각각의 새 페이지 요청에 따라 실행됩니다.
아마도 "Single Page Application"은 Donna Cheng과 같은 불운한 이름일 것입니다. 이 기술은 수백 페이지와 수천 명의 사용자를 포함할 수 있는 기업 규모로 확장해야 하는 웹 애플리케이션을 개발하는 데 적합하지 않다고 생각합니다.
이 글의 목표는 인증, 권한 부여, 세션 상태 및 기타 기능을 포함하여 수천 명의 사용자를 지원할 수 있는 단일 페이지 애플리케이션을 기반으로 수백 페이지의 콘텐츠로 구성된 엔터프라이즈급 애플리케이션을 개발하는 것입니다. .
AngularJS - 개요
이 글의 예시에는 사용자 계정 생성/업데이트, 고객 및 제품 생성/업데이트 등의 기능이 포함되어 있습니다. 또한 사용자는 모든 정보에 대해 쿼리를 수행하고 판매 주문을 생성 및 추적할 수 있습니다. 이러한 기능을 구현하기 위해 본 샘플은 AngularJS를 기반으로 개발되었습니다. AngularJS는 Google 및 AngularJS 커뮤니티의 개발자가 유지 관리하는 오픈 소스 웹 애플리케이션 프레임워크입니다.
AngularJS는 클라이언트 측에서 단일 페이지 애플리케이션을 생성하는 데 HTML, CSS 및 JavaScript만 필요합니다. 그 목표는 개발 및 테스트를 더 쉽게 만들고 MVC 웹 애플리케이션의 성능을 향상시키는 것입니다.
이 라이브러리는 HTML에 포함된 다른 사용자 정의 태그 속성을 읽은 다음 이 사용자 정의 속성의 지침을 따르고 페이지 I/O를 생성된 모듈의 표준 JavaScript 변수와 결합합니다. 이러한 JavaScript 표준 변수의 값은 수동으로 설정하거나 정적 또는 동적 JSON 데이터 소스에서 얻을 수 있습니다.
AngularJS 시작하기 - 쉘 페이지, 모듈 및 경로
가장 먼저 해야 할 일은 AngularJS 프레임워크를 프로젝트에 다운로드하는 것입니다. 이 프레임워크는 http://www.php.cn/에서 얻을 수 있습니다. 기사 MS Visual Studio Web Express 2013 Edition을 사용하여 개발되었으므로 다음 명령을 사용하여 Nuget 패키지에서 AngularJS를 설치했습니다.
Install-Package AngularJS -Version 1.2.21
in Nuget 패키지 관리 콘솔 을 간단하고 유연하게 유지하기 위해 빈 Visual Studio 웹 애플리케이션 프로젝트를 만들고 Microsoft Web API 2 라이브러리를 핵심 참조로 선택했습니다. 이 애플리케이션은 Web API 2 라이브러리를 사용하여 서버를 구현합니다. RESTful API에 대한 부수적 요청.
이제 AngularJS를 사용하여 SPA 애플리케이션을 만들 때 가장 먼저 해야 할 두 가지는 콘텐츠 페이지를 가져오기 위한 쉘 페이지와 라우팅 테이블을 설정하는 것입니다. 처음에는 쉘 페이지에 팀 AngularJS만 필요합니다. 위의
<!DOCTYPE html> <html lang="en"> <head> <title>AngularJS Shell Page example</title> </head> <body> <p> <ul> <li><a href="#Customers/AddNewCustomer">Add New Customer</a></li> <li><a href="#Customers/CustomerInquiry">Show Customers</a></li> </ul> </p> <!-- ng-view directive to tell AngularJS where to inject content pages --> <p ng-view></p> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script src="app.js"></script> </body> </html>
콘텐츠 페이지를 렌더링해야 하는 위치를 AngularJS에 알려주는 JavaScript 라이브러리 및 ng-view에 대한 참조입니다. 쉘 페이지 예제에서는 여러 링크가 AngularJS 경로에 매핑됩니다. p 태그의 ng-view 지시문은 현재 경로가 변경될 때마다 포함된 보기도 $를 기반으로 AngularJS의 $route 서비스를 보완하기 위해 선택한 경로의 렌더링된 콘텐츠 페이지를 쉘 페이지에 포함할 수 있는 지시문입니다. 예를 들어 사용자가 "새 고객 추가" 링크를 선택하면 AngularJS는 ng-view가 있는 p에 새 고객을 추가하기 위한 콘텐츠를 렌더링합니다. HTML 조각 .
다음 app.js 파일도 셸 페이지에서 참조됩니다. 이 파일의 JavaScript는 애플리케이션을 위한 AngularJS 모듈을 생성합니다. 또한 애플리케이션에 대한 모든 라우팅 구성이 이 파일에 정의됩니다. AngularJS 모듈은 애플리케이션의 다양한 부분을 캡슐화하는 컨테이너로 생각할 수 있습니다. 대부분의 애플리케이션에는 애플리케이션의 여러 부분을 초기화하고 연결하는 기본 메서드가 있습니다. 반면에 AngularJS 애플리케이션에는 기본 메소드가 없으며 대신 모듈이 애플리케이션의 시작 및 구성 방법을 선언적으로 지정하도록 허용하지만 이 기사의 샘플 애플리케이션에는 애플리케이션의 여러 개별 부분이 있지만 하나의 AngularJS 모듈만 있습니다. (고객, 제품, 주문 및 사용자).
이제 app.js의 주요 목적은 아래와 같이 AngularJS 라우팅을 설정하는 것입니다. AngularJS의 $routeProvider 서비스는 Uri를 패턴과 일치시키는 when() 메서드를 허용합니다. 일치하는 항목이 발견되면 개별 페이지의 HTML 콘텐츠는 다음의 제어를 따릅니다. 관련 콘텐츠 컨트롤러 파일은 컨트롤러 파일과 함께 셸 페이지에 로드됩니다. 컨트롤러 파일은 특정 경로 요청 콘텐츠에 대한 참조를 얻는 단순한 JavaScript 파일입니다.
//Define an angular module for our app
var sampleApp = angular.module('sampleApp', []);
//Define Routing for the application
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/Customers/AddNewCustomer', {
templateUrl: 'Customers/AddNewCustomer.html',
controller: 'AddNewCustomerController'
}).
when('/Customers/CustomerInquiry', {
templateUrl: 'Customers/CustomerInquiry.html',
controller: 'CustomerInquiryController'
}).
otherwise({
redirectTo: '/Customers/AddNewCustomer'
});
}]);AngularJS 컨트롤러
AngularJS 컨트롤러는 특정 범위에 바인딩된 기본 JavaScript 함수에 지나지 않습니다. 컨트롤러는 뷰에 논리를 추가하는 데 사용됩니다. 보기는 HTML 페이지입니다. 이러한 페이지는 단순한 데이터 표시를 위한 것입니다. 데이터를 이러한 HTML 페이지에 바인딩하기 위해 양방향 데이터 바인딩을 사용합니다. 기본적으로 모델(즉, 데이터)을 데이터와 결합하는 것은 컨트롤러의 책임입니다.
<p ng-controller="customerController"> <input ng-model="FirstName" type="text" style="width: 300px" /> <input ng-model="LastName" type="text" style="width: 300px" /> <p> <button class="btn btn-primary btn-large" ng-click="createCustomer()"/>Create</button>
위 AddCustomer 템플릿의 경우 ng-controller 지시문은 모든 데이터 바인딩 및 JavaScript를 실행하는 JavaScript 함수 customerController를 참조합니다. 해당 뷰에 대한 기능을 제공합니다.
function customerController($scope)
{
$scope.FirstName = "William";
$scope.LastName = "Gates";
$scope.createCustomer = function () {
var customer = $scope.createCustomerObject();
customerService.createCustomer(customer,
$scope.createCustomerCompleted,
$scope.createCustomerError);
}
}기본 제공 - 확장성 문제
나는 동안 이 기사에 대한 강력한 프로그램을 개발 중이었는데, 단일 페이지 애플리케이션을 적용할 때 첫 번째 확장성 문제 중 두 가지가 명백해졌습니다. 실제로 AngularJS에서는 애플리케이션 시작 시 애플리케이션의 셸 페이지에 있는 모든 JavaScript 파일과 컨트롤러를 도입하고 다운로드해야 하므로 수백 개의 JavaScript 파일이 있을 수 있습니다. 그다지 이상적으로 보이지는 않네요. 내가 직면한 또 다른 문제는 AngularJS의 라우팅 테이블이었습니다. 내가 찾은 모든 예에는 모든 경로가 하드코딩되어 있습니다. 그리고 제가 원하는 것은 라우팅 테이블에 수백 개의 라우팅 기록이 들어있는 솔루션이 아닙니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7546
15
1382
52
83
11
57
19
21
90
Edge 브라우저와 함께 제공되는 번역 웹 페이지가 누락된 경우 어떻게 해야 합니까?
Mar 14, 2024 pm 08:50 PM
엣지 브라우저에는 언제 어디서나 번역할 수 있는 번역 기능이 있어 사용자에게 큰 편리함을 제공합니다. 그러나 많은 사용자들은 내장된 번역 웹 페이지가 누락되었다고 말합니다. 그러면 엣지 브라우저가 자동으로 어떻게 해야 합니까? 내가 가져온 번역 페이지가 없어졌나요? Edge 브라우저와 함께 제공되는 번역된 웹 페이지가 누락된 경우 이를 복원하는 방법을 이 사이트에서 소개하겠습니다. Edge 브라우저에 포함된 번역 웹페이지가 누락되어 복원하는 방법 1. 번역 기능이 활성화되어 있는지 확인하십시오. Edge 브라우저에서 오른쪽 상단에 있는 세 개의 점 아이콘을 클릭한 후 "설정" 옵션을 선택하십시오. 설정 페이지 왼쪽에서 언어 옵션을 선택하세요. '번역'을 확인하세요.
자막 없이 영화를 본다고 걱정하지 마세요! Xiaomi는 일본어 및 한국어 번역을 위한 Xiaoai 번역 실시간 자막 출시를 발표했습니다.
Jul 22, 2024 pm 02:11 PM
7월 22일 소식에 따르면, 오늘 샤오미 더페이퍼 OS 공식 웨이보에서는 샤오아이 번역이 업그레이드됐다고 발표했다. 일본어와 한국어 번역에 실시간 자막이 추가됐고, 자막 없는 영상과 라이브 회의도 전사 및 번역이 가능해졌다. 실시간. 대면동시통역은 중국어, 영어, 일본어, 한국어, 러시아어, 포르투갈어, 스페인어, 이탈리아어, 프랑스어, 독일어, 인도네시아어, 힌디어 등 12개 언어 번역을 지원합니다. 위 기능은 현재 다음 세 가지 새로운 휴대폰만 지원합니다. Xiaomi MIX Fold 4 Xiaomi MIX Flip Redmi K70 Extreme Edition 2021년에는 Xiao Ai의 AI 자막이 일본어 및 한국어 번역에 추가될 예정인 것으로 알려졌습니다. AI 자막은 샤오미가 자체 개발한 동시통역 기술을 사용해 더 빠르고 안정적이며 정확한 자막 읽기 경험을 제공합니다. 1. 공식 성명에 따르면 Xiaoai 번역기는 오디오 및 비디오 장소에서만 사용할 수 있는 것이 아닙니다.
Sogou 브라우저를 번역하는 방법
Feb 01, 2024 am 11:09 AM
Sogou 브라우저는 어떻게 번역하나요? 우리가 일반적으로 정보를 확인하기 위해 Sogou 브라우저를 사용할 때 영어로 된 일부 웹사이트를 보게 됩니다. 왜냐하면 웹사이트를 탐색하는 것이 매우 어렵기 때문입니다. 이런 상황이 발생합니다! Sogou 브라우저에는 번역 버튼이 내장되어 있습니다. 단 한 번의 클릭만으로 Sogou 브라우저가 자동으로 전체 웹페이지를 번역해 줍니다. 작동 방법을 모르신다면 편집자가 Sogou 브라우저에서 번역하는 방법에 대한 구체적인 단계를 정리했습니다. 방법을 모르신다면 저를 따라가서 읽어보세요! Sogou 브라우저 번역 방법 1. Sogou 브라우저를 열고 오른쪽 상단의 번역 아이콘을 클릭합니다. 2. 번역 텍스트 유형을 선택한 다음 번역해야 하는 텍스트를 입력합니다. 3. Sogou 브라우저가 자동으로 텍스트를 번역합니다. 이로써 위의 Sogou Browsing 작업이 모두 완료되었습니다.
Google 크롬 내장 번역이 실패하는 문제를 해결하는 방법은 무엇입니까?
Mar 13, 2024 pm 08:46 PM
브라우저에는 일반적으로 번역 기능이 내장되어 있으므로 외국어 웹사이트를 탐색할 때 이해하지 못할까 봐 걱정할 필요가 없습니다! Chrome도 예외는 아니지만 일부 사용자는 Google Chrome의 번역 기능을 열 때 응답이 없거나 실패하는 것을 발견합니다. 내가 찾은 최신 솔루션을 사용해 볼 수 있습니다. 작업 튜토리얼: 오른쪽 상단 모서리에 있는 세 개의 점을 클릭하고 설정을 클릭합니다. 언어 추가를 클릭하고, 영어와 중국어를 추가한 후, 영어 설정은 해당 언어로 웹페이지를 번역할지 묻습니다. 중국어 설정은 웹페이지를 해당 언어로 표시하며, 그 전에 중국어를 맨 위로 이동해야 합니다. 기본 언어로 설정할 수 있습니다. 웹 페이지를 열었는데 번역 옵션이 팝업되지 않으면 마우스 오른쪽 버튼을 클릭하고 중국어 번역, 확인을 선택하세요.
JavaScript 기반 실시간 번역 도구 구축
Aug 09, 2023 pm 07:22 PM
JavaScript 기반의 실시간 번역 도구 구축 서문 세계화에 대한 요구가 증가하고 국경 간 교류 및 교환이 빈번하게 발생함에 따라 실시간 번역 도구는 매우 중요한 응용 프로그램이 되었습니다. JavaScript와 일부 기존 API를 활용하여 간단하지만 유용한 실시간 번역 도구를 구축할 수 있습니다. 이 기사에서는 JavaScript를 기반으로 이 기능을 구현하는 방법을 코드 예제와 함께 소개합니다. 구현 단계 1단계: HTML 구조 생성 먼저 간단한 HTML을 생성해야 합니다.
Google 크롬이 중국어를 번역할 수 없는 이유는 무엇인가요?
Mar 11, 2024 pm 04:04 PM
Google 크롬이 중국어를 번역할 수 없는 이유는 무엇입니까? 우리 모두 알고 있듯이 Google 크롬은 번역 기능이 내장된 브라우저 중 하나입니다. 이 브라우저에서 다른 나라에서 작성된 페이지를 탐색하면 브라우저가 자동으로 해당 페이지를 중국어로 번역한다고 합니다. 현재로서는 설정에서 수정해야 합니다. 다음으로, 편집자는 Google 크롬이 중국어로 번역할 수 없는 문제에 대한 해결책을 제시할 것입니다. 관심 있는 친구들은 와서 살펴볼 수 있습니다. Google 크롬은 중국어 솔루션을 번역할 수 없습니다. 1. 로컬 호스트 파일을 수정합니다. 호스트는 확장자가 없는 시스템 파일입니다. 주요 기능은 IP 주소와 호스트 이름 간의 매핑 관계를 정의하는 것입니다. 매핑 IP 주소입니다.
Sogou Browser가 웹 페이지를 번역할 수 없는 문제를 해결하는 방법
Jan 29, 2024 pm 09:18 PM
Sogou Browser가 이 웹페이지를 번역할 수 없으면 어떻게 해야 합니까? Sogou 브라우저는 매우 사용하기 쉬운 다기능 브라우저입니다. 웹 페이지 번역 기능은 매우 강력하며 공부와 업무에서 대부분의 문제를 해결하는 데 도움이 됩니다. 그러나 일부 친구들은 Sogou 브라우저에 이 웹 페이지를 번역할 수 없는 문제가 있다고 보고했습니다. 이는 잘못된 작동으로 인해 발생할 수 있습니다. 아래에서는 Sogou 브라우저가 번역할 수 없는 문제를 알려드리겠습니다. 번역하세요. 이 페이지 솔루션을 번역하세요. Sogou 브라우저는 이 웹페이지를 번역할 수 없습니다. 해결 방법 1: 1. Sogou 브라우저를 다운로드하여 설치합니다. 2. Sogou 브라우저를 엽니다. 3. 영어 웹사이트를 엽니다. 4. 웹사이트가 열린 후 오른쪽 상단에 있는 번역 아이콘을 클릭합니다. 5. 번역을 선택합니다. 텍스트를 입력하고 현재 웹페이지 번역을 클릭하세요. 6
iOS 17.2: iPhone의 작업 버튼을 사용하여 음성을 번역하는 방법
Dec 15, 2023 pm 11:21 PM
iOS 17.2에서는 iPhone 작업 버튼에 대한 새로운 사용자 정의 번역 옵션으로 의사소통 장벽을 극복합니다. 사용 방법을 알아보려면 계속 읽어보세요. iPhone 15 Pro와 같이 작업 버튼이 있는 iPhone을 사용하는 경우 Apple의 iOS 17.2 소프트웨어 업데이트는 버튼에 새로운 번역 옵션을 제공하여 실시간 대화를 여러 언어로 번역할 수 있게 해줍니다. Apple에 따르면 번역은 정확할 뿐만 아니라 상황을 인식하여 뉘앙스와 음성 언어가 효과적으로 포착되도록 보장합니다. 이 기능은 여행자, 학생, 언어를 배우는 모든 사람에게 도움이 될 것입니다. 번역 기능을 사용하기 전에 번역하려는 언어를 선택하세요. Apple에 내장된 번역 앱을 통해 이 작업을 수행할 수 있습니다.
