generator-cui-ng
v0.4.7
Published
Starting point for CUI based Angular projects.
Downloads
14
Keywords
Readme
Cui-Ng Generator
Summary
Starting point for CUI IDM Angular projects containing pre-built tools and modules for developers.
Prerequisites
Every step after this requires NPM
- Grunt CLI:
npm install -g grunt-cli
- Yeoman:
npm install -g yo
Installing
Install by running
npm install -g generator-cui-ng
.Create a new directory for your new project.
Inside the new directory run
yo cui-ng
.
You will be given questions to customize your new project. If you make a mistake you can always start over by deleting the new project directory and restarting from step 2.
At the end of this process you will be given instructions on how to generate the environment variable profile for your new project.
Customizing Your New CUI Project
The generator is built to allow you to get the newest upstream features of Cui-Idm-B2X without risk of overwriting any of your current work by splitting it into 2 main folders: app
and app-custom
.
The app/
directory contains the most up to date upstream B2X code (upon updating your B2X dependency to a newest version). You can also run yo cui-ng:update
from your project's root to get the newest upstream updates.
The app-custom/
directory houses your own customizations or new features. Any files inside of app-custom
that share a path and filename to a file inside of app
will overwrite that file inside of app
with your own work from app-custom
.
Customization Example
In this example, say we want to change the way the applications are being shown in the 'My applications' screen.
The file containing the markup for the 'My Applications' screen is located at: app/modules/applications/myApplications.html
What you would do is:
- Copy the original file into:
app-custom/modules/applications/myApplications.html
- This will override the original file located in the
app/
directory
- This will override the original file located in the
- Do your customizations in that new file.
NOTES:
Every time you want to reference an asset in
app-custom
, be it an image or html template, make sure to point toapp
instead ofapp-custom
, since everything gets moved to theapp
folder during the build process.All html files in app-custom get concatenated and merged in with the rest of your js files, using ng-templates. This helps reduce the number of http requests. If for some reason you need an html file to carry over (maybe to open in a new tab), simply create a
non-concat
folder in app-custom and put your html files in there (remember to follow the first note when referencing them)
The benefits of this yeoman generator should be clear now: You can change pieces in a file by file fashion without compromising your ability to get updates to the other moving pieces.
Running Your App
Running grunt
from the root of the project will start browsersync. This is a grunt task that will auto-reload the browser page for you every time you make edits.
Running grunt build
will concatenate and minify all project assets needed to run your application inside of the build/
directory. You might have to update the copy task if you add in new assets to your project.
Running grunt demo
will run the project from the build folder giving you an accurate representation of what the project will look like once it is deployed. It is always a good idea after introducing major changes or new assets to confirm that the project runs from the build folder before deploying or publishing anything.
Other Notes/Features
The
gruntfile
,tasks/
,app/wrappers
directories do not get updated after runningyo cui-ng:update
or via traditionalnpm update
ornpm install
.From the
app-custom/modules/
directory you can runyo cui-ng:add-module
to kick start a new module structure with a basic state configuration.From within a nested module folder (
app-custom/modules/appliciations/myApplications/
for example) you can kick start a new feature by runningyo cui-ng:add-controller
. This will create a new controller attached to the applications module and, optionalls, a new html template file that matches the name of the controller.
License
Copyright (c) 2015 Covisint Corporation. All Rights Reserved.