Introduction to Angular2 to build client-side applications

<p>Angular2 is a fast and reliable framework, based on Typescript. It is used to build client-side applications</p>

<div>Installing Angular</div>

<p>In order to start Angular you have to install NodeJs and npm in local machine. Next to install angular follow below command</p>

<pre class="prettyprint">
npm install -g @angular/cli</pre>

<p>To create your project use the following command, which create a project folder in the directory you are currently&nbsp;&nbsp;</p>

<pre class="prettyprint">
ng new first-angular-app</pre>

<p>Your folder structure looks like</p>

<pre class="prettyprint">
e2e
src
&nbsp; app
&nbsp; &nbsp; app.component.css
&nbsp; &nbsp; app.component.html
&nbsp; &nbsp; app.component.spec.ts
&nbsp; &nbsp; app.component.ts
&nbsp; &nbsp; app.module.ts
&nbsp; assets
&nbsp; environments
&nbsp; &nbsp; environment.prod.ts
&nbsp; &nbsp; environment.ts
&nbsp; favicon.ico
&nbsp; index.html
&nbsp; karma.conf.js
&nbsp; main.ts
&nbsp; polyfills.ts
&nbsp; styles.css
&nbsp; test.ts
&nbsp; tsconfig.app.json
&nbsp; tsconfig.spec.json
&nbsp; tslint.json
angular.json
package.json
package-lock.json
README.md
tsconfig.json
tslint.json</pre>

<p>package.json -This includes all your application dependencies</p>

<p>app.component is your root component which holds all other components. It will be the parent component of all other components.</p>

<p>app.module is the brain of any angular app. It also contains declarations of all newly created components, included modules and declared routes.&nbsp;we can link different component services to app.module from this file.</p>

<h2 class="blog-title-fit">Creating new components</h2>

<p>In any angular application&nbsp;we can create different components which provides different functionalities, Below is the command used to create component</p>

<pre class="prettyprint">
ng generate component &lt;component_name&gt;</pre>

<pre class="prettyprint">
Eg: ng generate component signup
ng generate component login
</pre>

<p>ng generate component creates a folder which contains below files for each component</p>

<ul>
  <li>HTML Template of the component</li>
  <li>A Stylesheet for the template</li>
  <li>Typescript - This contains the constructor and default method which includes the template and stylesheet.&nbsp;</li>
</ul>

<p>ng generate will also include your newly created component in app.module file in the declarations array</p>

<p>To run your application use command, this will run on port 4200 by default localhost:4200</p>

<pre class="prettyprint">
ng serve</pre>

Posted On 22 August 2018 By MicroPyramid


Need any Help in your Project?Let's Talk

Latest Comments
Implementing Angular Permissions using Route AuthGuards

Implementing Angular's AuthGuards to protect access to the client side routes

Continue Reading...
Angular 2 - Getting Started

Angular 2 - Getting Started
Angular 2 is an open source Javascript framework to build web applications or single page applications in HTML and Javascript. ...

Continue Reading...
How to use Forms in Angular4

In this blog we'll see how to use forms of different types reactive and template driven in your angular application.

Continue Reading...

Subscribe To our news letter

Subscribe and Stay Updated about our Webinars, news and articles on Django, Python, Machine Learning, Amazon Web Services, DevOps, Salesforce, ReactJS, AngularJS, React Native.
* We don't provide your email contact details to any third parties