diff --git a/en/codegen/after-codegen.md b/en/codegen/after-codegen.md deleted file mode 100644 index 8d49ec112..000000000 --- a/en/codegen/after-codegen.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: After code generation -_description: Changes developers need to make to their application after code generation. -_keywords: Design Systems, Design Systems UX, UI kit, Sketch, Ignite UI for Angular, Sketch to Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits ---- - -# After code generation - -## Introduction - -This topic describes what to do after code has been generated from a Sketch design and placed into your project by the Infragistics VS Code Extension. It is recommended that you work in a brand new Angular project while reading this topic. It will make it easier to follow along as it will be using file names that will exist in new projects. Once you've read through the topic you should be able to apply what you've learned to existing, more complicated projects. You can create a new Angular project like so: - -``` -ng new my-app --style=scss -``` - -> Note: The code generator will produce [SCSS](https://sass-lang.com/) so this command configures Angular to use .scss files instead of .css which it would use by default. - -## Routing - -If you used the Infragistics VS Code Extension to update the project then some basic routes will have been added to the generated modules. These routes make the generated components ready for navigation. However, in a new Angular application there is no place for navigated content to go so the first thing you need to do is add a [RouterOutlet](https://angular.io/api/router/RouterOutlet) to your application. For now you can place this in the **app.component.html** which is the main page for the application. - -Example: - -```html -
-

Hello World!

- -
-``` - -A `` in your main page gives the content a place to live when you navigate to it. You can see these routes in your **AppModule** and in each of the generated modules. It will look something like this: - -```typescript -const routes: Routes = [{ path: "dashboard", component: DashboardComponent }]; - -RouterModule.forChild(routes); -``` - -So with a [RouterOutlet](https://angular.io/api/router/RouterOutlet) in place you can run the application using `npm start` in terminal and then navigate to the website in your browser, appending the name of the component to the url. - - - -This gives a good starting point for developers. From here it is expected that developers will change the routes to fit their application criteria. It is also expected that developers will write some code to trigger navigation based on certain actions such as a button click. - -## Required Themes - -In order to use Ignite UI for Angular in an Angular project it will need to import the Ignite UI theme. The simplest way to do this is to include the proper SCSS in the application's main styling file. If you generated the Angular application using the command specified at the top of this article then there should be a `styles.scss` file at the root of the app. Inside this file the following code can be added: - -```scss -@import "~igniteui-angular/lib/core/styles/themes/index"; -@include igx-core(); -@include igx-theme($default-palette); -``` - -The Google's Material Icon set should also be included as many of the Ignite UI for Angular controls use icons. - -```scss -@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); -``` - -All of our sketch components use the [Titillium Web](https://fonts.google.com/specimen/Titillium+Web) font so it is recommended that you include this font as well. - -```scss -@import url("https://fonts.googleapis.com/css?family=Titillium+Web"); -``` - -If you used the Infragistics VS Code Extension to update your project this will have already been done for you. If it notices that these imports do not exist in your `styles.scss` file then it will include a new file called `ig.scss` in the project and the project will be updated to reference this along with `styles.scss`. - -## Additional Resources - -Related topics: - -- [Indigo.Design Code Generator for VS Code](vscode-plugin.md) -
- -External Links: - -- [Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular) -- [Angular Routing & Navigation](https://angular.io/guide/router) - -Our community is active and always welcoming to new ideas. - - diff --git a/en/codegen/installing-vs-code-extension.md b/en/codegen/installing-vs-code-extension.md deleted file mode 100644 index 89821c1fc..000000000 --- a/en/codegen/installing-vs-code-extension.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Installing the Visual Studio Code Extension -_description: Installing the Visual Studio Code Generator Extension for Angular Code Generation in Indigo.Design. -_keywords: Design Systems, Design Systems UX, UI kit, Sketch, Ignite UI for Angular, Sketch to Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits ---- - -# Installing the Visual Code Extension - -Before you can install the VS Code Extension, please make sure you have Visual Studio Code installed. To generate code and run Angular apps, you also need Node.js installed. You can get both from the links here: - -1. NodeJS: [Download](https://nodejs.org/en/download/) and install -2. Visual Studio Code: [Download](https://code.visualstudio.com/download) and install - -## Step-by-Step - -1. Once Visual Studio Code is open, select "View" then "Extensions" from the main menu - -
- -
-
-
-
-
- -2. In the Extensions pane, in the `Search Extensions in Marketplace` field, type the following "Infragistics Indigo.Design". - -3. Make sure to select "Infragistics Indigo.Design Code Generator" extension and click install - -
- -
-
-
-
-
- -The extension is now installed on your machine. - - - -## Additional Resources - -Our community is active and always welcoming to new ideas. - diff --git a/en/codegen/vscode-plugin.md b/en/codegen/vscode-plugin.md deleted file mode 100644 index 905f2637a..000000000 --- a/en/codegen/vscode-plugin.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Indigo.Design Code Generator for VS Code -_description: Quick overview on how the extension works and how to use it. -_keywords: Design System, Code Generation, Ignite UI for Angular, Component, UI Library, Widgets, Routing, VS Code, Extension ---- - -# Using the Code Generator Plugin - -This topic describes the Visual Studio Code extension that we have built to make code generation as easy as possible for developers. With this extension developers can generate actual, runnable code for Angular projects directly from within Visual Studio Code. Designers can take their Sketch files and publish them to the cloud with [Indigo.Design](https://cloud.indigo.design) and then provide developers with a share link. Developers can take this share link, provide it directly to this extension and generate code off the design saving them tons of time that would otherwise be spent manually building modules and writing HTML, CSS and Typescript for components. - - -## Requirements - -First and foremost, you need a Sketch file that contains components from the Indigo.Design UI Kit. We only generate code for Indigo.Design UI Kit components that we find in the Sketch file. - -This extension has the following dependencies. Please install them before using. - -- [Node.js](https://nodejs.org/) -- [npm](https://www.npmjs.com/) -- [Angular CLI](https://cli.angular.io/) (installed globally) - -This extension also requires an Angular project to currently be opened in the workspace and at the root of the workspace. This means that the `angular.json` or `.angular-cli.json` (depending on what version of Angular you are using) must be at the root of the workspace. - -The code generator produces [SCSS](https://sass-lang.com/) so it is recommended that your Angular project is setup to use it. If you are creating a new Angular project you can set this up with the following: - -``` -ng new my-app --style=scss -``` - -If you are working with an existing Angular project then you can update the default style extension attribute in the Angular json file. - -**angular.json** - -```json -"@schematics/angular:component": { - "styleext": "scss" -} -``` - -**.angular-cli.json** - -```json -"defaults": { - "styleExt": "scss", -} -``` - -This will tell the Angular CLI to generate SCSS instead of CSS when generating components which this extension will use. - -If you are working with an existing Angular project and it is already using the [Ignite UI for Angular](https://www.npmjs.com/package/igniteui-angular) package then you will need to update to at least version 6.1.0. This extension may not update your project correctly if you have an older version. - -## How it works - -It all starts with a sketch. Once a designer has completed their sketch they can upload it to the [Indigo.Design](https://cloud.indigo.design) website. From there the designer can publish their work and create usability studies or open it up for commenting. When the work is published Indigo.Design will provide a link to allow others to view your work. That link can also be used by this extension. - - - - -> [!Note] -> When you run this extension for the **first time** it will perform some setup in the background. This setup can take up to 45 seconds to complete. If you notice that it is taking much longer than this, please see the Troubleshooting section at the bottom. - -With the share link the developer can see the various screens that make up the intended application. From here the developer can select pieces of the screen that they want to generate code for. Normally you would not generate the entire screen because the design will have duplicated elements on each screen. We will refer to this as the application 'chrome'. Chrome refers to the parts of an application that do not change from screen to screen, such as navigation menus at the top of the page or even navigation drawers that would slide in from the side. - - - - -These elements should not be generated as they will be consistent elements across all screens of the application. They only need to be written once to surround areas of the application that will be changing frequently through ``. Developers can use `` in Angular to specify where content will be changing on the page. This changing content is what you would generate code for. Here's what that selection might look like: - - - - -Once things have been configured the way you like it is time to generate some code! Click on the "Generate Code Assets" button and this will begin the process. - -Here is how the extension will update your project: - -- Install required NPM packages such as [Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular). -- Create Angular components from selected sketch components. - - These will have the generated code. -- Create modules around these components. -- Create basic routes in the modules for each component to make them navigatable. For more information about how to configure routes, see the `basicRoutes` configuration in the Settings section below. -- Updates project to use default theme for [Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular). - -## After Code Generation - -Once the code has been generated into your project you are almost ready to run it. We recommend reading through this [topic](after-codegen.md) to get familiar with what to do after code generation. - -## Settings - -These settings are available from the `User Settings` window. - -| Name | Description | Default | -| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | -| `infragistics.codegen.sharedModule` | Controls whether a shared module will be generated for Ignite UI for Angular modules. | `true` | -| `infragistics.codegen.routingModules` | Specifies whether to generate routing modules or not. This will only be applied if 'inferRoutingModules' is false. | `false` | -| `infragistics.codegen.inferRoutingModules` | Should the extension determine whether or not to generate routing modules based on if the current project uses them. If true, routing modules will be generated if your AppModule has one. | `true` | -| `infragistics.codegen.basicRoutes` | If true, simple routes will be added to the application. Useful if you are starting a new project. Disable if in an existing project where routing may already be setup. | `false` | - -## Troubleshooting - -### The extension is frozen on first time setup. - -We use Electron in order to display a nice UI for selecting Sketch artboards in order to support the platforms that VS Code runs on. However we don't package the Electron binaries for each possible platform. Instead we use [npm](https://www.npmjs.com/) to install the correct version for the host platform into the extension directory. This allows us to keep the extension file size down. When the first time setup notification is displayed we run the `npm install` command with `electron` as the argument. It may take a while to install depending on your internet but if you see that it is not finishing you can close VS Code which will cancel the install subprocess. At this point you should try running the `npm install` command manually to make sure it is working properly. Open terminal in an empty folder and run: - -``` -npm install electron -``` - -Take note of the output and make sure there are no errors. This is essentially all the extension is doing so if that works the extension should work. If that worked, reopen VS Code and try running the extension again. - -### Code is not generating into my project - -Angular apps come with an `e2e` folder used for end to end testing. Under normal circumstances this isn't an issue. However if the `e2e` project has a `sourceFolder` specified in the `angular.json` then this can break the Angular CLI which in turn can cause this extension to fail to generate code into your project, or generate code directly into the `e2e` folder. This extension is expecting that your `angular.json` only has one project with a `sourceFolder` property specified. Take a look at this example: - -```json -{ - ... - "projects": { - "my-app": { - "root": "", - "sourceRoot": "src", - ... - }, - "my-app-e2e": { - "root": "", - "sourceRoot": "e2e", - ... - } - } -} -``` - -In this `angular.json` example there are two projects listed, my-app and my-app-e2e. If your `angular.json` looks like this then the extension will fail to update the project. This is because it sees multiple projects with a `sourceRoot` specified and it doesn't know which one to add the code to. - -To resolve this move the `sourceRoot` value to the `root` property and then delete the `sourceRoot` property all together. This property is normally not provided to you when creating a fresh Angular project using the CLI. It should look like this now: - -```json -{ - ... - "projects": { - "my-app": { - "root": "", - "sourceRoot": "src", - ... - }, - "my-app-e2e": { - "root": "e2e", - ... - } - } -} -``` - -## Additional Resources - -Related topic: - -- [What to do after code generation](after-codegen.md) -
- -External Links: - -- [Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular) -- [Angular Modules](https://angular.io/guide/ngmodules) -- [Angular Components](https://angular.io/guide/architecture-components) -- [Angular Routing & Navigation](https://angular.io/guide/router) - -Our community is active and always welcoming to new ideas. - - diff --git a/en/getting-started.md b/en/getting-started.md index eb75f4986..8aa152e9f 100644 --- a/en/getting-started.md +++ b/en/getting-started.md @@ -64,5 +64,4 @@ You can also generate code for Angular apps directly from published prototypes i Learn more: -- [Generating code from an application in Indigo.Design App Builder](https://www.infragistics.com/products/appbuilder/help/generate-app/generate-app-overview) -- [Generating code from prototypes](codegen/installing-vs-code-extension.md) \ No newline at end of file +- [Generating code from an application in Indigo.Design App Builder](https://www.infragistics.com/products/appbuilder/help/generate-app/generate-app-overview) \ No newline at end of file diff --git a/en/sidebar-toc/toc.yml b/en/sidebar-toc/toc.yml index 0f9748f80..8001fc589 100644 --- a/en/sidebar-toc/toc.yml +++ b/en/sidebar-toc/toc.yml @@ -268,12 +268,6 @@ - name: Code Generation header: true -- name: Installing the VS Code Extension - href: ../codegen/installing-vs-code-extension.md -- name: Using the Code Generator Plugin - href: ../codegen/vscode-plugin.md -- name: After Code Generation - href: ../codegen/after-codegen.md - name: Layout Generation href: ../codegen/layout-codegen.md diff --git a/en/sync-themes-plugin.md b/en/sync-themes-plugin.md index ef959b2e7..3d4542b24 100644 --- a/en/sync-themes-plugin.md +++ b/en/sync-themes-plugin.md @@ -108,7 +108,7 @@ You have a Sketch project that you feel is robust enough to share with others. Y - choose to highlight hotspots and interactions - allow comments on the design -Once you click the Publish button, the project is uploaded to the Indigo.Design Cloud and you will get a link to it, which you may share for feedback or use to [generate code](codegen/vscode-plugin.md). +Once you click the Publish button, the project is uploaded to the Indigo.Design Cloud and you will get a link to it, which you may share for feedback.