-
Notifications
You must be signed in to change notification settings - Fork 1
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:
- Copy the
about
folder and paste it into theapp
folder. - Rename the folder. Let's call it
contactUs
as an example. - 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
tocontactUs
and have includedapp.contactUs
as a dependency in theapp.js
file.