在非角度页面中喷洒Angular 2组件

时间:2016-02-15 20:14:53

标签: angularjs angular

目前正在查看Angular 1的升级路径 - > Angular 2和我们使用Angular 1工作完成的一件事就是在面向公众的非应用页面上重用我们的一些组件。

这些页面实际上是静态HTML(尽管它们由Rails呈现),然后一些Angular 2组件被放入页面中。这与Angular 1一起使用,我们只是使用提供了我们需要的指令和组件的模块来引导文档元素。根本没有路由。

使用Angular 2,它看起来像是全有或全无。您声明一个根组件,并通过它呈现所有内容。这对我们来说是一个很大的转变,我希望避免改变我们在这些面向公众的页面上做事的方式。

是否可以根据需要在静态HTML页面中使用Angular 2组件,还是需要转移到单个根元素SPA设计?

简而言之,我要问的是,是否可以将静态内容与动态角度组件混合在一起,或者必须将所有角度组件都置于页面上的单个根元素中?

2 个答案:

答案 0 :(得分:9)

所以这比我原先想象的要简单。在the Angular 2 docs中,它围绕引导多个应用程序有一些特定的措辞。

  

引导多个应用程序

     

在浏览器窗口中工作时,有许多单例   资源:cookie,标题,位置等。 Angular服务   表示这些资源同样必须在所有Angular中共享   占用相同浏览器窗口的应用程序。为此原因,   Angular只创建一个存储所有的全局平台对象   共享服务,每个角度应用程序注入器都有   平台注入器作为其父级。

     

每个应用程序也有自己的私有注入器。什么时候有   在页面上有多个应用程序,Angular会处理每个应用程序   注入器的服务是该应用程序的私有服务。

所以很明显,这是可能的,并且多个应用程序共享服务资源,这是我希望的。

我已经使用多个自举组件进行了一些简单的测试,它运行正常。我还没有尝试过的一件事是引导Angular 2 attribute directive以便在Angular 2组件之外使用。我怀疑它不会起作用,并且该引导程序仅适用于组件而非指令。

就指导而言,我建议Angular 2并非真正设计用于整个静态页面中的洒水行为,并且可能不应该以这种方式使用。相反,虽然您可能有多个应用程序定义的分页的多个部分,但这些组件应构成几乎所有文档/界面。

答案 1 :(得分:1)

  

我们只是使用提供了我们需要的指令和组件的模块来引导文档元素。根本没有路由

这正是我目前使用Angular2的方式。请参阅https://github.com/niczero/ng2-es5-file-upload/blob/master/demo/index.html上的示例 - 我的一些静态' perl以与使用ruby相同的方式生成页面。

顺便说一句,如果你拥抱Universal Module Definitions

,能够以两种方式使用你的模块会容易得多