-
Notifications
You must be signed in to change notification settings - Fork 0
/
lunr-index.json
1 lines (1 loc) · 174 KB
/
lunr-index.json
1
[{"title":"Basics","tags":["css","bootstrap","design"],"href":"/addons/bootstrap-2/","content":"The W20 Bootstrap 2 addon provides the Twitter Bootstrap framework in its 2 3 2 version the last version of the 2 0 branch It also provides a compatible angular bootstrap library and a compatible font awesome set of icons Installation bower install w20 bootstrap 2 Configuration To include the addon declare it in the application manifest bower_components w20 bootstrap 2 w20 bootstrap 2 w20 json","summary":"The W20 Bootstrap 2 addon provides the Twitter Bootstrap framework in its 2.3.2 version, the last version of the 2.0 branch.\nIt also provides a compatible angular-bootstrap library and a compatible font-awesome set of icons.\n\nInstallation\n\n\nbower install w20-bootstrap-2\n\n\nConfiguration\n\nTo include...","zone":{"path":"/addons","label":"Add-ons","logo":"addons-logo.svg"},"section":{"label":"W20 Bootstrap 2","path":"bootstrap-2"}},{"title":"Basics","tags":["css","bootstrap","design"],"href":"/addons/bootstrap-3/","content":"The W20 Bootstrap 3 addon provides the Twitter Bootstrap framework in its latest version It also provides a compatible angular bootstrap library and a compatible font awesome set of icons Installation bower install w20 bootstrap 3 Configuration To include the addon declare it in the application manifest bower_components w20 bootstrap 3 w20 bootstrap 3 w20 json","summary":"The W20 Bootstrap 3 addon provides the Twitter Bootstrap framework in its latest version.\nIt also provides a compatible angular-bootstrap library and a compatible font-awesome set of icons.\n\nInstallation\n\n\nbower install w20-bootstrap-3\n\n\nConfiguration\n\nTo include the addon, declare it in the...","zone":{"path":"/addons","label":"Add-ons","logo":"addons-logo.svg"},"section":{"label":"W20 Bootstrap 3","path":"bootstrap-3"}},{"title":"Forms","tags":["w20","frontend","form","generation","rich"],"href":"/addons/components/forms","content":"Forms are one of the most common element in a web application The web framework provides support for forms building through programmatic configuration Internally it relies on Angular Formly http docs angular formly com an advanced library for managing forms with AngularJS This approach reduces the amount of HTML in favor of JavaScript to provide flexibility reusability maintainability and simplicity Forms Overview To display a form we declare a form element with a unique child The child element will itself declare the w20Form directive the model attribute which binds the form data to its value on the scope the fields attribute which reads the configuration object for the form fields on the scope Submit The w20Form directive transcludes Its child elements get appended to the end of the form This allow to declare the submit button inside the directive element In the JavaScript we can configure the form elements scope form model fields key name type text templateOptions label Name submit function The end result is an input element with a binding to scope model name key a type text type and a label Name label Benefits Using this approach offer several benefits such as Simpler declaration CSS agnostic no Bootstrap classes tightly linked to the form for instance Automatic validation Easier to declare conditional logic Creation of custom element types i18n capability Configuration Fragment declaration To include the form support in your application declare the form module in your w20 components addon fragment configuration of the application manifest bower_components w20 components w20 components w20 json forms Fields A field is an object which can accept theses properties template String or templateUrl String An HTML template or an URL to one This is useful to declare a title in the middle of the form for instance template Title key String The name of the property of the model to which this field NgModel will be binded className String The name of a css class to apply to the field Useful for layout type String The type of the field By default several types are available text email password date number url datetime local tel search color time week month checkbox radio textarea select templateOptions Object This property allow setting different options on the field element template label String The label of the field placeholder String The placeholder of the field Any additional template options are set as attributes on the field element This allow the registration of validation properties such as required Boolean Specify if the field is mandatory minlength Number Specify the field minimum length input min Number Specify the field minimum value maxlength Number Specify the field maximum length input max Number Specify the field maximum value pattern String A regular expression to which the input needs to validate against Some properties of the templateOptions only make sense for certain field type Select options Array of Object with properties name string value value group group The list of options for the select element Textarea rows Number Number of rows cols Number Number of columns Field group A field group is a way to group fields together which is useful for advanced layout It can also be used to group fields that are associated with the same model key person fieldGroup key sex type radio className col md 4 templateOptions name radioGroup label Male value M key sex type radio className col md 4 templateOptions name radioGroup label Female value F key married type checkbox className col md 4 templateOptions label Married y n In the above example the model will look something like this person sex M married true Internationalization Strings used for label placeholder etc can be replaced by i18n key They are automatically localized templateOptions label application w20 label to localize Expression properties Expression properties can be used to evaluate property on the field dynamically For instance key myThing type someType templateOptions label Label expressionProperties this would make the label change to what the user has typed templateOptions label viewValue This sets data someProp to be true or false data someProp model myThing length 5 Hide expression The hideExpression property is similar to the expressionProperties although it accepts both a string or a function It allows to show hide the corresponding field hideExpression function viewValue modelValue scope return scope model baz foobar Validation Validators Form validation is an important part of the user experience while completing the form You can add validation rule easily with the validators property type text key ip templateOptions required true label IP Address validators notLocalHost viewValue 127 0 0 1 ipAddress expression function viewValue modelValue scope var value modelValue viewValue return d 1 3 3 d 1 3 test value message viewValue is not a valid IP Address In the above example we register two validators notLocalHost and ipAddress The first one will validate the field if and only if the viewValue that is the value the user entered in the field is different from the localhost ip address The second validator demonstrate another way of declaring validators with more options Here we test against an IP regex and register a validation message to be displayed if the field does not validate Validation We already saw how to register a message alongside a validator but you can also register messages for any property For this you can use the validation option key id type text templateOptions label Id placeholder Id required true minlength 6 validation messages required options templateOptions label is mandatory minlength Minimum length allowed is options templateOptions minlength In the above example leaving the field empty will show Id is mandatory while providing an id with a length inferior to 6 will show Minimum length allowed is 6 The options templateOptions refer to the field templateOptions You can also use a shortcut syntax to for options templateOptions validation messages required to label is mandatory minlength Minimum length allowed is to minlength Disabling validation Default validation messages appear by the use of a wrapper around template You can completely disable the wrapper with the wrapper property or provide your own wrapper see Registering wrapper below key id type text wrapper null callout warning Please note that messages are strings which means they need to be between quotes For instance if you use an i18n key for the message it needs to be declared as application i18n key not just application i18n key callout callout info There are common default validation messages already registered for the en and fr locales callout callout info See Angular formly field configuration object http docs angular formly com docs field configuration object for an exhaustive description of all options available callout Customization FormsService The FormsService main goals are the registration of global validation messages custom template types and custom wrappers Global validation messages Although you can register a validation message for each field as we saw previously most of the time you will like to register a message for a certain validation that apply to all fields that declare this validation rule You can proceed in several ways Register a string message with validation addStringMessage name string formsService validation addStringMessage required This field is required You can also pass an i18n key formsService validation addStringMessage maxlength application form validation maxlength Register a template option value message sometime a string message is not enough because you need to display a variable value in the message To accomplish this you can use the validation addTemplateOptionValueMessage name property prefix suffix alternate This is easy to understand with an example scope form fields key id type text templateOptions label Id minlength 6 minlengthstring six key other type text templateOptions label Other minlength 6 formsService validation addTemplateOptionValueMessage minlength minlengthstring Minimum length is characters Too short In the example above we register a validation message for the minlength attribute first parameter The message displayed if the validation fail will be Minimum length is six characters i e prefix property suffix for the id field Too short for the other field because it uses the alternate message if the property does not exist Registering type The forms module provide default template type listed in the Fields section of this page However you can create your own type for maximum flexibility formsService config setType name customTitle to is a shortcut for options templateOptions template Custom title to customSetting scope form fields key id type customTitle templateOptions customSetting Some value Registering wrapper To set a wrapper use the config setWrapper wrapper method formsService config setWrapper template validationTemplate The validation template need to declare the element at the position where you want your field to be inserted inside the wrapper For instance this wrapper will add a above every field Layout and styling Layout When using a grid framework like Bootstrap you can achieve the desired layout using the className property of fields You can also combine this with the fieldGroup property for inner layout Style The default validation wrapper have these CSS classes for the label messages wrapper and message element w20 form error label for the form element label w20 form error messages for the ng messages div that wrap all the validation messages w20 form error message for each validation message","summary":"Forms are one of the most common element in a web application. The web framework provides support for \nforms building through programmatic configuration. Internally it relies on Angular Formly, \nan advanced library for managing forms with AngularJS. This approach reduces the amount of HTML in favor...","zone":{"path":"/addons","label":"Add-ons","logo":"addons-logo.svg"},"section":{"label":"W20 components","path":"components"}},{"title":"Basics","tags":["w20","frontend","rich","component"],"href":"/addons/components/","content":"W20 Components The W20 Components addon provides various UI components Installation bower install w20 components Configuration To include the addon declare it in the application manifest bower_components w20 components w20 components w20 json","summary":"W20 Components\n\nThe W20 Components addon provides various UI components.\n\nInstallation\n\n\nbower install w20-components\n\n\nConfiguration\n\nTo include the addon, declare it in the application manifest:\n\n\n"bower_components/w20-components/w20-components.w20.json": {}\n","zone":{"path":"/addons","label":"Add-ons","logo":"addons-logo.svg"},"section":{"label":"W20 components","path":"components"}},{"title":"UI Select","tags":["w20","frontend","select","combo","rich"],"href":"/addons/components/select","content":"Angular UI select Angular UI select https github com angular ui ui select is an AngularJS native version of Select2 https select2 github io and Selectize http brianreavis github io selectize js Configuration bower_components w20 components w20 components w20 json select","summary":"Angular UI select\n\nAngular UI select is an AngularJS-native version of Select2\nand Selectize.\n\nConfiguration\n\n\n"bower_components/w20-components/w20-components.w20.json": {\n "select": {}\n}\n","zone":{"path":"/addons","label":"Add-ons","logo":"addons-logo.svg"},"section":{"label":"W20 components","path":"components"}},{"title":"UI grid","tags":["w20","frontend","rich","component","grid"],"href":"/addons/components/ui-grid","content":"Angular UI grid Angular UI grid http ui grid info is a datagrid fully integrated with AngularJS It is part of the AngularUI http angular ui github io suite Configuration bower_components w20 components w20 components w20 json grid","summary":"Angular UI grid\n\nAngular UI grid is a datagrid fully integrated with AngularJS. It is part of the \nAngularUI suite.\n\nConfiguration\n\n\n"bower_components/w20-components/w20-components.w20.json": {\n "grid": {}\n}\n","zone":{"path":"/addons","label":"Add-ons","logo":"addons-logo.svg"},"section":{"label":"W20 components","path":"components"}},{"title":"Dygraphs","tags":["w20","frontend","chart","plot","linechart","visualization","sampling"],"href":"/addons/dataviz/dygraphs","content":"Dygraphs http dygraphs com is a fast charting library that allows users to explore large data sets It plots data series as lines The W20 integration provides an AngularJS directive augmented with an option to load down sampled data while zooming button href http w20 framework github io w20 dataviz label Live demo Dygraphs Installation See the installation of the Dataviz addon in the basics addons w20 dataviz section Configuration Declare the dygraphs module in the modules section of the dataviz fragment json w20 dataviz modules dygraphs Directive Below you can find an example of a dygrah declaration with all its attributes html Attributes data The initial data to provide to the dygraph Data format can either be of type string CSV array or url If no data is passed or if the values are empty the graph will not be instatntiated String CSV data set CSV for Comma Separated Values is a lightweight data format that can be transmitted as string to the dygraph It is often used while exporting data from tools like MS Excel for instance Here is an example of a CVS data set which represents two series of maximum and minimum temperatures during consecutive days of january 2007 Date High Low 20070101 62 39 20070102 62 44 20070103 62 42 20070104 57 45 20070105 54 44 20070106 55 36 20070107 62 45 The first line is the data set header Dygraphs will use these information for labelling the axis and series For each row of data the first element correspond to the X axis while the remaining values represents the series value at this abscissa Raw data set You can also pass an array of data to the graph instead of a CSV formatted string Here is the same example as above in raw data format json 20070101 62 39 20070102 62 44 20070103 62 42 20070104 57 45 20070105 54 44 20070106 55 36 20070107 62 45 The information about series name is lost when using raw data format Headers for native format must be specified via the labels option see options attribute URL Alternatively you can use a url as the value of the data attribute Dygraphs will try to issue a GET request to this url and use the response as the data value The response should be of one of the aforementioned type options This attributes allows you to merge your custom options with the default one provided by the directive The available options are documented on the dygraphs options http dygraphs com options html page reference This attribute establishes a two way data binding between the dygraph instance created in the directive and the reference passed to this attribute html javascript console info scope myReference instanceof Dygraph true Please note that data must be passed to the graph before a reference could be created This means that the reference could be undefined if you try to access it prior to the graph instantiation on range change This attribute should receive a function reference which if defined will display a range selector below the graph and trigger the function whenever the range changes See next section for details Server side down sampling Dygraph can handle large data sets but feeding a massive amount of data to the client still pose a problem in terms of network performance One technique to avoid this issue is to load a reasonable amount of data points initially and request more data points on the range the user has selected This behavior can be triggered by declaring the on range attribute on the directive element Example Our backend has a REST resource data which returns a data set interval defined by the two query params min and max html javascript var minValue 1461327631000 max value 1461414031000 http get data params min minValue max maxValue then function data scope data data scope onRangeChange function rangeArray doneCallback var lowerLimit rangeArray 0 upperLimit rangeArray 1 http get data params min lowerLimit max upperLimit then function moreDetailedData doneCallback moreDetailedData We start by requesting the original data set and set our initial scope data with the result As soon as data is available the directive will create a new Dygraph instance and plot the graph to the div When the user interact with the graph through the range selector or by click moving on the graph canvas the onRangeChange function is called with two parameters rangeArray An array of length 2 which contains the lower and upper limit selected by the range selector doneCallback A function callback which must be called with the more fine grained data set for the specific interval When the doneCallback function is called the argument it is passed will be merged into the original data set supplied to scope data","summary":"Dygraphs is a fast charting library that allows users to explore large data sets. It plots data series as lines.\nThe W20 integration provides an AngularJS directive augmented with an option to load down-sampled data while zooming.\n\n{{% button href="http://w20-framework.github.io/w20-dataviz...","zone":{"path":"/addons","label":"Add-ons","logo":"addons-logo.svg"},"section":{"label":"W20 dataviz","path":"dataviz"}},{"title":"Basics","tags":["frontend","w20","chart","data","visualization"],"href":"/addons/dataviz/","content":"The W20 Dataviz addon provides supports for charts and graphical representation It proposes an integration of the NVD3 http nvd3 org charting library which itself uses D3 http d3js org along with an integration of the Dygraphs http dygraphs com chart library for large data sets button href http w20 framework github io w20 dataviz label Live demo Dataviz addon Installation bower install w20 dataviz Configuration To include the addon declare it in the application manifest bower_components w20 dataviz w20 dataviz w20 json If using the w20 bridge you can simply refer to the fragment by its id without specifying the path w20 dataviz Additional configuration information can be found in the Jsdoc http seedstack org jsdoc dataviz of the addon","summary":"The W20 Dataviz addon provides supports for charts and graphical representation. It proposes an integration of the\nNVD3 charting library (which itself uses D3) along with an integration of\nthe Dygraphs chart library for large data sets.\n\n{{% button href="http://w20-framework.github.io/w2...","zone":{"path":"/addons","label":"Add-ons","logo":"addons-logo.svg"},"section":{"label":"W20 dataviz","path":"dataviz"}},{"title":"Nvd3","tags":["w20","frontend","chart","pie","bar","visualization"],"href":"/addons/dataviz/nvd3","content":"Nvd3 Nvd3 http nvd3 org is a data visualization library build on top of the popular d3 https d3js org library It offers several chart types for common visualization needs The web framework add an AngularJS integration in the form of directives along with sensible defaults for these different charts button href http w20 framework github io w20 dataviz label Live demo Multibar The multibar chart is used to compare different series in a bar representation following the X axis Configuration multibar The w20MultibarChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller callout warning You must indicate a unique id for the chart callout Data format Data fed to the multibar chart should follow a default format This format can be overridden by the use of personal function See x and y properties below Default data format exemple key Series 1 values 1 10 2 20 3 5 key Series 2 values 1 8 2 10 3 15 The key property defines the name of the series The values defines the data of the series By default the value at index 0 of each sub array is plotted on the X axis while the value at index 1 is plotted on the Y axis Multibar configuration The multibar chart is configured by the configuration object passed to the directive declaration see Directives Exemple scope multibarConfig data scope multibarData yAxisShowMaxMin true xAxisShowMaxMin true showLegend true showControls true tooltips true yaxislabel The Y axis title xaxislabel The X axis title xaxistickformat xAxisTickFormatMultibar custom function to configure X axis Available properties Properties Type Description data Array Data to display using the multibar chart mandatory if you don t define the noData property Generally it would be a property of scope x function Providing a function to the x property allows configuration of the data on the X axis Consider this example say we want to double the data value displayed on the X axis in comparison to the data provided to the data property We can achieve this by providing the following function to the x property function d return d 0 2 where d 0 is all the values at index 0 of all sub arrays of the array at property values of all objects in the array provided to the data property y function See x property above Applied to the Y axis instead forceY Array Values to force on the Y axis By default the Y axis will start at the minimum value of the serie Use it to force special values such as 0 showLegend Boolean Display or hide legend showControls Boolean Display or hide controls tooltips Boolean Enable or disable tooltips when hovering the chart reduceXTicks Boolean Reduce the number of ticks on the X axis staggerLabels Boolean Create a gap between labels so that they don t overlap on each other if they are too many noData String Message to display when there is no data default to No data available rotateLabels integer Rotation to apply to X axis labels 0 horizontal default 90 vertical color Array Color of series in the corresponding order Can be hexadecimal named or RGB Ex 4D9FF2 yellow rgb 151 109 165 Note that you can also specify the value of the color in the data array by providing a color attribute to each object stacked Boolean Indicate whether the series should be stacked on each other or not tooltipContent function Customize tooltip content Ex function key x y e graph return lth1 gt Tooltip Title lt h1 gt ltp gt y lt p gt where key x and y are the name and value of the series at the tooltip point e an event and graph the chart object transitionDuration integer Duration of transition effect Default to 500 Axis Configuration Axis are configured in the same configuration object X axis Properties Type Description xAxisTickValues Array Specify explicitly the values to plot on the X axis xAxisTickSubdivide Integer Specify the number of intermediate ticks to show on the X axis xAxisTickPadding Integer Specify ticks padding on the X axis xAxisTickFormat function Specify how data should be formatted For instance you can format number on the X axis to have exactly two digit after the decimal point d3 format 2f Or format Date object to a readable format as d3 time format Y which shows the year only See d3 js documentation for a list of all format available xAxisLabel String Label of the X axis xAxisDomain Array start end Specify the domain on the X axis min to max value xAxisShowMaxMin Boolean Show or hide maximum and minimum value in bold xAxisRotateLabels Integer 0 to 180 rotation of X axis tick label xAxisStaggerLabels Integer Size of the gap between labels to resolve overlapping issue Y axis See X axis Replace property xName by yName Pie The pie chart is used to represent proportion between series Configuration pie The w20PieChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller callout warning You must indicate a unique id for the chart callout Data format Data fed to the pie chart should follow a default format This format can be overridden by the use of personal function See x and y properties below Default data format exemple key Series 1 value 10 key Series 2 value 20 callout tips Note that the pie donut chart has value by default instead of values as it can only represent one single value callout The key property defines the name of the series The value defines the data of the series Pie chart configuration The pie chart is configured by the configuration object passed to the directive declaration see Directives Exemple scope pieConfig data scope pieData showLabels true pieLabelsOutside true showValues true tooltips true labelType percent showLegend true Available properties Properties Type Description data Numeric Data to display using the pie chart mandatory if you don t define the noData property x function Providing a function to the x property allows configuration of the data on the X axis Consider this example say we want to customize the key value displayed on the X axis X refer to the key and Y to the value in comparison to the data provided to the data property We can achieve this by providing the following function to the x property function return d key a custom string appended where d key is all the values of key in the array passed to property data y function See x property above Applied to the Y axis instead Exemple double value function return d value 2 showLegend Boolean Display or hide legend tooltips Boolean Enable or disable tooltips when hovering the chart noData String Message to display when there is no data default to No data available color Array Color of series in the corresponding order Can be hexadecimal named or RGB Ex 4D9FF2 yellow rgb 151 109 165 Note that you can also specify the value of the color in the data array by providing a color attribute to each object tooltipContent function Customize tooltip content Ex function key x y e graph return lth1 gt Tooltip Title lt h1 gt ltp gt y lt p gt where key x and y are the name and value of the series at the tooltip point e an event and graph the chart object transitionDuration integer Duration of transition effect Default to 500 showLabels Boolean Show or hide labels labelType String What the label would display key value or percent pieLabelsOutside Boolean Should the label be inside or outside the chart valueFormat function Custom formating of values For instance one can print values in 2f decimal by passing d3 format 2f to this property See d3 js documentation for a list of format value donut Boolean Display the chart as a donut donutLabelsOutside Boolean Should the label be inside or outside the chart donutRatio Numeric Ratio between the hole and edge of donut Default 0 5 Scatter Bubble chart The scatter chart is used to compare different series between 3 values X and Y axis size of data Configuration scatter The w20ScatterChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller callout warning You must indicate a unique id for the chart callout Fragment definition sections This module has no fragment definition section Data format Data fed to the scatter chart should follow a default format Default data format exemple key Series 1 values x 10 y 20 size 0 5 x 12 y 13 size 0 9 key Series 2 values x 15 y 2 size 0 5 x 15 y 13 size 0 6 The key property defines the name of the series The values defines the data of the series Scatter chart configuration The scatter chart is configured by the configuration object passed to the directive declaration see Directives Exemple scope scatterConfig data scope scatterChartData tooltips true showLegend true showControls true Available properties Properties Type Description data Array Data to display using the scatter chart mandatory if you don t define the noData property Generally it would be a property of scope x function Providing a function to the x property allows configuration of the data on the X axis Consider this example say we want to double the data value displayed on the X axis in comparison to the data provided to the data property We can achieve this by providing the following function to the x property function return function d return d 0 2 where d 0 is all the values at index 0 of all sub arrays of the array at property values of all objects in the array provided to the data property tooltipXContent function Customize tooltip content on the X axis require tooltips to be true Ex function key x y return ltstrong gt x lt strong gt tooltipYContent function Customize tooltip content on the X axis require tooltips to be true Ex function key x y return ltstrong gt y lt strong gt showLegend Boolean Display or hide legend showControls Boolean Display or hide controls tooltips Boolean Enable or disable tooltips when hovering the chart showDistX Boolean Show hide a line marker to the X value when hovering the point showDistY Boolean Show hide a line marker to the Y value when hovering the point noData String Message to display when there is no data default to No data available xPadding Numeric distance between ticks on the X axis yPadding Numeric distance between ticks on the Y axis color Array Color of series in the corresponding order Can be hexadecimal named or RGB Ex 4D9FF2 yellow rgb 151 109 165 Note that you can also specify the value of the color in the data array by providing a color attribute to each object transitionDuration integer Duration of transition effect Default to 500 fisheye Numeric Magnifying factor when showControls is true Axis Configuration Axis are configured in the same configuration object X axis Properties Type Description xAxisTickValues Array Specify explicitly the values to plot on the X axis xAxisTickSubdivide Integer Specify the number of intermediate ticks to show on the X axis xAxisTickPadding Integer Specify ticks padding on the X axis xAxisTickFormat function Specify how data should be formatted For instance you can format number on the X axis to have exactly two digit after the decimal point d3 format 2f Or format Date object to a readable format as d3 time format Y which shows the year only See d3 js documentation for a list of all format available xAxisLabel String Label of the X axis xAxisDomain Array start end Specify the domain on the X axis min to max value xAxisShowMaxMin Boolean Show or hide maximum and minimum value in bold xAxisRotateLabels Integer 0 to 180 rotation of X axis tick label xAxisStaggerLabels Integer Size of the gap between labels to resolve overlapping issue Y axis See X axis Replace property xName by yName Discrete bar The discretebar chart is used to compare different series in a bar representation Configuration discretebar The w20DiscreteBarChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller callout warning You must indicate a unique id for the chart callout Data format Data fed to the discretebar chart should follow a default format This format can be overridden by the use of personal function See x and y properties below Default data format exemple key Series 1 values 1 10 2 20 3 5 key Series 2 values 1 8 2 10 3 15 The key property defines the name of the series The values defines the data of the series By default the value at index 0 of each sub array is plotted on the X axis while the value at index 1 is plotted on the Y axis Discretebar configuration The discretebar chart is configured by the configuration object passed to the directive declaration see Directives Exemple scope discreteBarConfig data scope discreteBarData tooltips true showValues true Available properties Properties Type Description data Array Data to display using the discretebar chart mandatory if you don t define the noData property Generally it would be a property of scope x function Providing a function to the x property allows configuration of the data on the X axis Consider this example say we want to double the data value displayed on the X axis in comparison to the data provided to the data property We can achieve this by providing the following function to the x property function return function d return d 0 2 where d 0 is all the values at index 0 of all sub arrays of the array at property values of all objects in the array provided to the data property y function See x property above Applied to the Y axis instead forceY Array Values to force on the Y axis By default the Y axis will start at the minimum value of the serie Use it to force special values such as 0 showValues Boolean Display the value of the bar on top of them valueFormat function Format the value displayed when showValues is true Ex d3 format 2f tooltips Boolean Enable or disable tooltips when hovering the chart staggerLabels Boolean Create a gap between labels so that they don t overlap on each other if they are too many noData String Message to display when there is no data default to No data available color Array Color of series in the corresponding order Can be hexadecimal named or RGB Ex 4D9FF2 yellow rgb 151 109 165 Note that you can also specify the value of the color in the data array by providing a color attribute to each object tooltipContent function Customize tooltip content Ex function key x y e graph return lth1 gt Tooltip Title lt h1 gt ltp gt y lt p gt where key x and y are the name and value of the series at the tooltip point e an event and graph the chart object transitionDuration integer Duration of transition effect Default to 500 Axis Configuration Axis are configured in the same configuration object X axis Properties Type Description xAxisTickValues Array Specify explicitly the values to plot on the X axis xAxisTickSubdivide Integer Specify the number of intermediate ticks to show on the X axis xAxisTickPadding Integer Specify ticks padding on the X axis xAxisTickFormat function Specify how data should be formatted For instance you can format number on the X axis to have exactly two digit after the decimal point d3 format 2f Or format Date object to a readable format as d3 time format Y which shows the year only See d3 js documentation for a list of all format available xAxisLabel String Label of the X axis xAxisDomain Array start end Specify the domain on the X axis min to max value xAxisShowMaxMin Boolean Show or hide maximum and minimum value in bold xAxisRotateLabels Integer 0 to 180 rotation of X axis tick label xAxisStaggerLabels Integer Size of the gap between labels to resolve overlapping issue Y axis See X axis Replace property xName by yName Line with focus The line with focus chart is used to explore series on a long range of values You can restrict the range with the chart below the main chart to render data in a more precise way Configuration linewithfocus The w20LineWithFocusChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller callout warning You must indicate a unique id for the chart callout Fragment definition sections This module has no fragment definition section Data format Data fed to the line with focus chart should follow a default format This format can be overridden by the use of personal function See x and y properties below Default data format exemple key Series 1 values 1 10 2 20 3 5 key Series 2 values 1 8 2 10 3 15 The key property defines the name of the series The values defines the data of the series By default the value at index 0 of each sub array is plotted on the X axis while the value at index 1 is plotted on the Y axis Line with focus configuration The line with focus chart is configured by the configuration object passed to the directive declaration see Directives Exemple scope lineWithFocusConfig data scope linefocusdata tooltips true Available properties Properties Type Description data Array Data to display using the line with focus chart mandatory if you don t define the noData property Generally it would be a property of scope x function Providing a function to the x property allows configuration of the data on the X axis Consider this example say we want to double the data value displayed on the X axis in comparison to the data provided to the data property We can achieve this by providing the following function to the x property function return function d return d 0 2 where d 0 is all the values at index 0 of all sub arrays of the array at property values of all objects in the array provided to the data property y function See x property above Applied to the Y axis instead forceY Array Values to force on the Y axis By default the Y axis will start at the minimum value of the serie Use it to force special values such as 0 showLegend Boolean Display or hide legend tooltips Boolean Enable or disable tooltips when hovering the chart noData String Message to display when there is no data default to No data available color Array Color of series in the corresponding order Can be hexadecimal named or RGB Ex 4D9FF2 yellow rgb 151 109 165 Note that you can also specify the value of the color in the data array by providing a color attribute to each object transitionDuration integer Duration of transition effect Default to 500 Axis Configuration Axis are configured in the same configuration object X axis main chart Properties Type Description xAxisTickValues Array Specify explicitly the values to plot on the X axis xAxisTickSubdivide Integer Specify the number of intermediate ticks to show on the X axis xAxisTickPadding Integer Specify ticks padding on the X axis xAxisTickFormat function Specify how data should be formatted For instance you can format number on the X axis to have exactly two digit after the decimal point d3 format 2f Or format Date object to a readable format as d3 time format Y which shows the year only See d3 js documentation for a list of all format available xAxisLabel String Label of the X axis xAxisDomain Array start end Specify the domain on the X axis min to max value xAxisShowMaxMin Boolean Show or hide maximum and minimum value in bold xAxisRotateLabels Integer 0 to 180 rotation of X axis tick label xAxisStaggerLabels Integer Size of the gap between labels to resolve overlapping issue Y axis See X axis Replace property xName by yName X2 axis For the small focusin chart See X axis Replace property xName with x2Name Y2 axis For the small focusing chart See X axis Replace property xName with y2Name Stacked area The stacked area chart is used to compare different series according to their surface area Configuration stackedarea The w20StackedAreaChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller callout warning You must indicate a unique id for the chart callout Data format Data fed to the stacked area chart should follow a default format This format can be overridden by the use of personal function See x and y properties below Default data format exemple key Series 1 values 1 10 2 20 3 5 key Series 2 values 1 8 2 10 3 15 The key property defines the name of the series The values defines the data of the series By default the value at index 0 of each sub array is plotted on the X axis while the value at index 1 is plotted on the Y axis Stacked area chart configuration The stacked area chart is configured by the configuration object passed to the directive declaration see Directives Exemple scope stackedAreaConfig data scope stackedareadata tooltips true showControls true showLegend true Available properties Properties Type Description data Array Data to display using the multibar chart mandatory if you don t define the noData property Generally it would be a property of scope x function Providing a function to the x property allows configuration of the data on the X axis Consider this example say we want to double the data value displayed on the X axis in comparison to the data provided to the data property We can achieve this by providing the following function to the x property function return function d return d 0 2 where d 0 is all the values at index 0 of all sub arrays of the array at property values of all objects in the array provided to the data property y function See x property above Applied to the Y axis instead forceY Array Values to force on the Y axis By default the Y axis will start at the minimum value of the serie Use it to force special values such as 0 showLegend Boolean Display or hide legend showControls Boolean Display or hide controls tooltips Boolean Enable or disable tooltips when hovering the chart noData String Message to display when there is no data default to No data available color Array Color of series in the corresponding order Can be hexadecimal named or RGB Ex 4D9FF2 yellow rgb 151 109 165 Note that you can also specify the value of the color in the data array by providing a color attribute to each object tooltipContent function Customize tooltip content Ex function key x y e graph return lth1 gt Tooltip Title lt h1 gt ltp gt y lt p gt where key x and y are the name and value of the series at the tooltip point e an event and graph the chart object transitionDuration integer Duration of transition effect Default to 500 Axis Configuration Axis are configured in the same configuration object X axis Properties Type Description xAxisTickValues Array Specify explicitly the values to plot on the X axis xAxisTickSubdivide Integer Specify the number of intermediate ticks to show on the X axis xAxisTickPadding Integer Specify ticks padding on the X axis xAxisTickFormat function Specify how data should be formatted For instance you can format number on the X axis to have exactly two digit after the decimal point d3 format 2f Or format Date object to a readable format as d3 time format Y which shows the year only See d3 js documentation for a list of all format available xAxisLabel String Label of the X axis xAxisDomain Array start end Specify the domain on the X axis min to max value xAxisShowMaxMin Boolean Show or hide maximum and minimum value in bold xAxisRotateLabels Integer 0 to 180 rotation of X axis tick label xAxisStaggerLabels Integer Size of the gap between labels to resolve overlapping issue Y axis See X axis Replace property xName by yName Multibar horizontal The multibar horizontal chart is used to compare different series in a horizontal bar representation Configuration multibarhorizontal The w20MultiBarHorizontalChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller callout warning You must indicate a unique id for the chart callout Fragment definition sections This module has no fragment definition section Data format Data fed to the multibar horizontal chart should follow a default format This format can be overridden by the use of personal function See x and y properties below Default data format exemple key Series 1 values 1 10 2 20 3 5 key Series 2 values 1 8 2 10 3 15 The key property defines the name of the series The values defines the data of the series By default the value at index 0 of each sub array is plotted on the X axis while the value at index 1 is plotted on the Y axis Multibar configuration The multibar chart is configured by the configuration object passed to the directive declaration see Directives Exemple scope multibarHorizontalConfig data scope multibarhorizontaldata showXAxis true showYAxis true tooltips true showControls true showLegend true Available properties Properties Type Description data Array Data to display using the multibar horizontal chart mandatory if you don t define the noData property Generally it would be a property of scope x function Providing a function to the x property allows configuration of the data on the X axis Consider this example say we want to double the data value displayed on the X axis in comparison to the data provided to the data property We can achieve this by providing the following function to the x property function return function d return d 0 2 where d 0 is all the values at index 0 of all sub arrays of the array at property values of all objects in the array provided to the data property y function See x property above Applied to the Y axis instead forceY Array Values to force on the Y axis By default the Y axis will start at the minimum value of the serie Use it to force special values such as 0 showLegend Boolean Display or hide legend showControls Boolean Display or hide controls tooltips Boolean Enable or disable tooltips when hovering the chart noData String Message to display when there is no data default to No data available color Array Color of series in the corresponding order Can be hexadecimal named or RGB Ex 4D9FF2 yellow rgb 151 109 165 Note that you can also specify the value of the color in the data array by providing a color attribute to each object stacked Boolean Indicate whether the series should be stacked on each other or not tooltipContent function Customize tooltip content Ex function key x y e graph return lth1 gt Tooltip Title lt h1 gt ltp gt y lt p gt where key x and y are the name and value of the series at the tooltip point e an event and graph the chart object transitionDuration integer Duration of transition effect Default to 500 Axis Configuration Axis are configured in the same configuration object X axis Properties Type Description xAxisTickValues Array Specify explicitly the values to plot on the X axis xAxisTickSubdivide Integer Specify the number of intermediate ticks to show on the X axis xAxisTickPadding Integer Specify ticks padding on the X axis xAxisTickFormat function Specify how data should be formatted For instance you can format number on the X axis to have exactly two digit after the decimal point d3 format 2f Or format Date object to a readable format as d3 time format Y which shows the year only See d3 js documentation for a list of all format available xAxisLabel String Label of the X axis xAxisDomain Array start end Specify the domain on the X axis min to max value xAxisShowMaxMin Boolean Show or hide maximum and minimum value in bold xAxisRotateLabels Integer 0 to 180 rotation of X axis tick label xAxisStaggerLabels Integer Size of the gap between labels to resolve overlapping issue Y axis See X axis Replace property xName by yName Line The line chart is used to plot series as line function Configuration line The w20MultibarChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller callout warning You must indicate a unique id for the chart callout Data format Data fed to the line chart should follow a default format This format can be overridden by the use of personal function See x and y properties below Default data format exemple key Series 1 values 1 10 2 20 3 5 key Series 2 values 1 8 2 10 3 15 The key property defines the name of the series The values defines the data of the series By default the value at index 0 of each sub array is plotted on the X axis while the value at index 1 is plotted on the Y axis Line chart configuration The line chart is configured by the configuration object passed to the directive declaration see Directives Exemple scope lineConfig data scope lineData xAxisTickSubdivide 10 xAxisTickFormat d3 format 2f showControls true showLabels true showLegend true tooltips true showXAxis true showYAxis true xAxisHighlightZero true xAxisLabel W label yAxisLabel y label xAxisRotateLabels 90 xAxisScale d3 scale linear xAxisDomain 0 10 yAxisDomain 0 100 Available properties Properties Type Description data Array Data to display using the line chart mandatory if you don t define the noData property Generally it would be a property of scope x function Providing a function to the x property allows configuration of the data on the X axis Consider this example say we want to double the data value displayed on the X axis in comparison to the data provided to the data property We can achieve this by providing the following function to the x property function return function d return d 0 2 where d 0 is all the values at index 0 of all sub arrays of the array at property values of all objects in the array provided to the data property y function See x property above Applied to the Y axis instead forceY Array Values to force on the Y axis By default the Y axis will start at the minimum value of the serie Use it to force special values such as 0 showLegend Boolean Display or hide legend tooltips Boolean Enable or disable tooltips when hovering the chart isArea Boolean Color integral of series noData String Message to display when there is no data default to No data available color Array Color of series in the corresponding order Can be hexadecimal named or RGB Ex 4D9FF2 yellow rgb 151 109 165 Note that you can also specify the value of the color in the data array by providing a color attribute to each object tooltipContent function Customize tooltip content Ex function key x y e graph return lth1 gt Tooltip Title lt h1 gt ltp gt y lt p gt where key x and y are the name and value of the series at the tooltip point e an event and graph the chart object transitionDuration integer Duration of transition effect Default to 500 showXAxis Boolean Show hide X axis showYAxis Boolean Show hide Y axis interpolate String Define the interpolation mode linear piecewise linear segments as in a polyline linear closed close the linear segments to form a polygon step before alternate between vertical and horizontal segments as in a step function step after alternate between horizontal and vertical segments as in a step function basis a B spline with control point duplication on the ends basis open an open B spline may not intersect the start or end basis closed a closed B spline as in a loop bundle equivalent to basis except the tension parameter is used to straighten the spline cardinal a Cardinal spline with control point duplication on the ends cardinal open an open Cardinal spline may not intersect the start or end but will intersect other control points cardinal closed a closed Cardinal spline as in a loop monotone cubic interpolation that preserves monotonicity in y Axis Configuration Axis are configured in the same configuration object X axis Properties Type Description xAxisTickValues Array Specify explicitly the values to plot on the X axis xAxisTickSubdivide Integer Specify the number of intermediate ticks to show on the X axis xAxisTickPadding Integer Specify ticks padding on the X axis xAxisTickFormat function Specify how data should be formatted For instance you can format number on the X axis to have exactly two digit after the decimal point d3 format 2f Or format Date object to a readable format as d3 time format Y which shows the year only See d3 js documentation for a list of all format available xAxisLabel String Label of the X axis xAxisDomain Array start end Specify the domain on the X axis min to max value xAxisShowMaxMin Boolean Show or hide maximum and minimum value in bold xAxisRotateLabels Integer 0 to 180 rotation of X axis tick label xAxisStaggerLabels Integer Size of the gap between labels to resolve overlapping issue Y axis See X axis Replace property xName by yName Line plus bar The line plus bar chart is used to represent series by lines and bars on the same area Configuration lineplusbar The w20LinePlusBarChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller callout warning You must indicate a unique id for the chart callout Fragment definition sections This module has no fragment definition section Data format Data fed to the line plus bar chart should follow a default format This format can be overridden by the use of personal function See x and y properties below Default data format exemple key Series 1 bar true values 1 10 2 20 3 5 key Series 2 values 1 8 2 10 3 15 The key property defines the name of the series The values defines the data of the series By default the value at index 0 of each sub array is plotted on the X axis while the value at index 1 is plotted on the Y axis By default data are plotted as line The bar property specify if the series should be plotted with bars line plus bar configuration The line plus bar chart is configured by the configuration object passed to the directive declaration see Directives Exemple scope linePlusBarConfig data scope lineplusbardata showLegend true Available properties Properties Type Description data Array Data to display using the multibar chart mandatory if you don t define the noData property Generally it would be a property of scope x function Providing a function to the x property allows configuration of the data on the X axis Consider this example say we want to double the data value displayed on the X axis in comparison to the data provided to the data property We can achieve this by providing the following function to the x property function return function d return d 0 2 where d 0 is all the values at index 0 of all sub arrays of the array at property values of all objects in the array provided to the data property y function See x property above Applied to the Y axis instead showLegend Boolean Display or hide legend tooltips Boolean Enable or disable tooltips when hovering the chart noData String Message to display when there is no data default to No data available color Array Color of series in the corresponding order Can be hexadecimal named or RGB Ex 4D9FF2 yellow rgb 151 109 165 Note that you can also specify the value of the color in the data array by providing a color attribute to each object tooltipContent function Customize tooltip content Ex function key x y e graph return lth1 gt Tooltip Title lt h1 gt ltp gt y lt p gt where key x and y are the name and value of the series at the tooltip point e an event and graph the chart object transitionDuration integer Duration of transition effect Default to 500 Axis Configuration Axis are configured in the same configuration object X axis Properties Type Description xAxisTickValues Array Specify explicitly the values to plot on the X axis xAxisTickSubdivide Integer Specify the number of intermediate ticks to show on the X axis xAxisTickPadding Integer Specify ticks padding on the X axis xAxisTickFormat function Specify how data should be formatted For instance you can format number on the X axis to have exactly two digit after the decimal point d3 format 2f Or format Date object to a readable format as d3 time format Y which shows the year only See d3 js documentation for a list of all format available xAxisLabel String Label of the X axis xAxisDomain Array start end Specify the domain on the X axis min to max value xAxisShowMaxMin Boolean Show or hide maximum and minimum value in bold xAxisRotateLabels Integer 0 to 180 rotation of X axis tick label xAxisStaggerLabels Integer Size of the gap between labels to resolve overlapping issue Y axis See X axis Replace property xName by yName Y2 axis For the right axis Replace property xName by y2Name","summary":"Nvd3\n\nNvd3 is a data visualization library build on top of the popular d3 library. It offers several chart types for\ncommon visualization needs. The web framework add an AngularJS integration in the form of directives, along with sensible defaults for these different charts.\n\n{{% button href="...","zone":{"path":"/addons","label":"Add-ons","logo":"addons-logo.svg"},"section":{"label":"W20 dataviz","path":"dataviz"}},{"title":"Basics","tags":["w20","frontend","extras","analytics"],"href":"/addons/extras/","content":"The W20 Extras addon provides various functionality such as website analytics Installation bower install w20 extras Configuration To include the addon declare it in the application manifest bower_components w20 extras w20 extra w20 json Analytics Analytical tools allow statistical reporting and data analysis for your web applications Counting and tracking visitor s actions Statistics on page viewed Keyword searched E commerce specific report Setting cookies for tracking visit Displaying comprehensive and detailed reports Analytics providers generally requires a script inclusion in all web pages to track user actions based on the URL However in SPA since the routing is done at the front end this integration is a bit more tricky W20 uses Angulartics http luisfarzati github io angulartics internally to provide an easy integration of a wide range of providers Fragment configuration Include the extra fragment configuration in your fragment manifest and enable its analytics module To configure you analytics provide use the following properties provider string The name of the analytic provider to use Supported providers are given below Class Description adobe Adobe analytics chartbeat Chartbeat analytics flurry Flurry analytics ga Google Analytics ga cordova Google Analytics for Cordova gtm Google Tag Manager kissmetrics Kissmetrics mixpanel Mix Panel analytics piwik Piwik analytics segmentio Segment io analytics splunk Splunk woopra Woopra virtualPageViews boolean By default automatic virtual page view tracking is enabled meaning the entire user navigation across the different routes of your application is tracked You can turn it off with this property settings object If the chosen provider has a supported default configuration in W20 you can use this property to configure it Piwik After deploying your Piwik server you are provided with a site id for your registered website Set it to the siteId property and paste the URL to the javascript tracker piwik js into the jsUrl property and your Piwik PHP server address into the trackerUrl property path to extra w20 extra w20 json modules analytics provider piwik virtualPageViews true settings jsUrl url or path to piwik javascript tracker trackerUrl url to piwik javascript tracker siteId 1 Your website visits should be monitored by Piwik The trackPageView and enableLinkTracking options of Piwik are already applied An angular service PiwikService can now be injected to configure Piwik This service provide the following methods getAPI return the Piwik http developer piwik org api reference tracking javascript object configure settings Called initially to configure the provider with the settings property configured in the manifest It can be called programatically to change these settings later","summary":"The W20 Extras addon provides various functionality such as website analytics.\n\nInstallation\n\n\nbower install w20-extras\n\n\nConfiguration\n\nTo include the addon, declare it in the application manifest:\n\n\n"bower_components/w20-extras/w20-extra.w20.json": {}\n\n\nAnalytics\n\nAnalytical tools allow...","zone":{"path":"/addons","label":"Add-ons","logo":"addons-logo.svg"},"section":{"label":"W20 extras","path":"extras"}},{"title":"Basics","tags":["frontend","w20","material","design","css"],"href":"/addons/material/","content":"The W20 Material addon provides the Angular Material https material angularjs org latest framework Installation bower install w20 material Configuration To include the addon declare it in the application manifest bower_components w20 material w20 material w20 json","summary":"The W20 Material addon provides the Angular Material framework.\n\nInstallation\n\n\nbower install w20-material\n\n\nConfiguration\n\nTo include the addon, declare it in the application manifest:\n\n\n"bower_components/w20-material/w20-material.w20.json": {}\n","zone":{"path":"/addons","label":"Add-ons","logo":"addons-logo.svg"},"section":{"label":"W20 material","path":"material"}},{"title":"W20 generator","href":"/docs/generator","content":"To create a new W20 project from scratch you need to have NodeJS https nodejs org installed To create a W20 application run the following command plain npm install g yo bower grunt cli gulp generator w20 yo w20 callout info This will install the yo bower grunt cli gulp and generator w20 NPM packages globally You may prefer to install some locally in the project directory by removing the g option The generator is based on Yeoman http yeoman io callout Result If the process is successful you should see a structure similar to the following plain bower_components dependencies fragments application fragments one per directory bower json index html application master page w20 app json application configuration More resources W20 documentation docs Yeoman W20 generator https github com w20 framework generator w20","summary":"To create a new W20 project from scratch, you need to have NodeJS installed. \nTo create a W20 application, run the following command:\n\nplain\nnpm install -g yo bower grunt-cli gulp generator-w20\nyo w20\n\n\n\nThis will install the yo, bower, grunt-cli, gulp and generator-w20 NPM...","zone":{"path":"/docs","label":"Documentation","logo":"w20-logo.svg"},"section":{"path":""}},{"title":"Web framework","tags":["masterpage","configuration","fragment","manifest","index"],"href":"/docs/","content":"W20 is a web solution designed to allow developers to quickly and simply create enterprise grade Single Page Application SPA It is server agnostic which means it can work with any HTTP capable server technology In fact it can even work without any server Benefits W20 provides a modular programming model for web applications allowing entire parts of web frontend to be reused across applications These parts are called fragments and can be published on any HTTP server as static resources Creating a frontend application with W20 becomes as easy as choosing the fragments you want to load and how you want them to be configured from a single configuration file In fact W20 itself is distributed as several fragments which are aside from its core all optional Organization of an application A W20 application is a Single Page Application SPA composed of A master page usually index html but can be dynamically generated It is the entry point of the application A configuration file usually w20 app json but can be dynamically generated One or more fragment s A fragment is a bundle of web resources described by a JSON manifest which must be accessible by HTTP from the browser docroot index html w20 app json fragments fragment1 fragment1 w20 json fragment2 fragment2 w20 json The master page A single page application is a web application that fits on a single web page called the master page usually index html Assuming you keep your static resources in a bower_components directory a sample code of a minimalist master page in W20 would be Application title Things worth noticing The data w20 app attribute on the html tag that will load the configuration of your W20 application The tag where we reference RequireJS http requirejs org and instruct it to load W20 A W20 application is also an AngularJS http angularjs org application Therefore you should add a tag with the data ng view attribute This will include rendered templates into the master page The configuration file The configuration file w20 app json is where you set up your application As mentioned earlier a W20 application is basically composed of a set of fragments a fragment is a bundle of web resources All are optional except one the core fragment of W20 thus it has to be referenced in the w20 app json This is done by specifying the path to its configuration file _a k a_ the fragment manifest bower_components w20 w20 core w20 json The fragments An important concept in W20 is the fragment A W20 application is composed of one or more fragment s A fragment is a bundle of web resources templates css javascript Each one is intended to serve a purpose and can be reused across applications For example W20 provides an optional fragment with native AngularJS implementations of UI components such as _datagrid_ and _combo boxes_ Fragment manifest To reference web resources and how they are to be configured each fragment has its own manifest file located at the root of the fragment The only mandatory property is the fragment unique identifier id fragment identifier By convention the manifest file is called after the fragment identifier and suffixed by w20 json In this example the fragment manifest would be fragment identifier w20 json Fragment modules Now suppose we want to use the fragment discussed above but only the _datagrid_ component For that W20 offers a finer granularity to configure your application Within a single fragment there can be several units called modules which are loaded only if you decide to reference them in your application configuration That way you can load a fragment without being forced to load all of its resources The sample code below shows how to declare a fragment module id fragment identifier modules module1 path fragment identifier modules module1 autoload true false configSchema Things worth noticing fragment identifier is used by W20 as a placeholder to target the fragment path This ensures paths are always relative to the fragment manifest location It is particularly useful if the fragment is intended to be used across applications The path attribute is mandatory for RequireJS to load the module when it is required by the application Fragments modules are AMD compliant http requirejs org docs whyamd html amd If a configuration JSON schema is provided for a specific module in the fragment manifest the configuration specified here will be validated against it How it works The master page is the one and only entry point of your web application By adding the following tag in it two things happen 1 RequireJS is loaded 2 Once RequireJS is loaded it loads bower_components w20 modules w20 js notice there is no extension in the when pointing to the w20 js 3 w20 js is the core implementation of W20 Once loaded it will automatically parse your application configuration file w20 app json to detect which fragments to load detect which modules to load for each fragment validate configuration for each fragment and module w20 app json against its schema fragment identifier w20 json load AMD modules using RequireJS load the home view from the application module of the W20 core fragment into the master page next href manual label start reading the manual","summary":"W20 is a web solution designed to allow developers to quickly and simply create enterprise-grade Single Page\nApplication (SPA). It is server agnostic which means it can work with any HTTP capable server technology. In fact,\nit can even work without any server.<!--more-->\n\nBenefits\n\nW2...","zone":{"path":"/docs","label":"Documentation","logo":"w20-logo.svg"},"section":{"label":"Introduction","icon":"fa fa-play-circle","path":""}},{"title":"Culture","tags":["i18n","locale","date","time","format","localization","internationalization","culture"],"href":"/docs/manual/culture","content":"W20 provides an extensive culture support through the jQuery Globalize library It provides the developer tools to internationalize a W20 application which can then be localized via fragment manifests As AngularJS also provides internalization support W20 attempts to convert the active Globalize culture definition to an AngularJS locale on a best effort basis This automatic conversion has limits so it is recommended to stick to the W20 functions and services for internationalization Cultures Cultures are defined as a combination of the language and the country speaking it Each culture is given a unique code that is a combination of an ISO 639 two letter lowercase culture code for the language and a two letter uppercase code for the country or region For example en US is the culture code for English in the United States Only one culture can be active at a time in the application but you can format values in any culture supported by the application without switching the active one This module handles Textual internationalization Date and time formatting Currency formatting Number formatting W20 supports about 350 cultures but can also be extended to custom defined ones Here is the list of out of the box supported cultures Supported cultures af ZA af am ET am ar AE ar BH ar DZ ar EG ar IQ ar JO ar KW ar LB ar LY ar MA ar OM ar QA ar SA ar SY ar TN ar YE ar arn CL arn as IN as az Cyrl AZ az Cyrl az Latn AZ az Latn az ba RU ba be BY be bg BG bg bn BD bn IN bn bo CN bo br FR br bs Cyrl BA bs Cyrl bs Latn BA bs Latn bs ca ES ca co FR co cs CZ cs cy GB cy da DK da de AT de CH de DE de LI de LU de dsb DE dsb dv MV dv el GR el en 029 en AU en BZ en CA en GB en IE en IN en JM en MY en NZ en PH en SG en TT en US en ZA en ZW es AR es BO es CL es CO es CR es DO es EC es ES es GT es HN es MX es NI es PA es PE es PR es PY es SV es US es UY es VE es et EE et eu ES eu fa IR fa fi FI fi fil PH fil fo FO fo fr BE fr CA fr CH fr FR fr LU fr MC fr fy NL fy ga IE ga gd GB gd gl ES gl gsw FR gsw gu IN gu ha Latn NG ha Latn ha he IL he hi IN hi hr BA hr HR hr hsb DE hsb hu HU hu hy AM hy id ID id ig NG ig ii CN ii is IS is it CH it IT it iu Cans CA iu Cans iu Latn CA iu Latn iu ja JP ja ka GE ka kk KZ kk kl GL kl km KH km kn IN kn ko KR ko kok IN kok ky KG ky lb LU lb lo LA lo lt LT lt lv LV lv mi NZ mi mk MK mk ml IN ml mn Cyrl mn MN mn Mong CN mn Mong mn moh CA moh mr IN mr ms BN ms MY ms mt MT mt nb NO nb ne NP ne nl BE nl NL nl nn NO nn no nso ZA nso oc FR oc or IN or pa IN pa pl PL pl prs AF prs ps AF ps pt BR pt PT pt qut GT qut quz BO quz EC quz PE quz rm CH rm ro RO ro ru RU ru rw RW rw sa IN sa sah RU sah se FI se NO se SE se si LK si sk SK sk sl SI sl sma NO sma SE sma smj NO smj SE smj smn FI smn sms FI sms sq AL sq sr Cyrl BA sr Cyrl CS sr Cyrl ME sr Cyrl RS sr Cyrl sr Latn BA sr Latn CS sr Latn ME sr Latn RS sr Latn sr sv FI sv SE sv sw KE sw syr SY syr ta IN ta te IN te tg Cyrl TJ tg Cyrl tg th TH th tk TM tk tn ZA tn tr TR tr tt RU tt tzm Latn DZ tzm Latn tzm ug CN ug uk UA uk ur PK ur uz Cyrl UZ uz Cyrl uz Latn UZ uz Latn uz vi VN vi wo SN wo xh ZA xh yo NG yo zh CHS zh CHT zh CN zh Hans zh Hant zh HK zh MO zh SG zh TW zh zu ZA zu Configuration The culture module of w20 core can be configured with the following attribute available array of string which list the available culture in the application default string which is the culture name of the default culture It defaults to en Example path w20 core w20 json culture available en fr default en Fragment declaration The i18n section of a fragment manifest allows to declare culture localization bundles i18n rest i18n bundle language en i18n en bundle 1 json i18n en bundle 2 json fr FR i18n fr FR bundle 1 json i18n fr FR bundle 1 json Bundles modules will be loaded as a text dependency and parsed as JSON The empty string culture code can be used to point to remote bundle In that case two placeholders can be used in the URL The language placeholder will be replaced by the actual language code The culture placeholder will be replaced by the actual culture code Dynamic bundles will always be loaded for any language If no keys are available for a particular language an empty object can be returned Usage As an example if our bundle for en EN culture contains the following entry application key my translation Inside an html template use the localize filter application key localize You can also apply the localization programmatically by calling the CultureService Formatting Numbers and dates can be formatted in various ways by using formatting patterns Number formatting When formatting a number the main purpose is to convert the number into a human readable string using the culture s standard grouping and decimal rules The rules between cultures can vary a lot For example in some cultures the grouping of numbers is done unevenly In the te IN culture Telugu in India groups have 3 digits and then 2 digits The number 1000000 one million is written as 10 00 000 Some cultures do not group numbers at all There are four main types of number formatting n for number d for decimal digits p for percentage c for currency Even within the same culture the formatting rules can vary between these four types of numbers For example the expected number of decimal places may differ from the number format to the currency format Each format token may also be followed by a number The number determines how many decimal places to display for all the format types except decimal for which it means the minimum number of digits to display zero padding it if necessary Also note that the way negative numbers are represented in each culture can vary such as what the negative sign is and whether the negative sign appears before or after the number This is especially apparent with currency formatting where many cultures use parentheses instead of a negative sign For instance in the en US culture 123 45 formatted with n will give 123 45 123 45 formatted with n0 will give 123 123 45 formatted with n1 will give 123 5 123 45 formatted with d will give 123 12 formatted with d3 will give 012 123 45 formatted with c will give 123 45 123 45 formatted with c0 will give 123 123 45 formatted with c1 will give 123 5 123 45 formatted with c will give 123 45 0 12345 formatted with p will give 12 35 0 12345 formatted with p0 will give 12 0 12345 formatted with p4 will give 12 3450 Parsing also accepts any of these formats Date formatting Date formatting varies wildly by culture not just in the spelling of month and day names and the date separator but by the expected order of the various date components whether to use a 12 or 24 hour clock and how months and days are abbreviated Many cultures even include genitive month names which are different from the typical names and are used only in certain cases Also each culture has a set of standard or typical formats For example in en US when displaying a date in its fullest form it looks like Saturday November 05 1955 Note the non abbreviated day and month name the zero padded date and four digit year Format Meaning en US f Long Date Short Time dddd MMMM dd yyyy h mm tt F Long Date Long Time dddd MMMM dd yyyy h mm ss tt t Short Time h mm tt T Long Time h mm ss tt d Short Date M d yyyy D Long Date dddd MMMM dd yyyy Y Month Year MMMM yyyy M Month Day MMMM dd In addition to these standard formats there is the S format This is a sortable format that is identical in every culture yyyy MM dd T HH mm ss When more specific control is needed over the formatting you may use any format you wish by specifying the following custom tokens Token Meaning Example d Day of month no leading zero 5 dd Day of month leading zero 05 ddd Day name abbreviated Sat dddd Day name full Saturday M Month of year no leading zero 9 MM Month of year leading zero 09 MMM Month name abbreviated Sep MMMM Month name full September yy Year two digits 55 yyyy Year four digits 1955 literal Literal Text of the clock Single Quote o clock m Minutes no leading zero 9 mm Minutes leading zero 09 h Hours 12 hour time no leading zero 6 hh Hours 12 hour time leading zero 06 H Hours 24 hour time no leading zero 5 5am 15 3pm HH Hours 24 hour time leading zero 05 5am 15 3pm s Seconds no leading zero 9 ss Seconds leading zero 09 f Deciseconds 1 ff Centiseconds 11 fff Milliseconds 111 t AM PM indicator first letter A or P tt AM PM indicator full AM or PM z Timezone offset hours only no leading zero 8 zz Timezone offset hours only leading zero 08 zzz Timezone offset full hours minutes 08 00 g or gg Era name A D","summary":"W20 provides an extensive culture support through the jQuery Globalize library. It provides the developer tools to \ninternationalize a W20 application which can then be localized via fragment manifests.<!--more--> As AngularJS\nalso provides internalization support, W20 attempts to convert the...","zone":{"path":"/docs","label":"Documentation","logo":"w20-logo.svg"},"section":{"label":"W20 manual","icon":"fa fa-book","path":"manual"}},{"title":"Hypermedia","tags":["hypermedia","rest","link","api","resource","json"],"href":"/docs/manual/hypermedia","content":"Hypermedia is a powerful aspect of the REST architectural style A client application can consume and navigate through REST resources via structured links relations Navigation through APIs resemble web navigation from a web page it is possible to follow links to new documents In the same way hypermedia provides a mechanism to interact with remote data with navigation and discovery in mind For an overview of this concept please refer to the documentation of the Java framework Restful API docs seed manual rest designing restful api Hypermedia module To enable the hypermedia module declare it in the core fragment configuration json hypermedia Available configuration for this module is provided below along with short introductions to the hypermedia formats supported JSON HOME The MIME type application json home http tools ietf org html draft nottingham json home 03 specify a document map of resources that can serve as entry points for clients into an hypermedia api Json home sample catalog and product json resources catalog href api products product href template api product name href vars name api doc param name In this scenario a client can enter a commercial api by requesting the json home document which will provide it with two relations catalog with an URI defined in the href property which when queried could for instance return a list of available products in the catalog product with an URI template https tools ietf org html rfc6570 defined in the href template property which uses the name of a product as a criteria for the query Note that since we are using an URI template the property is href template instead of href Now how should this parameter be used Whether by implicit knowledge or through documentation for parameters that can be provided in a href vars property This allows client to discover the usability of an api by querying the URL at this location More information can be provided in a json home document such as hints for available actions on the resource and or accepted format We advice you to take a look at the specification for an exhaustive documentation of the json home document type Configuring Json home endpoints In your hypermedia module declaration of the core fragment specify the api endpoint which exposes your json home resources with the api property json api myFirstApi http domain port mySecondApi You can specify a full absolute url starting with the http https protocol or an absolute url starting with In the last case the domain and port from which the application is served will be used as the hostname of the api Using aliases You can use alias for your api endpoint to refer to a previously declared api json api namedAlias http domain port myApi namedAlias There is one default alias home which resolve to json api home home HomeService The HomeService allows you to interact with the declared api endpoint s All endpoint declared in the manifest are automatically registered To access an api use the following declaration js homeService is the property used to reference the api URL The service has 3 methods enter api parameters actions options Provide a modified resource object configured from a registered home resource It signature is the same as the resource service of AngularJS but instead of providing a url as the first parameter you provide the name of the wanted relation provided in the Json home document Another important difference is that only the get method is available by default on the returned object since it is used only for retrieving entry point resources js homeService myApi enter catalog get function products register jsonHomeResource Programmatically register a new resource The resource should respect the format for a Json home document resource js homeService myApi register someNewResource href some url getDefinition resourceNAme Return the definition of the resource js homeService myApi getDefinition someNewResource href some url HAL Hypertext Application Language W20 provide support for application hal json http stateless co hal_specification html resources If Json home document constitute a map of the available entry points to the api HAL is the format for these entry points and any subsequent resources obtained by following the links provided in these resources Check the example below HAL sample querying products json currentPage 1 totalProduct 20 _links self href api products page 1 next href api products page 2 find href api products q templated true _embedded products name myProduct _links self href api product myProduct _embedded related name productRelatedToMyProduct _links self href api product myProduct related HAL document must validate against the JSON specification and contains two important recognizable fields _links which is mandatory and must contain at the very least a self property which reference the resource itself Additional links constitute the actual power of hypermedia they provide additional resources in the form of named actions resources In this example two actions are available going to the next page by following the next links or finding a product through the find links This last one uses URI template to define the available query parameter _embedded is not mandatory but allow to provide embedded resources directly in the response In this example we embedded a list of products with one element Each embedded resources respect itself the HAL specification so it must contain a _links with a reference to itself and optional embedded resources Usage When a resource is served with the application hal json MIME type the hypermedia module will intercept the response and return a resource object augmented with two additional methods links link parameters actions options This method has the same signature as resource but will use the name of the links instead of the url Suppose we return the HAL document above when querying the catalog api We can get the next page by following the next link js homeService myApi enter catalog get function products var nextProductPage products links next get If the links method is called without parameter it returns a list of the available links on the resource embedded name If the resource contains embedded items they can be accessed with this method Suppose we return the HAL document above when querying the catalog api We can get the embedded items with the following declaration js homeService myApi enter catalog get function products var embeddedProducts products embedded products console info embeddedProducts name myProduct var relatedProducts embeddedProducts embedded related 0 links self get the last line will GET api product myProduct related Note Although we used the HomeService in these example to start querying the api it is not an obligation Provided that a resource is served with the MIME type application hal json we could have used a simple resource object to start querying the api with a url Manual interception By default if the hypermedia module is configured and a resource is served with the MIME type application hal json the response will automatically be intercepted and processed according to what we said above If you want to disable this behavior and intercept response manually you need to set the interceptAll property to false in the hypermedia module configuration json hypermedia interceptAll false To do a manual interception you then need to inject the HypermediaRestAdapter and use it as follow js HypermediaRestAdapter process response data then function processedResponse Additional configuration json hypermedia api key value pair of api endpoint name and url interceptAll true default Intercept all hal json response automatically linksKey _links default Rename the links key linksHrefKey href default Rename the href key linksSelfLinkName self default Rename self link embeddedKey _embedded default Rename embedded key embeddedNewKey embedded default Rename the embedded function resourcesKey links default Rename the links function","summary":"Hypermedia is a powerful aspect of the REST architectural style. A client application can consume and navigate through \nREST resources via structured links relations. Navigation through APIs resemble web navigation: from a web page it is \npossible to follow links to new documents. In the same way...","zone":{"path":"/docs","label":"Documentation","logo":"w20-logo.svg"},"section":{"label":"W20 manual","icon":"fa fa-book","path":"manual"}},{"title":"Web framework basics","tags":["configuration","fragment","manifest","lifecycle","module","startup","angular"],"href":"/docs/manual/","content":"W20 is an integration framework for the AngularJS based Single Page Applications SPA It offers a modular programming model based on fragments and high level services to accelerate your Web development Fragments and configuration W20 and its applications are organized around the idea of fragments What is a fragment A W20 application is made of several fragments that brings different concerns to the application A fragment is a collection of web resources JavaScript AMD modules http en wikipedia org wiki Asynchronous_module_definition stylesheets HTML templates that often but not necessarily depends on each other The dependency between modules inside a fragment is orchestrated by the use of the RequireJS http requirejs org library Think of a fragment as a coherent set of resources linked together for the purpose of organization and reusability By including and configuring a fragment you can bring the corresponding aspect and or asset to your web application without having to worry about the intrinsic details of the fragment itself Inside a fragment the module dependency system guarantees that the dependencies of a module will be loaded before the module itself This is especially important for large applications that often require an important number of JavaScript modules Fragments vs modules When we talk about a module we refer to a JavaScript AMD module as used in the RequireJS library That is to say thing shortly a js file whose content is wrapped in a define call AMD modules are explained in greater detail further down A fragment on the other hand is a collection of modules It is described by a manifest which exposes configuration properties When you include and configure a fragment in your application you can generally choose which modules to activate inside of it Fragment manifest Each fragment contains a JSON manifest that serves as a descriptor for the fragment configuration possibilities The fragment manifest has two main goals 1 To expose the available modules of the fragment and their available configuration options It is important to understand that the fragment manifest does not configure the fragment It exposes what configuration will be possible according to a configuration schema In the next section we will see how to actually configure the fragment when you declare it inside your application manifest 2 To allow the declaration of additional RequireJS configuration On application start each RequireJS configuration of each fragments if present are merged together The properties of a fragment manifest are id a mandatory string with no space which identifies the fragment No fragment with the same id can be included at the same time in an application name an optional name for the fragment description an optional description of the fragment requireConfig an optional object with the properties of a RequireJS configuration object In the example below we add a simple RequireJS configuration for module mapping this allow to map a module to a name which can be used for creating aliases or for module substitution For an exhaustive list and description of the RequireJS configuration options please have a look at its API http requirejs org docs api html Remember that this configuration will be merged with all the other declared fragment configuration on application start id demo fragment requireConfig map mappedModule path to module to map modules an optional object whose keys are the name of the exposed modules of the fragment The value of those keys is an object with the module path and the configuration schema The configuration schema contains the name of the configuration properties available for the module In the example below we expose a module demoModule inside a fragment with id demo fragment and a configuration property named demoConfig of type string for the module demoModule id demo fragment modules demoModule path demo fragment modules demoModule autoload true configSchema title Demo module configuration type object additionalProperties false properties demoConfig description A description of the demoConfig property type string There is a few additional things to note in this last example In the path property we used the fragment id enclosed in curly braces demo fragment This alias is automatically registered based on the fragment id and points to the location of the fragment manifest it is a RequireJS mapping You can and should for reusability consideration use this alias in all other fragments and in the application to refer to the fragment location The autoload attribute specify if the module should be loaded automatically or only if required by another module By required by another module we refer to the AMD definition and the dependency management between modules as used in RequireJS through the use of a define or require call If not specified the module will not be autoloaded The type property of the demoConfig option has been specified as a string This means that when the property will be given its value in the application manifest passing a type other than a string will raise an error The other type available are object array boolean and number The additionalProperties property of the configuration schema specify if additional properties can be given when configuring this module in the application manifest In this example trying to configure any other property than a demoConfig one for this module in the application manifest will raise an error callout info The configuration schema is optional You can simply declare the module along with its path and eventually ask for it to be autoloaded false if not specified This is often the case when you simply want to include a module that has no particular configuration in your business fragment callout W20 is packaged and distributed as multiple fragments Your application will then be composed of those fragments and your own business fragments Now that we have a better understanding of the notion of fragment we can proceed to the configuration step in which we actually include and configure those fragments in our application Configuration Application configuration happens in an application manifest This manifest must be named w20 app json because in the absence of a remote manifest the framework will fall back to looking for a JSON file with this name at the application root The role of the application manifest is to reference fragments through their manifest URL and configure them specifically for the application Fragment declaration To include a fragment in your application specify the path of the fragment manifest as a key bower_components w20 w20 core w20 json The w20 core fragment will be loaded with all its modules whose autoload property is set to true An alias w20 core is now pointing to bower_components w20 the location of the fragment manifest callout info bower_components is the default name of the folder in which Bower http bower io installs the web dependencies Bower is one of the most popular package manager for web application It should be installed to ease application development and or use the w20 application generator W20 fragments are available in the Bower registry http bower io search q w20 and will be installed to the bower_components folder if you choose this way of installation callout Fragment configuration Declaring a fragment like above can sometimes be enough Autoloaded modules will be available and that may be sufficient However most of the time you will configure the fragment s modules according to your need or because an explicit configuration value is required To configure the modules of the fragment add a modules section bower_components w20 w20 core w20 json modules application id my app In the above configuration the application module of w20 core will be configured with the corresponding object defining the unique identifier of the application in this case This module is normally defined as automatically loaded so this definition will only serve to configure it To load a module that is not automatically loaded without configuration just specify it with an empty object bower_components w20 w20 core w20 json modules application id my app bower_components other fragment other fragment w20 json modules my module In the example above my module will be loaded without any configuration If it was not declared and the module was not set to be autoloaded my module would not be loaded on application start even if it belongs to the other fragment fragment callout info If a configuration JSON schema is provided for a specific module in the fragment manifest the configuration specified here will be validated against it Also if a default configuration is provided for a specific module in the fragment manifest the configuration specified here will be merged with it overriding it If no default configuration is provided the configuration is provided as is to the module callout Summary fragments overview img fragments png Masterpage W20 uses AngularJS https angularjs org as a core framework for application development Thus its applications are Single Page Application SPA https en wikipedia org wiki Single page_application Only one HTML page is served with an outermost html doctype and a root tag This page is called the masterpage The masterpage serves two roles 1 Instruct the browser to load the RequireJS library with the w20 loader as the main module The w20 loader is a module of the core fragment and referenced in the main attribute of the script which loads RequireJS and who will take care of bootstrapping the application A w20 app attribute is mandatory on the root element of the masterpage Application loading is explained in further details in the following section 2 Declare the unique ng view element of the application which will include view templates View change is handled through client side routing which associates an URL to a template This template is rendered in the ng view tag Application title callout info You can notice that HTML attributes that are not part of the HTML specification such as w20 app or ng view are prefixed with data This allow to keep templates valid against HTML validator by defining those attributes as custom attributes https developer mozilla org en US docs Web HTML Global_attributes data callout callout warning Note that the w20 module is referenced without the js extension It is a common mistake to include the js extension while referring to module but this is not accepted by RequireJS The module file name is w20 js but it must be referenced by w20 only callout Additional configuration can be provided The w20 app attribute can be provided with the URL of the application manifest as the value In that case a request is made for retrieving the remote configuration Without any value provided the w20 loader will look for a w20 app json at the same level as the masterpage The w20 app version attribute when provided a value will append this value as an extra query string to URLs of resources This is useful for cache busting The w20 timeout attribute specify the number of seconds to wait before giving up on loading a script Setting it to 0 disables the timeout The default if not specified is 7 seconds The w20 cors with credentials attribute accept a boolean that specify if whether or not cross site Access Control requests should be made using credentials such as cookies or authorization headers By default the value is false Core fragment The core fragment of W20 is the most important fragment of the framework and the only one that is mandatory It provides the fundamental aspect of the framework mainly An AMD http en wikipedia org wiki Asynchronous_module_definition infrastructure through RequireJS http requirejs org An MVC runtime through AngularJS https angularjs org Application loading and initialization through the w20 module referenced in the masterpage A permission model which enables to reflect backend security Extensive culture support Support for HATEOAS No CSS framework is provided in the core fragment to let you free of this choice However you can simply add an appropriate fragment of W20 to bring frameworks such as Twitter Bootstrap http getbootstrap com w20 bootstrap 3 or Angular Material https material angularjs org latest w20 material For additional information please consult the UI http w20 framework github io docs manual ui section The rest of this manual will focus mainly on the core fragment Additional fragments documentation can be found in the corresponding section of the documentation The core fragment provides the w20 module which is responsible for application initialization Let s look at how a W20 application load itself Application loading Once RequireJS is loaded the w20 module becomes the entry point of a W20 application as the main module Think of it as a fragment loader Its initialization sequence is as follow 1 Loading and parsing of the application configuration w20 app json or remote configuration 2 Loading and parsing of all the declared fragment manifests 3 Computing of a global RequireJS configuration along with the list of all modules to load 4 Loading of all modules needed at startup time at once 5 Initialization of each loaded modules through their lifecycle callbacks pre run post The last phase should be a little bit unclear at this point because we did not introduce modules lifecycle yet We included it here to give you the full initialization sequence for future reference Modules are documented in the next section w20loading img w20 loading png Modules AMD JavaScript logic in W20 are defined in AMD modules An AMD module is defined using the global function define exposed by RequireJS AMD module can be named but it is strongly recommended that you use anonymous AMD modules each one living in its own JavaScript file They have the following form define 1 list of the dependencies of this module function 2 list of injected dependencies in the same order as 1 3 module factory function body private scope of the module return 4 public signature of the module that can be injected when requested as a dependency of another module Let us expand a little bit on each part of this module definition 1 The list of dependencies is composed of path to dependencies of this module which are often themselves AMD modules The path can be an absolute path or a map key if a RequireJS mapping has been defined Remember that fragments manifest location are automatically aliased by their fragment id enclosed in curly braces This means that you can reference a W20 fragment or your own one as a dependency like this define w20 core modules application your fragment modules your module Please note that modules are referenced without their js extension callout info Third party libraries location are also aliased For instance AngularJS distribution location is aliased by angular This means that you can reference a dependency to angular js with angular angular callout 2 The last parameter to the define function is the factory function Its parameters are the public value returned by the dependencies defined in 1 in the same order That is if we take the example above the public value of the application module as first argument and the public value of your module as second argument 3 The body of the factory function constitute the private part of the module This part is not available to other modules 4 The return value of a module is the public part it exposes to the world The value of this return will be what will be injected in other modules factory function if that module is a dependency of them define w20 core modules application yourFragment modules yourModule function applicationPublic yourModulePublic var privateValue I am a private string return publicValue I am a public string Now if we suppose the module above to be named demo js inside a fragment with id example if this module is defined as a dependency of another the last one can access the publicValue property of the object define example modules demo function demo console info demo publicValue I am a public string Module configuration To access the configuration of a module it needs to depend on the module module This special module is used to retrieve the module id its location and the value of its configuration options those declared in the application manifest If we suppose a module sample with the following configuration some fragment path some fragment w20 json modules sample prop Value of property one The configuration is retrieved inside the sample module like this define module function module var config module module config console log config prop Value of property The statement module module config is the idiomatic way of safely retrieving the module configuration Lifecycle callbacks In the Application loading section we have seen that the initialization sequence ended with each loaded modules going through their lifecycle callbacks Actually this is only the case for modules that declares lifecycle callbacks If a module does not declare any lifecycle callback then it is simply loaded Lifecycle callbacks happens when all fragments have been collected and the RequireJS configuration has been merged There are 3 lifecycle callbacks which runs in the order pre run and post All of them are optional It is guaranteed that every modules will run their pre callback before any other modules run their run callback It is guaranteed that every modules will run their run callback before any other modules run their post callback A module dependency will have its callback called before the module requiring it To integrate a module into the lifecycle management of the application you must add the following code to the public signature of the module i e the return value of the factory function return lifecycle pre function modules fragments callback run function modules fragments callback post function modules fragments callback You can omit the unsupported callbacks for instance just leaving the pre one If the loader recognize one or more lifecycle callbacks they will be invoked during W20 initialization with the following arguments modules is an array of all public modules definitions fragments an array of all loaded fragment manifests callback is a function that MUST be called to notify the loader that any processing in this phase is done for this module including asynchronous processing If a module do not call its callback the whole initialization process is blocked for a specified amount of time After that it is cancelled and a timeout error message is displayed Lifecycle callbacks are useful hooks for application initialization The pre callback for instance will run before AngularJS initialization the subject of the next section AngularJS initialization Before AngularJS initialization it is guaranteed that All AMD modules needed at startup are loaded Their factory functions have been run in the correct order Their pre lifecycle callbacks have been run and all modules have notified the loader that they have finished loading their asynchronous resources if any AngularJS initialization is done explicitly with the angular bootstrap function on the document element It occurs in the run lifecycle callback of the application module From this moment AngularJS initialize normally you can read more about the initialization process here https docs angularjs org guide bootstrap AngularJS modules AMD vs AngularJS modules AngularJS modules https docs angularjs org guide module are not to be confused with AMD modules We said at the begining of this guide that when we refer to a module it is an AMD module We will continue to do so and use the term AngularJS module to refer to the notion of module in AngularJS From the AMD point of view AngularJS modules have no meaning However AngularJS modules are fundamental for structuring an application correctly What is an AngularJS module AngularJS modules allow to register services factories controllers directives providers and other concepts such as configuration or run block AngularJS modules are also fundamental for unit testing Each AngularJS module can only be loaded once per injector Usually an AngularJS app has only one injector and AngularJS modules are only loaded once Each test has its own injector and AngularJS modules are loaded multiple times AngularJS module dependencies Wait a minute Did we not already talk about dependencies between modules Yes we did We talked of dependencies between AMD modules But AngularJs modules can also list other AngularJS modules as their dependencies Depending on an AngularJS module implies that the required AngularJS module needs to be loaded before the requiring AngularJS module is loaded firstModule js define angular angular function angular var firstAngularModule angular module first secondModule js define angular angular firstModule function angular var secondAngularModule angular module second first In the example above the dependency between AngularJS modules is declared as an array in the second argument to the angular module function AngularJS maintains an injector with a list of names and corresponding objects An entry is added to the injector when a component is created and the object is returned whenever it is referenced using the registered name How does that fit with the dependency system between AMD modules It is important to remember that the purpose of AMD modules and AngularJS modules is totally different The dependency injection system built into AngularJS deals with the objects needed in a component while dependency management in RequireJS deals with JavaScript files In other word if an AngularJS modules depends on another AngularJS modules this means that they must be loaded in the correct order The secondModule depend on the firstModule to be loaded first AngularJS modules and W20 To correctly initialize AngularJS the application module must know all the top level declared AngularJS modules To expose them properly you must add the following code to the public signature of modules that declare AngularJS modules return angularModules angularModule1 angularModule2 All angularModules arrays of AMD public signature modules are concatenated and the resulting array is passed to the angular bootstrap function callout info Note that you don t need to add the transitive AngularJS modules callout","summary":"W20 is an integration framework for the AngularJS-based Single Page Applications (SPA). It offers a modular programming\nmodel based on fragments and high-level services to accelerate your Web development.<!--more-->\n\nFragments and configuration\n\nW20 and its applications are organized around...","zone":{"path":"/docs","label":"Documentation","logo":"w20-logo.svg"},"section":{"label":"W20 manual","icon":"fa fa-book","path":"manual"}},{"title":"Routing","tags":["route","template","path","view"],"href":"/docs/manual/routing","content":"W20 provides a declarative syntax to register AngularJS routes in your application It is done through the routes section of fragment manifests routes route1 route2 The application module will process the routes section of all fragments and register the valid routes in the AngularJS routing system The two components of a W20 route definition are The route paths which are specified by the keys of the routes object To ensure route uniqueness in an application the fragment identifier is used as a route path prefix For example if the fragment identifier is fragment1 the full route path registered in AngularJS routing for route1 is fragment1 route1 The route definitions which are specified as an object for each route path Every options of the AngularJS route object can be configured the most common one being the templateUrl and the controller associated to the view routes route1 templateUrl fragment id views route1Template html controller route1Controller callout info The route definition object specifies the contents and behavior of the view that will be displayed inside the HTML tag containing the ngView attribute To learn more about AngularJS routing please check this documentation https docs angularjs org api ngRoute provider routeProvider callout Route types A route definition should contain a type attribute If it is not present a route type of view is assumed which is a standard AngularJS route Two route types are available out of the box A view route is a standard AngularJS route which is minimally processed by W20 If it contains a templateUrl its value is resolved into a full URL by the RequireJS function toUrl As such every fragment alias like fragment1 is resolved A sandbox route type is a W20 specific route type which encapsulate the page denoted by the url attribute into an iframe It is useful to add any pre existing HTML pages into a W20 application such as legacy application screens The url attribute is resolved into a full URL by the RequireJS function toUrl Any custom route type can be registered by using the registerRouteHandler function of the application module public definition define w20 core modules application function application application registerRouteHandler myCustomType function route analyze and transform the route object here return route The handler will be invoked for each detected route of type myCustomType It is required that the returned route object is a valid AngularJS route definition Hidden routes You can hide a route from the menu by setting the hidden attribute to true in the route definition object routes route1 hidden true Categorizing routes The category attribute can be used to define a category for the route which will often be rendered as a section or folder in graphical themes The category name supports hierarchical categories separated with dots routes route1 category a b c This will put the route1 route in the c sub category of b which is itself a sub category of category a The special category name __top define the route as a top level route without category It is the default value of this attribute Additional route metadata Additional attributes can be attached to route definition and will be ignored by AngularJS When retrieving the route through the AngularJS route service these attributes will be preserved allow for further processing during the execution of the application W20 route metadata W20 adds a limited set of attributes on all routes type the type attribute is automatically added if not present with the view value path the full path of the route category the category of the route which can be used to classify the routes for navigation is added with a default value of __top i18n the i18n key for the route name is added with a default value of application view normalized route path Path normalization consists of replacing slashes with dots As such the fragment1 route1 fragments will have a default i18n key of application view fragment1 route1 resolve a resolve object will be added to check for route security and for any additional custom check defined by the check attribute on the route definition which must reference by name a custom check function registered with AngularJS injector through a module value myCheck function checkFn and returning a promise The routing is suspended until the promise is resolved or rejected Custom metadata Any additional metadata can be added to the route for custom purposes but be aware to not interfere with W20 route metadata as any custom attribute of the same name will be overwritten before any custom route handler is called","summary":"W20 provides a declarative syntax to register AngularJS routes in your application.<!--more--> It is done through the routes section \nof fragment manifests:\n\n"routes": {\n "/route1": {\n ...\n },\n "/route2": {\n ...\n }\n}\n\nThe application...","zone":{"path":"/docs","label":"Documentation","logo":"w20-logo.svg"},"section":{"label":"W20 manual","icon":"fa fa-book","path":"manual"}},{"title":"Security","tags":["permission","authentication","authorization","role"],"href":"/docs/manual/security","content":"W20 applications can be integrated with security backends to authenticate users and display views that are consistent with the backend security model callout danger Before going into details it is crucial to understand that a client side Web application such as a W20 one can almost never provide effective security It is only a frontend that will reflect the security enforced in the backend but there is value in providing a consistent experience between what is possible in the UI and what is allowed by the backend and W20 provides such an integration callout The security model Subject and principals The subject is the security term which refers to a security centric view of an application user It always have an identifier A particular W20 application instance can only have zero or one subject connected at a time Principals are key value pairs associated to a subject and provide additional metadata about it like its default culture its full name its avatar etc Security providers Security providers are the bridge between the backend and the W20 security model Authentication operations are done through security providers Simple authentication provider W20 provides a SimpleAuthenticationProvider which is configured with two URL an authentication URL which will be requested with a GET upon authentication and a DELETE upon deauthentication an authorization URL which will be requested with a GET upon successful authentication to retrieve subject authorizations The credentials will be passed in clear as query parameters upon authentication so it is recommended that this provider is only used in the case of basic authentication https tools ietf org html rfc2617 where credentials can be omitted as they are directly handled by the browser Realms Realms allow a W20 application to use several security backends at once Security operations involving the backend s like authentication will be done on all security realms The multiple responses are checked for coherence they must all refer to the same subject id for instance and are partially aggregated Subject identity like its identifier type and principals are merged as one definition Subject authorizations are kept separate to avoid mixing backend security models Permissions W20 security model is permission based Permissions are arrays of strings which denote a specific right to do something in the application admin restart admin database wipe users list create read update users details printers lp457 print Permission names are completely arbitrary and developer defined but it is recommended to start from the least specific term like a functional area of the application or a use case to the most specific term like an action or an entity identifier callout tips Permission can also be expressed as colon delimited strings users details is equivalent to users details callout Roles Roles are simply collections of permissions and although they can be checked for explicitly it is not recommended for the application security model maintainability The recommendation is to design the permissions such as they express the intent of the associated use case or user action and to check for these permissions only It is guaranteed that as long as the user action exists in the code the permission will remain semantically valid whereas how it is given can change throughout application life Attributes Attributes can be attached to roles and checked for during a permission or role check It is mainly used to restrict a role scope to a geographic region or an organisational branch for instance Configuration The security module can be configured with the following options autoLogin will automatically trigger an authentication upon application startup In this case security providers will be called without credentials They can ask for credentials at this points or let the browser handle credential entry as it is the case in basic authentication for instance redirectAfterLogin will redirect to the specified route path after a successful login redirectAfterLogout will redirect to the specified route path after a logout roleMapping will allow to map multiple backend roles to uniquely named unified frontend roles Role mapping W20 security allows to map several backend roles to a unified frontend role which can then be used for display or filtering purpose It can be done through the roleMapping configuration attribute roleMapping UNIFIED_ROLE realm1 SOME_BACKEND_ROLE realm2 OTHER_BACKEND_ROLE This configuration enables to view the two backend roles defined from two different realms as one frontend role called UNIFIED_ROLE If only one security realm is declared in the application all backend roles of this realm will automatically be mapped to unified roles of the same name Fragment declaration Security providers can be registered programatically with the authentication service but can also be declared in a fragment manifest security provider Simple config authentication authorizations This will register a security realm with the name of the fragment identifier using the SimpleSecurityProvider service as the security provider configured with the config section Security services Authentication service The authentication service can be used to alter the currently connected subject Authenticate a new subject with its credentials and define it as the globally active subject Deauthenticate the currently active subject Refresh the currently active subject The authentication service can also be used to query identity information about the subject such as its identifier or its principals Authorization service The authorization service can be used to verify specific authorizations on the currently active subject and on a specific realm If the subject has a specific role with possibly specific attributes If the subject has a specific permission with possibly specific attributes It can also be used to query the list of roles although it is limited to the unified roles Security expression service Security expressions are a simple and effective way of checking the authentication and authorization status of the currently active subject Inject the SecurityExpressionService to evaluate them Security expressions are normal AngularJS expressions with the following additional functions available hasPermission realm permission attributes which checks a permission for the currently active subject hasRole realm role attributes which checks if the currently active subject has a specific role isAuthenticated which checks if there is a currently active subject principal name which returns the value of a specific principal The result of the security expression is evaluated as a boolean var result securityExpressionService evaluate hasPermission someRealm users details clear Security directive The w20Security directive allows to evaluate a security expression in a view and display the element only if it evaluates to true The expression is evaluated in its current scope augmented with the security expression service operations described above Or Role filtering W20 security can narrow the authorizations of the currently active subject by setting up filters role filter narrows the authorizations to the specified roles Any permission or role not allowed by the filter will be denied until this filter is cancelled attribute filter narrows the authorizations on which the specified attribute values are attached Any permission or role which don t have the specified attribute values will be denied until this filter is cancelled Filtering is limited to unified roles","summary":"W20 applications can be integrated with security backends to authenticate users and display views that are consistent with\nthe backend security model.<!--more-->\n\n\nBefore going into details, it is crucial to understand that a client-side Web application such as a W20 one...","zone":{"path":"/docs","label":"Documentation","logo":"w20-logo.svg"},"section":{"label":"W20 manual","icon":"fa fa-book","path":"manual"}},{"title":"Testing","tags":["test","unit","integration"],"href":"/docs/manual/testing","content":"As your application grows it becomes harder to assert that all your features are still working correctly Whether you are doing some refactoring upgrading a library version or adding new features you want a mechanism to assert that thing are working correctly and protect yourself from regression Testing Unit tests The web framework does not enforce a particular runner or test suite for unit testing but we found that a good combination is Karma http karma runner github io 0 13 index html as the runner and Jasmine http jasmine github io 2 0 introduction html as the test suite language This is probably the most popular combination for running tests and the one that the AngularJS team uses Recommended lecture are Karma documentation http karma runner github io 0 13 index html Jasmine documentation http jasmine github io 2 0 introduction html AngularJS guide on unit testing https docs angularjs org guide unit testing Installation and configuration If you used the generator w20 required packages will already be installed in your node_modules folder If you want to start from scratch first install NodeJS https nodejs org en create a directory for your app if you do not already have one cd into it and use the following command npm install karma karma cli karma jasmine karma phantomjs launcher karma requirejs You will need to configure a karma conf js file at your project root to instruct Karma You can use the following guide http karma runner github io 0 12 intro configuration html to configure every options in cli mode Please have a look at the Karma documentation http karma runner github io 0 12 intro configuration html for a complete description of the options The end result should look something like this module exports function config use strict config set frameworks jasmine requirejs files test main js pattern fragment js included false pattern bower_components included false port 9876 colors true logLevel INFO browsers PhantomJS This file instruct Karma about the file patterns to be served when running the tests As you can see we will served the business modules of the fragment located in the fragment folder along with the web dependencies of the bower_components callout info The PhantomJS browser will be used for loading the application PhantomJS is a headless browser It can run the application without rendering the HTML pages which we do not need since we are only interested in testing the application logic This is useful for executing tests in an environment which does not support graphical interface such as a CI server for instance callout Since we are using RequireJS we will need a main module for the tests This module will be declared in a test main js file var tests for var file in window __karma__ files if spec js test file tests push file window w20 configuration base bower_components w20 w20 core w20 json modules application id w20 test home test vars components path base bower_components deps tests callback window __karma__ start requirejs config paths angular mocks base bower_components angular mocks fragment base fragment shim angular mocks angular mocks angular angular requirejs base bower_components w20 modules w20 js There is a lot going on in the test main js file and we will explain what this configuration does This module is the main entry point to the application under test 1 Loaded files are listed in the global variable window _karma_ files We add all the spec js files in a list those files corresponding to the unit test modules we will write one soon 2 We configure the application programmatically by editing the w20 global variable configuration property Normally the loader will create this configuration by reading and parsing an application manifest but we can edit it directly for the need of bootstrapping a test environment We declare the core fragment and configure the application module Because Karma will serve files from base we need to specify the path to our web components by default the components path is mapped to bower_components but here we need to remap it to base bower_components This is possible using the vars property We add the unit test modules to the dependencies by using the deps property and allow the start of Karma once the configuration has been processed using the callback property 3 Some additional RequireJS configuration are necessary to remap the angular mocks module and the business fragment alias to suit Karma base path 4 Finally we start the application by requiring explicitely the w20 module Writing unit tests We are ready to start unit testing a module We will take the example of a simple AngularJS controller defined in fragment modules module to test js define angular angular function angular use strict var module angular module moduleToTest module controller ControllerToTest scope function scope scope greeting Hello World return angularModules moduleToTest This module does not do anything fancy We declare an AngularJS module moduleToTest and a controller with a scope property The spec unit test module for this module will be located in fragment specs module to test spec js define angular angular angular mocks angular mocks fragment modules module to test function angular use strict describe The module to test function var scope beforeEach angular mock module moduleToTest beforeEach inject function rootScope controller scope rootScope new controller ControllerToTest scope scope it says hello world function expect scope greeting toEqual Hello World 1 A test suite begins with a call to the global Jasmine function describe with two parameters a string and a function The string is the title of the suite usually what is under test The function body implements the suite 2 The beforeEach function executes before each unit test Here we register a mocked version of the module moduleToTest This will allow us later to request the controller declared on this module without having to worry about the dependency of this module 3 We also request that before each test the scope variable be initialized with a new scope The controller service allow us to retrieve our controller and provide it its dependency Our newly created scope with rootScope new will be passed to the constructor through dependency injection 4 Finally the unit test can be written A unit test in Jasmine takes the form of it statement which reads like a sentence describing the expected result of the test","summary":"As your application grows it becomes harder to assert that all your features are still working correctly. \nWhether you are doing some refactoring, upgrading a library version or adding new features, you want \na mechanism to assert that thing are working correctly and protect yourself from regression...","zone":{"path":"/docs","label":"Documentation","logo":"w20-logo.svg"},"section":{"label":"W20 manual","icon":"fa fa-book","path":"manual"}},{"title":"UI","tags":["css","display","content","navigation","menu","bookmark"],"href":"/docs/manual/ui","content":"The user interface can be customized with the graphical framework of your choice along with services which helps in areas such as navigation display and theming UI Framework Application can use any CSS frameworks or your own custom styling Two popular frameworks Twitter Bootstrap http getbootstrap com and Angular Material https material angularjs org latest are available through dedicated fragments To include these framework in the application declare the fragment that you want in your application manifest bower_components w20 bootstrap 3 w20 bootstrap 3 w20 json bower_components w20 material w20 material w20 json The CSS framework loaded can be identified in the application logic by requiring the css framework modules css framework module and evaluating its name property define css framework modules css framework function cssFramework console log cssFramework name bootstrap 3 Services Additionally several services are available for different areas of the user interface DisplayService The DisplayService assists in presentation and positioning It can request and exit fullscreen as well as registering callback for dynamic CSS classes Fullscreen mode The enterFullScreen and exitFullScreen methods will request fullscreen mode according to the type of browser in use Webkit browsers behave differently from MS browsers for instance These methods allows to abstract the request of the fullscreen mode for every browser Dynamic positioning The following CSS classes can have dynamic values w20 top shift padding padding top w20 top shift margin margin top w20 top shift top w20 right shift padding padding right w20 right shift margin margin right w20 right shift right w20 bottom shift padding padding bottom w20 bottom shift margin margin bottom w20 bottom shift bottom w20 left shift padding padding left w20 left shift margin margin left w20 left shift left Whenever a function return a b c d is registered through the registerContentShiftCallback fn method the value of theses classes is summed with the value of a b c and d a increment the value of w20 top shift padding w20 top shift margin w20 top shift b increment the value of w20 right shift padding w20 right shift margin w20 right shift c increment the value of w20 bottom shift padding w20 bottom shift margin w20 bottom shift d increment the value of w20 left shift padding w20 left shift margin w20 left shift You can compute the shift in value by calling computeContentShift The registerContentShiftCallback fn will automatically call the computeContentShift function but you might need to compute it again later if you used variables in the shift values for instance module controller ExempleController DisplayService EventService function displayService eventService var show true function showElement return show 100 0 50 0 0 displayService registerContentShiftCallback showElement eventService on SomeEvent function show show displayService computeContentShift In the example above initially The w20 top shift padding w20 top shift margin w20 top shift classes will have their value set to 100px The w20 right shift padding w20 right shift margin w20 right shift classes will have their value set to 50px the remaining one will have their value set to 0 When SomeEvent happen The w20 top shift padding w20 top shift margin w20 top shift classes will have their value set to 0 The w20 right shift padding w20 right shift margin w20 right shift classes will have their value set to 50px The remaining one will have their value set to 0 NavigationService The NavigationService is mostly used internally to compute a hierarchical routes tree useful for displaying a menu of routes ordered by categories You can call the routeTree method to retrieve the routes tree of the application For an exhaustive description of the API please consult the JSdoc MenuService The MenuService enable user to register custom action and section in themes actions are element of the topbar sections are element of the sidebar Note that some themes only allow actions Registering actions sections Before an action or section is added it needs to be a member of an action type or section type To register a new action section type use the registerActionType type config or registerSectionType type config methods of the service This is used to register the login and culture dropdown type action of themes for instance menuService registerActionType w20 login templateUrl css framework templates action login html showFn function return authenticationService isAuthentifiable menuService registerActionType w20 culture templateUrl css framework templates action culture html showFn function return cultureService availableCultures length 0 The showFn property specify on which condition should the action section be shown Adding actions sections To actually include an action or section use the addAction name type configExtension or addSection name type configExtension methods of the service menuService addAction login w20 login sortKey 100 The methods takes as argument the name of the action the type of the action and a configuration object which extends the registered type configuration The sortKey property allow to order actions sections Bookmark service The BookmarkService allow to store routes bookmarks Use the addBookmark name route method with a name and an angular route object to store one Use the getBookmark name or getAllBookmarks methods to retrieve bookmarks Additional methods are described in the API documentation","summary":"The user interface can be customized with the graphical framework of your choice along with services which helps in areas such as\nnavigation, display and theming.<!--more-->\n\nUI Framework\n\nApplication can use any CSS frameworks or your own custom styling. Two popular frameworks, Twitter...","zone":{"path":"/docs","label":"Documentation","logo":"w20-logo.svg"},"section":{"label":"W20 manual","icon":"fa fa-book","path":"manual"}},{"title":"AngularJS dependency injection","href":"/guides/angularjs-dependency-injection/","content":"Dependency injection in AngularJS is supremely useful and the key to making easily testable components This article explains how AngularJS dependency injection system works The Provider provide The provide service is responsible for telling Angular how to create new injectable things these things are called services Services are defined by things called providers which is what you re creating when you use provide Defining a provider is done via the provider method on the provide service and you can get hold of the provide service by asking for it to be injected into an application s config function An example might be something like this myMod config function provide provide provider greeting function this get function return function name alert Hello name Here we ve defined a new provider for a service called greeting we can inject a variable named greeting into any injectable function like controllers more on that later and Angular will call the provider s get function in order to return a new instance of the service In this case the thing that will be injected is a function that takes a name parameter and alerts a message based on the name We might use it like this myMod controller MainController function scope greeting scope onClick function greeting Ford Prefect Now here s the trick factory service and value are all just shortcuts to define various parts of a provider that is they provide a means of defining a provider without having to type all that stuff out For example you could write that exact same provider just like this myMod config function provide provide factory greeting function return function name alert Hello name It s important to understand so I ll rephrase under the hood AngularJS is calling the exact same code that we wrote above the provide provider version for us There is literally 100 no difference in the two versions value works just the same way if whatever we would return from our get function aka our factory function is always exactly the same we can write even less code using value For example since we always return the same function for our greeting service we can use value to define it too myMod config function provide provide value greeting function name alert Hello name Again this is 100 identical to the other two methods we ve used to define this function it s just a way to save some typing Now you probably noticed this annoying myMod config function provide thing I ve been using Since defining new providers via any of the given methods above is so common AngularJS exposes the provider methods directly on the module object to save even more typing var myMod angular module myModule myMod provider greeting myMod factory greeting myMod value greeting These all do the same thing as the more verbose app config versions we used previously The one injectable I ve skipped so far is constant For now it s easy enough to say that it works just like value We ll see there s one difference later To review all these pieces of code are doing the exact same thing myMod provider greeting function this get function return function name alert Hello name myMod factory greeting function return function name alert Hello name myMod value greeting function name alert Hello name The Injector injector The injector is responsible for actually creating instances of our services using the code we provided via provide no pun intended Any time you write a function that takes injected arguments you re seeing the injector at work Each AngularJS application has a single injector that gets created when the application first starts you can get a hold of it by injecting injector into any injectable function yes injector knows how to inject itself Once you have injector you can get an instance of a defined service by calling get on it with the name of the service For example var greeting injector get greeting greeting Ford Prefect The injector is also responsible for injecting services into functions for example you can magically inject services into any function you have using the injector s invoke method var myFunction function greeting greeting Ford Prefect injector invoke myFunction Its worth noting that the injector will only create an instance of a service once It then caches whatever the provider returns by the service s name the next time you ask for the service you ll actually get the exact same object So it stands to reason that you can inject services into any function that is called with injector invoke This includes controller definition functions directive definition functions filter definition functions the get methods of providers aka the factory definition functions Since constants and values always return a static value they are not invoked via the injector and thus you cannot inject them with anything Configuring Providers You may be wondering why anyone would bother to set up a full fledged provider with the provide method if factory value etc are so much easier The answer is that providers allow a lot of configuration We ve already mentioned that when you create a service via the provider or any of the shortcuts Angular gives you you create a new provider that defines how that service is constructed What I didn t mention is that these providers can be injected into config sections of your application so you can interact with them First Angular runs your application in two phases the config and run phases The config phase as we ve seen is where you can set up any providers as necessary This is also where directives controllers filters and the like get set up The run phase as you might guess is where Angular actually compiles your DOM and starts up your app You can add additional code to be run in these phases with the myMod config and myMod run functions each take a function to run during that specific phase As we saw in the first section these functions are injectable we injected the built in provide service in our very first code sample However what s worth noting is that during the config phase only providers can be injected with the exception of the services in the AUTO module provide and injector For example the following is not allowed myMod config function greeting WON T WORK greeting is an instance of a service Only providers for services can be injected in config blocks What you do have access to are any providers for services you ve made myMod config function greetingProvider a ok There is one important exception constants since they cannot be changed are allowed to be injected inside config blocks this is how they differ from values They are accessed by their name alone no Provider suffix necessary Whenever you defined a provider for a service that provider gets named serviceProvider where service is the name of the service Now we can use the power of providers to do some more complicated stuff myMod provider greeting function var text Hello this setText function value text value this get function return function name alert text name myMod config function greetingProvider greetingProvider setText Howdy there myMod run function greeting greeting Ford Prefect Now we have a function on our provider called setText that we can use to customize our alert we can get access to this provider in a config block to call this method and customize the service When we finally run our app we can grab the greeting service and try it out to see that our customization took effect Since this is a more complex example here s a working demonstration http jsfiddle net BinaryMuse 9GjYg http jsfiddle net BinaryMuse 9GjYg Controllers controller You can inject things into controllers but you can t inject controllers into things That s because controllers aren t created via the provider Instead there is a built in Angular service called controller that is responsible for setting up your controllers When you call myMod controller you re actually accessing this service s provider just like in the last section For example when you define a controller like this myMod controller MainController function scope What you re actually doing is this myMod config function controllerProvider controllerProvider register MainController function scope Later when Angular needs to create an instance of your controller it uses the controller service which in turn uses the injector to invoke your controller function so it gets its dependencies injected too Filters and Directives filter and directive work exactly the same way as controller filter uses a service called filter and its provider filterProvider while directive uses a service called compile and its provider compileProvider Some links filter http docs angularjs org api ng filter http docs angularjs org api ng filter filterProvider http docs angularjs org api ng filterProvider http docs angularjs org api ng filterProvider compile http docs angularjs org api ng compile http docs angularjs org api ng compile compileProvider http docs angularjs org api ng compileProvider http docs angularjs org api ng compileProvider As per the other examples myMod filter and myMod directive are shortcuts to configuring these services Summary So to summarize any function that gets called with injector invoke can be injected into This includes but is not limited to controller directive factory filter provider get when defining provider as an object provider function when defining provider as a constructor function service The provider creates new services that can be injected into things This includes constant factory provider service value That said built in services like controller and filter can be injected and you can use those service to get hold of the new filters and controllers you defined with those methods even though the things you defined aren t by themselves able to be injected into things Other than that any injector invoked function can be injected with any provider provided service there is no restriction other than the config and run differences listed herein Source article Article copied from https github com angular angular js wiki Understanding Dependency Injection https github com angular angular js wiki Understanding Dependency Injection","summary":"Dependency injection in AngularJS is supremely useful, and the key to making easily testable components. This article \nexplains how AngularJS dependency injection system works.<!--more-->\n\nThe Provider ($provide)\n\nThe $provide service is responsible for telling Angular how to create new...","zone":{"path":"/guides","label":"Guides","logo":"guides-logo.svg"},"section":{"label":"AngularJS dependency injection","path":"angularjs-dependency-injection"}},{"title":"AngularJS directive design","href":"/guides/angularjs-directive-design/","content":"AngularJS is a web application framework that makes creating complicated web applications much simpler One of its best features is the ability to create directives or reusable web components It gives you the ability to create new HTML tags and attributes which can dynamically display content in response to data changes as well as update the data when appropriate They re a big productivity booster because they let you wrap up a complicated interaction with the DOM in a nice reusable package Making directives can be confusing at first It doesn t take long to realize that directives are useful and the ones that are bundled with AngularJS are well designed but making directives can feel overwhelming at first The Angular team has done a good job making directives extremely powerful and flexible but all that power comes with some complexity Specifically it s difficult to understand how to create a directive that responds to data changes updates data responds to events or exposes events Basically it boils down to this How do I talk to a directive This article aims to explain and simplify some of the most common problems you will run in to when creating directives Directive design principles Directives make our lives easier when you can reuse them without needing to read or edit the source code Then we can forget how they work and just remember what they do If you re coming from a view centric framework you may be tempted to separate your application into view like directive chunks For example if you want to display a list of users you might create a directive that reads scope users and prints them all out The user list directive works I mean look how DRY it is However contrast it with ng repeat which handles only the repetition Which one could be used in more places What if you need to display users differently in two places A good directive only does one job ng repeat is better than user list because it does only one job It only does the repetition part so you can reuse it many more situations It s job is easy to understand Instead of making one directive that solves everything split it up into several focused directives and glue them together A good directive is not application specific Directives are more widely useful the fewer assumptions they make about your application A directive that allows the user to say which property to observe like ng model is more useful than one that assumes that scope users exists As a general rule if your directive could be useful in a completely different application it s more likely to be well designed and useful even if you never publish it That s enough theory for now Let s dive in to some specific examples of common ways you can interact with directives How to display bindings The first thing to learn is how to make a directive that respects a binding the ones with double curly braces For example let s make a directive that displays a photo and a caption The first step in any directive design is to choose the names of the attributes that will make up your interface I ve chosen to use photo src for the image src and caption for the text Be careful not to use names that other directives use like ng src unless you know how they work Secondly decide if you want to support only attributes and class names or elements too In this case we decide we want photo to be an element Note that I did not give the directive the whole photo object It s better design to allow the directive to work with any data structure To read a binding use attrs observe This will call your callback any time the binding changes We then use element to make changes to the DOM app directive photo function return required to make it work as an element restrict E replace with this html template replace true observe and manipulate the DOM link function scope element attrs attrs observe caption function value element find figcaption text value attribute names change to camel case attrs observe photoSrc function value element find img attr src value Alternatively if your component has its own template you can do all of this with an isolate scope app directive photo function return restrict E templateUrl photo html replace true pass these two names from attrs into the template scope scope caption photoSrc HTML caption How to read and write data Some directives need to write data too like ng model Let s make a button toggle directive This directive will automatically set its toggle state based on some boolean in the scope and when clicked it will set the boolean When passing data this way you don t use curly braces you use an Expression An Expression is any JS code that would run if it were on the scope Use expressions whenever you need to write data or when passing in an Object or Array into the directive instead of a string Show Details First we use on the scope settings to make scope toggle available within our directive Anywhere in our directive scope toggle reads and writes to whatever the user set in the attribute app directive toggle function return scope toggle link function scope element attrs Next we use scope watch which calls your function whenever the expression changes We ll add and remove the active css class whenever it changes scope watch toggle function value element toggleClass active value Finally let s listen to the jQuery click event and update the scope We need to use scope apply any time we respond to changes from outside of Angular element click function scope apply function scope toggle scope toggle How to expose events Sometimes you want to allow a controller to respond to events from within a directive like ng click Let s make a scroll directive that can call a function whenever a user scrolls that element In addition let s expose the scroll offset too Similar to the toggle button we map whatever function they specify in the attribute to scroll in our directive s scope app directive scroll function return scope scroll link function scope element attrs We ll use jQuery s scroll event to get what we need We still need to call scope apply here because even though it calls the handler either way the handler on the controller might set data element scroll function scope apply function var offset element scrollTop scope scroll offset offset Notice that we don t pass the offset in as the first parameter we pass a hash of available parameters and make them available to the expression onScroll offset that they passed in to the attribute This is much more flexible than passing parameters directly because they can pass other scope variables into their functions like the current item in an ng repeat How to have HTML content Directives can have html content by default but the minute you specify a template the content is replaced by the template Let s make a modal component a popup window with a close button and we would like to set the body as html Some contents Put whatever you want in here Our modal is more than just one element though When we make the template we include everything we need then we put a special ng transclude directive in the div that is supposed to take back over and get all the contents Close Modal Wiring things up is pretty simple Just set transclude true to get this to work app directive modal function return restrict E templateUrl modal html replace true transclude true You can combine this with any of the other techniques in this article to make something more complicated How to respond to events Sometimes you might want to call a function on your directive in response to an event in your scope For example you might want to close the open modal if the user hits the escape key This is almost always an indication that you are stuck on events when you should be thinking about data flow Controllers don t just contain data they hold view state too It s totally fine to have a windowShown boolean on your controller and use ng show or pass a boolean into your directive as described above There are cases where it does make sense to use scope on in a directive but for beginners try to think about the problem in terms of changing state instead Things get much easier in Angular if you focus on data and state instead of events More Information There is a lot more to directives This article doesn t nearly cover everything they can do Please visit the directive documentation http docs angularjs org guide directive page for more information Source article Article copied from http seanhess github io 2013 10 14 angularjs directive design html http seanhess github io 2013 10 14 angularjs directive design html","summary":"AngularJS is a web application framework that makes creating complicated web applications much simpler. One of its best\nfeatures is the ability to create directives, or reusable web components. It gives you the ability to create new HTML\ntags and attributes, which can dynamically display content in...","zone":{"path":"/guides","label":"Guides","logo":"guides-logo.svg"},"section":{"label":"AngularJS directive design","path":"angularjs-directive-design"}},{"title":"Frontend testing","href":"/guides/frontend-testing/","content":"As your application grows it becomes harder to assert that all your features are still working correctly Whether you are doing some refactoring upgrading a library version or adding new features you would want a mechanism to protect yourself from regression Testing is well known for Java EE server side application but your front end web application also deserves unit testing especially when complex logic are involved Unit testing as the name implies is about testing individual units of code Unit tests try to answer questions such as Did I think about the logic correctly or Does the sort function order the list in the right order W20 itself is agnostic of the testing framework and the test runner but you may have good results with respectively Jasmine and Karma Writing unit tests Instead of repeating in a less complete way what the documentation on Jasmine Jasmine http jasmine github io 2 1 introduction html and AngularJS http docs angularjs org guide dev_guide unit testing have to offer on testing we are going to follow an example and see how we can test our individual unit of code The code to test We will use the example of a small CRUD application for managing users The code that we will test consists of a service UsersService that retrieve users and an angular controller which holds some functions addUser loadUsers and clearUsers module factory UsersService resource function resource return usersResource resource require toUrl fragmentRoot data users json module controller UserController scope UsersService function scope usersService var userId 0 var Users usersService usersResource User array initialization scope users This function add the current entered user to the user array scope addUser function scope users push id userId toString firstName scope firstName lastName scope lastName This function loads users from a resource scope loadUsers function Users query function result for var i 0 i userId userId result i maxid scope users result This function clears the user array scope clearUsers function scope users We can now start writing some tests in our user test js file Unit test structure A test suite begins with a call to the global Jasmine function describe with two parameters a string and a function The string is a name or title for a spec suite usually what is under test The function is a block of code that implements the suite describe A suite function it contains spec with an expectation function expect true toBe true Specs are defined by calling the global Jasmine function it which like describe takes a string and a function The string is a title for this spec and the function is the spec or test A spec contains one or more expectations that test the state of the code under test An expectation in Jasmine is an assertion that can be either true or false A spec with all true expectations is a passing spec A spec with one or more expectations that evaluate to false is a failing spec describe A suite of spec function var a it is a spec and variable a should be true function a true expect a toBe true Jasmine also provides the global beforeEach and afterEach functions As the name implies the beforeEach function is called once before each spec in the describe is run and the afterEach function is called once after each spec describe A spec with setup and tear down function var foo beforeEach function foo 0 foo 1 afterEach function foo 0 it is just a function so it can contain any code function expect foo toEqual 1 it can have more than one expectation function expect foo toEqual 1 expect true toEqual true Example With those basic concepts we can now start writing some tests for our code sample Before writing the test suite we want to get our hand on the service and controller inside our test file We do this by using the beforeEach function define angular angular angular mocks angular mocks my fragment modules user function angular var userController scope beforeEach function Load the user module which contains the service and controller module user inject services that will allow us to get our hands on the required components we want to unit test inject function injector controller rootScope Create an object serviceMock with a property usersResource We do this so that later on we can use it as a spy for call on the UsersService usersResource query serviceMock usersResource Get a new child scope from the root scope which will served in our specs scope rootScope new Get the UserController and map its scope dependency to the one defined above and its UsersService dependency as the serviceMock we defined above userController controller UserController scope scope UsersService serviceMock We now have all our components ready for our test suite Remember that a test suite is defined with describe describe the user controller function Inside of this test suite we can write our specs Check that initialization is correct it should have empty users collection when initialized function assert that scope users exists expect scope users toBeDefined assert it is empty expect scope users length toEqual 0 Unit test the adduser method it should be able to add items to the users collection function scope firstName Robert scope lastName SMITH scope addUser expect scope users length toEqual 1 expect scope users toContain id 1 firstName Robert lastName SMITH Unit test the clearUsers method it should be able to clear the users collection function scope users push id 1 firstName Robert lastName SMITH expect scope users length toEqual 1 scope clearUsers expect scope users length toEqual 0 Unit test the loadUsers method it should be able to load data to the users collection function We are going to turn query into a dummy function The andCallFake specify what the call to query should do We created a spy Then we test it with loadUsers serviceMock usersResource query jasmine createSpy andCallFake function callback callback id 1 firstName Robert lastName SMITH loadUsers will trigger a call to usersService usersResource query which is mocked by serviceMock usersResource query scope loadUsers expect scope users length toEqual 1 expect scope users toContain id 1 firstName Robert lastName SMITH scope firstName Anna scope lastName O HARA scope addUser expect scope users length toEqual 2 expect scope users toContain id 1 firstName Robert lastName SMITH id 2 firstName Anna lastName O HARA Full code To conclude here is the entire user test js file define angular angular angular mocks angular mocks my fragment modules user function angular var userController scope beforeEach function module user inject function injector controller rootScope serviceMock usersResource scope rootScope new userController controller UserController scope scope UsersService serviceMock describe the user controller function it should have empty users collection when initialized function expect scope users toBeDefined expect scope users length toEqual 0 it should be able to add items to the users collection function scope firstName Robert scope lastName SMITH scope addUser expect scope users length toEqual 1 expect scope users toContain id 1 firstName Robert lastName SMITH it should be able to clear the users collection function scope users push id 1 firstName Robert lastName SMITH expect scope users length toEqual 1 scope clearUsers expect scope users length toEqual 0 it should be able to load data to the users collection function serviceMock usersResource query jasmine createSpy andCallFake function callback callback id 1 firstName Robert lastName SMITH scope loadUsers expect scope users length toEqual 1 expect scope users toContain id 1 firstName Robert lastName SMITH scope firstName Anna scope lastName O HARA scope addUser expect scope users length toEqual 2 expect scope users toContain id 1 firstName Robert lastName SMITH id 2 firstName Anna lastName O HARA","summary":"As your application grows it becomes harder to assert that all your features are still working correctly. Whether you are\ndoing some refactoring, upgrading a library version or adding new features, you would want a mechanism to protect yourself\nfrom regression. Testing is well known for Java EE...","zone":{"path":"/guides","label":"Guides","logo":"guides-logo.svg"},"section":{"label":"Frontend testing","path":"frontend-testing"}},{"title":"Welcome to W20","href":"/posts/welcome-to-w20","content":"Welcome to W20","summary":"Welcome to W20!","zone":{"path":"/posts","label":"Posts","logo":"blog-logo.svg"},"section":{"path":""}},{"title":"Community","href":"/project/community","content":"Discover below the tools you can use to contact the W20 community StackOverflow If you have any question or problem please use StackOverflow http stackoverflow com and make sure to tag your question with w20","summary":"Discover below the tools you can use to contact the W20 community.<!--more-->\n\nStackOverflow\n\nIf you have any question or problem please use StackOverflow and make sure to tag your \nquestion with w20.","zone":{"path":"/project","label":"Project","logo":"project-logo.svg"},"section":{"label":"Community","icon":"fa fa-community","path":"community"}},{"title":"FAQ","href":"/project/faq","content":"Answers to common questions about W20 How is W20 licensed W20 code is licensed under the Mozilla Public License 2 0 https www mozilla org MPL 2 0 The documentation is licensed under the Creative Commons Share Alike 4 0 license http creativecommons org licenses by sa 4 0 How to get help for a W20 related problem If you have any question or problem please use StackOverflow http stackoverflow com and make sure to tag your question with w20 Can I contribute to the project Sure We would love to accept contributions as pull requests Your FAQ is not so great It did not answer my question Open an issue https github com w20 framework website issues on the website repository","summary":"Answers to common questions about W20.<!--more-->\n\nHow is W20 licensed ?\n\nW20 code is licensed under the Mozilla Public License 2.0. The documentation\nis licensed under the Creative Commons Share-Alike 4.0 license.\n\nHow to get help for a W20 related problem ?\n\nIf you have any question or...","zone":{"path":"/project","label":"Project","logo":"project-logo.svg"},"section":{"label":"FAQ","icon":"fa fa-comments-o","path":"faq"}},{"title":"Overview","href":"/project/","content":"This section is about the W20 project itself Find out more by browsing the menu sections above","summary":"This section is about the W20 project itself. Find out more by browsing the menu sections above.","zone":{"path":"/project","label":"Project","logo":"project-logo.svg"},"section":{"label":"Overview","icon":"fa fa-file-text","path":""}},{"title":"Basics","href":"/themes/business/","content":"Business Theme The Business Theme is a responsive Bootstrap 3 based theme that provides upfront integration of aspects such as routes navigation authentication or internationalization in your front end application callout tips Running demo available here http seedstack org w20 business theme callout Installation bower install w20 business theme save Configuration Fragment declaration To include the theme declare it in your fragment manifest If you are using the bridge addon it will be included by default bower_components w20 business theme w20 business theme w20 json modules main Options Options can be declared in the main module configuration sidebar Object Options for the theme sidebar width Number Specify a fixed size in px for the sidebar If not configured a default 270px width is applied brand Object Options for the upper left corner which displays the application brand name fixedWith Boolean If true the brand name size will not exceed the default sidebar width backgroundColor Any CSS color compatible declaration Set the background color of the brand textColor Any CSS color compatible declaration Set the color of the brand test links Array Add additional links to the topbar The links array will contain Object link with the following properties label String The value to display as the link name if no i18n key is provided i18n String The i18n key to use for the link ex custom link key See the culture module of w20 for more information href String The href attribute value of the link target String The target attribute value of the link ex _blank security String The link display security expression See the security module of w20 for more information hideConnectivity Boolean Hide the connectivity status hideCulture Boolean Hide the culture dropdown hideSecurity Boolean Hide the authentication action logo Object Options for the topbar logo mage String url of the logo image link String url of the logo link target String target of the logo link defaults to _self tooltip String text of the logo tooltip defaults to the url attribute Sidebar routes Routes declaration of fragments are aggregated in the sidebar menu You can group related route under a category by declaring a category attribute on the route declaration routes topLevelRoute templateUrl Fragment views topLevelRoute html controller TopLevelRouteController as tlr route1OfCatOne templateUrl Fragment views route1 html controller Route1Controller as rc1 category catOne route2OfCatOne templateUrl Fragment views route2 html controller Route1Controller as rc2 category catOne The category will appear as an i18n key in your route application viewcategory category name which you can then localize You can order the category in the menu by delcaring a navigation property in your fragment manifest navigation catTwo catOne Topbar actions The topbar will automatically include actions such as a culture dropdown login logout button or connectivity status if the relevant module have been declared and if these actions have not been hidden using hideXXXX properties You can include your own actions using the MenuService First you need to register an action type service registerActionType my action type templateUrl Fragment templates action my action html showFn function var show true You can specify conditions for displaying the action return show Then you can add this action to the topbar service addAction action my action type sortKey 300 This register an action of name action of type my action type The last parameter is an object which will extend the default one you provided in the action type registration Use the sortKey attribute to order your actions display Background colors These background classes can be used to style background Text color will be set appropriately to contrast with them colors 999999 bg grey colors f7f7f7 bg gray light colors 111111 bg black colors DD4B39 bg red colors F39C12 bg yellow colors 00C0EF bg aqua colors 428BCA bg blue colors 3C8DBC bg light blue colors 00A65A bg green colors 001F3F bg navy colors 39CCCC bg teal colors 3D9970 bg olive colors 01FF70 bg lime colors FF851B bg orange colors F012BE bg fuchsia colors 605CA8 bg purple colors D81B60 bg maroon Infobox Infobox are components that display information associated with an icon Text 100 Callout Callout can be used as an alternative to Bootstrap alert to carry visual emphasis Title Message to display to the user","summary":"Business Theme\n\nThe Business Theme is a responsive Bootstrap 3 based theme that provides upfront integration of aspects such as\nroutes navigation, authentication or internationalization in your front end application.\n\n\nRunning demo available here.\n\n\nInstallation...","zone":{"path":"/themes","label":"Themes","logo":"themes-logo.svg"},"section":{"label":"Business theme","path":"business"}},{"title":"Basics","href":"/themes/material/","content":"Material Theme The material theme is a based on Google Material design https www google com design spec material design introduction html and implemented with W20 Angular Material add on http seedstack org addons w20 material callout tips Running demo available here http seedstack org w20 material theme callout Installation bower install w20 material theme save Configuration In modules main theme primaryPalette and accentPalette properties MUST be defined Each defined Palette property MUST have at least their name properties defined The hues property follows Material Angular color intentions syntax https material angularjs org latest Theming 03_configuring_a_theme specifying custom hues for color intentions A list of color palettes is present on the Material Design Specification http www google com design spec style color html color color palette javascript bower_components w20 material theme w20 material theme w20 json modules main sidenav logoUrl home logoImg images logo png backgroundImg images header background jpg theme primaryPalette name indigo hues default 400 hue 1 100 hue 3 A100 accentPalette name amber warnPalette name red hues default 400 hue 2 600 backgroundPalette name blue grey dark true Defaults to false Usage A simple masterpage would be html W20 Material Theme Test Directive w20 material sidenav Create a Material Angular sidenav https material angularjs org latest demo sidenav based upon a temporary drawer from the Material Design Specification https www google com design spec patterns navigation drawer html navigation drawer behavior Generated by the routes property present in the fragment configuration For each route the icon property define its icon Icons are Material Design Icons https design google com icons By default the icon is arrow_right javascript routes home templateUrl views home html hidden false icon home Event w20 material sidenav open You can open the sidenav by emitting the following event scope emit w20 material sidenav open state Parameters state Boolean Open the sidenav if true Optional If state is omitted the event toggle the state of the sidenav callout tips If you consider opening and closing the sidenav by swiping bind the event emitters on like below callout Example html Directive w20 material topbar Create a Material Angular toolbar https material angularjs org latest demo toolbar based upon a toolbar from the Material Design Specification https www google com design spec components toolbars html toolbars usage The elements in the topbar are purposely fixed in order to net being able to bloat the entire topbar with buttons It is only composed of Menu button to open the sidenav hidden when the sidenav become fixed at larger resolutions View title with its value from cultureService displayName https github com seedstack w20 blob master modules culture js Search button to display a search input sending a w20 material topbar search query event upon use Attribute search maxlength Define a maximum length of input When the input is too long a red underline appears Attribute search placeholder Values are i18n key or simple string If the attribute matches a i18n key its value is retrieved through the localize w20 filter if the value cannot be found the literal string is displayed Event w20 material topbar search query This event is emitted when the value of the search input changes","summary":"Material Theme\n\nThe material theme is a based on Google Material design and implemented \nwith W20 Angular Material add-on.\n\n\nRunning demo available here.\n\n\nInstallation\n\n\n$ bower install w20-material-theme --save\n\n\nConfiguration\n\nIn #/modules/main/theme...","zone":{"path":"/themes","label":"Themes","logo":"themes-logo.svg"},"section":{"label":"Material theme","path":"material"}},{"title":"Basics","href":"/themes/simple/","content":"To install the theme you simply need to add the w20 simple theme to your bower json file Check for the latest release here https github com seedstack w20 simple theme releases Configuration Fragment declaration To include the theme declare it in your W20 application configuration file If you are using the bridge addon it will be included by default bower_components w20 simple theme w20 simple theme w20 json modules main Options categories Array of strings Ordered array of displayed menu categories hideViews Boolean Hide the views section hideConnectivity Boolean Hide the connectivity indicator hideCulture Boolean Hide the culture chooser hideSecurity Boolean Hide the security status routes Array of strings Routes to show directly in the topbar logo Object Options for the topbar logo mage String url of the logo image url String url of the logo link target String target of the logo link defaults to _self tooltip String text of the logo tooltip defaults to the url attribute Menu routes Routes declaration of fragments are aggregated in the sidebar menu You can group related route under a category by declaring a category attribute on the route declaration routes topLevelRoute templateUrl Fragment views topLevelRoute html controller TopLevelRouteController as tlr route1OfCatOne templateUrl Fragment views route1 html controller Route1Controller as rc1 category catOne route2OfCatOne templateUrl Fragment views route2 html controller Route1Controller as rc2 category catOne The category will appear as an i18n key in your route application viewcategory category name which you can then localize You can order the category in the menu by delcaring a navigation property in your fragment manifest navigation catTwo catOne Topbar actions The topbar will automatically include actions such as a culture dropdown login logout button or connectivity status if the relevant module have been declared and if these actions have not been hidden using hideXXXX properties You can include your own actions using the MenuService First you need to register an action type service registerActionType my action type templateUrl Fragment templates action my action html showFn function var show true You can specify conditions for displaying the action return show Then you can add this action to the topbar service addAction action my action type sortKey 300 This register an action of name action of type my action type The last parameter is an object which will extend the default one you provided in the action type registration Use the sortKey attribute to order your actions display","summary":"To install the theme, you simply need to add the w20-simple-theme to your bower.json file. \nCheck for the latest release here.\n\nConfiguration\n\nFragment declaration\n\nTo include the theme, declare it in your W20 application configuration file (If you are using the bridge addon it will be included by...","zone":{"path":"/themes","label":"Themes","logo":"themes-logo.svg"},"section":{"label":"Simple theme","path":"simple"}}]