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

目前页面切换之间总是需要硬加载，我们的大多数页面是使用html中带有ID的主div构建的，然后javascript将在访问“mysite / example1.html”时将内容插入此div，EG “

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";
}

等等......

我有使用反应路由器的经验，但我似乎无法找到有关是否可以轻松转换这样的传统网络应用程序的信息，其中路由不能如此容易地表达。

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)

一个非常简单的方法就是安装自耕农，你就拥有能够为你完成大部分时间工作的发电机！

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

如果您保持代码整洁，这里有一个样式指南;）

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

关于集成到您当前的应用程序，它应该不是很难，但是根据您提供的信息，它听起来比耗时更耗时。

更新：如果你完成任务，你应该检查angular2它仍然是很早的阶段，但看到你要重组你的应用程序，做一些研究，看看你是否可以受益不会有害。

将路由添加到旧网站

1 个答案: