Skip to main content

Posts

Showing posts with the label angular-concept

Angular Architecture - Tools and Techniques

Next steps: tools and techniques Once you have understood the basic building blocks, you can begin to learn more about the features and tools that are available to help you develop and deliver Angular applications. Angular provides a lot more features and services that are covered in this documentation. Responsive programming tools Lifecycle hooks : Tap into key moments in the lifetime of a component, from its creation to its destruction, by implementing the lifecycle hook interfaces. Observables and event processing : How to use observables with components and services to publish and subscribe to messages of any type, such as user-interaction events and asynchronous operation results. Client-server interaction tools HTTP : Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client. Server-side Rendering : Angular Universal generates static application pages on the server through server-side rendering (SSR). This allows yo...

Angular Architecture - Intro to Services and DI

Introduction to services and dependency injection Service  is a broad category encompassing any value, function, or feature that an app needs. A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well.  Angular distinguishes components from services in order to increase modularity and reusability. By separating a component's view-related functionality from other kinds of processing, you can make your component classes lean and efficient. Ideally, a component's job is to enable the user experience and nothing more. It should present properties and methods for data binding, in order to mediate between the view (rendered by the template) and the application logic (which often includes some notion of a  model ). A component should not need to define things like how to fetch data from the server, validate user input, or log directly to the console. Instead, it can delegate such tasks to services. By defining...

Angular Architecture - Intro to Components

Introduction to components A  component  controls a patch of screen called a  view . For example, individual components define and control each of the following views from the  Tutorial : The app root with the navigation links. The list of heroes. The hero editor. You define a component's application logic—what it does to support the view—inside a class. The class interacts with the view through an API of properties and methods. For example, the  HeroListComponent  has a  heroes  property that returns an array of heroes that it acquires from a service.  HeroListComponent  also has a  selectHero()  method that sets a  selectedHero  property when the user clicks to choose a hero from that list. src/app/hero-list.component.ts (class) content_copy export class HeroListComponent implements OnInit { heroes : Hero []; selectedHero : Hero ; constructor ( private service : HeroService ) { ...