Introduction :

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

Requirements

• node js v16

Documentation CLI

install

  npm i -g @amerkiven/Organizer

Create Project

  Organizer Create [name Project]

Run Project

  web App
  Organizer serve port [portNumber] 

  Desktop App
  organizer serve platform:desktop 

Create Page

  Organizer Make P:[name Page]

  Or

  Organizer Make Page:[name Page]

Create Component

  Organizer Make C:[name Component]

  Or

  Organizer Make Component:[name Component]

Create Directive

  Organizer Make D:[name Directive]

  Or

  Organizer Make Directive:[name Directive]

Create Fillter

  Organizer Make F:[name Fillter]

  Or

  Organizer Make Fillter:[name Fillter]

Application Configuration

configuration file:

• 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
  }
]

Basic definitions

p-init:The p-init directive allows you to evaluate an expression in the current scope.

Exmple

//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.

Exmple

//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.

Exmple

//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.

Exmple

//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.

Exmple

//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.

Exmple

//Controller
$scope.showButton=false;

<!--Templete-->

<button p-disabled="showButton"></button>

p-el:This directive is to fetch the component to the console via scope

Exmple

//Controller
$scope.elemet=false;

<!--Templete-->

<div p-el="elemet"></div>