Google Git
Sign in
eclipse / gerrit / www.eclipse.org / che / refs/heads/CheConf18 / . / docs / tutorials / angular2 / index.html
blob: 79afabec091bb60802890251400cc186ac48ab31 [file] [log] [blame]
<!-- jQuery Eclipse IP approval https://dev.eclipse.org/ipzilla/show_bug.cgi?id=10801 -->
<script type="text/javascript" charset="utf8" src="../../../docs/assets/scripts/jquery-1.8.1.min.js"></script>
<script type="text/javascript" charset="utf8">
$(document).ready(function(){
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var image = images[i];
var parentElement = image.parentElement;
var a = document.createElement('a');
if (! image.getAttribute('src').includes("logo-codenvy.svg") && ! image.getAttribute('src').includes("codenvy-contribute.svg") ){
a.href = image.getAttribute('src');
a.target = "_blank";
a.appendChild(image);
parentElement.appendChild(a);
}
}
});
</script>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Angular 2 -
Tutorials
- Eclipse Che</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="Jekyll v3.5.1">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic,900">
<link rel="stylesheet" href="../../../docs/assets/css/screen.css">
<link rel="icon" type="image/x-icon" href="../../../docs/assets/imgs/favicon.ico">
<!--[if lt IE 9]>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->
</head>
<body class="wrap">
<header>
<nav class="mobile-nav show-on-mobiles">
<ul>
<li class="">
<a href="../../../docs/index.html">Docs</a>
</li>
<li class="current">
<a href="../../../docs/tutorials/multi-machine/index.html">Tutorials</a>
</li>
<li class="">
<a href="../../../docs/openshift/config/index.html">OpenShift</a>
</li>
<li>
<a href="https://github.com/eclipse/che-docs/tree/master/src/main">GitHub</a>
</li>
</ul>
</nav>
<div class="grid">
<div class="unit one-third center-on-mobiles">
<a href="https://eclipse.org/che/">
<span class="sr-only">Eclipse Che</span>
<img src="../../../docs/assets/imgs/logo-eclipseche.svg" alt="Eclipse Che Logo" width="249" height="115">
</a>
</div>
<nav class="main-nav unit two-thirds hide-on-mobiles">
<ul>
<li class="">
<a href="../../../docs/index.html">Docs</a>
</li>
<li class="current">
<a href="../../../docs/tutorials/multi-machine/index.html">Tutorials</a>
</li>
<li class="">
<a href="../../../docs/openshift/config/index.html">OpenShift</a>
</li>
<li>
<a href="https://github.com/eclipse/che-docs/tree/master/src/main">GitHub</a>
</li>
</ul>
</nav>
</div>
</header>
<section class="tutorials">
<div class="grid">
<div class="docs-nav-mobile unit whole show-on-mobiles">
<select onchange="if (this.value) window.location.href=this.value">
<option value="">Navigate the docs…</option>
<optgroup label="User Tutorials">
<ul>
</ul>
<ul>
<li class=""><a href="../../../docs/tutorials/multi-machine/index.html">Multi-Machine Workspaces</a></li>
<li class=""><a href="../../../docs/tutorials/maven/index.html">Java+Maven</a></li>
<li class=""><a href="../../../docs/tutorials/gradle/index.html">Java+Gradle</a></li>
<li class=""><a href="../../../docs/tutorials/java/index.html">Java Console Apps</a></li>
<li class=""><a href="../../../docs/tutorials/swing/index.html">Java Swing</a></li>
<li class=""><a href="../../../docs/tutorials/nodejs/index.html">Node.js</a></li>
<li class="current"><a href="../../../docs/tutorials/angular2/index.html">Angular 2</a></li>
<li class=""><a href="../../../docs/tutorials/meteor/index.html">Meteor</a></li>
<li class=""><a href="../../../docs/tutorials/wordpress/index.html">Wordpress</a></li>
<li class=""><a href="../../../docs/tutorials/php/index.html">PHP</a></li>
<li class=""><a href="../../../docs/tutorials/composer/index.html">Composer</a></li>
<li class=""><a href="../../../docs/tutorials/android/index.html">Android</a></li>
<li class=""><a href="../../../docs/tutorials/spring-boot/index.html">Spring Boot</a></li>
<li class=""><a href="../../../docs/tutorials/rails/index.html">Rails</a></li>
<li class=""><a href="../../../docs/tutorials/laravel/index.html">Laravel</a></li>
<li class=""><a href="../../../docs/tutorials/tomee/index.html">TomEE</a></li>
<li class=""><a href="../../../docs/tutorials/che-in-che/index.html">Che in Che</a></li>
<li class=""><a href="../../../docs/tutorials/gae/index.html">Google App Engine</a></li>
<li class=""><a href="../../../docs/tutorials/che-and-appfog/index.html">AppFog</a></li>
<li class=""><a href="../../../docs/tutorials/subversion/index.html">Subversion Repos</a></li>
<li class=""><a href="../../../docs/tutorials/ftpsftp/index.html">FTP/SFTP</a></li>
<li class=""><a href="../../../docs/tutorials/cuba/index.html">Cuba Platform</a></li>
<li class=""><a href="../../../docs/tutorials/sourcegraph/index.html">Sourcegraph</a></li>
<li class=""><a href="../../../docs/tutorials/vaadin/index.html">Vaadin</a></li>
<li class=""><a href="../../../docs/tutorials/platformio/index.html">PlatformIO</a></li>
</ul>
</optgroup>
</select>
</div>
<div class="unit four-fifths">
<article>
<div class="improve right hide-on-mobiles">
<a href="https://github.com/codenvy/che-docs/blob/master/src/main/_docs/tutorials/tutorial-angular2.md"><i class="fa fa-pencil"></i> &nbsp;Improve this page</a>
<!--<a href="https://github.com/eclipse/che/blob/master/docs/_docs/tutorials/tutorial-angular2.md"><i class="fa fa-pencil"></i> &nbsp;Improve this page</a>-->
</div>
<div class="doc-title">
<h1>Angular 2</h1>
<div class="doc-title-border">
</div>
</div>
<h1 id="1-create-node-stack-with-angularcli">1. Create Node Stack with angular/cli</h1>
<p>When in User Dashboard, go to <strong>Workspaces &gt; Add Workspace &gt; Runtime &gt; Stack Authoring</strong> and paste the following recipe:</p>
<div class="language-text highlighter-rouge"><pre class="highlight"><code>FROM codenvy/node
RUN sudo npm install -g angular-cli
EXPOSE 4200
LABEL che:server:4200:ref=ng-serve che:server:4200:protocol=http
</code></pre>
</div>
<h1 id="2-generate-a-project">2. Generate a project</h1>
<p>When the workspace is up, create the following command:</p>
<div class="highlighter-rouge"><pre class="highlight"><code>cd /projects
ng new myapp
</code></pre>
</div>
<p>You can perform the above commands in the Terminal too.</p>
<h1 id="3-run-app">3. Run App</h1>
<p>Now, when the project is generated and all dependencies are installed, it’s time to run it. Create yet another command:</p>
<div class="language-text highlighter-rouge"><pre class="highlight"><code>cd ${current.project.path}
ng serve --host 0.0.0.0
</code></pre>
</div>
<p>Important! Make sure this command has preview URL as follows:</p>
<p><code class="highlighter-rouge">${server.4200/tcp}</code></p>
<p>Execute this command, click the preview URL link. The page should say <code class="highlighter-rouge">app works</code></p>
<h1 id="4-update-app">4. Update App</h1>
<p>In <code class="highlighter-rouge">src/app/app.component.ts</code> add another title by editing the existing AppComponent class:</p>
<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kr">export</span> <span class="kr">class</span> <span class="nx">AppComponent</span> <span class="p">{</span>
<span class="nx">title</span> <span class="o">=</span> <span class="s1">'app works!'</span><span class="p">;</span>
<span class="nx">newTitle</span> <span class="o">=</span> <span class="s1">'Indeed!'</span><span class="p">;</span>
<span class="p">}</span>
</code></pre>
</div>
<p>Add the newTitle element in <code class="highlighter-rouge">src/app/app.component.html</code>:</p>
<div class="highlighter-rouge"><pre class="highlight"><code>&lt;h1&gt;
{{title}}
&lt;br&gt;
{{newTitle}}
&lt;/h1&gt;
</code></pre>
</div>
<p>As soon as the server picks up changes in files, you can preview them in a running app</p>
</article>
</div>
<div class="unit one-fifth hide-on-mobiles">
<aside>
<h4>User Tutorials</h4>
<ul>
<li class=""><a href="../../../docs/tutorials/multi-machine/index.html">Multi-Machine Workspaces</a></li>
<li class=""><a href="../../../docs/tutorials/maven/index.html">Java+Maven</a></li>
<li class=""><a href="../../../docs/tutorials/gradle/index.html">Java+Gradle</a></li>
<li class=""><a href="../../../docs/tutorials/java/index.html">Java Console Apps</a></li>
<li class=""><a href="../../../docs/tutorials/swing/index.html">Java Swing</a></li>
<li class=""><a href="../../../docs/tutorials/nodejs/index.html">Node.js</a></li>
<li class="current"><a href="../../../docs/tutorials/angular2/index.html">Angular 2</a></li>
<li class=""><a href="../../../docs/tutorials/meteor/index.html">Meteor</a></li>
<li class=""><a href="../../../docs/tutorials/wordpress/index.html">Wordpress</a></li>
<li class=""><a href="../../../docs/tutorials/php/index.html">PHP</a></li>
<li class=""><a href="../../../docs/tutorials/composer/index.html">Composer</a></li>
<li class=""><a href="../../../docs/tutorials/android/index.html">Android</a></li>
<li class=""><a href="../../../docs/tutorials/spring-boot/index.html">Spring Boot</a></li>
<li class=""><a href="../../../docs/tutorials/rails/index.html">Rails</a></li>
<li class=""><a href="../../../docs/tutorials/laravel/index.html">Laravel</a></li>
<li class=""><a href="../../../docs/tutorials/tomee/index.html">TomEE</a></li>
<li class=""><a href="../../../docs/tutorials/che-in-che/index.html">Che in Che</a></li>
<li class=""><a href="../../../docs/tutorials/gae/index.html">Google App Engine</a></li>
<li class=""><a href="../../../docs/tutorials/che-and-appfog/index.html">AppFog</a></li>
<li class=""><a href="../../../docs/tutorials/subversion/index.html">Subversion Repos</a></li>
<li class=""><a href="../../../docs/tutorials/ftpsftp/index.html">FTP/SFTP</a></li>
<li class=""><a href="../../../docs/tutorials/cuba/index.html">Cuba Platform</a></li>
<li class=""><a href="../../../docs/tutorials/sourcegraph/index.html">Sourcegraph</a></li>
<li class=""><a href="../../../docs/tutorials/vaadin/index.html">Vaadin</a></li>
<li class=""><a href="../../../docs/tutorials/platformio/index.html">PlatformIO</a></li>
</ul>
</aside>
</div>
<div class="clear"></div>
</div>
</section>
<script>
var anchorForId = function (id) {
var anchor = document.createElement("a");
anchor.className = "header-link";
anchor.href = "#" + id;
anchor.innerHTML = "<span class=\"sr-only\">Permalink</span><i class=\"fa fa-link\"></i>";
anchor.title = "Permalink";
return anchor;
};
var linkifyAnchors = function (level, containingElement) {
var headers = containingElement.getElementsByTagName("h" + level);
for (var h = 0; h < headers.length; h++) {
var header = headers[h];
if (typeof header.id !== "undefined" && header.id !== "") {
header.appendChild(anchorForId(header.id));
}
}
};
document.onreadystatechange = function () {
if (this.readyState === "complete") {
var contentBlock = document.getElementsByClassName("artik")[0] || document.getElementsByClassName("openshift")[0] || document.getElementsByClassName("tutorials")[0] || document.getElementsByClassName("docs")[0] || document.getElementsByClassName("news")[0];
if (!contentBlock) {
return;
}
for (var level = 1; level <= 6; level++) {
linkifyAnchors(level, contentBlock);
}
}
};
</script>
</body>
</html>