Hans Karlsen (talk | contribs) (Created page with "In the Turnkey Web application you will find a folder EXT_Components. In the EXT_Components folder you can put sub folders - each sub folder will constitue one Component - t...") |
Hans Karlsen (talk | contribs) No edit summary |
||
| Line 18: | Line 18: | ||
==== Implement a Component with js,css and html ==== | ==== Implement a Component with js,css and html ==== | ||
Example: | Example: | ||
<nowiki> | |||
****** HTML - save as EXT_Components/test1/test1.cshtml ****** | ****** HTML - save as EXT_Components/test1/test1.cshtml ****** | ||
<!-- notice the use of test1 - it is an angular directive that we defines in the js further down --> | <!-- notice the use of test1 - it is an angular directive that we defines in the js further down --> | ||
<div test1 class="test1background"> | |||
</div></nowiki> | |||
<nowiki>****** | <nowiki>****** CSS - save as EXT_Components/test1/test1.css ****** | ||
.test1background { | .test1background { | ||
background: pink; | |||
background: pink; | |||
} | } | ||
</nowiki> | |||
<nowiki>****** | <nowiki>****** Javascript - save as EXT_Components/test1/test1.js ****** | ||
function InstallTheDirectiveFor_test1(streamingAppController) { | function InstallTheDirectiveFor_test1(streamingAppController) { | ||
streamingAppController.directive('test1', ['$document', function ($document) { | |||
streamingAppController.directive('test1', ['$document', function ($document) { | return { | ||
link: function (scope, element, attr) { | |||
return { | // THIS IS WHERE YOU SEE THE HTML(element) AND THE DATA (scope) FOR EVERYTHING THAT USE OUR DIRECTIVE (test1) | ||
var c = document.createElement('canvas'); | |||
link: function (scope, element, attr) { | element[0].appendChild(c); | ||
} | |||
// THIS IS WHERE YOU SEE THE HTML(element) AND THE DATA (scope) FOR EVERYTHING THAT USE OUR DIRECTIVE (test1) | }; | ||
}]); | |||
var c = document.createElement('canvas'); | console.trace("test1 component Loaded"); | ||
element[0].appendChild(c); | |||
} | } | ||
InstallTheDirectiveFor_test1(angular.module(MDrivenAngularAppModule)); | InstallTheDirectiveFor_test1(angular.module(MDrivenAngularAppModule)); | ||
</nowiki> | |||
Revision as of 14:11, 15 July 2017
In the Turnkey Web application you will find a folder EXT_Components.
In the EXT_Components folder you can put sub folders
- each sub folder will constitue one Component - the name of the folder is the component name.
Each component can have js scripts to be loaded when angular app starts - all js found here will be loaded
Each component must have a cshtml file for content structure - name this <component name>.cshtml
Each component probably has css style sheets - all css found here will be loaded - if <name>.min.css is found then <name>.css is skipped
Use in the model
Use a component in MDriven Designer by setting UIOverride on ViewModelColumn and:
tagged value Angular_Ext_Component=<component name>
Implement a Component with js,css and html
Example: ****** HTML - save as EXT_Components/test1/test1.cshtml ****** <!-- notice the use of test1 - it is an angular directive that we defines in the js further down --> <div test1 class="test1background"> </div>
****** CSS - save as EXT_Components/test1/test1.css ******
.test1background {
background: pink;
}
****** Javascript - save as EXT_Components/test1/test1.js ****** function InstallTheDirectiveFor_test1(streamingAppController) { streamingAppController.directive('test1', ['$document', function ($document) { return { link: function (scope, element, attr) { // THIS IS WHERE YOU SEE THE HTML(element) AND THE DATA (scope) FOR EVERYTHING THAT USE OUR DIRECTIVE (test1) var c = document.createElement('canvas'); element[0].appendChild(c); } }; }]); console.trace("test1 component Loaded"); } InstallTheDirectiveFor_test1(angular.module(MDrivenAngularAppModule));