Angular UI-Router 및 이름의 뷰로 모듈 식 코드를 작성하는 방법

코어 포인트

Angular UI 라우터는 복잡한 웹 애플리케이션에서 다른 상태를 관리하는 강력한 도구이며, 기본 AngularJS 라우팅 구현보다 각 뷰를 더 많이 제어 할 수 있습니다. DOT 표기법을 사용하여 부모 상태 내에서 자식 상태를 정의하고 절대 이름을 사용하여 웹 애플리케이션의 특정 부분이 표시되는 위치를 제어하여 모듈 식 애플리케이션 설계를 가능하게합니다.

ui 라우터를 사용하면 개발자가 뷰의 이름과 템플릿으로가는 경로를 정의하는 내에서

객체를 정의 할 수 있습니다. 이름이없는 뷰는 부모 상태 (상대 명명이라고 함)를 가리 킵니다. 이름이 지정된 뷰는 구문을 사용하여 구성 요소를 특정 상태 (절대 이름 지정이라고 함)에 매핑합니다.
• Absolute Naming은 코드를 매우 모듈화하여 개발자가 응용 프로그램 전체 또는 향후 프로젝트에서 템플릿을 재사용 할 수 있도록합니다. 또한 헤더 및 바닥 글과 같은 웹 애플리케이션의 다양한 구성 요소를 사용하는 방법을 단순화하므로 시간과 노력을 절약합니다.
• 간결한, 모듈 식 코드 작성은 웹 개발에서 가장 중요한 개념 중 하나입니다. 특히 팀이 서로 복잡한 응용 프로그램을 개발하기 위해 함께 일할 때. Angular Framework는 매우 복잡해질 수있는 고급 응용 프로그램을 만들기 위해 설계되어 모듈 식 코드를 더욱 중요하게 만듭니다. Angular UI 라우터는이를 달성하는 데 큰 도움이되는 도구이며 웹 응용 프로그램의 여러 상태를 관리하도록 설계되었습니다. 기본 AngularJS 라우팅 구현과 비교하여 각 뷰를 완전히 제어 할 수 있습니다. $stateProvider 이전에 UI- 라우터를 사용한 경우 DOT 표기법을 사용하여 부모 상태 내에서 자식 상태를 정의하는 방법을 알 수 있습니다. 그러나 UI- 라우터 라이브러리가 부모 상태에 중첩 된 뷰 이름이 어떻게 처리되는지 모를 수도 있습니다. 이것이 제가 오늘 설명하고 싶은 것입니다. views > 웹 애플리케이션의 특정 부분이 나타나는 위치를 완전히 제어하기 위해 UI-Router가 절대 이름을 사용하는 방법을 보여 드리겠습니다. 이를 통해 다른 인터페이스 부품을 쉽게 추가하고 제거하여 다른 구성 요소로 구성된 모듈 식 애플리케이션을 만들 수 있습니다. 구체적으로, 내비게이션 막대, 일부 신체 내용 및 바닥 글을 특정 상태로 매핑하는 방법을 보여 드리겠습니다. 항상 그렇듯이이 자습서의 코드는 GitHub에서 사용할 수 있으며 기사 끝에서 데모를 찾을 수도 있습니다. @ 초보자
• 이 데모를 구성하는 파일을 탐색하는 데 잠시 시간을 내십시오 (위의 Github 링크에서 찾을 수 있음). AngularJS 및 UI-Router 라이브러리가있는 Index.html 파일이 있음을 알 수 있습니다. 이 파일에는 컨텐츠를 삽입 할 두 가지 UI-View 지시문이 있습니다. 다음으로, 우리는 Angular Application의 코드와 템플릿 디렉토리를 포함하는 app.js 파일이 있습니다. 이 디렉토리는 우리의 모든 뷰를 모두 수용하는 데 사용됩니다. 이 폴더는 필요하지 않지만 Angular를 사용하여 응용 프로그램을 구축 할 때 일부 구조를 사용하는 것이 가장 중요합니다. 보시다시피, 나는 템플릿 폴더 내부에 자산 폴더를 포함시킨다. 재사용 가능한 구성 요소 (헤더, 내비게이션 바, 바닥 글 등)를 저장하는 곳입니다. 이 컨벤션이 코드를 매우 모듈화하기 때문에이 컨벤션이 유용하다고 생각합니다.

  ui-router

  ui-router

  에 종속성을 추가하십시오 응용 프로그램 구성을 시작하겠습니다. App.js 파일에서는 UI- 로터에 대한 종속성을 기본 각도 모듈에 추가해야합니다. 경로를 구성 완료 후 응용 프로그램의 구성 객체를 계속 구성 할 수 있습니다. 여기서 우리는 및

  를 처리하므로 구성 객체에 주입하여 사용해야합니다.

  다음으로, 우리는 홈페이지 상태의 URL을

  로 전달하여 기본적으로 응용 프로그램을이 상태에 매핑하려고합니다. 그런 다음

  를 사용해야합니다.이 튜토리얼의 나머지 부분에서 다룰 것입니다. 는 UI-Router가 개발자가 응용 프로그램을 라우팅 할 때 사용할 수 있도록 제공하는 도구입니다. 상태는 응용 프로그램의 전체 UI 및 내비게이션 측면의 "위치"에 해당합니다. 상태는 해당 위치 및 기능의 UI를 설명합니다. Ngroute가 Loureprovider를 사용하는 것과 같은 방식으로 작동합니다.

  <code class="language-javascript">angular.module('app', ['ui.router'])</code>

  다음은 app.js 파일의 모습입니다. URLROUTERPROVIDER를 구성한 후

  를 사용하여 응용 프로그램의 다른 상태를 정의합니다. 이 예에서는 호텔이라는 상태를 정의하고 URL 만 구성합니다.

  viss 객체 이제 기본 프레임 워크를 설정 했으므로 내에서 $stateProvider다음으로, 우리는 먼저 부모 상태를 가리키는 이름없는 견해를 만들어야합니다. 이 이름이없는 견해의

  는 근본적으로 두 가지를 연결합니다. 이를 상대 이름 지정이라고하며 Angular 에게이 이름이없는보기를 index.html 파일에 templateUrl에 삽입하도록 지시합니다. 코드는 이제 아래의 app.js를 복사해야합니다. <div ui-view=""> <see> 알 수 있듯이 이름없는보기는 Main.html로 해결되며 아래 코드와 유사해야합니다. <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;angular.module('app', ['ui.router'])&lt;/code&gt;</pre> <p> main.html 파일에는 nav, body 및 바닥 글이있는 세 가지 뷰가 포함되어 있습니다. 이러한 구성 요소가 홈 상태에 나타나려면 절대 이름으로 정의해야합니다. 구체적으로, 우리는 </p> 구문을 사용하여 AngularJS 응용 프로그램에 이러한 구성 요소가 특정 상태에 매핑되어야한다는 것을 알려야합니다. 이는 ViewName@StateName 구문을 따르고 Application에 <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;angular.module('app', ['ui.router']) .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/'); $stateProvider .state('home', { url: '/' }); } ]);&lt;/code&gt;</pre> Absolute 또는 특정 상태에서 이름이 지정된 뷰를 사용하도록 지시합니다. 상대 이름 대 절대 ​​이름에 대한 자세한 내용은 여기를 참조하십시오. <code>@ 당신은 가 우리의 구성 객체에 사용되어 Angular가 우리의 명명 된 견해가 우리의 가정 상태를 가리킨다는 것을 알고 있는지 확인합니다. 이러한 절대 이름이 존재하지 않으면 응용 프로그램은 이러한 이름이 지정된 뷰를 어디에서 찾을 수 있는지 모릅니다. 즉, 아래를 확인하고 응용 프로그램을 어떻게 라우팅 해야하는지 확인하십시오.

  (Codepen 데모는 여기에 삽입해야합니다) @home

  왜 이것이 위대한인가

  <code class="language-javascript">angular.module('app', ['ui.router'])
    .config(['$stateProvider', '$urlRouterProvider', 
      function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/');
        $stateProvider
          .state('home', {
            url: '/',
            views: {
              '': { 
                templateUrl: './templates/main.html' 
              },
            }
          });
       }
     ]);</code>

  앞에서 말했듯이 절대 이름 지정은 코드가 매우 모듈화됩니다. 이 튜토리얼에서는 모든 뷰를 템플릿 폴더에 넣습니다. 그러나 한 걸음 더 나아가 응용 프로그램의 다양한보기를 위해 폴더를 만들 수 있습니다. 이를 통해 애플리케이션 전체와 향후 프로젝트에서 템플릿을 재사용 할 수 있습니다! UI-Router 라이브러리를 사용하면 특정보기의 헤더 및 바닥 글과 같은 웹 응용 프로그램의 다양한 구성 요소를 쉽게 사용할 수 있습니다. 이로 인해 다양한 프로젝트에서 재사용 코드가 더 쉬워지고 확실히 시간을 절약 할 수 있습니다. 결론

  더 복잡하고 높은 수준의 중첩에 절대 이름을 사용할 수 있습니다. 이것은 예입니다! 그럼에도 불구하고, UI- 라우터가 달성 할 수있는 것들에 대해 더 깊이 이해하기를 바랍니다. Antonio Morales 의이 기사에서 그는 절대 이름 지정과 상대 이름 지정, 변전소 및 Angular의 UI-Router 라이브러리의 다른 측면의 차이점을 설명합니다. 항상 그렇듯이이 자습서에 대해 궁금한 점이 있으면 알려주십시오. 나는 그들에게 대답하고 싶다.

  각도 UI 라우터를 사용하여 모듈 식 코드 작성에 대한 FAQ 및 명명 된 views 각도 UI 라우터 란 무엇이며 표준 각도 라우터와 어떻게 다른가요? Angular UI 라우터는 표준 각도 라우터에서 찾을 수없는 기능을 제공하는 AngularJS의 유연한 라우팅 프레임 워크입니다. 중첩 뷰와 여러 이름의 뷰를 허용하는 반면 표준 각도 라우터는 URL 당 하나의보기 만 지원합니다. 이로 인해 Angular UI 라우터는 복잡한 대규모 응용 프로그램을 구축하기위한 강력한 도구입니다.

  내 프로젝트에서 각도 UI 라우터를 설정하는 방법은 무엇입니까?

  각도 UI 라우터를 설정하려면 먼저 HTML 파일에 각도 UI 라우터 스크립트를 포함시켜야합니다. 그런 다음 AngularJS 응용 프로그램에서 "ui.router"를 모듈 종속성으로 추가해야합니다. 그런 다음 를 사용하여 상태를 구성하고 를 사용하여 기본 상태를 설정할 수 있습니다.

  각도 UI 라우터의 이름이 든 뷰는 무엇이며 어떻게 사용합니까?

  이름보기는 각도 UI 라우터의 기능으로, 이름을보기에 할당 할 수 있습니다. 이를 통해 URL 당 여러 뷰를 가질 수 있으므로 복잡한 응용 프로그램에 매우 유용합니다. 이름이 지정된 뷰를 사용하려면 HTML 파일에 "UI-View"지시문을 포함시키고 이름을 지정해야합니다. 그런 다음 상태 구성 에서이 이름을 참조 할 수 있습니다. $stateProvider 각도 UI 라우터에서 상태를 탐색하는 방법은 무엇입니까? $urlRouterProvider

  메소드를 사용하여 각도 UI 라우터의 상태를 탐색 할 수 있습니다. 이 메소드는 상태의 이름을 매개 변수로 취하며 선택적으로 상태의 매개 변수 개체를 매개 변수로 취합니다. HTML 파일의 UI-SREF 지침을 사용하여 상태에 대한 링크를 만들 수도 있습니다.

  각도 UI 라우터에서 매개 변수를 상태로 전달하는 방법은 무엇입니까?

  상태 구성에 포함시켜 각도 UI 라우터의 상태에 매개 변수를 전달할 수 있습니다. 그런 다음

  서비스를 사용하여 컨트롤러의 이러한 매개 변수에 액세스 할 수 있습니다.

  각도 UI 라우터의 상태 변경을 처리하는 방법은 무엇입니까?

  당신은 및

  이벤트를 사용하여 각도 UI 라우터의 상태 변경을 처리 할 수 ​​있습니다. 이 이벤트는 에 방송되며 컨트롤러에서들을 수 있습니다.

  각도 UI 라우터에서 상태를 활성화하기 전에 데이터를 구문 분석하는 방법은 무엇입니까? $state.go() 상태 구성에서 속성을 ​​사용하여 각도 UI 라우터에서 상태를 활성화하기 전에 데이터를 구문 분석 할 수 있습니다. 이 속성은 상태가 활성화되기 전에 구문 분석 해야하는 종속성을 정의하는 객체입니다.

  각도 UI 라우터의 오류를 처리하는 방법은 무엇입니까?
  이벤트를 사용하여 각도 UI 라우터의 오류를 처리 할 수 ​​있습니다. 이 이벤트는

  에서 방송되며 컨트롤러에서들을 수 있습니다. $stateParams 각도 UI 라우터에서 중첩 뷰를 사용하는 방법은 무엇입니까?

  HTML 파일에 "UI-View"지시문을 포함하여 이름을 지정하여 각도 UI 라우터에서 중첩 뷰를 사용할 수 있습니다. 그런 다음 상태 구성 에서이 이름을 참조 할 수 있습니다.

  각도 UI 라우터에서 여러 이름의 뷰를 사용하는 방법은 무엇입니까?

  HTML 파일에 "UI-View"지시를 포함시키고 다른 이름을 할당하여 각도 UI 라우터에서 여러 이름의 뷰를 사용할 수 있습니다. 그런 다음 상태 구성 에서이 이름을 참조 할 수 있습니다.