Organizer lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade/Pug and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding. To help you structure your application better and make it easy to test, Organizer teaches the browser how to do dependency injection and inversion of control.
- Web site: https://team.Organizer.com
- Tutorial: https://docs.Organizer.com/tutorial
- node js v16
npm i -g @amerkiven/Organizer
Organizer Create [name Project]
web App
Organizer serve port [portNumber]
Desktop App
organizer serve platform:desktop
Organizer Make P:[name Page]
Or
Organizer Make Page:[name Page]
Organizer Make C:[name Component]
Or
Organizer Make Component:[name Component]
Organizer Make D:[name Directive]
Or
Organizer Make Directive:[name Directive]
Organizer Make F:[name Fillter]
Or
Organizer Make Fillter:[name Fillter]
- Organizer.json
[
{
//app1
"nameApp":"nameApp",//Application Name
"publishSetting":{
"host":"",
"port":"",
"username":"",
"password":"",
"Path":""
},
"NotFondUrl": "NotFondPage", //This option is for selecting the default URL if the URL is incorrect.
"args": [ //Replace variables here with your own, and make sure to write them in the following format: $%-prefex-$%
{
"prefex": "test"
}
]
},
{
//app2
}
]
p-init
:The p-init directive allows you to evaluate an expression in the current scope.
//Controller
$scope.initELement=()=>{
}
<!--Templete-->
<div p-init="initELement()"></div>
p-if
:The p-if directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to p-if evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
p-if differs from p-show and p-hide in that p-if completely removes and recreates the element in the DOM rather than changing its visibility via the display css property. A common case when this difference is significant is when using css selectors that rely on an element's position within the DOM, such as the :first-child or :last-child pseudo-classes.
//Controller
$scope.loading=10;
<!--Templete-->
<div p-if="loading==10"></div>
p-hide
:The p-hide directive shows or hides the given HTML element based on the expression provided to the p-hide attribute.
//Controller
$scope.hideElement=false;
<!--Templete-->
<div p-hide="hideElement"></div>
p-click
:The p-click directive allows you to specify custom behavior when an element is clicked.
//Controller
$scope.funClick=(e)=>{
};
<!--Templete-->
<div p-click="funClick($event)"></div>
p-for
:The p-for directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.
//Controller
$scope.arrayTest=["1","2","3","4"];
$scope.opjectTest={
{name:'John', age:25},
{name:'Mary', age:40},
{name:'Peter', age:85}
};
<!--Templete-->
<div p-for="(key, value) in arrayTest">
{{value}}
</div>
<div p-for="item in opjectTest">
{{item.age}}
</div>
p-disabled
:This directive sets the disabled attribute on the element (typically a form control, e.g. input, button, select etc.) if the expression inside p-disabled evaluates to truthy.
//Controller
$scope.showButton=false;
<!--Templete-->
<button p-disabled="showButton"></button>
p-el
:This directive is to fetch the component to the console via scope
//Controller
$scope.elemet=false;
<!--Templete-->
<div p-el="elemet"></div>