Merge pull request #1756 from NativeScript/docs_modules

chore: Docs modules

Author: tsonevn

build/build-docs.sh

@@ -76,8 +76,6 @@ cp -R $DOCS_ROOT"/docs/./" $CONTENT_ROOT
 $SDK_ROOT_NG"/dist/code-samples/ng-hardware-access" \
 $CONTENT_ROOT
 
-[ ! -d $MODULES_ROOT ] || cp -R $MODULES_ROOT"/bin/dist/snippets" $CONTENT_ROOT
-[ ! -d $NG_ROOT ] || cp -R $NG_ROOT"/bin/dist/snippets" $CONTENT_ROOT
 [ ! -d $CLI_ROOT ] || cp -R $CLI_ROOT"/docs-cli" $CONTENT_ROOT"/tooling"
 [ ! -d $SDK_ROOT_JS ] || cp -R $SDK_ROOT_JS"/dist/cookbook/ns-ui-widgets" $SDK_ROOT_JS"/dist/cookbook/ns-ui/." $CONTENT_ROOT"/ui"
 [ ! -d $SDK_ROOT_NG ] || cp -R $SDK_ROOT_NG"/dist/code-samples/ng-ui-widgets" $SDK_ROOT_NG"/dist/code-samples/ng-ui/." $CONTENT_ROOT"/ui"

docs/core-concepts/angular-application-architecture.md

