Difference between views and templateUrl in AngularJS
In this article, we will see what is Views and TemplateUrl in AngularJS, along with understanding their basic usage through the code snippets & finally see some differences between them.
A Views is anything that a user sees on a screen and is used to set up multiple views or to target views manually. Angular uses views to connect with the platform. In Angular for each element, there is a view corresponding to that element.
Types of Views: The different types of Views are described below:
1. View Containers: View Container holds host as well as embedded views. And these are commonly referred to as views. Each @Component class registers a view container with Angular. Another type of reference for view container is ViewContainerRef it represents a container where one or more views can be connected.
Example: This example explains the basic use of the View Container in AngularJS.
2. Host Views: This type of view hosts dynamic components. Host views are generated by the Angular compiler for every component which is specified in either bootstrap or entryComponent module. Now each host view is responsible for generating a component view when factory.createComponent is called. Host views are attached with DOM elements.
Example: In this example, for any host view to work, a view container that holds views must exist. We have two view containers present here <app-example></app-example> and <ng-container></ng-container>.
3. Embedded Views: These types of views connect with other views with no added input. Basically, these views are created for view nodes specified in the ng-template. Unlike host views embedded views attach to other views.
The main difference between embedded and host views is that embedded views are particularly linked to a template whereas host views are linked to components.
Example: This example explains the basic use of Embedded Views in AngularJS.
TemplateUrl: It is a property in Angular Component Decorator. External Template uses templateUrl property to access the HTML file which is defined in a separate location, and the templateUrl does the work of taking the path of that file. Let’s understand templateUrl with an example.
Example: This example explains the basic use of the TemplateUrl in AngularJS
Difference between Views & TamplateUrl:
Anything that a user sees on the screen.
A property used by external templates.
Used for creating Single Page Applications.
Used to fetch the path of the external HTML file.
Used to set up multiple views.
Does not set up multiple views.
It doesn’t take file references.
It takes file references.
Please Login to comment...