In
the post What is MVC Architecture? we saw the various layers of MVC architecture and we saw that that model is the representation
of data in the MVC architecture. In this post we shall see more in detail about
views in AngularJS MVC architecture.
In a simple application the HTML page is the view layer, data from the model object is bound to the view layer using ding directives and functions from the controller, AngularJS also supports single page applications which can support multiple views, in these cases we will just have a single HTML page which can display multiple views dynamically, this is made possible using the ng-view and ng-template directives.
The ng-view is a placeholder directive defined on the main page, it indicates that this div/panel will be replaced with different views at run-time based on the routing defined on the page URL.
Below is the syntax for using ng-view directive.
<div ng-view=""></div>
<ng-view></ng-view>
As we see above ng-view directive can be represented as a tag or added as an attribute to the div tag. At runtime the content of this div/panel will be replaced with content from the current Route.
In a simple application the HTML page is the view layer, data from the model object is bound to the view layer using ding directives and functions from the controller, AngularJS also supports single page applications which can support multiple views, in these cases we will just have a single HTML page which can display multiple views dynamically, this is made possible using the ng-view and ng-template directives.
The ng-view is a placeholder directive defined on the main page, it indicates that this div/panel will be replaced with different views at run-time based on the routing defined on the page URL.
Below is the syntax for using ng-view directive.
<div ng-view=""></div>
<ng-view></ng-view>
As we see above ng-view directive can be represented as a tag or added as an attribute to the div tag. At runtime the content of this div/panel will be replaced with content from the current Route.
No comments:
Post a Comment