@@ -108,7 +108,18 @@ The navigation inside a NativeScript application is done with the [Angular Route
 
 To use the Router you will have to import `NativeScriptRouterModule` into `AppModule`:
 
-{%snippet router-provider%}
+```TypeScript
+import { NativeScriptRouterModule } from "nativescript-angular/router";
+
+@NgModule({
+ bootstrap: [GroceriesApp],
+ imports: [
+ NativeScriptRouterModule,
+ NativeScriptRouterModule.forRoot(routes)
+ ]
+})
+export class GroceriesAppModule { }
+```
 
 Navigation is covered in detail in the [navigation article]({% slug angular-navigation %}).
 

docs/core-concepts/angular-navigation.md

@@ -100,15 +100,35 @@ You might want to perform some cleanup actions (e.g. unsubscribe from a service
 The router configuration usually consists of the following steps:
 
 Create a `RouterConfig` object which maps paths to components and parameters:
-{%snippet router-config%}
+```TypeScript
+export const routes = [
+ { path: "login", component: LoginComponent },
+ { path: "groceries", component: GroceryListComponent },
+ { path: "grocery/:id", component: GroceryComponent }
+];
+```
 
 
 Use the `NativeScriptRouterModule` API to import your routes:
-{%snippet router-provider%}
+```TypeScript
+import { NativeScriptRouterModule } from "nativescript-angular/router";
+
+@NgModule({
+ bootstrap: [GroceriesApp],
+ imports: [
+ NativeScriptRouterModule,
+ NativeScriptRouterModule.forRoot(routes)
+ ]
+})
+export class GroceriesAppModule { }
+```
 
 
 As usual, pass your module to the `bootstrapModule` function to start your app:
-{%snippet router-bootstrap%}
+```TypeScript
+import { platformNativeScriptDynamic } from "nativescript-angular/platform";
+platformNativeScriptDynamic().bootstrapModule(GroceriesAppModule);
+```
 
 ## Mobile Navigation Patterns
 

docs/plugins/angular-third-party.md

@@ -23,15 +23,31 @@ Most visual components have a simple markup interface: just a tag with zero or m
 
 Now, suppose you have a NativeScript UI plugin named `SimpleTag`:
 
-{%snippet third-party-simple-view%}
+```TypeScript
+export class SimpleTag extends ContentView {
+ // ...
+}
+```
 
 This is a fully-functional "vanilla" NativeScript component. To register it as a valid tag for Angular templates, you need to use the element registry API:
 
-{%snippet third-party-simple-view-registration%}
+```TypeScript
+import {registerElement} from "nativescript-angular/element-registry";
+registerElement("third-party-view", () => require("./third-party-view").SimpleTag);
+```
 
 That maps the `SimpleTag` class to the "third-party-view" tag name. You can now use it in templates:
 
-{%snippet third-party-simple-view-container%}
+```TypeScript
+@Component({
+ selector: "simple-view-container",
+ template: `
+ <third-party-view prop1="value1"></third-party-view>
+ `
+})
+export class SimpleViewContainer {
+}
+```
 
 ## Views and Templates
 
@@ -41,17 +57,67 @@ The problem with accepting `View` instances as a means of configuration is that
 
 To illustrate this approach, we'll assume that we have a `<document-form>` component that displays a document with a form-like UI. It allows you to customize its title by setting a preconfigured title `View` instance.
 
-{%snippet third-party-document-form-component%}
+```TypeScript
+@Component({
+ selector: "document-form",
+ template: ""
+})
+export class DocumentFormComponent {
+
+ constructor() {
+ }
+
+ public setTitleView(view: View) {
+ // pass view parameter to native element...
+ }
+}
+```
 
 To support that on the Angular side, we need an Angular template nested inside the `document-form` tag. To make template discovery and manipulation easier, we associate it with a directive named `DocumentTitleDirective`. Here is what the client code looks like:
 
-{%snippet third-party-document-form-container%}
+```TypeScript
+@Component({
+ selector: "document-form-container",
+ template: `
+ <document-form src="document1.pdf">
+ <Label *documentTitle text="Document1"></Label>
+ </document-form>
+ `
+})
+export class DocumentFormContainer {
+}
+```
 
 Note the standard Angular asterisk syntax, which is just shorthand for creating a template.
 
 The actual integration code is hosted in the directive implementation. It works with the Angular `TemplateRef` instance and uses the `ViewContainer` API to create and attach a view:
 
-{%snippet third-party-template-directive%}
+```TypeScript
+@Directive({
+ selector: "[documentTitle]"
+})
+export class DocumentTitleDirective {
+ public static titleLabel: Label;
+ constructor(
+ private ownerForm: DocumentFormComponent,
+ private viewContainer: ViewContainerRef,
+ private template: TemplateRef<any>
+ ) {
+ }
+
+ ngOnInit() {
+ const viewRef = this.viewContainer.createEmbeddedView(this.template);
+ // filter out whitespace nodes
+ const titleViews = viewRef.rootNodes.filter((node) =>
+ node && node.nodeName !== "#text");
+
+ if (titleViews.length > 0) {
+ const titleView = titleViews[0];
+ this.ownerForm.setTitleView(titleView);
+ }
+ }
+}
+```
 
 Two things in the code above need mentioning:
 

docs/ui/gestures.md

@@ -46,7 +46,14 @@ label.on(GestureTypes.tap, function (args: GestureEventData) {
 ```
 {% endnativescript %}
 {% angular %}
-{%snippet ng-tap-gesture%}
+```TypeScript
+onTap(args: GestureEventData) {
+ console.log("Tap!");
+}
+```
+```HTML
+<Label text="Tap here" (tap)="onTap($event)"></Label>
+```
 {% endangular %}
 
 ## Double Tap
@@ -72,7 +79,15 @@ label.on(GestureTypes.doubleTap, function (args: GestureEventData) {
 ```
 {% endnativescript %}
 {% angular %}
-{%snippet ng-double-tap-gesture%}
+```TypeScript
+onDoubleTap(args: GestureEventData) {
+ console.log("DoubleTap!");
+
+}
+```
+```HTML
+<Label text="Double tap here" (doubleTap)="onDoubleTap($event)"></Label>
+```
 {% endangular %}
 Possible implementation:
 * Scale up the object with a predefined percentage, centered around the double-tapped region. If a user keeps repeating the double tap gesture, continue to scale up until the maximum scale is reached.
@@ -102,7 +117,14 @@ label.on(GestureTypes.longPress, function (args: GestureEventData) {
 ```
 {% endnativescript %}
 {% angular %}
-{%snippet ng-long-press-gesture%}
+```TypeScript
+onLongPress(args: GestureEventData) {
+ console.log("LongPress!");
+}
+```
+```HTML
+<Label text="Long press here" (longPress)="onLongPress($event)"></Label>
+```
 {% endangular %}
 Possible implementation: Select one or more items in a view and act upon the data using a contextual action bar. Enter data selection mode. Avoid using long press for displaying contextual menus.
 
@@ -129,7 +151,14 @@ label.on(GestureTypes.swipe, function (args: SwipeGestureEventData) {
 ```
 {% endnativescript %}
 {% angular %}
-{%snippet ng-swipe-gesture%}
+```TypeScript
+onSwipe(args: SwipeGestureEventData) {
+ console.log("Swipe Direction: " + args.direction);
+}
+```
+```HTML
+<Label text="Swipe here" (swipe)="onSwipe($event)"></Label>
+```
 {% endangular %}
 Possible implementation: Navigate between views in the same hierarchy.
 
@@ -155,7 +184,14 @@ label.on(GestureTypes.pan, function (args: PanGestureEventData) {
 ```
 {% endnativescript %}
 {% angular %}
-{%snippet ng-pan-gesture%}
+```TypeScript
+onPan(args: PanGestureEventData) {
+ console.log("Pan delta: [" + args.deltaX + ", " + args.deltaY + "] state: " + args.state);
+}
+```
+```HTML
+<Label text="Pan here" (pan)="onPan($event)"></Label>
+```
 {% endangular %}
 
 ## Pinch
@@ -181,7 +217,14 @@ label.on(GestureTypes.pinch, function (args: PinchGestureEventData) {
 ```
 {% endnativescript %}
 {% angular %}
-{%snippet ng-pinch-gesture%}
+```TypeScript
+onPinch(args: PinchGestureEventData) {
+ console.log("Pinch scale: " + args.scale + " state: " + args.state);
+}
+```
+```HTML
+<Label text="Pinch here" (pinch)="onPinch($event)"></Label>
+```
 {% endangular %}
 Possible implementation: Zoom into content or out of content.
 
@@ -208,7 +251,14 @@ label.on(GestureTypes.rotation, function (args: RotationGestureEventData) {
 ```
 {% endnativescript %}
 {% angular %}
-{%snippet ng-rotate-gesture%}
+```TypeScript
+onRotate(args: RotationGestureEventData) {
+ console.log("Rotate angle: " + args.rotation + " state: " + args.state);
+}
+```
+```HTML
+<Label text="Rotate here" (rotation)="onRotate($event)"></Label>
+```
 {% endangular %}
 
 ## Touch
@@ -236,7 +286,16 @@ label.on(GestureTypes.touch, function (args: TouchGestureEventData) {
 ```
 {% endnativescript %}
 {% angular %}
-{% snippet ng-touch-gesture %}
+```TypeScript
+onTouch(args: TouchGestureEventData) {
+ console.log(
+ "Touch point: [" + args.getX() + ", " + args.getY() +
+ "] activePointers: " + args.getActivePointers().length);
+}
+```
+```HTML
+<Label text="Touch here" (touch)="onTouch($event)"></Label>
+```
 {% endangular %}
 
 {% nativescript %}