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.
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.
Related Topics :