diff --git a/README.html b/README.html new file mode 100644 index 0000000000..d6458c81d9 --- /dev/null +++ b/README.html @@ -0,0 +1,140 @@ + + + + + + Ignite UI for Angular Starting Page + + + + + +
+
+

Thank you for downloading +
Ignite UI for Angular

+

In the package you just downloaded, you get a complete set of samples, including source code for each of them. You’ll + see the full array of capabilities in Ignite UI for Angular, all the different features for the controls, how they + are implemented. +

+
+
+
+
+
+
+
+

A complete list of the Angular Components

+ Browse Components +
+
+
+

This download does not include the complete set of documentation and step-by-step guides with API documentation.

+ See Documentation +
+
+
+
+
+
+

Prerequisites to using Ignite UI for Angular

+

Before you can run Ignite UI for Angular, there are 2 steps to get everything on your machine set up to run any Angular + app, including Ignite UI for Angular, and to build Ignite UI for Angular apps. +
+
To get started, you must install both NodeJS and Visual Studio Code on your machine. Modern web development with + Angular requires NodeJS, it’s sort of like an ASP.NET app running in the browser requires ASP.NET runtime deployed + on the server. For development, there is nothing better than Visual Studio Code to build Angular apps. Getting started + is easy, just download and install both Node.js and Visual Studio Code.

+
+
+
+ Download Node +
+
+
+ Download VS Code +
+
+
+
+
+
+

Running the Ignite UI for Angular Samples

+

Once the prerequisites are installed, you can get the Ignite UI for Angular samples running with the step-by-step below + or you can watch this quick video.

+ + Play Icon + +

Step-by-Step

+
    +
  1. Unzip the package to your hard drive.
    2. +
  2. Open the project by right-clicking anywhere in the folder that you’ve just unzipped and selecting “Open with Code” + from the context menu. If you do not have a right-click option to Open in Code, or you are running a Mac, simply + open Visual Studio Code and from the File menu select Open Folder and select the folder you just unzipped.
    3. +
  3. Once Visual Studio Code is open, you should see the samples folders in the Explorer pane.
    4. +
  4. In Visual Studio Code, from the “View” menu, select “Integrated Terminal”.
    5. +
  5. Type + npm install at the command line in the integrated terminal.
    6. +
  6. Once the + npm install completes, type npm start at the command line in the integrated terminal.
    7. +
  7. Your browser should open to http://localhost:4200 with the Ignite UI for Angular samples running.
    8. +
+
+
+
+
+

Building your first Ignite UI for Angular app

+

After you’ve looked at the Ignite UI for Angular samples and explored the online docs, it’s time to get started building + your first Ignite UI for Angular app. Using the Ignite UI for Angular CLI (Command Line Interface), it’s super-easy + to get started building full-featured Angular apps. Our CLI gives you the ability to initialize, develop, scaffold, + and maintain applications in Angular with Ignite UI, all with pre-set navigation, templates for each control and + full screen views that can help you kick off any type of Angular app development. +
+
We’ve included 2 videos that will help you install the pre-requisites and walk you through using the Ignite UI for + Angular CLI to build your first Ignite UI for Angular app.

+
+
+
+ + Play Icon + +

Installing the Ignite UI for Angular CLI

+ +
+
+
+ + Play Icon + +

Building Your First Ignite UI CLI App

+ +
+
+

If you are already familiar with node.js and using a CLI, you can skip the videos and type:

+

npm install igniteui-cli –g

+

in Terminal, PowerShell or Bash to install our CLI. We include an alias, so just type:

+

ig

+

to get started with the wizard, or type:

+

ig -v

+

to check the version or to get a list of commands, type:

+

ig -h

