Welcome!! Fellow Angular4 aspirant, I have written this tutorial in hope of helping audacious peoplelike yourselves who want to learn angular 4 on their own. So without wastingfurther time lets begin. DependenciesBefore we can begin, we need to ensure you have a fewdependencies 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.jsinstalled, visit your  command line and type: node -vIf the command was not recognizedby your system, you need to install Node.js.

1.     Visit the Node.js download page and chooseeither the Windows or Mac installer based on your OS.2.     Accept the agreement, choosean installation folder, and hit Next on the Custom Setup page. By default, itwill install the npm package manager which we will need.3.     Now again open youcommand line and type node –v .

Itwill show you the currently installed node.js version Next, we are going to installthe Angular-CLI.At the console, type:npminstall -g @angular/cliOnce finished, type:>ng –vThe resulting output will look something likethis:When we run ng -v while inside an Angular project folder, it will also provide uswith which version of Angular that particular project is using.                       Why Angular CLI ?TheCLI helps us by automating away many of the cumbersome tasks by managingconfiguration along with providing  bestpractices that have been discovered by the community over time, and by helpingyou build more maintainable code, the CLI exposes some of the most powerfulcapabilities of Angular in a way that is easier to get started, and easier toget 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:>ngnew my-appThis will create a new Angular 4 project from scratch and set it up sothat you can use SASS as CSSpreprocessor. If you go inside the my-app folder that should have just been createdyou’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,videosetc  – index.html          # entry point to your app  – styles.scss         # the global styles for your app  – environments        # here you can define differentenvironment configuration (prod, dev, etc)// dependencies- node_modules          #the source code of your app’s dependencies- package.

Best services for writing your paper according to Trustpilot

Premium Partner
From $18.00 per page
4,8 / 5
4,80
Writers Experience
4,80
Delivery
4,90
Support
4,70
Price
Recommended Service
From $13.90 per page
4,6 / 5
4,70
Writers Experience
4,70
Delivery
4,60
Support
4,60
Price
From $20.00 per page
4,5 / 5
4,80
Writers Experience
4,50
Delivery
4,40
Support
4,10
Price
* All Partners were chosen among 50+ writing services by our Customer Satisfaction Team

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 ofCSS that adds power and elegance to the basic languageCSS 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 uswith  features that don’t exist in CSSyet like variables, nesting, mixins, inheritance and other nifty goodies thatmake writing CSS fun again. Type thefollowing command in your command prompt:PS>  ng serve –openThis will start the development server, open a browser and load yourapp. Congratulation you havesuccessfully setup your first angular 4 application! Index.html The index.

html is the entry point to our application:·        Itlinks to styles and javascript files·        Itprovides 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 thefollowing: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 thesefiles when they are needed. Webpack? What in the world isthat?Webpackis a module bundler that takes all these files and modules, processes them andmakes them available so that they can be run in any browser. Moreover it canoptimize 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 thebootstrapping logic in the src/main.ts module:What is a Module?ATypeScript module is a way to encapsulate, group, reuse, distribute and loadcode in JavaScript.Generally, a module will contain code that encapsulatesa specific functionality. The module will expose this functionality to the restof the application by defining a series of exports that other parts of thesystem can then import.

The core module for Angular 4 for instanceis called ‘angular2/core’ andit 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 functionwith the AppModule as argument.Somethings we need to note here are:·        The ‘@angular/platform-browser-dynamic’ bootstrapper tells us that Angular 4 is platformagnostic. That is, you can run itin the browser, but you can also run it on a web worker or in the server usingdifferent bootstrappers.·        Noticehow we import modules in a different way, Angular 2 modules are imported by name, andapplication components are imported using relative paths.Calling the bootstrapModule function with the AppModule asargument tells Angular that this module is the main module for yourapplication. Angular 2 ModulesAngular 2 modules and the new NgModule decorator allow us to declare inone place all the dependencies and components of our application without theneed to do it on a per-component basis . a higher level module to wrap ES6modules that are all about developer ergonomics.

 The NgModule decorator takes an object with the following information:·        an imports array where youdeclare your module dependencies, for instance, browser, forms, routing orhttp. The BrowserModule we are using abovecontains all the dependencies necessary to run Angular 2 on a browser.·        a declarations array where youdeclare the components and directives that belong to the current module.·        a bootstrap array thatidentifies the root component that Angular 2 should use to bootstrap yourapplication.In this example we import an AppComponent component from the app.

component.ts moduleand set it as the root of our application. But What is a Component?The component is thecore building block of Angular 2 applications.

