Core Concepts for App Development in Angular

Published in

Upstate Interactive

6 min readJul 28, 2017

In my last post, I showed you how to get your Angular app up and running locally in two minutes, using the Angular CLI. If you haven’t seen my short video, be sure to check it out! Now that we have a project started, where do you go from here? Let’s explore the core functionality of an Angular app, along with some resources you can use to dive in further.

Angular Anatomy:

The starter project downloads a lot of files, the majority of which you won’t need to use. You should get yourself acquainted with the core structure.

The project code lives in src/app. You’ll spend most of your time in here creating components, services, models, etc. I recommend using the built-in tooling, like the Angular CLI we used to bootstrap our app. You can use simple terminal commands to generate your application files efficiently.

App.module — this is the root module, which organizes and compiles the rest of the application, making sense of how the application parts fit together and their global accessibility.

It’s important to understand the properties inside the NgModule decorator (ex. Declarations, Imports, Exports, Providers, Bootstrap) because they will need to be updated as your application grows. For example, when you create a new component it needs an import statement and to be included in the imports array.

Resources: Angular has thorough documentation on this topic

Bootstrapping

Architecture

ngModule

AppComponent (app.component.ts, app.component.html, app.component.css) — this is the root component. This will start out as the main view of your application. It’s not maintainable to hold all the app’s functionality in one component, so it should act as the shell of your application, which will hold subcomponents that focus on specific tasks (see more about components below).

In the AppComponent Typescript file, you can see that AppComponent uses a specific selector to be used as a view outlet, the template is set to AppComponent’s HTML file, and the stylesheet is set to AppComponent’s CSS sheet. These are customizable properties.

One step out of the src/app folder, the src/ folder has core files like index.html and main.ts. And your root folder has core folders and files like Node_Modules and Package.json that store your npm packages, and manage your package dependencies.

2. Components and data-binding:

Components are the building blocks of Angular applications. They are portions of the view (defined by their own selector) that combine elements with logic. They are typically made up of their own html template, css stylesheet and typescript or javascript file.

A fundamental concept to understand when working with components is how to handle data within your app. Data-binding is used to show your component’s data on a view. You can get an overview by learning about one-way and two-way data-binding, in addition to Angular’s built-in directives.

Resources:

ngBook 2

Angular documentation: displaying data, attribute-directives, structural-directives, API list

Short video on data-binding

3. Navigation:

Angular app navigation takes a little bit of configuration, but otherwise it’s pretty straightforward. The main steps include:

Define root domain: Add a <base href="/"> tag to the head section of your root domain html file. This is typically added to the src/index.html file.
Router imports: Import RouterModule and Routes into your AppModule from the Angular Router library package.

import { RouterModule, Routes } from '@angular/router';

Define and configure the routes: Create your Route definitions in an array, mapping a url path with a specific component. Then, import the RouterModule.forRoot method into your AppModule imports array, and configure it by passing it your Routes array.
Router outlet: Use the <router-outlet> tag in your component template
Router link: Use the <router-link> directive to set up user navigation

You can follow the Angular docs guide here. Once you establish a base for Angular routing, there are some advanced routing capabilities and animations to look into.

4. Services: Services are essentially classes that can be called from other components, directives or services, to increase efficiency and maintainability of your application.

Services are fundamental to an Angular application and keep it DRY, because they have specific functionality that can be called from one main source, rather than repeating the same function in different locations. Components should focus on logic that is specific to the UI, while services should hold functions that perform specific tasks like HTTP calls.

5. HTTP Requests: Angular handles HTTP requests by creating an injectable HTTP class, which has its own methods.

HTTP requests are made when we make requests for data (to a database or API) — Because of the complexity of application data today, Angular has made a change to how it handles the response data, moving towards Reactive architecture and preferring RxJS observables over promises.

Observables are asynchronous streams of data that emit over time. Rather than using promises, which send back the response as a one-time occurrence, you can subscribe to an observable and automatically receive the new data coming in. For example, imagine if you wanted to get continuous stock market updates.

Resources: I found the following short video to have simple and helpful explanation.

Angular docs

RxJS

6. Native mobile development: The beauty of Angular, the latest release in particular, is the framework’s versatility for high performance experiences across web and mobile platforms.

NativeScript is an open-source framework for developing native iOS and Android applications using Javascript and CSS. While Angular was working on a re-architected version of their framework, they partnered with NativeScript, to allow Angular to work within NativeScript applications. This means that native, cross-platform mobile apps and web apps can be developed from one framework, with the performance of native code and by using JavaScript and/or TypeScript and CSS instead of Swift or Objective C.

Resources: I recommend the NativeScript documentation, tutorial and slack community. I also found the NativeScript chapter in ngBook2 to be very helpful.

More Resources:

Docs

Github

Community: