Starting point for CUI IDM Angular projects containing pre-built tools and modules for developers.
Every step after this requires NPM
npm install -g grunt-cli
npm install -g yo
Install by running
npm install -g generator-cui-ng.
Create a new directory for your new project.
Inside the new directory run
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.
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/ 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.
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
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:
What you would do is:
Every time you want to reference an asset in
app-custom, be it an image or html template, make sure to point to
app instead of
app-custom, since everything gets moved to the
app 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.
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.
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.
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.
app/wrappers directories do not get updated after running
yo cui-ng:update or via traditional
npm update or
app-custom/modules/ directory you can run
yo 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 running
yo 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.
Copyright (c) 2015 Covisint Corporation. All Rights Reserved.