It represents a reusable pieceof UI that is usually depicted by a custom html element.A component is self contained and is constituted by at least apiece of html code that is known as template, a class that encapsulates the data andinteractions available to that template, and the aforementioned html elementalso known selector.The AppComponent looks like this: It has an AppComponent class that is decorated by somemetadata in the form a TypeScript decorator @Component which binds the class to itstemplate, its styles and the app-root selector (Can youremember the  elementfrom the index.

html file?).This metadata tellsAngular 2 that whenever you see an  html element you should render thetemplate 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 whateverit decorates.

In this case, the Component decorator attaches some metadata tothe AppComponent class. If you open component.html file you`ll see title variable in a h1tag 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 thecomponent. Indeed, if you run ng serve you can see how the browserrenders the text app works! inside an h1 element.If you take a look backat the AppComponent definition and at your project structure you’llrealize that the Angular CLI follows a convention when creatingcomponents:·        All files for a given component are placed within the samefolder named like the component itself (in this case app)·        These files are named with app.component and have differentextensions based on their function:o   app.component.

ts forthe component itselfo   app.component.html forthe templateo   app.component.scss forthe stylesNow let’s do a quicktest 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 WarsPPlz!!!!!. If younow save the file, your browser should automagically refresh itself and youshould be able to see the Star Wars PPlz!!! as the title of your app (If youclosed your browser just open it again and if you stopped the developmentserver then remember to run ng serve –open to start it again and see yourchanges). Classes in JavaScript??ES6 brought classes to JavaScriptamongst a host of other features.

If you are a software developer with a strongtyped language as background this will probably be great news for you.Don’t befooled though, JavaScript classes are just syntactic sugar over the existingprototypical inheritance model. If you want to know more about ES6 classes read this article. And TypeScript adds even more greatfeatures to classes.

 Your First Component, Listing ItemsThe Angular CLI has somethingthat we call generators that let you scaffold parts of your application foryou. For instance, you can use the following command to create an component:ng generate interfacepersonThe result of running this command is a user.ts file inyour app folder:Now let’s add some properties that are representative of a userType AnnotationsTypeScript let’s you add type annotationto your variable and function declarations. This helps you with better toolinglike intellisense and to catch type errors.Now that we have defined the core object of our domain modellet’s create our very first component: the UserListComponent. Againt we takeadvantage of the Angular CLI and type thefollowing:ng generate component–inline-template user-list This will generate a newfolder 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 anexternal 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?Bydefault, when you create a new app with the angular CLI all your new components will beprefixed with the app prefix. That’s because the custom elements standardrequires custom components to be named with at least two letters separated by adash to avoid conflicting with built-in browser elements like p, section, bodyand head.You canchange 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 acomponent that we can render using the  element. Indeed, you canappreciate how the Angular CLIcreates a dummy template so you can testthat the component works right away. But we still need to do some changesbefore we can display a list of Star Wars celebrities.The next thing thatwe’ll do is to expose a people property with an array of Person with the mighty Luke, Darth Vaderand Solo.And now we’ll update its template so that we can represent a list ofstar wars people.

Just like ng-repeat in AngularJS, Angular 2 providesa repeaterdirective that let’s usrepeat a part of a template: *ngFor:The * before the ngFor denotes the fact that *ngFor is what is called a structuraldirective, a directive that is going to affect the DOM in some way adding orremoving elements to it. Soon you’ll notice how Angular 2 uses a lot of thesecues in their syntax to convey a specific meaning and help you learn andunderstand what the different directives and parts of the framework do.The let person creates a localtemplate variable thatcontains 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 greatfeature of ES6 that let’s you write multiline strings natively and insert any expressiondirectly within a string with a very straightforward syntax. Now we can update our AppComponent to display the list of StarWarspeople.

We only need to update the app.component.html template: And voilà!!!!! It automagically works! (again checkthe browser for an update or run ng serve -o).Once thing that isinteresting to mention is that if you had followed the previous steps but youhad created the new component with your bare hands it would not haveworked. Why is that? That’sbecause the AngularCLI does a lot ofthings for you in the background. For instance, when we created the componentbefore, the CLI not only created the component itself but it also wired it upso we could use it in our application.Indeed, in order to beable to use a component within another component you need to make yourapplication aware of it. You can do that in the app.

module.ts file, that is, in your Angular 2module. If you take a look at this file you’ll discover the following:Exactly! The Angular CLI has wired it upfor you and saves you the need from remembering to do it yourself.