Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Single page application 04


Published on

How to build single page application by using AngularJS

Published in: Software
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ♣♣♣
    Are you sure you want to  Yes  No
    Your message goes here

Single page application 04

  2. 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. 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. 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. 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/{{}}'>{{}}</a> </li> </ul>
  6. 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=''>
  7. 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. 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. 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. 10. NEXT?