Question

我现在使用我的网络应用程序和cordova移动应用程序在角度1上运行了大约2年，随着应用程序变得越来越大，我们希望将我们的下一个应用程序版本迁移到角度2。

当前项目的结构如下

----/root
|__app
|____app.js
|____app.css
|____index.html
|____app.common.directives.js
|____app.common.services.js
|____Page1
|______Page1.js
|______Page1.css
|______Page1.service.js
|______Page1.html
|____Page2
|______Page2.js
|______Page2.css
|______Page2.service.js

我有点像这样建立我的应用程序

将所有js文件连接到build / build.min.js
将所有css文件连接到build / build.min.css
缓存app文件夹中的所有html并使用templateCache（angular1）将其附加到build.min.js
将index.html从app文件夹复制到build文件夹。
运行监视服务器root @ / build

这个设置对我们非常有用，因为当我们正在处理一个新模块（本质上是一个页面）时，我们所要做的就是创建一个新文件夹，删除一个js和html文件，我们就完成了！

示例Page1.js

angular.module('mainApp')
.config(function($httpProvider, $stateProvider) {
    $stateProvider.state('Page1', {
        url: '/Page1',
        controller: 'Page1Ctrl',
        controllerAs: 'Page1',
        templateUrl: 'Page1/Page1.html'
    });
}).run(function($rootScope) {
    $rootScope.sideMenu.push({
        link: 'blog',
        title: 'Announcements',
        icon: 'bullhorn',
        sideMenuOrder: 1
    });
})
.controller('BlognewPost', function($server, $http, $scope,$state) {
  var self = this;
  this.method1 = function(){};
  this.var1 = 'Hello Angular';
});

你可以看到每个模块都定义了自己的路由，将它自己添加到$rootScope.sideMenu - 在index.html中使用它来显示sidemenu-并定义自己的控制器。

我们的app.js是主要的应用程序文件，它将模块/页面连接在一起，但重要的是让app.js不知道我们的应用程序有多少页面/路由。

angular.module('mainApp',['ngAnimate','ngMessages', 'ngAria'])
.config(function() {/*...*/})
.run(function($rootScope) {
  $rootScope.sideMenu = [];
});

index.html就像是。

<html>
<ul id="side">
  <li ng-for="item in $root.sideMenu" ui-sref="item.link">...</li>
</ul>

<ui-view id="content"></ui-view>
</html>

问题：

现在有了新的angular2组件结构。有没有办法在保持相同结构和构建系统的同时迁移我们的旧应用程序？

是否可以定义组件中的所有路由而没有root组件知道它的存在？ - 在上面的示例中，您可以看到我们何时需要添加页面，我们从不触摸app.js，我们只创建一个新文件夹，并在其自己的文件夹中添加配置，路由，运行和控制器。
我们的应用程序由16个根页组成，可压缩约500k字符。我们应该立刻重写整个事情，还是有办法逐页迁移？
我在angular2 starter组件中看到templateUrl config指向模板，有没有办法让typescript包含templateUrl html文件作为字符串'的行为就像templateCache在angular1中做的那样'？ @零件（{ 选择器：'my-app'，模板：string // OR templateUrl：'page.html' //我需要的是像模板：require（page.html）这样我的app html将被缓存在js中。

在不改变项目结构的情况下将角度迁移到angular2

0 个答案: