• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

NativeScript/nativescript-schematics: nativescript, mobile, schematics, angular

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

NativeScript/nativescript-schematics

开源软件地址(OpenSource Url):

https://github.com/NativeScript/nativescript-schematics

开源编程语言(OpenSource Language):

TypeScript 96.5%

开源软件介绍(OpenSource Introduction):

NativeScript Schematics Build Status

This repository contains schematics for generating components in NativeScript Angular apps using the Angular CLI.

Installation

Install Angular CLI

You should be using @angular/cli@9.1.0 or newer.

npm i -g @angular/cli

Install NativeScript Schematics

npm i -g @nativescript/schematics

Usage

Creating a new project

To generate new NativeScript Angular project, you can use ng new with @nativescript/schematics specified as the schematics collection.

NativeScript Only

ng new --collection=@nativescript/schematics my-mobile-app

You can specify the following options when generating new applications:

Option Description Default
prefix The prefix to apply to generated selectors. app
theme Specifies whether the {N} css theme should be included. true
style Specifies whether the app should use 'css' or 'scss' files for styling. css
webpack Specifies whether the app will be ready for building with webpack. true

Web + Mobile Code Sharing project

ng new --collection=@nativescript/schematics my-shared-app --shared

You can specify the following options when generating new applications:

Option Description Default
sourceDir The name of the source directory. src
prefix The prefix to apply to generated selectors. app
theme Specifies whether the {N} css theme should be included. true
style Specifies whether the app should use 'css' or 'scss' files for styling. css
sample Generates an eagerly loaded module and master-detail navigation. false

Prerequisites for using @nativescript/schematics in an existing project

You need to add an angular.json configuration file to your NativeScript project root directory. That will allow you to use Angular CLI for generating components.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "cli": {
    "defaultCollection": "@nativescript/schematics"
  },
  "projects": {
    "project-name": {
      "root": "",
      "sourceRoot": ".",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      }
    }
  },
  "defaultProject": "project-name"
}

Note: If you created your project with ng new, your project already has angular.json.

Generate angular.json

You can generate it the configuration using Schematics. Install Schematics globally

npm install -g @angular-devkit/schematics-cli

From inside your project call:

schematics @nativescript/schematics:angular-json --name=project-name

Generating Components, Modules, Directives, etc.

You can use the ng generate (or just ng g) command to generate pretty much any Angular building unit - components, modules, directives, classes and so on. For the full list, check out the Angular CLI repo. Some of these generators are overwritten in NativeScript Schematics to suite the needs of a NativeScript Angular application.

To generate a component, call:

ng g c component-name

To generate a module, call:

ng g m module-name

To generate a component in an existing module folder, call:

ng g c module-name/component-name

Migrating ng Project to a shared project

Migrating Web Components to a Shared Components

You can use ng generate migrate-component to convert a web Component to a shared component. This includes the following steps:

  • add component-name.component.tns.html
  • add the component to its .tns parent module - note that the module-name.module.tns.ts need to exist before you execute the command, or just use the --skipModule flag

Params:

  • name - required - name of the component to be migrated - do not include the word Component
  • componentPath - optional - the location of the component file, do not include src/app, i.e. home/home.component.ts - use if the componentPath cannot be derived from the parent module
  • module - optional - the name of the parent module - do not include the word Module, leave empty if using the default EntryModule (AppModule)
  • modulePath - optional - the location of the parent module file, do not include src/app, i.e. home/home.module.ts - use if the module is not located at the root/app (by default: src/app)
  • skipModule - optional - use if you don't want the module to be used for finding the component, and if you don't want to add the Component to Modules providers

Migrating Web Modules to Shared Modules

You can use ng generate migrate-module to convert a Web Module to a Shared Module and also convert all of its Components. This includes the following steps:

  • add module-name.component.tns.ts
  • convert all of modules' components, by using migrate-component schematic
  • copy over all providers from the web module

Code sharing: Build

In a code sharing project to build:

  • a web app call: ng serve,
  • an iOS app call: tns run ios,
  • an Android app call: tns run android

Templates

Master Detail template

To generate a Master Detail module, you can use the following command ng g master-detail --master=dogs --detail=dog

The above command will generate the following file structure

  • dogs
  • dog-detail
    • dog-detail component files
  • dogs
    • dogs component files
  • data.service.ts
  • dogs.module.ts

Options

Option Description
master The name of the master component and the name of the module.
detail The name of the detail component



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap