Home / Web Development Technologies / AngularJS / AngularJs Templates and Data Binding

AngularJs Templates and Data Binding

AngularJs Templates and Data Binding

AngularJS Templates and Data Binding

Templates in Angular applications are just HTML documents that we load from the server or define in a <script> tag like any other static resource. You define your UI in the template, using standard HTML plus Angular directives where you need UI com‐ponents.
Once in the web browser, Angular expands these templates into your full application by merging your template with data.

         <div ng-repeat=”item in items”>
                 <span>{{item.title}}</span>

         </div>

Here, it stamps out a copy of the outer <div>, and everything inside it, once for every element in the items array.

So where does this data come from? In our shopping cart example, we just defined it in an array in our code. This works great for when you’re starting to build a UI and just want to test out how it will work. Most apps, however, will use some persistent data  source on the server. Your app in the browser connects to your server and requests whatever it needs for the page the user is on, and Angular merges it with your template. The basic startup flow looks like this:

1. A user requests the first page of your application.

2. The user’s browser makes an HTTP connection to your server and loads the in dex.html page containing your template.

3. Angular loads into the page, waits for the page to be fully loaded, and then looks for ng-app to define its template boundaries.

4. Angular traverses the template and looks for directives and bindings. This results in registration of listeners and DOM manipulation, as well as fetching initial data from the server. The end result of this work is that the app is bootstrapped and the template is converted into view as a DOM.

5. You connect to your server to load additional data you need to show the user as needed.

Steps 1 through 3 are standard for every Angular app. It’s in steps 4 and 5 that you have choices. These steps can happen synchronously or asynchronously. For performance, the data your app needs to display to the user on the first view can come down with the HTML template to avoid multiple requests.

By structuring your application with Angular, your application’s templates are kept sep‐arate from the data that populates them. The result of this is that these templates are now cacheable. Only new data need come down to the browser after the first load. Just as with JavaScript, images, CSS, and other resources, caching these templates can give your application even better performance.

Related Topics :

What is AngularJS

Angular-JS Dependency Injection

Promises In An Angular-Js

Angular-JS Lists Tables and Other Repeated Elements

Check Also

AngularJS and Laravel Blade

How to use AngularJS and Laravel Blade together

How to use AngularJS and Laravel Blade together In this article I will show you …

Ajax Pagination Using Laravel

How to Create an Ajax Pagination Using Laravel

In this article I will demonstrate one way to create an Ajax pagionation using Laravel …

Leave a Reply

Your email address will not be published. Required fields are marked *