Skip to content

Commit b39dd2e

Browse files
author
Tacho
committed
feature(navUI): add README.html page with styles and assets #550 
1 parent d30c29d commit b39dd2e

15 files changed

+524
-0
lines changed

‎README.html

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Ignite UI for Angular Starting Page</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="readmeStyle.css">
9+
</head>
10+
11+
<body>
12+
<section class="head">
13+
<article>
14+
<h1>Thank you for downloading
15+
<br>Ignite UI for Angular</h1>
16+
<p>In the package you just downloaded, you get a complete set of samples, including source code for each of them. You’ll
17+
see the full array of capabilities in Ignite UI for Angular, all the different features for the controls, how they
18+
are implemented.
19+
</p>
20+
</article>
21+
</section>
22+
<section>
23+
<article>
24+
<div class="callouts">
25+
<div class="callout">
26+
<div class="illustration one"></div>
27+
<p>A complete list of the Angular Components</p>
28+
<a class="button" href="https://www.infragistics.com/products/ignite-ui-angular#components" target="_blank">Browse Components</a>
29+
</div>
30+
<div class="callout">
31+
<div class="illustration two"></div>
32+
<p>This download does not include the complete set of documentation and step-by-step guides with API documentation.</p>
33+
<a class="button" href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/grids_and_lists.html"
34+
target="_blank">See Documentation</a>
35+
</div>
36+
</div>
37+
</article>
38+
</section>
39+
<section class="prerequisites">
40+
<article>
41+
<h2>Prerequisites to using Ignite UI for Angular</h2>
42+
<p>Before you can run Ignite UI for Angular, there are 2 steps to get everything on your machine set up to run any Angular
43+
app, including Ignite UI for Angular, and to build Ignite UI for Angular apps.
44+
<br>
45+
<br>To get started, you must install both NodeJS and Visual Studio Code on your machine. Modern web development with
46+
Angular requires NodeJS, it’s sort of like an ASP.NET app running in the browser requires ASP.NET runtime deployed
47+
on the server. For development, there is nothing better than Visual Studio Code to build Angular apps. Getting started
48+
is easy, just download and install both Node.js and Visual Studio Code.</p>
49+
<div class="callouts">
50+
<div class="callout">
51+
<div class="prereq node"></div>
52+
<a class="button" href="https://nodejs.org/en/download/" target="_blank">Download Node</a>
53+
</div>
54+
<div class="callout">
55+
<div class="prereq vscode"></div>
56+
<a class="button" href="https://code.visualstudio.com/download" target="_blank">Download VS Code</a>
57+
</div>
58+
</div>
59+
</article>
60+
</section>
61+
<section class="instructions">
62+
<article>
63+
<h2>Running the Ignite UI for Angular Samples</h2>
64+
<p>Once the prerequisites are installed, you can get the Ignite UI for Angular samples running with the step-by-step below
65+
or you can watch this quick video.</p>
66+
<a href="https://youtu.be/QiAHkU-ijnU" target="_blank" class="video lg">
67+
<img src="assets/Play.svg" alt="Play Icon">
68+
</a>
69+
<h3>Step-by-Step</h3>
70+
<ol>
71+
<li>Unzip the package to your hard drive. </li>
72+
<li>Open the project by right-clicking anywhere in the folder that you’ve just unzipped and selecting “Open with Code”
73+
from the context menu. If you do not have a right-click option to Open in Code, or you are running a Mac, simply
74+
open Visual Studio Code and from the File menu select Open Folder and select the folder you just unzipped. </li>
75+
<li>Once Visual Studio Code is open, you should see the samples folders in the Explorer pane. </li>
76+
<li>In Visual Studio Code, from the “View” menu, select “Integrated Terminal”. </li>
77+
<li>Type
78+
<span class="code-snippet">npm install</span> at the command line in the integrated terminal. </li>
79+
<li>Once the
80+
<span class="code-snippet">npm install</span> completes, type npm start at the command line in the integrated terminal.</li>
81+
<li>Your browser should open to http://localhost:4200 with the Ignite UI for Angular samples running.</li>
82+
</ol>
83+
</article>
84+
</section>
85+
<section class="cli">
86+
<article>
87+
<h2>Building your first Ignite UI for Angular app</h2>
88+
<p>After you’ve looked at the Ignite UI for Angular samples and explored the online docs, it’s time to get started building
89+
your first Ignite UI for Angular app. Using the Ignite UI for Angular CLI (Command Line Interface), it’s super-easy
90+
to get started building full-featured Angular apps. Our CLI gives you the ability to initialize, develop, scaffold,
91+
and maintain applications in Angular with Ignite UI, all with pre-set navigation, templates for each control and
92+
full screen views that can help you kick off any type of Angular app development.
93+
<br>
94+
<br>We’ve included 2 videos that will help you install the pre-requisites and walk you through using the Ignite UI for
95+
Angular CLI to build your first Ignite UI for Angular app.</p>
96+
<div class="callouts">
97+
<div class="callout">
98+
<div class="video-header"></div>
99+
<a href="https://youtu.be/lsEY90yYQIs" target="_blank" class="video sm v1">
100+
<img src="assets/Play.svg" alt="Play Icon">
101+
</a>
102+
<p>Installing the Ignite UI for Angular CLI</p>
103+
104+
</div>
105+
<div class="callout">
106+
<div class="video-header"></div>
107+
<a href="https://youtu.be/QK_NsdtdA70" target="_blank" class="video sm v2">
108+
<img src="assets/Play.svg" alt="Play Icon">
109+
</a>
110+
<p>Building Your First Ignite UI CLI App</p>
111+
112+
</div>
113+
</div>
114+
<p>If you are already familiar with node.js and using a CLI, you can skip the videos and type:</p>
115+
<p class="code-snippet">npm install igniteui-cli –g</p>
116+
<p>in Terminal, PowerShell or Bash to install our CLI. We include an alias, so just type:</p>
117+
<p class="code-snippet">ig</p>
118+
<p>to get started with the wizard, or type:</p>
119+
<p class="code-snippet">ig -v</p>
120+
<p>to check the version or to get a list of commands, type:</p>
121+
<p class="code-snippet">ig -h</p>
122+
</article>
123+
</section>
124+
<section class="banner">
125+
<article>
126+
<div class="angular-image"></div>
127+
<div class="banner-content">
128+
<img src="assets/angular-logo.png" alt="">
129+
<p>To get further help if you need it, or if you run into any issues, go to the forums.</p>
130+
<a class="button" href="https://www.infragistics.com/community/forums/f/ignite-ui-for-angular" target="_blank">Ignite UI for Angular Forums</a>
131+
</div>
132+
</article>
133+
</section>
134+
135+
<footer>
136+
<img href="https://www.infragistics.com/" target="_blank" src="assets/ig-logo.svg" alt="Infragistics Logo">
137+
</footer>
138+
</body>
139+
140+
</html>

‎assets/IgniteASCII.png

1.77 KB
Loading

‎assets/Play.svg

+3
Loading

‎assets/angular-image.png

48.4 KB
Loading

‎assets/angular-logo.png

7.48 KB
Loading

‎assets/background.png

16.9 KB
Loading

‎assets/components-icon.svg

+84
Loading

0 commit comments

Comments
 (0)