Introduction to Angular
The Angular framework was pretty strange to me when I first tried using it. I was pretty comfortable with using vanilla JavaScript and jQuery, alongside CSS and HTML, but hadn’t worked with too many frameworks.
At first, I struggled to understand how to do DOM manipulation and how to pass data between components. Then, something clicked, and suddenly I understood: you have to do it the Angular way!
Why Angular?
DEVELOP ACROSS ALL PLATFORMS
Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile, and native desktop.
SPEED & PERFORMANCE
Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering. Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model.
INCREDIBLE TOOLING
Build features quickly with simple, declarative templates. Extend the template language with your own components and use a wide array of existing components. All this comes together so you can focus on building amazing apps rather than trying to make the code work.
LOVED BY MILLIONS
From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google’s largest applications.
Installing Angular CLI
The Angular CLI will make it easy to add new components and make sure your project is correctly configured. To install it through NPM use this line.
npm install -g @angular/cliStarting a project
Once you download the Angular CLI, all you set up framework is enter this command in your terminal:
ng new projectName
// or if you want to use sass, use this line:
ng new projectName --style=scssSee what I mean about the highway? But don’t worry about all of those files yet. Start by looking into the src/app folder. It should look something like this:
...
src/
app/
-app.component.html
-app.component.css
-app.component.spec.ts
-app.component.ts
-app.module.ts
...Notice that the extension is .ts for most of the files? Angular is written in TypeScript, which is a more strictly typed version of JavaScript. Basically it helps prevent bugs by being more “strict” about how you declare variables, among other things. For example, in TypeScript you also declare the data type for a variable like this:
var myString: string = "hello world"Components
Something else you might have noticed is that most of these app files have the word component in them. Components are like a microcosm of a the front-end of a website. They have their own styling, html, and TS files, which are inherently connected. Don’t worry about the app.component.spec.ts file yet (that is used for automated testing, which is a nice feature, but not essential in this intro).
Check out your app.component.ts file, it should look like this:
import { Component } from '@angular/core';@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}The selector is the tag you will use when you want to include a component somewhere. Go up a folder and you will see this in the index.html file:
<app-root></app-root>Conclusion
In this Angular introduction, we’ve discussed Angular, a client-side framework supporting multiple platforms. We’ve covered some of its features and concepts, and also have seen how it differs from AngularJS, the previous version of the framework.
Hopefully, you’ve now got a basic idea of what Angular is and in what cases it may come in handy!
Sources: angular.io – sitepoint.com – medium.com