To set the entry-point of the extension we return the Symfony bundle-short-name in the function "getJsBundleName" of the "NewsAdmin" class. This name follows the standards of Symfony by placing the public files ("Resources/public") into the "web/bundles/<shortbundlename>" folder.
To define the bundle-extension we have to add the file "Resources/public/js/main.js". This extension configures routes, paths and the directory to the components.
The following content initializes basic require paths, the component directory and the route that we have configured in the navigation https://github.com/sulu-io/ExampleNewsBundle/pull/1/files#diff-656b9372aac1b41132a33f5460c065a8R21.
After clearing the cache and install the newly created assets you should be able to click on the navigation link to see the content "Hello awesome Sulu world!"
A basic component is a small RequireJS module that returns a constructor. The entry-point of the component is the initialize function. With this function you will be able to freely define the structure of your component. Here we will use a best-practice method which is currently standard in new Sulu components.
Read the documentation of components here.
By initializing a component with different starting conditions the parent component is able to commit options ("this.options") into the component. The event system makes it possible to communicate with other components ("this.sandbox.on" and "this.sandbox.emit").
If you want more infomation about communication between components check out the AuraJS documentation.
For the last step in this tutorial we will extract the HTML content of our root into a dedicated component. (In one of the next parts of the tutorial we will explain the code to show a list of “News” articles.)
For our first component we use a very simple code-snippet which displays the message "Hello awesome Sulu world!". Therefor we have to create a file named "main.js" in the folder "Resources/public/js/components/news/list" with this code:
That's it for the second part of the series. Next time we will introduce the Rest-API to fill our application with data.
The code for this part of the tutorial can be found here https://github.com/sulu-io/ExampleNewsBundle/pull/2.