Exercise 10: NG2 APP Component Rendered In A Browser View¶
This exercise requires a working buildout using a fork of the collective.jstraining package.
For this exercise, we will run an Angular 2 application inside a Plone browser view.
We have most of the Angular 2 boiler plate code created for you so let’s finish up a few things so you can customize it.
In this case we are going to use angular client to create the app inside the package.
We will be working in the
exercise10 directory of the collective.jstraining package.
Install npm dependencies
cd exercise10/static/ng2app npm install npm install -g angular-cli
Add Your Angular 2 Component¶
exercise10/static/ng2app directory, there is a boilerplate code
for an ng2 app.
You can use ng2 cli to create new components, modules, services, …
We hope you like typescript.
We can change the exercise10/static/src/app/app.component.html to create your own template.
Like I said, you can do whatever in this module.
Register Static Resource Directory¶
Next, let’s register the static directory we just placed our script into.
To register, you need to add ZCML registration for the static directory your script is in.
Add this to the
<plone:static directory="static" type="plone" name="exercise10" />
Build The File With Webpack¶
Our deployment is built using the ng command line tool
cd exercise10/static/ng2app ng build --prod
Whenever you make a change to your component files, webpack will auto re-build the distribution.
Angular CLI creates three js, one for basic webpack instructions, one with the main js and another with the styling js.
You will need to register the three on the
<records prefix="plone.resources/exercise10-inline" interface='Products.CMFPlone.interfaces.IResourceRegistry'> <value key="js">++plone++exercise10/ng2app/dist/inline.js</value> </records> <records prefix="plone.resources/exercise10-main" interface='Products.CMFPlone.interfaces.IResourceRegistry'> <value key="js">++plone++exercise10/ng2app/dist/main.8b778eea5dd35968ef66.bundle.js</value> <value key="deps">exercise10-inline</value> <value key="deps">exercise10-style</value> </records> <records prefix="plone.resources/exercise10-style" interface='Products.CMFPlone.interfaces.IResourceRegistry'> <value key="js">++plone++exercise10/ng2app/dist/styles.b52d2076048963e7cbfd.bundle.js</value> </records>
Its really important that in case that you need to have dependency on loading the js you define on the registry.xml as its shown for the main js.
Finally we want to create a single entry point to load them, so we are going to
create and register a js with the requires that are loading the app on a file
With the main.js defined on the filesystem we can now create the resource as a new resource
<records prefix="plone.resources/exercise10" interface='Products.CMFPlone.interfaces.IResourceRegistry'> <value key="js">++plone++exercise10/ng2app/main.js</value> </records>
Create Your Browser View¶
This might be redundant with other documentation.
Skip ahead if you know how to create browser views.
In our case, let’s add a basic new page view.
Add this into your
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:tal="http://xml.zope.org/namespaces/tal" xmlns:metal="http://xml.zope.org/namespaces/metal" xmlns:i18n="http://xml.zope.org/namespaces/i18n" lang="en" metal:use-macro="context/main_template/macros/master" i18n:domain="plone"> <body> <metal:content-core fill-slot="content-core"> <metal:content-core define-macro="content-core"> <app-root></app-root> </metal:content-core> </metal:content-core> </body> </html>
app-root tag is what is used for the component selector.
You can customize this and use whatever selector you like.
Add in view python code to tell Plone to render the script in the
from Products.CMFPlone.resources import add_resource_on_request from Products.Five import BrowserView class Exercise10View(BrowserView): def __call__(self): # utility function to add resource to rendered page add_resource_on_request(self.request, 'exercise10') return super(Exercise10View, self).__call__()
The most interesting part here is to look at
Finally, wire it up with ZCML registration in the
<browser:page name="exercise10" for="*" class=".browser.Exercise10View" template="page.pt" permission="zope2.View" />
- Start up your Plone instance
- Install the
- Toggle development mode to make sure the new resources are included
Then, visit the URL:
This is assuming your Plone is located at the URL
To make sure your resource registry configuration changes apply, you’ll need to be in development mode.
You can also toggle development mode on and off, click save, to force configuration to be re-built after changes instead of keeping development mode on.
In this exercise, there is no special distinction between development and production builds.