Skip to content

How to add your own feature folder

Cathal Mac Donnacha edited this page Feb 15, 2017 · 7 revisions

As you can see in this boilerpate project we have 6 sample feature folders: about, layout, shared, sidenav, todo and toolbar. Well, what would you do if you wanted to add your own feature? For now, you have to copy and paste one of the sample features and manually rename the files and contents, but hopefully I'll automate this process in the future.

Anyway, here's how you'd do it:

  1. Copy the about folder and paste it into the app folder.
  2. Rename the folder. Let's call it contactUs as an example.
  3. Rename all of the files by replacing "about" with "contactUs". You should end up with something like this:

![contactUs feature folder](http://i.imgur.com/pgZY2NV.png) 4. Open each file and replace "about" with "contactUs". Note: casing may vary in each file i.e contactUs, ContactUs. 5. Open `app.js` and add the new module `app.contactUs` to the bottom the list of dependencies. 6. Open `sidenav.service.js` and add the new Contact Us menu item. It should look like this:
![Contact Us menu item](http://i.imgur.com/PtLNd5t.png) 7. Run the `npm start` task. 8. The app should load. 9. Click on the "Contact Us" menu item.

Notes:

  • If you are seeing an AngularJS dependency error in the browser's console then make sure that you've renamed everything from about to contactUs and have included app.contactUs as a dependency in the app.js file.
Clone this wiki locally