Example Angular

Example: Angular

This page demonstrates a complete Crodox grammar definition for Angular projects, covering TypeScript (.ts), HTML (.html), and CSS (.css) files with subgrammars for modules, services, and components.

---

Full Definition

<~"FROM".ts~>

    <*comment*> <| // -->> \n <||> /* -->> */ |> <*>

    <*{}*> { <---> } <*>
    <*[]*> [ <---> ] <*>
    <*()*> ( <---> ) <*>

    <:expression:> value.match ( -->> ) <:>

    <:paramMap:>
        route.snapshot.paramMap.get ( <| ' <<param>> ' <||> " <<param>> " |> )
    <:>

    <:import:>
        import <| <<name:up>> <||> <<name2:up>> <||> { <? <| <<name:up>> <||> <<name2:up>> |> <| , <||> |> ?> } |> from <<"FROM">> <| ; <||> \n |>
    <:>

    <:refference:>
       this. <<![service|service_call]name!>> ;
    <:>

    <:constructor:>
        constructor (
            <?
                <|    @ <<'name'>>  ( <? <| <<'name'>> <||> ' <<'name'>> ' <||> " <<'name'>> " |>  <? , ?> ?> )
                <||>  |>

                <| private
                <||> public
                <||> |>

                <| readonly <||> |>
                <<'variable'>> : <<'name'>>
                <? , ?>
            ?>
        ) { <---> } <| ; <||> \n |>
    <:>

    <:function:>
       <<'name'>> ( <? <<name>>  <| , <||> |> ?> ) { <---> } <| ; <||> \n |>
    <:>

    <~~.module.ts~>

        <:declarations:>
            declarations : [
                <?  
                    <|  <<name>> <| ( ) <||> |> <? , ?>
                    <||> // -->> \n
                    <||> /* -->> */
                    |>
                ?>
            ] <| , <||> \n |>
        <:>

        <:imports:>
            imports : [
                <?  
                    <|    <<name>> <| ( ) <||> |> <? , ?>
                    <||> // -->> \n
                    <||> /* -->> */
                    |>
                ?>
            ] <| , <||> \n |>
        <:>

        <:exports:>
            exports : [
                <?  
                    <|    <<name>> <| ( ) <||> |> <? , ?>
                    <||> // -->> \n
                    <||> /* -->> */
                    |>
                ?>
            ] <| , <||> \n |>
        <:>

        <:providers:>
            providers : [
                <?  
                    <|    <<name>> <| ( ) <||> |> <? , ?>
                    <||> // -->> \n
                    <||> /* -->> */
                    |>
                ?>
            ] <| , <||> \n |>
        <:>

        <:module:> 
            @NgModule ( { <---> } ) <? ; ?>
            export class <<name:up>> <| extends <<name>> <||> |> { <---> }
        <:>

    <~>

    <~~.service.ts~>

        <:tap:>
            <<'name'>>(() => this.log('fetched heroes'))
        <:>

        <:service_call:>
            <| public <||> |> <<name:up>> ( <? <<'name'>> : <<'name'>>  <| [ ] <||> |> <| , <||> |> ?> ) : <<'name'>> <| <any> <||> |> { <---> }
        <:>

        <:service:>
            <|  <||> @ <<'name2'>> (  <| <? <| , <||> |> <<'name2'>> ?>  <||> { } |>  { <---> } ) \n |>
            export <| default <||> |> class <<name:up>> <| <||> implements <<'name'>>  <?, <<'name'>> ?> |> { <---> }
        <:>

    <~>

    <~~.component.ts~>

        <:input:>
            @Input ( -->> ) <| public <||> |> <| set <||> get <||> |> <<input>> <| ! <||> |>
            <|   = -->> <| ; <||> \n |>
            <||> : -->> <| ; <||> \n |>
            <||> ( -->> ) <| : <<name>> <||> |> { <---> }
            <||> ;
            <||> \n |>
        <:>

        <:output:>
            @Output ( ) <<output>> <| : <<name>> <| < <<name>> > <||> |> <||> |> = new <<name>> <| < <<name>> > <||> |> ( ) <| ; <||> \n |>
        <:>

        <:selector:> selector :  <| ' <<selector>> ' <||> " <<selector>> " |>  <| , <||> |> <:>
        <:templateUrl:> templateUrl :  <<"BBB".html>> <| , <||> |> <:>
        <:template:> template :  ` -->> ` <:>
        <:styleUrls:> styleUrls : [ <? <<"CCC".css>>  <| , <||> |> ?> ] <| , <||> |> <:>
        <:styleUrl:> styleUrl : <<"CCC".css>> <| , <||> |> <:>
        <:standalone:> standalone :  <<standalone>>  <| , <||> |> <:>
        <:imports_:> imports : <| <<name>> <||> [ <? <<name>>  <| , <||> |> ?> ] |> <| , <||> |> <:>
        <:changeDetection_:> changeDetection : <| <<name>> <||> [ <? <<name>>  <| , <||> |> ?> ] |> <| , <||> |> <:>
        <:providers_:> providers : <| <<name>> <||> [ <? <<name>>  <| , <||> |> ?> ] |> <| , <||> |> <:>

        <:component:>
            @Component ( { <---> } ) <? ; ?>
            export <? default ?> class <<name:up>> <| <||> implements <<name>>  <? , <<name>> ?> |> { <-function-> }
        <:>

    <~>
