AngularJS에서 12 개의 제품 페이지를 동적 라우팅 및 템플릿으로 설정하는 가장 좋은 방법

Question

저는 AngularJS에 다소 익숙하므로 내 앱의 제품 섹션을 설계하는 가장 좋은 방법을 알고 싶습니다.

그래서 내 12 개 제품 모두를 나열하고 링크하는 주요 제품 페이지가 있습니다. 그런 다음 각 ind. 제품 페이지의 형식, 즉 제품 설명, 색상, 높이 등이 동일해야합니다. 이 데이터는 이 아니며은 백엔드 소스에서 제공되지 않습니다. 그것의 단지 평범한 HTML.

코드 재사용을 극대화하도록 설정하는 가장 좋은 방법은 무엇입니까? 나는 라우팅을 위해하고 싶다고 생각한다 - /products/products.html 모든 제품을 나열하고 ind에 대해 /products/product1.html과 같은 것을 입력한다. 생성물.

어떻게 AngularJS에서이 모든 작업을 할 수 있습니까?

감사합니다.

Answer 1

라우팅을 위해 HTML에서 ng-view 지시문을 사용해야합니다. 내가 생각할 수있는 가장 간단한 방법은 메인 페이지에 div를 만들고 지시어 ng-view를 할당하는 것입니다. 그런 다음 자바 스크립트 파일이 라우팅을 만듭니다. 아래는 참고 용 샘플 코드입니다. 목록 페이지

// YOUR HTML 
    <main class="cf" ng-view> 
    </main> 

    // YOUR JAVASCRIPT 
    var myApp = angular.module('myApp', ['ngRoute', 'appControllers']); 
    var appControllers = angular.module('appControllers', []); 
    myApp.config(['$routeProvider', function($routeProvider){ 

    $routeProvider. 
    when("/products1", { templateUrl: "views/products1.html"}). 
    when("/products", { templateUrl: "views/products2.html"}). 
    when("/products3", { templateUrl: "views/products3.html"}). 
    otherwise({ 
    redirectTo: "/login"}); 

    }]);