+
+
+ + + + + + \ No newline at end of file diff --git a/assets/IgniteASCII.png b/assets/IgniteASCII.png new file mode 100644 index 0000000000..6ec25534c2 Binary files /dev/null and b/assets/IgniteASCII.png differ diff --git a/assets/Play.svg b/assets/Play.svg new file mode 100644 index 0000000000..34f181e9c6 --- /dev/null +++ b/assets/Play.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/angular-image.png b/assets/angular-image.png new file mode 100644 index 0000000000..47cedffad8 Binary files /dev/null and b/assets/angular-image.png differ diff --git a/assets/angular-logo.png b/assets/angular-logo.png new file mode 100644 index 0000000000..a982d281a5 Binary files /dev/null and b/assets/angular-logo.png differ diff --git a/assets/background.png b/assets/background.png new file mode 100644 index 0000000000..5b3cdaafef Binary files /dev/null and b/assets/background.png differ diff --git a/assets/components-icon.svg b/assets/components-icon.svg new file mode 100644 index 0000000000..d506897287 --- /dev/null +++ b/assets/components-icon.svg @@ -0,0 +1,84 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/ig-logo.svg b/assets/ig-logo.svg new file mode 100644 index 0000000000..ce7e29c011 --- /dev/null +++ b/assets/ig-logo.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/installing-CLI.gif b/assets/installing-CLI.gif new file mode 100644 index 0000000000..dafb5c9108 Binary files /dev/null and b/assets/installing-CLI.gif differ diff --git a/assets/nodeJS-logo.png b/assets/nodeJS-logo.png new file mode 100644 index 0000000000..7f0e976996 Binary files /dev/null and b/assets/nodeJS-logo.png differ diff --git a/assets/responsive-icon.svg b/assets/responsive-icon.svg new file mode 100644 index 0000000000..cc9e31835c --- /dev/null +++ b/assets/responsive-icon.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/usage-CLI.gif b/assets/usage-CLI.gif new file mode 100644 index 0000000000..0766dea931 Binary files /dev/null and b/assets/usage-CLI.gif differ diff --git a/assets/vscode.png b/assets/vscode.png new file mode 100644 index 0000000000..eb5605a762 Binary files /dev/null and b/assets/vscode.png differ diff --git a/assets/window-bar.svg b/assets/window-bar.svg new file mode 100644 index 0000000000..abdc943a48 --- /dev/null +++ b/assets/window-bar.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/readmeStyle.css b/readmeStyle.css new file mode 100644 index 0000000000..92eddbcbfe --- /dev/null +++ b/readmeStyle.css @@ -0,0 +1,212 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600"); +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Open Sans", sans-serif; +} + +h1 { + font-weight: 600; + font-size: 2rem; +} + +h2 { + font-size: 1.5rem; + color: #09f; + font-weight: 600; + margin-bottom: 16px; +} + +h3 { + font-size: 1rem; + color: #09f; + font-weight: 600; + margin-bottom: 8px; +} + +.code-snippet { + font-family: ‘Courier New’, monospace; + background: rgba(94, 110, 122, 0.12); + padding: 4px; +} + +a { + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); + transition: box-shadow 600ms ease-in-out; +} +a:hover { + box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.25); +} + +.button { + background: #09f; + padding: 10px 16px; + color: white; + display: inline-block; + text-decoration: none; + margin-top: auto; +} +.button:hover { + background: #3af; +} + +section { + padding: 48px; + min-height: 400px; +} + +article { + max-width: 960px; + margin: 0 auto; +} + +.head { + background: url("assets/background.png") #09f fixed no-repeat; + background-size: contain; + min-height: 360px; + color: white; +} + +.head p { + font-weight: 400; + line-height: 1.8rem; + font-size: 1.2rem; + max-width: 680px; + margin-top: 24px; +} + +.callouts { + display: flex; +} + +.callout { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} +.callout p { + margin-top: 24px; + margin-bottom: 24px; + color: rgba(0, 0, 0, 0.5); +} + +.illustration { + width: 292px; + height: 143px; +} + +.one { + background: url("assets/components-icon.svg") no-repeat; +} + +.two { + background: url("assets/responsive-icon.svg") no-repeat bottom; +} + +.prereq { + width: 192px; + height: 132px; + margin-top: 32px; + margin-bottom: 16px; +} + +.node { + background: url("assets/nodeJS-logo.png") no-repeat; +} + +.vscode { + background: url("assets/vscode.png") no-repeat; +} + +.instructions { + background: #dcf1ff; +} + +.video { + display: flex; + justify-content: center; + align-items: center; +} +.video img { + width: 72px; + height: 72px; + opacity: 1; + transition: width 400ms ease-out, height 400ms ease-out, opacity 600ms ease-out; +} +.video:hover img { + opacity: 0.5; + width: 96px; + height: 96px; +} + +.lg { + width: 600px; + height: 300px; + background: url("assets/background.png") no-repeat; + background-size: cover; + margin: 24px 0; +} + +li { + margin-bottom: 1rem; +} + +.video-header { + background: url("assets/window-bar.svg"); + width: 386px; + height: 18px; + margin-top: 32px; +} + +.sm { + width: 386px; + height: 212px; +} + +.v2 { + background: url("assets/usage-CLI.gif"); +} + +.v1 { + background: url("assets/installing-CLI.gif"); +} + +p + .code-snippet { + display: inline-block; + margin-bottom: 24px; + padding: 16px; +} + +.banner > article { + background: #014CB1; + display: flex; + align-items: flex-end; + height: 320px; +} + +.angular-image { + background: url("assets/angular-image.png") no-repeat left bottom; + background-size: contain; + width: 545px; + height: 258px; +} + +.banner-content { + color: white; + max-width: 260px; + margin-bottom: 24px; +} +.banner-content > p { + margin-bottom: 24px; +} + +footer { + display: flex; + justify-content: center; + align-items: center; + min-height: 120px; + background: black; +}