Single page application 04
Download as PPTX, PDF1 like642 views
This document discusses various Angular templates and data binding techniques. Templates in Angular are HTML documents that define the UI, using directives for components. Data populates the templates but is kept separate. Only new data needs to be sent after initial load. Data can be displayed using interpolation or binding. Forms use ng-model to bind values. Lists can be repeated with ng-repeat. Elements can be conditionally shown or hidden with ng-show/ng-hide. Classes are dynamically applied with ng-class. Images and links use ng-src and ng-href for binding. The $watch method allows observing model changes.
Single page application 04
- 1. SINGLE PAGE APPLICATION 4 ENG. ISMAIL ENJRENY
- 2. Templates and Data Binding • Templates in Angular applications are just HTML documents. • You define your UI in the template, using standard HTML plus Angular directives where you need UI components. • By structuring your application with angular, your application’s templates are kept separate from the data that populates them. • Only new data need come down to the browser after the first load
- 3. Displaying Text • You can use <P>{{greeting}}</p> • Or you can use <P ng-bind="greeting"></p> • So why would you use one form over the other? • With the double-curly syntax, on the very first page load of your application, there’s a chance that your user will see the un-rendered template before Angular has a chance to replace the curlies with your data
- 4. Form Inputs • <input type="text" ng-model="fullname" /> hello {{fullname}}! • <input type="checkbox" ng-model="color" /> color {{color}}! • For most inline event handlers, Angular has an equivalent in the form of ng- eventhandler="expression" where eventhandler would be replaced by click, mousedown, change, and so on • <div ng-click="dosomething()">...</div>
- 5. Lists, Tables, and other repeated elements • ng-repeat: The ng-repeat will make a copy of all of the HTML inside the tag, including the tag it’s placed on <ul ng-controller=''> <li ng-repeat='student in students'> <a href='/student/view/{{student.id}}'>{{student.name}}</a> </li> </ul>
- 6. Hiding and Showing • ng-show: will show its element when its expression is true and hide it when false • ng-hide: will hide its element when its expression is true and show it when false <ul ng-show='menustate.show'>
- 7. CSS Classes • ng-class: {class1: Boolean expression, class2: Boolean expression, …} • If the expression evaluates to a string, the string should be one or more space- delimited class names. • If the expression evaluates to an array, each element of the array should be a string that is one or more space-delimited class names. • If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.
- 8. SRC & HREF • When data binding to an <img> or <a> tag, the obvious path of using {{ }} in the src or href attributes won’t work well. Because browsers are aggressive about loading images parallel to other content, Angular doesn’t get a chance to intercept data binding requests. <img ng-src="/images/cats/{{favoritecat}}"> <a ng-href="/shop/category={{numberofballoons}}">hello world</a>
- 9. Observing Model Changes with $watch • $watch(watchFn, watchAction, deepWatch) • watchFn: This parameter is a string with an Angular expression or a function that returns the current value of the model that you want to watch • watchAction: This is the function or expression to be called when the watchFn changes • deepWatch: If set to true, this optional boolean parameter tells Angular to examine each property within the watched object for changes
- 10. NEXT?