在 AngularJS 中设置具有动态路由和模板的 12 个产品页面的最佳方式

best way of setting up 12 product pages in AngularJS with dynamic routing and templating

本文关键字：方式 最佳 设置 AngularJS 路由 动态      更新时间：2023-09-26

我对AngularJS有点陌生，所以我想知道构建应用程序产品部分的最佳方式是什么。

所以我有一个主产品页面，它将列出并链接到我的所有 12 个产品。然后，每个行业产品页面都需要具有相同的格式(即产品描述，颜色，高度等(。此数据不会来自后端源。它只是普通的 HTML。

设置内容以最大化代码重用的最佳方法是什么？我想我想为路由做 - /products/products.html列出所有产品，然后列出 /products/product1.html in. 产品之类的东西。

我怎样才能让这一切在 AngularJS 中工作？

谢谢！

对于路由，您需要在HTML中使用ng-view指令。我能想到的最简单的方法是在主页上创建一个div并为其分配指令ng-view。然后你的Javascript文件创建一个路由。下面是仅供参考的示例代码。

   // 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"});
  }]);
相关文章：