-
Notifications
You must be signed in to change notification settings - Fork 25
/
README.html
140 lines (134 loc) · 6.8 KB
/
README.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ignite UI for Angular Starting Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="readmeStyle.css">
</head>
<body>
<section class="head">
<article>
<h1>Thank you for downloading
<br>Ignite UI for Angular</h1>
<p>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.
</p>
</article>
</section>
<section>
<article>
<div class="callouts">
<div class="callout">
<div class="illustration one"></div>
<p>A complete list of the Angular Components</p>
<a class="button" href="https://www.infragistics.com/products/ignite-ui-angular#components" target="_blank">Browse Components</a>
</div>
<div class="callout">
<div class="illustration two"></div>
<p>This download does not include the complete set of documentation and step-by-step guides with API documentation.</p>
<a class="button" href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/grids_and_lists.html"
target="_blank">See Documentation</a>
</div>
</div>
</article>
</section>
<section class="prerequisites">
<article>
<h2>Prerequisites to using Ignite UI for Angular</h2>
<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
app, including Ignite UI for Angular, and to build Ignite UI for Angular apps.
<br>
<br>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.</p>
<div class="callouts">
<div class="callout">
<div class="prereq node"></div>
<a class="button" href="https://nodejs.org/en/download/" target="_blank">Download Node</a>
</div>
<div class="callout">
<div class="prereq vscode"></div>
<a class="button" href="https://code.visualstudio.com/download" target="_blank">Download VS Code</a>
</div>
</div>
</article>
</section>
<section class="instructions">
<article>
<h2>Running the Ignite UI for Angular Samples</h2>
<p>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.</p>
<a href="https://youtu.be/QiAHkU-ijnU" target="_blank" class="video lg">
<img src="assets/Play.svg" alt="Play Icon">
</a>
<h3>Step-by-Step</h3>
<ol>
<li>Unzip the package to your hard drive. </li>
<li>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. </li>
<li>Once Visual Studio Code is open, you should see the samples folders in the Explorer pane. </li>
<li>In Visual Studio Code, from the “View” menu, select “Integrated Terminal”. </li>
<li>Type
<span class="code-snippet">npm install</span> at the command line in the integrated terminal. </li>
<li>Once the
<span class="code-snippet">npm install</span> completes, type npm start at the command line in the integrated terminal.</li>
<li>Your browser should open to http://localhost:4200 with the Ignite UI for Angular samples running.</li>
</ol>
</article>
</section>
<section class="cli">
<article>
<h2>Building your first Ignite UI for Angular app</h2>
<p>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.
<br>
<br>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.</p>
<div class="callouts">
<div class="callout">
<div class="video-header"></div>
<a href="https://youtu.be/lsEY90yYQIs" target="_blank" class="video sm v1">
<img src="assets/Play.svg" alt="Play Icon">
</a>
<p>Installing the Ignite UI for Angular CLI</p>
</div>
<div class="callout">
<div class="video-header"></div>
<a href="https://youtu.be/QK_NsdtdA70" target="_blank" class="video sm v2">
<img src="assets/Play.svg" alt="Play Icon">
</a>
<p>Building Your First Ignite UI CLI App</p>
</div>
</div>
<p>If you are already familiar with node.js and using a CLI, you can skip the videos and type:</p>
<p class="code-snippet">npm install igniteui-cli –g</p>
<p>in Terminal, PowerShell or Bash to install our CLI. We include an alias, so just type:</p>
<p class="code-snippet">ig</p>
<p>to get started with the wizard, or type:</p>
<p class="code-snippet">ig -v</p>
<p>to check the version or to get a list of commands, type:</p>
<p class="code-snippet">ig -h</p>
</article>
</section>
<section class="banner">
<article>
<div class="angular-image"></div>
<div class="banner-content">
<img src="assets/angular-logo.png" alt="">
<p>To get further help if you need it, or if you run into any issues, go to the forums.</p>
<a class="button" href="https://www.infragistics.com/community/forums/f/ignite-ui-for-angular" target="_blank">Ignite UI for Angular Forums</a>
</div>
</article>
</section>
<footer>
<img href="https://www.infragistics.com/" target="_blank" src="assets/ig-logo.svg" alt="Infragistics Logo">
</footer>
</body>
</html>