将路由添加到旧网站

Question

我想获得一些关于尝试通过添加路由来增强我目前正在开发的网络应用程序的建议

目前我们的项目布局结构如下所示（我们有数百个这样的页面，HTML 和一个匹配的 JS 文件，可能有 1000 行代码）

html
 - example1.html
 - example2.html

js
  -example1_functions.js
  -example2_functions.js

css (Sometimes each page has there own, Majority of the time they share a few between them)
  -example1_css
  -example2_css

目前页面切换之间总是需要硬加载，我们的大部分页面都是使用一个主div构建的，在html中有一个ID，然后javascript会在这个div中插入内容，例如访问“mysite/example1.html” "

Html (example1.html)
------

<script src="example1_functions.js"></script>

<!-- Potentially boiler plate HTML here for filters, Headers etc -->
<div id="dataContainer"> </div>
<script>
   $( document ).ready(function() {
      generateContent();
   });
</script>

JS (example1_functions.js)
------

function generateContent(){
   document.getElementByID("dataContainer").innerHTML = "Cool content";
}

等等……

我有使用 React 路由器的经验，但我似乎无法找到有关是否可以轻松转换这样一个无法轻松表达路由的旧版 Web 应用程序的信息。

Answer 1

如果您有时间和资源来集成框架，我强烈推荐 angularjs，它确实带有集成路由器，但如果您最终要寻找一些扩展功能，我建议您使用 angulars ui-router 插件而不是内置的一个。

我们使用 ui-router 的应用示例。

angular
    .module('app.globalSettings', ['ui.router'])
    .config(globalSettingsConfig);


globalSettingsConfig.$inject = [
    '$stateProvider'
];

function globalSettingsConfig($stateProvider) {

    $stateProvider
        .state('app.globalSettings', {
            url: '/globalSettings',
            views: {
                "content@app": {
                    controller: 'GlobalSettingsCtrl',
                    controllerAs: 'vm',
                    templateUrl: 'app.cms/globalSettings/views/global-settings.html'
                }
            },
            data: {
                title: 'Global Settings'
            }
        });
}

项目结构明智，看到您说您有数千行潜在的意大利面条代码，基于组件的结构可能是最好的方式。

例如

--> app
  --> post
    --> controllers
    --> directives
    --> services
    --> views
    --> module.js --> where ui-router info goes for component
--> app.js (this wires up all modules in your app)

一个非常简单的方法是安装 yeoman 并且您拥有可以为您完成大部分耗时工作的生成器！

https://github.com/yeoman/generator-angular

如果你想保持代码整洁，这里有一份风格指南；）

https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

关于集成到您当前的应用中，这应该不难，但根据您提供的信息，这听起来会比困难更耗时。

更新：如果您能胜任这项任务，您应该检查 angular2，它仍处于早期阶段，但看到您要重构您的应用程序，做一些研究看看您是否可以受益不会有什么坏处。