앱을 Angular 1.5 구성 요소 및 그 이상으로 업그레이드하십시오!-JS 튜토리얼-php.cn

앱을 Angular 1.5 구성 요소 및 그 이상으로 업그레이드하십시오! 이 기사는 Dan Prince와 Michaela Lehr이 검토 한 동료입니다. Sitepoint 콘텐츠를 최선을 다해 Sitepoint의 동료 리뷰어 덕분에! 각각의 AngularJS 릴리스마다 개발 팀은 AngularJS 1.X와 2 사이의 간격을 브리지하려고 노력하고 있습니다. AngularJS 1.5가 릴리스되면 개발자는 AngularJS 2.0과 구조적으로 유사하게 응용 프로그램을 작성할 수 있습니다.

. 이 튜토리얼에서는 AngularJS 1.4에서 그리드 지침을 만들 것입니다. 그런 다음 1.5로 업그레이드하는 단계를 진행하고 나중에 버전 2.0으로 작업하도록 어떻게 변환 할 수 있는지 살펴 봅니다.

키 테이크 아웃 angularjs 1.4로 시작하십시오 : Angularjs 1.4에서 간단한 그리드 지시문을 만들어 레이아웃 설계에 부트 스트랩을 사용하여 JSON 배열을 표시합니다. angularjs 1.5로 업그레이드 : 스크립트 참조를 대체하고 새로운 구성 요소 지침 도우미 메소드를 사용하여 AngularJS 1.4 지시문을 1.5로 전환하여 구성을 단순화하고 향후 업그레이드를 준비합니다. AngularJS 1.5의 구성 요소 장점 : AngularJS 1.5의 구성 요소는 구문을 통해 구문을 제공하여 기본 구성 및 간소화 된 접근법을 제공하며, 이는 AngularJS 2.0으로 전환하는 데 유리합니다. angularjs 2.0으로의 전환 : 1.x 버전과의 아키텍처 차이로 인해 AngularJS 2.0으로 이동할 때 처음부터 시작해야 할 필요성을 이해하고 추가 라이브러리와 새로운 설정이 필요합니다. angularjs 2.0 구성 요소 활용 : AngularJS 2.0에서 구성 요소를 구현하여 CODE의 유지 관리 가능성과 테스트 가능성을 향상시켜 Component 기반이며 계층 적 의존성 주입 및 동적 로딩과 같은 고급 기능을 지원합니다.

시작하기

AngularMigrateApp이라는 프로젝트 디렉토리를 만들어 봅시다. 이 폴더 내에서 index.html이라는 HTML 페이지를 만듭니다. 페이지의 모습은 다음과 같습니다

각도 프레임 워크뿐만 아니라 부트 스트랩을 사용하여 지침 레이아웃을 설계합니다. 우리는이 두 파일을 CDN에서 직접 포함하고 있습니다.

그리드 지시문 생성 JSON 배열을 표시하기위한 간단한 그리드 지침을 만들어 봅시다. AngularJS 모듈을 만들기 시작합니다

우리는 다양한 예제 데이터를 보유하는 상수라는 직원을 정의했습니다. 그런 다음이 배열에 HOMECTRL에 주입하여 컨트롤러의 범위에서 사용할 수 있도록합니다. 위의 JSON 배열을 표시하는 데 사용할 MyGrid라는 지침을 만들어 봅시다.

우리는 다음과 같은 태그 이름을 통해 지시문을 사용하고 싶습니다 :

그래서 우리는 다음을 지정하기 위해 제한 옵션을 추가합니다

다음은 직원 데이터를 관점에서 지침으로 전달하려고합니다. 그래서 우리는 그것을 바인딩으로 추가합니다 :

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

로그인 후 복사

이제 직원 데이터를 지침으로 전달할 수 있습니다.

마지막으로 데이터를 표시하려면 HTML 템플릿이 필요합니다.

index.html의 본문에 다음 html 템플릿 스크립트를 추가하십시오.

angular<span>.module('myApp', [])
</span>    <span>.constant('employees', [{
</span>        <span>firstName: 'Rima',
</span>        <span>lastName: 'George',
</span>        <span>location: 'San Francisco'
</span>    <span>}, {
</span>        <span>firstName: 'Shaun',
</span>        <span>lastName: 'John',
</span>        <span>location: 'Germany'
</span>    <span>}, {
</span>        <span>firstName: 'Rahul',
</span>        <span>lastName: 'Kurup',
</span>        <span>location: 'Bangalore'
</span>    <span>}, {
</span>        <span>firstName: 'Samson',
</span>        <span>lastName: 'Davis',
</span>        <span>location: 'Canada'
</span>    <span>}, {
</span>        <span>firstName: 'Shilpa',
</span>        <span>lastName: 'Agarwal',
</span>        <span>location: 'Noida'
</span>    <span>}])
</span>
    <span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span>        $scope<span>.employees = employees;
