带有Angular2的非SPA

ilana917

我开始使用angular2(带有express.js后端),目的是将页面的多个部分的控制权传递给angular2组件,但是我最终意识到,当angular2控制页面的整个区域时,该系统更加有效。但是,我的应用程序不是SPA,除了保存我的angular2根组件选择器的路由之外,还有其他服务器渲染的路由。

我有2个问题,然后是代码段:

  1. 每当我加载服务器控制的路由,该路由的服务器端呈现的模板不包含我的根组件的选择器时<main-comp></main-comp>,angular2基本上会吐入控制台,说它无处可初始化。我将所有我的angular2初始化代码放在整个应用程序的共享标头中。如果页面的选择器根本不存在,有没有办法告诉angular2根组件不渲染自身?

  2. 呈现angular2根组件的服务器端路由为/writing,而特定博客帖子的angular2路由URL类似于/writing/2016/03/post但是,每当我直接浏览到URL时,System.js都会尝试加载相对于该位置的app / boot,即,/writing/2016/03/app/boot显然会失败并显示404。我认为这是因为我的服务器控制了相对于该位置/writing路线和角度负载向服务器请求的基本URL。因此,我所知道的唯一解决方案是将我的应用程序转换为具有单个服务器路由的SPA '/',这将需要对前端进行大量重写。我该如何解决这个问题?

这是我的根本组成部分:

@Component({
    selector: 'main-comp',
    template: '<router-outlet></router-outlet>',
    providers: [TagService, PostService, BlogStateService],
    directives: [ROUTER_DIRECTIVES, BlogComponent]
})
@RouteConfig([
    {path: '/writing/...', name: 'Blog', component: BlogComponent }  
])
export class AppComponent {
    constructor(private _blogState : BlogStateService, 
        private _postService : PostService) {
    }
}

这是<head>元素:

<head>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/modernizr-2.6.2-respond-1.1.0.min.js"></script>

    <!-- Angular Dependencies -->
    <script src="/app/node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="/app/node_modules/es6-shim/es6-shim.js"></script>

    <script src="/app/node_modules/systemjs/dist/system.src.js"></script>
    <script src="/app/node_modules/moment/moment.js"></script>

    <script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                },
                moment: {
                    main: 'moment.js',
                    type: 'cjs',
                    defaultExtension: 'js'
                }
            },
            map: {
                moment: '/app/node_modules/moment/'
            }
        });
    </script>

    <script src="/app/node_modules/rxjs/bundles/Rx.js"></script>
    <script src="/app/node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="/app/node_modules/angular2/bundles/http.dev.js"></script>
    <script src="/app/node_modules/angular2/bundles/router.dev.js"></script>

    <script>
        System.import('app/js/boot').then(null, console.error.bind(console)); 
    </script>
    <base href="/">

</head>
ilana917

对于第一个问题,我<main-comp>在调用bootstrap方法之前(在此感谢@Gunter)在页面上添加了对的检查

对于上面的第二个问题,我在system.js配置中向启动文件添加了路径,如下所示,这样system.js不会相对于请求URL加载应用程序/启动。

    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            },
            moment: {
                main: 'moment.js',
                type: 'cjs',
                defaultExtension: 'js'
            }
        },
        map: {
            app: '/app',   //<----------added this line
            moment: '/app/node_modules/moment/'
        }
    });

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章