i had my web app and cordova mobile app running now on angular 1 for about 2 years now, as application grow bigger we wanted to migrate our next version of app to angular 2.
current project is structured like following
----/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
i had gulp building my app like so
- it concat all js files into build/build.min.js
- it concat all css files into build/build.min.css
- cache all html in app folder and append it to build.min.js using templateCache (angular1)
- copy index.html from app folder to build folder.
- run watch server root @ /build
This setup was very useful for us since when ever we are working on a new Module (a page essentially) all we have to do is create a new folder, drop a js and html file, and we are done !
example 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';
});
as you can see every module define its own routes, add it self to $rootScope.sideMenu -which is used in index.html to show sidemenu- and defines its own controller.
and our app.js was the main app file which wire connect modules/pages together, yet it was important to keep app.js un aware of how many pages/routes our app has.
angular.module('mainApp',['ngAnimate','ngMessages', 'ngAria'])
.config(function() {/*...*/})
.run(function($rootScope) {
$rootScope.sideMenu = [];
});
index.html is something like.
<html>
<ul id="side">
<li ng-for="item in $root.sideMenu" ui-sref="item.link">...</li>
</ul>
<ui-view id="content"></ui-view>
</html>
Question:
now with new angular2 component structure. is there a way we can migrate our old app while keeping same structure and build system ?
is it possible to define all routes in the components without root component have any knowledge of its existence ? -in above example you can see when ever we needed to add a page, we never touch app.js, we just create a new folder, and add the config, routes, run, and controller in its own folder.
our app is composed of 16 root pages making around 500k character compressed. should we rewrite the whole thing at once, or is there a way to migrate page by page ?
i see in angular2 starter component takes templateUrl config to point to template, is there a way to make typescript include the templateUrl html file as a string 'behavior like what templateCache used to do in angular1' ? @Component({ selector: 'my-app', template:
string// OR templateUrl: 'page.html' //what i need is something like template: require(page.html) so that my app html would be cached in js.