</span>    <span>}])
</span>

로그인 후 복사

위의 코드에서 볼 수 있듯이 정보 속성을 반복하고 직원 목록에있는 각 항목을 표시합니다. Index.html 내부의 MyGrid 지시문을 사용해 봅시다. 다음 코드를 추가하십시오 :


<p>
<ified> 우리는 homectrl 컨트롤러를 지정했으며 내부에는 지침을 사용했습니다. 변경 사항을 저장하고 index.html 페이지로 찾아보십시오. 다음은 데이터 그리드의 데모입니다.
<ang> Codepen에서 sitepoint (@sitepoint)의 펜 Angularjs 1.4 데모 참조.


<to> 1.5  지금까지 우리는 버전 1.4를 사용하여 AngularJS 지침을 만들었으며 잘 작동합니다. 이제 AngularJS 1.5와 함께 동일한 코드를 사용하고 어떤 일이 발생하는지 확인해 봅시다. </to></ang></ified></p>.
<the> 기존 스크립트 참조를 CDN 링크로 버전 1.5로 바꾸겠습니다. 페이지를 새로 고치려면 모든 것이 계속 작동해야합니다. 이 새로운 릴리스 1.x 라인을 사용하면 구성 요소를 사용하여 AngularJS 2.0이 작동하는 방식에 더 가깝게 이동하고 있으며, 우리는 코드에서이를 활용하여 최종 버전 2.0으로의 전환을 더 쉽게 전환 할 수 있습니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;.directive('myGrid', function() {
&lt;/span&gt;    &lt;span&gt;return {
&lt;/span&gt;    &lt;span&gt;}
&lt;/span&gt;&lt;span&gt;})
&lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div>.
AngularJS 1.5에서 <j j> 구성 요소는 기본값을 관리하고 더 간단한 구성을 갖는 지침을위한 구문 설탕입니다. 그들은 특히 향후 업그레이드를 원하는 사람들을 위해 대체품으로 선호되어야합니다. <p>.
<ang> AngularJS와 함께 작업 할 때 개발자는 일반적으로 컨트롤러 기반 접근 방식으로 작동하는 경향이 있지만 응용 프로그램이 커지기 시작함에 따라 많은 문제가 발생할 수 있습니다. 컨트롤러 및 뷰 기반 접근 방식은 반복적 인 NG-Controller/View로 이어 지지만 구성 요소 기반 접근 방식은 코드를 반복하지 않고 더 큰 구성 요소로 구성 할 수있는 구성 요소를 작성하여 문제를 해결합니다.
<to> 새로운 구성 요소 지시 도우미 메소드를 사용하고 기존 코드를 수정 해 보겠습니다. 구성 요소를 만들기 시작합니다 : 
</to></ang></p>
<direct> 기능을 취하는 지침 방법과 달리 구성 요소 메소드는 객체를 취합니다. 우리는 지침에 다른 템플릿을 사용한 것과 동일한 물건을 전달할 것입니다. HTML 템플릿은 다음과 같습니다
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;my-grid&lt;/span&gt;&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/my-grid&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div>
<mod> 수정 된 구성 요소 코드는 다음과 같습니다
<p>
<the> 위 코드에서 볼 수 있듯이, 우리는 이전 지침에서 가지고있는 모든 옵션을 전달했습니다. </the></p>
<onent> index.html 페이지에서 mycomp라는 구성 요소를 만듭니다
<p>
<and> 변경 사항을 저장하고 페이지를 새로 고치면 데이터가 표시되지 않지만 브라우저 콘솔에서 오류가 없음을 확인할 수 있어야합니다.<a> 공식 사이트에서 구성 요소와 지시문 간의 비교 차트를 살펴보면 범위가 항상 구성 요소에서 분리되어 있음을 알 수 있습니다.
<p>  </p>
<need> 따라서 데이터를 컨트롤러에 바인딩하기 위해 바인딩 옵션을 사용해야합니다. 구성 요소가 요소로만 제한되므로 제한 옵션은 더 이상 필요하지 않습니다. <p>
<mod> 수정 된 코드는 다음과 같습니다
<img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173984983237964.png" class="lazy" alt="앱을 Angular 1.5 구성 요소 및 그 이상으로 업그레이드하십시오!" >
<info> 바인딩 정보는 컨트롤러에 바인딩됩니다. 컨트롤러의 기본 별칭은 $ CTRL이며 템플릿 내부에서 정보 속성에 액세스하는 데 사용합니다.
</info></mod></p>
<refresh> 이제 페이지를 새로 고치면 MyComp 구성 요소를 사용하여 표시된 데이터를 볼 수 있어야합니다. <p>
<ang> Codepen에서 sitepoint (@sitepoint)의 펜 Angularjs 1.5 데모 참조.

<to> 2.0으로 업그레이드
<ular> 참고 : AngularJS 2.0은 여전히 베타입니다. 우리가 사용하는 버전은 Angular2.0.0-beta.8. 입니다
<the> 앱의 기존 angularjs 버전을 CDN의 버전 2.0 링크로 바꾸고 다음과 같은 내용이 있는지 확인하겠습니다.
</the></ular></to></ang></p>
<the> 페이지 새로 고침 후 페이지에 아무것도 표시되지 않으며 브라우저 콘솔을 확인하면 몇 가지 오류도 볼 수 있습니다.
<p>  </p>
<see> 보시다시피, 우리의 구성 요소 코드는 Angular 2.0에서 잘 작동하지 않았습니다! 

<from> 바로 스크래치부터 시작하여 새 버전이 어떻게 작동하는지 살펴 보겠습니다. 그러면 구성 요소를 포트하려고합니다.
<it> 단일 스크립트 태그가있는 프레임 워크를 포함하여 Angular 1.X를 시작할 수는 있지만 Angular 2.0이있는 상황이 변경되었습니다. 기능하려면 다른 라이브러리가 필요합니다. 스크립트 태그를 통해 이들을 별도로로드하는 것은 개발에 적합하지만 생산을위한 빌드 프로세스의 일부로 번들로 제공됩니다.
<a> 공식 Quick Start Guide를 살펴보면 2.0으로 시작하려면 다른 라이브러리 및 개발 종속성이 필요하다는 것을 알 수 있습니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;&lt;span&gt;&lt;!DOCTYPE html&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;html&lt;/span&gt; lang&lt;span&gt;=&quot;en&quot;&lt;/span&gt; ng-app&lt;span&gt;=&quot;myApp&quot;&lt;/span&gt; class&lt;span&gt;=&quot;no-js&quot;&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;head&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;    &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;title&lt;/span&gt;&gt;&lt;/span&gt;My AngularJS App&lt;span&gt;&lt;span&gt;&lt;/title&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;    &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;link&lt;/span&gt; rel&lt;span&gt;=&quot;stylesheet&quot;&lt;/span&gt; href&lt;span&gt;=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css&quot;&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/head&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;body&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;    &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;script&lt;/span&gt; src&lt;span&gt;=&quot;https://code.angularjs.org/1.4.10/angular.js&quot;&lt;/span&gt;&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/script&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/body&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/html&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
</a><a> angularjs2.0component라는 폴더를 만들고 다음과 같이 package.json 파일을 만듭니다.
<p>
<shows> 위 파일은 AngularJS 2.0 응용 프로그램에 필요한 모든 종속성을 보여줍니다. 변경 사항을 저장하고 NPM을 사용하여 필요한 종속성을 설치하십시오.
</shows></p>
<fol> app와 내부라는 서브 폴더를 만듭니다.
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">angular&lt;span&gt;.module('myApp', [])
&lt;/span&gt;    &lt;span&gt;.constant('employees', [{
&lt;/span&gt;        &lt;span&gt;firstName: 'Rima',
&lt;/span&gt;        &lt;span&gt;lastName: 'George',
&lt;/span&gt;        &lt;span&gt;location: 'San Francisco'
&lt;/span&gt;    &lt;span&gt;}, {
&lt;/span&gt;        &lt;span&gt;firstName: 'Shaun',
&lt;/span&gt;        &lt;span&gt;lastName: 'John',
&lt;/span&gt;        &lt;span&gt;location: 'Germany'
&lt;/span&gt;    &lt;span&gt;}, {
&lt;/span&gt;        &lt;span&gt;firstName: 'Rahul',
&lt;/span&gt;        &lt;span&gt;lastName: 'Kurup',
&lt;/span&gt;        &lt;span&gt;location: 'Bangalore'
&lt;/span&gt;    &lt;span&gt;}, {
&lt;/span&gt;        &lt;span&gt;firstName: 'Samson',
&lt;/span&gt;        &lt;span&gt;lastName: 'Davis',
&lt;/span&gt;        &lt;span&gt;location: 'Canada'
&lt;/span&gt;    &lt;span&gt;}, {
&lt;/span&gt;        &lt;span&gt;firstName: 'Shilpa',
&lt;/span&gt;        &lt;span&gt;lastName: 'Agarwal',
&lt;/span&gt;        &lt;span&gt;location: 'Noida'
&lt;/span&gt;    &lt;span&gt;}])
&lt;/span&gt;
    &lt;span&gt;.controller('HomeCtrl', ['$scope', 'employees', function($scope&lt;span&gt;, employees&lt;/span&gt;) {
&lt;/span&gt;        $scope&lt;span&gt;.employees = employees;
&lt;/span&gt;    &lt;span&gt;}])
&lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<code> 위 코드에서는 Angular Core Namespace ng.core를 사용하여 구성 요소를 만듭니다. 우리는 구성 요소의 선택기를 내 회사로 정의했습니다. 우리는 앱의 템플릿과 동일한 html, grid.html을 사용하고 있습니다. 우리는 구성 요소의 생성자에 직원들의 개체를 정의했습니다. <p>
<called> main.js라는 파일을 만들고 다음 코드로 붙여 넣습니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;&lt;span&gt;&lt;!DOCTYPE html&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;html&lt;/span&gt; lang&lt;span&gt;=&quot;en&quot;&lt;/span&gt; ng-app&lt;span&gt;=&quot;myApp&quot;&lt;/span&gt; class&lt;span&gt;=&quot;no-js&quot;&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;head&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;    &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;title&lt;/span&gt;&gt;&lt;/span&gt;My AngularJS App&lt;span&gt;&lt;span&gt;&lt;/title&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;    &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;link&lt;/span&gt; rel&lt;span&gt;=&quot;stylesheet&quot;&lt;/span&gt; href&lt;span&gt;=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css&quot;&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/head&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;body&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;    &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;script&lt;/span&gt; src&lt;span&gt;=&quot;https://code.angularjs.org/1.4.10/angular.js&quot;&lt;/span&gt;&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/script&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/body&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/html&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<ang> 이것은 방금 생성 한 구성 요소를로드하도록 Angular에게 알려줍니다. <p>
다음 <a> 다음, 앱 폴더 외부에 index.html이라는 파일을 만들고 다음 코드에 붙여 넣습니다.
</a></p>
<.> 위의 index.html 페이지는 AngularJS 2.0 응용 프로그램의 스타터 템플릿입니다. 우리는 필요한 모든 종속성을 포함 시켰으며 바디 태그 내에서 우리는 구성 요소를 사용했습니다.
<and> 변경 사항을 저장하고 NPM 시작을 사용하여 서버를 시작하십시오. 이 명령은 브라우저에 index.html을로드하는 Lite-Server라는 로컬 개발 서버를 실행합니다. <p>
<data> 그러나 여전히 데이터가 나타나지 않습니다! 
AngularJS 2.0에서 루핑의 구문은 약간 다릅니다. grid.html에서 루핑 부분을 아래 그림과 같이 수정하십시오.
</data></p>
<and> 변경 사항을 저장하고 서버를 다시 시작하면 앱에 직원 데이터가 표시되는 것을 볼 수 있어야합니다.
  <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">angular&lt;span&gt;.module('myApp', [])
&lt;/span&gt;    &lt;span&gt;.constant('employees', [{
&lt;/span&gt;        &lt;span&gt;firstName: 'Rima',
&lt;/span&gt;        &lt;span&gt;lastName: 'George',
&lt;/span&gt;        &lt;span&gt;location: 'San Francisco'
&lt;/span&gt;    &lt;span&gt;}, {
&lt;/span&gt;        &lt;span&gt;firstName: 'Shaun',
&lt;/span&gt;        &lt;span&gt;lastName: 'John',
&lt;/span&gt;        &lt;span&gt;location: 'Germany'
&lt;/span&gt;    &lt;span&gt;}, {
&lt;/span&gt;        &lt;span&gt;firstName: 'Rahul',
&lt;/span&gt;        &lt;span&gt;lastName: 'Kurup',
&lt;/span&gt;        &lt;span&gt;location: 'Bangalore'
&lt;/span&gt;    &lt;span&gt;}, {
&lt;/span&gt;        &lt;span&gt;firstName: 'Samson',
&lt;/span&gt;        &lt;span&gt;lastName: 'Davis',
&lt;/span&gt;        &lt;span&gt;location: 'Canada'
&lt;/span&gt;    &lt;span&gt;}, {
&lt;/span&gt;        &lt;span&gt;firstName: 'Shilpa',
&lt;/span&gt;        &lt;span&gt;lastName: 'Agarwal',
&lt;/span&gt;        &lt;span&gt;location: 'Noida'
&lt;/span&gt;    &lt;span&gt;}])
&lt;/span&gt;
    &lt;span&gt;.controller('HomeCtrl', ['$scope', 'employees', function($scope&lt;span&gt;, employees&lt;/span&gt;) {
&lt;/span&gt;        $scope&lt;span&gt;.employees = employees;
&lt;/span&gt;    &lt;span&gt;}])
&lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p>
<up> 포장 
<are> 구성 요소는 AngularJS 2.0의 주요 부분이며 구성 요소 기반 프레임 워크라고 말하는 것이 옳습니다. 1.x 라인의 새로운 릴리스마다 버전 2.0을 사용하여 응용 프로그램이 개발되는 방식에 가까워지고 있습니다. <p>
<orial>이 튜토리얼에서 우리는 프레임 워크의 Verison 1.4를 사용하여 AngularJS 지침을 만들었습니다. 우리는 버전 1.5의 구성 요소 구문을 활용하기위한 지침을 리팩토링했습니다. 마지막으로 Angular 버전 2.0으로 작동하도록 업그레이드했습니다.
<in> angularjs 앱 마이그레이션을보다 심층적으로 살펴 보려면 공식 마이그레이션 가이드를 읽으십시오. Angular 2 코드는 TypeScript 및 Dart로도 작성할 수 있으며 관심이 있으시면 각각 TypeScript 또는 DART의 AngularJS 2를 시작하기위한 공식 안내서를 읽는 것이 좋습니다.
<and> 아래 의견에 당신의 생각과 제안을 공유하십시오! 



