Welcome!! and choose either the Windows or Mac

Welcome!! Fellow Angular
4 aspirant, I have written this tutorial in hope of helping audacious people
like yourselves who want to learn angular 4 on their own. So without wasting
further time lets begin. DependenciesBefore we can begin, we need to ensure you have a few
dependencies installed. Which are necessary for this tutorial
Node.js with NPM
(Node Package Manager)
Angular-CLI
(Command Line Interface)
To check whether or not you have Node.js
installed, visit your  command line and type: node -vIf the command was not recognized
by your system, you need to install Node.js.1.     Visit the Node.js download page and choose
either the Windows or Mac installer based on your OS.2.     Accept the agreement, choose
an installation folder, and hit Next on the Custom Setup page. By default, it
will install the npm package manager which we will need.3.     Now again open you
command line and type node –v . It
will show you the currently installed node.js version Next, we are going to install
the Angular-CLI.At the console, type:npm
install -g @angular/cliOnce finished, type:>ng –vThe resulting output will look something like
this:When we run ng -v while inside an Angular project folder, it will also provide us
with which version of Angular that particular project is using.                       Why Angular CLI ?The
CLI helps us by automating away many of the cumbersome tasks by managing
configuration along with providing  best
practices that have been discovered by the community over time, and by helping
you build more maintainable code, the CLI exposes some of the most powerful
capabilities of Angular in a way that is easier to get started, and easier to
get moving quickly when compared to rolling everything together yourself.Now you are all set to create your own project using Angular CLI. The command that we use to access the Angular CLI is ng. To create a new app type the following:>ng
new my-appThis will create a new Angular 4 project from scratch and set it up so
that you can use SASS as CSS
preprocessor. If you go inside the my-app folder that should have just been created
you’ll find a folder structure that will look more or less like this: app source code – src  – app                 # your app source code   – assets              # static files like images,videos
etc  – index.html          # entry point to your app  – styles.scss         # the global styles for your app  – environments        # here you can define different
environment configuration (prod, dev, etc)// dependencies- node_modules          #
the source code of your app’s dependencies- package.json          #
the manifest of your app that states all dependencies // TypeScript configuration- tsconfig.json         #
TypeScript compiler configuration- tslint.json           #
TypeScript linting configuration// Testing- e2e                   #
a folder with end to end tests- karma.conf.js         #
karma test runner configuration- protractor.conf.js  #
protractor e2e tests configuration- .gitignore- README.md What is SASS?Sass is an extension of
CSS that adds power and elegance to the basic language
CSS on its own can be fun, but stylesheets are getting larger, more complex,
and harder to maintain. This is where a preprocessor can help. Sass provides us
with  features that don’t exist in CSS
yet like variables, nesting, mixins, inheritance and other nifty goodies that
make writing CSS fun again. Type the
following command in your command prompt:PS>  ng serve –openThis will start the development server, open a browser and load your
app. Congratulation you have
successfully setup your first angular 4 application! Index.html The index.html is the entry point to our application:·        
It
links to styles and javascript files·        
It
provides the HTML markup for our application with custom  element. If you take a look at the index.html file in our project you’ll see the
following:you might have noticed that styles and javascript files are missing. All we can see is a custom element app-root. The reason for that is the Angular CLI relies on Webpack to inject these
files when they are needed. Webpack? What in the world is
that?Webpack
is a module bundler that takes all these files and modules, processes them and
makes them available so that they can be run in any browser. Moreover it can
optimize your application by taking advantage of a rich community of plugins.Take a look at the awesome Webpack docs if you want to learning more about it. Bootstrapping Your AppIn Angular 4 we use a bootstrapper. You can find the
bootstrapping logic in the src/main.ts module:What is a Module?A
TypeScript module is a way to encapsulate, group, reuse, distribute and load
code in JavaScript.Generally, a module will contain code that encapsulates
a specific functionality. The module will expose this functionality to the rest
of the application by defining a series of exports that other parts of the
system can then import.The core module for Angular 4 for instance
is called ‘angular2/core’ and
it gives you access to Angular core primitives like Component.    In the above file we are importing the platformBrowserDynamic object from ‘@angular/platform-browser-dynamic’ module and call its bootstrapModule function
with the AppModule as argument.Some
things we need to note here are:·        
The ‘@angular/platform-browser-dynamic’ bootstrapper tells us that Angular 4 is platform
agnostic. That is, you can run it
in the browser, but you can also run it on a web worker or in the server using
different bootstrappers.·        
Notice
how we import modules in a different way, Angular 2 modules are imported by name, and
application components are imported using relative paths.Calling the bootstrapModule function with the AppModule as
argument tells Angular that this module is the main module for your
application. Angular 2 ModulesAngular 2 modules and the new NgModule decorator allow us to declare in
one place all the dependencies and components of our application without the
need to do it on a per-component basis . a higher level module to wrap ES6
modules that are all about developer ergonomics. The NgModule decorator takes an object with the following information:·        
an imports array where you
declare your module dependencies, for instance, browser, forms, routing or
http. The BrowserModule we are using above
contains all the dependencies necessary to run Angular 2 on a browser.·        
a declarations array where you
declare the components and directives that belong to the current module.·        
a bootstrap array that
identifies the root component that Angular 2 should use to bootstrap your
application.In this example we import an AppComponent component from the app.component.ts module
and set it as the root of our application. But What is a Component?The component is the
core building block of Angular 2 applications. It represents a reusable piece
of UI that is usually depicted by a custom html element.A component is self contained and is constituted by at least a
piece of html code that is known as template, a class that encapsulates the data and
interactions available to that template, and the aforementioned html element
also known selector.The AppComponent looks like this: It has an AppComponent class that is decorated by some
metadata in the form a TypeScript decorator @Component which binds the class to its
template, its styles and the app-root selector (Can you
remember the  element
from the index.html file?).This metadata tells
Angular 2 that whenever you see an  html element you should render the
template in templateUrl, with the styles in stylesUrls and in the context of the AppComponent class.                 A Decorator?think of a decorator like a function that is applied to whatever
it decorates. In this case, the Component decorator attaches some metadata to
the AppComponent class. If you open component.html file you`ll see title variable in a h1
tag among other things, which will look something like this 

    Welcome to {{ title }}! 

The title bit (which we call interpolation syntax)
tells Angular 2 to display the content of the component title variable when rendering the
component. Indeed, if you run ng serve you can see how the browser
renders the text app works! inside an h1 element.If you take a look back
at the AppComponent definition and at your project structure you’ll
realize that the Angular CLI follows a convention when creating
components:·        
All files for a given component are placed within the same
folder named like the component itself (in this case app)·        
These files are named with app.component and have different
extensions based on their function:o   
app.component.ts for
the component itselfo   
app.component.html for
the templateo   
app.component.scss for
the stylesNow let’s do a quick
test to see how we can bind the AppComponent class members to the template.
Let’s change the title property value from app works! to Star Wars
PPlz!!!!!. If you
now save the file, your browser should automagically refresh itself and you
should be able to see the Star Wars PPlz!!! as the title of your app (If you
closed your browser just open it again and if you stopped the development
server then remember to run ng serve –open to start it again and see your
changes). Classes in JavaScript??ES6 brought classes to JavaScript
amongst a host of other features. If you are a software developer with a strong
typed language as background this will probably be great news for you.Don’t be
fooled though, JavaScript classes are just syntactic sugar over the existing
prototypical inheritance model. If you want to know more about ES6 classes read this article. And TypeScript adds even more great
features to classes. Your First Component, Listing ItemsThe Angular CLI has something
that we call generators that let you scaffold parts of your application for
you. For instance, you can use the following command to create an component:ng generate interface
personThe result of running this command is a user.ts file in
your app folder:Now let’s add some properties that are representative of a userType AnnotationsTypeScript let’s you add type annotation
to your variable and function declarations. This helps you with better tooling
like intellisense and to catch type errors.Now that we have defined the core object of our domain model
let’s create our very first component: the UserListComponent. Againt we take
advantage of the Angular CLI and type the
following:ng generate component
–inline-template user-list This will generate a new
folder user-list and will place a TypeScript and a style files within that folder.
Since we have selected the –inline-template option, instead of using an
external template file the component will use the template property inside the @Componentdecorator to define an inline template.It will look like this:app-people-list? Why App?By
default, when you create a new app with the angular CLI all your new components will be
prefixed with the app prefix. That’s because the custom elements standard
requires custom components to be named with at least two letters separated by a
dash to avoid conflicting with built-in browser elements like p, section, body
and head.You can
change the prefix for you app in the angular-cli.json file that contains the angular CLI configuration for your project.
You can also set a prefix during project creation using the prefix flag with ng new Ok, now we’ve got a
component that we can render using the  element. Indeed, you can
appreciate how the Angular CLIcreates a dummy template so you can test
that the component works right away. But we still need to do some changes
before we can display a list of Star Wars celebrities.The next thing that
we’ll do is to expose a people property with an array of Person with the mighty Luke, Darth Vader
and Solo.And now we’ll update its template so that we can represent a list of
star wars people. Just like ng-repeat in AngularJS, Angular 2 provides
a repeaterdirective that let’s us
repeat a part of a template: *ngFor:The * before the ngFor denotes the fact that *ngFor is what is called a structural
directive, a directive that is going to affect the DOM in some way adding or
removing elements to it. Soon you’ll notice how Angular 2 uses a lot of these
cues in their syntax to convey a specific meaning and help you learn and
understand what the different directives and parts of the framework do.The let person creates a local
template variable that
contains each item within the people array and is bound to each li element. Why Does that String Delimiter Look So Weird?That’s because it is a backtick (`).
Backticks are used to define the new ES6 template strings. They are a new great
feature of ES6 that let’s you write multiline strings natively and insert any expression
directly within a string with a very straightforward syntax. Now we can update our AppComponent to display the list of StarWars
people. We only need to update the app.component.html template: And voilà!!!!! It automagically works! (again check
the browser for an update or run ng serve -o).Once thing that is
interesting to mention is that if you had followed the previous steps but you
had created the new component with your bare hands it would not have
worked. Why is that? That’s
because the Angular
CLI does a lot of
things for you in the background. For instance, when we created the component
before, the CLI not only created the component itself but it also wired it up
so we could use it in our application.Indeed, in order to be
able to use a component within another component you need to make your
application aware of it. You can do that in the app.module.ts file, that is, in your Angular 2
module. If you take a look at this file you’ll discover the following:

Exactly! The Angular CLI has wired it up
for you and saves you the need from remembering to do it yourself.