This module adds ui features to the website. The ui is based on angular single page web application schemes. Each application that wishes to use this module should have a ui field in its manifest.json.
{
...
“ui”: {
“icon”: “favicon.png”,
“navName”: “Boilerplate”,
“drawerName”: “Boilerplate”,
“index”: 1,
“views”: {
“/”: {“url”: “/views/index.html”, “ctrl”: “indexCtrl”, “scope”: “everyone”, “title”: “Home”},
“/foo”: {“url”: “/views/foo.html”, “ctrl”: “fooCtrl”, “scope”: “admin”}
},
“scripts”: [“/js/controllers.js”, “/js/ctrl/fooCtrl.js”],
“ngmod”: [“ngTouch”]
}
...
}
icon
- icon to be shown in uinavName
- name to be shown in ui’s navigationindex
- position of this application when displayed in navigationhref
- url to this application; if set, views will be ignoredviews
- Angular ngView properties **url
: templateUrl **ctrl
: name of the controller **scope
: which level of user can access this view **title
: name displayed in navigation; if not set, this view will not show in navigation. **exclusive
: if true, this view will only show in navigation of users with specified scope; otherwise this view will also be shown to users with higher level (eg. views withscope: 'everyone'
will be shown in admin's navigation)scripts
- scripts to be resolved when loading this appngmod
- required angular modules
Use $rootScope.$broadcast()
to display a message with a toast. Listened events are: errorMessage
, warningMessage
, infoMessage
, successMessage
. They will display a toast with different styles.
Example:
$rootScope.$broadcast(‘errorMessage’, ‘Oops, an error has ocurred.’);
In front-end, navCtrl utilizes a http get request to /routes to acquire information to build the navigation drawer. This information come from the route cache, which is built in core-ui's app.finally()
. When front-end sends a request, the server will determine user's scope (everyone, users, admin) and respond with corresponding info.
shiverview-core-ui
run a series of tasks when all applications have been loaded. Those tasks include:
- Initialize route cache
- Build a list of other apps’ bower dependencies and install (using the application's bower.json)
- Inject bower dependencies into index.html (using wiredep)
- Inject angular modules into application.js (using
manifest.json.ui.ngmod
) - Inject route information into application.js (using
manifest.json.ui.views
) - Acquire other apps’ controllers and rebuild minified script (using uglify-js)