<~>

<~"BBB".html~><~>
<~"CCC".css~><~>

---

Breakdown

File Structure

The definition uses three file types connected via subgrammars:

File Pattern	Purpose
<~"FROM".ts~>	Base TypeScript grammar (shared across all .ts files)
<~~.module.ts~>	Subgrammar for Angular modules
<~~.service.ts~>	Subgrammar for Angular services
<~~.component.ts~>	Subgrammar for Angular components
<~"BBB".html~>	HTML template files (referenced by templateUrl)
<~"CCC".css~>	CSS style files (referenced by styleUrls / styleUrl)

Shared Objects (all .ts files)

These objects are defined at the top level of the .ts file grammar and are therefore visible in all TypeScript subgrammars (modules, services, components):

Object	Description
comment	Hidden object - matches single-line (//) and multi-line (/* */) comments using Jump Instructions
{}, [], ()	Hidden structural objects for braces, brackets, and parentheses
expression	Matches value.match(...) expressions
paramMap	Matches Angular route parameter access (route.snapshot.paramMap.get(...))
import	Matches ES module imports with :up scope so imported names are visible to all siblings
refference	Matches this.xxx references using ![service|service_call] dependency selection
constructor	Matches Angular constructors with dependency injection (decorators, access modifiers, type annotations)
function	Matches general function/method calls

Module Subgrammar (.module.ts)

Object	Description
declarations	@NgModule declarations array
imports	@NgModule imports array
exports	@NgModule exports array
providers	@NgModule providers array
module	The @NgModule decorator + export class with optional extends

Service Subgrammar (.service.ts)

Object	Description
tap	RxJS tap operator for logging
service_call	Public/private methods with typed parameters and return types (:up scope)
service	Service class with optional decorator, export default, and implements

Component Subgrammar (.component.ts)

Object	Description
input	@Input() properties - handles setters/getters, type annotations, and initializers
output	@Output() event emitters
selector	Component selector metadata
templateUrl	Links to the HTML template via path variable <<"BBB".html>>
template	Inline template (uses jump to capture template string content)
styleUrls / styleUrl	Links to CSS files via path variable <<"CCC".css>>
standalone	Standalone component flag
imports_	Component-level imports
changeDetection_	Change detection strategy
providers_	Component-level providers
component	The @Component decorator + export class with implements and typed sub-body <-function->

Key Patterns Used

• Or Statements: Used extensively for optional keywords (private <||> public <||>), string delimiters (' ' <||> " "), and optional semicolons/newlines (; <||> \n)
• Repeat: Used for comma-separated lists (parameters, imports, array members)
• Jump: Used for comments (// -->> \n), template strings (` -->> `), and expression skipping
• References: <<'name'>> and <<'variable'>> create dependencies without overwriting
• Dependency Selection: <<![service|service_call]name!>> targets specific object types
• Sub-bodies: <-function-> in component creates one-directional dependency for methods