<questions> 각도 구성 요소로 업그레이드하는 것에 대한 자주 묻는 질문 (FAQ)



<key> AngularJS와 Angular의 주요 차이점은 무엇입니까? </key></questions></and></in></orial></p> <p> AngularJS는 JavaScript 기반 오픈 소스 프론트 엔드 웹 응용 프로그램 프레임 워크이며 Angular는 모바일 및 데스크톱 웹 애플리케이션을 구축하기위한 플랫폼입니다. Angular는 AngularJS를 구축 한 동일한 팀의 완전한 재 작성입니다. 주요 차이점에는 언어, 아키텍처, 표현 구문, 모바일 지원 및 라우팅이 포함됩니다. Angular는 AngularJS에서 사용되는 JavaScript보다 더 작고 빠른 TypeScript를 사용합니다. Angular는 계층 적 의존성 주입, 동적 하중 및 비동기 템플릿 컴파일이있어보다 효율적입니다.<up> angularjs에서 angular로 업그레이드 해야하는 이유는 무엇입니까? <h3> </h3> AngularJS에서 Angular로 업그레이드하면 몇 가지 이점이 있습니다. Angular는 계층 적 의존성 주입 및 구성 요소 기반 아키텍처로 인해 성능이 향상됩니다. 또한 AngularJS와 달리 모바일 장치를 지원합니다. Angular는 정적 타이핑, 인터페이스 및 클래스를 제공하는 TypeScript를 사용하여 코드를보다 관리하기 쉽고 테스트 할 수 있도록합니다. Angular는 또한 의존성 주입, 모듈 식 및 테스트 가능성을 향상 시켰습니다.  <p> AngularJS 응용 프로그램을 Angular로 마이그레이션 할 수 있습니까? </p> <h3> AngularJS에서 Angular로 마이그레이션하면 여러 단계가 포함됩니다. 먼저 AngularJS 스타일 가이드를 따르고 코드를 구성 요소 구조로 구성하고 모듈 로더를 사용하여 AngularJS 응용 프로그램을 마이그레이션을 준비해야합니다. 그런 다음 Application에 Angular를 부트 스트랩하여 AngularJS 구성 요소에 대한 Angular 구성 요소를 만들고 서비스를 마이그레이션하여 마이그레이션 프로세스를 시작할 수 있습니다. 마지막으로, 응용 프로그램에서 angularjs를 제거 할 수 있습니다. </h3> <p> Angularjs에서 Angular로 업그레이드 할 때 직면 할 수있는 문제는 무엇입니까?  </p> angularjs에서 angular로 업그레이드하는 것은 아키텍처의 차이로 인해 어려움을 겪을 수 있습니다. , 언어 및 구문. AngularJS 코드를 TypeScript로 마이그레이션하고, 새로운 구성 요소 기반 아키텍처에 적응하고, 표현식에 대한 새로운 구문을 배우는 문제에 직면 할 수 있습니다. 또한 라우팅 구성을 다시 작성하고 형식 스크립트를 처리하기 위해 빌드 프로세스를 조정해야 할 수도 있습니다.  <h3> 동일한 응용 프로그램에서 Angularjs와 Angular를 함께 사용할 수 있습니까? 마이그레이션 과정에서 동일한 응용 프로그램에서 함께. 이것은 하이브리드 응용 프로그램이라고합니다. 응용 프로그램에서 AngularJS와 Angular를 모두 부트 스트랩 할 수 있으며 서로 공존하고 서로 상호 작용할 수 있습니다. 이를 통해 완전한 다시 작성하는 대신 컴포넌트별로 구성 요소를 점차적으로 마이그레이션 할 수 있습니다.  </h3> angular에서 TypeScript의 역할은 무엇입니까? <p> </p> TypeScript는 정적으로 입력 한 JavaScript의 정적으로 입력 한 Superset입니다. 일반 JavaScript로 컴파일됩니다. 각도에서 TypeScript는 정적 타이핑, 인터페이스 및 클래스를 제공하여 코드를보다 관리하기 쉽고 테스트 할 수 있도록합니다. Typescript는 또한 자동 완성, 유형 확인 및 소스 맵 지원으로 더 나은 툴링을 제공하여 개발 경험을 향상시킵니다.  <h3> 각도 성능 향상 성능의 구성 요소 기반 아키텍처는 어떻게 구성 요소 기반 구성 요소 기반입니다. 각도의 아키텍처는 단방향 데이터 흐름 및 변경 감지를 가능하게하여 성능을 향상시킵니다. Angular의 각 구성 요소에는 명확하게 정의 된 인터페이스가 있으며 자체 동작 및 렌더링을 캡슐화합니다. 이로 인해 응용 프로그램을 이해하고 테스트하며 유지 관리하기가 더 쉽습니다. 단방향 데이터 흐름은 뷰가 항상 모델의 투영임을 보장하여 프로그래밍 모델을 단순화하고 성능을 향상시킵니다. </h3>.<ular> Angular 지원 모바일 장치는 어떻게 반응 형 레이아웃 및 터치 지원을 제공함으로써 모바일 장치를 지원합니다. 또한 게으른 하중 및 비동기 템플릿 컴파일과 같은 모바일 장치에 대한 성능 최적화를 제공합니다. Angular는 또한 모바일 장치에 설치하고 오프라인으로 작업 할 수있는 프로그레시브 웹 앱 (PWAS)도 지원합니다.  <h3> 각도 응용 프로그램을 어떻게 테스트 할 수 있습니까?  </h3> Angular는 테스트 베드 (testbed)라는 테스트 프레임 워크를 제공합니다. 구성 요소에 대한 동적 테스트 환경을 만들 수 있습니다. JavaScript 코드를 테스트하기위한 동작 중심 개발 프레임 워크 인 Jasmine과 테스트 러너 Karma를 사용할 수도 있습니다. Angular는 또한 Protractor와의 엔드 투 엔드 테스트를 지원합니다.  <p> 학습에 사용할 수있는 자료는 무엇입니까? </p> <h3> 공식 각도 문서, 온라인 튜토리얼, 온라인 자습서, 온라인 자습서를 포함하여 각도를 학습 할 수있는 많은 리소스가 있습니다. 책과 코스. Angular Community는 또한 많은 포럼, 블로그 및 StackoverFlow 질문을 참조 할 수있는 매우 활발하고지지 적입니다.</h3></ular></up></p></are></up></p></and></and></.></ang></called></p>

위 내용은 앱을 Angular 1.5 구성 요소 및 그 이상으로 업그레이드하십시오!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!