Angular JS - KNOWARTH
2 likes384 views
This document is a slide presentation on AngularJS that covers: installing and running a basic AngularJS application; understanding the MVC architecture and how models, views, and controllers work; working with models including using the $http service to retrieve JSON data and filters; dividing an app into partials using the $routeProvider service; and includes references for additional learning. The presentation provides an introduction to AngularJS and the key concepts needed to build single page applications using this JavaScript framework.
Angular JS - KNOWARTH
- 1. SLIDE TITLE ▪ Click to edit Master text styles ▪ Second level ▪ Third level ▪ Fourth level ▪ Fifth level By Jay Gajjar Angular JS © 2014 KNOWARTH
- 2. SLIDE TITLE ▪ Click to edit Master text styles ▪ Second level ▪ Third level ▪ Fourth level ▪ Fifth level ▪ Introduction ▪ Installing & running a basic application ▪ Understading the MVC architecture ▪ Working with Models – $http service to read a JSON file – Filtering content using directives ▪ Dividing your App into Partials – Working with the $routeProvider service Agenda 2© 2014 KNOWARTH
- 3. SLIDE TITLE ▪ Click to edit Master text styles ▪ Second level ▪ Third level ▪ Fourth level ▪ Fifth level 3 Introduction © 2014 KNOWARTH
- 4. SLIDE TITLE ▪ Click to edit Master text styles ▪ Second level ▪ Third level ▪ Fourth level ▪ Fifth level AngularJS is a JavaScript framework for creating single page web applications. A framework implies that instead of writing code however you want, you change the way you write your applications and follow the standards set by the framework. By doing this, you can take advantage of some of the built-in features and with AngularJS that means templating, filters, two-way data- binding and more. What is AngularJS? 4© 2014 KNOWARTH
- 5. SLIDE TITLE ▪ Click to edit Master text styles ▪ Second level ▪ Third level ▪ Fourth level ▪ Fifth level 5 Installing & Running a Basic Application © 2014 KNOWARTH
- 6. SLIDE TITLE ▪ Click to edit Master text styles ▪ Second level ▪ Third level ▪ Fourth level ▪ Fifth level You can go into the AngularJS.org website, and you have a couple of options as to where to get the library from. Presentation/1Degree.html (“{{“ and “}}”) : Expressions to return variable values Installing & running a basic application 6© 2014 KNOWARTH
- 7. SLIDE TITLE ▪ Click to edit Master text styles ▪ Second level ▪ Third level ▪ Fourth level ▪ Fifth level ng-app : directive is responsible for bootstrapping your app defining its scope. ng-controller: directive defines which controller will be in charge of your view. ng-repeat: directive is one of the most commonly used and serves to define your template scope when looping through collections. Understanding Basic Directives 7© 2014 KNOWARTH
- 8. SLIDE TITLE ▪ Click to edit Master text styles ▪ Second level ▪ Third level ▪ Fourth level ▪ Fifth level 8© 2014 KNOWARTH Understading The MVC Architecture
- 9. SLIDE TITLE ▪ Click to edit Master text styles ▪ Second level ▪ Third level ▪ Fourth level ▪ Fifth level 9© 2014 KNOWARTH Understanding the MVC architecture ▪ Model – Data from either a static JSON file, or a database like SQL. ▪ View – Display the data you have stored in a model, you can create an Angular view. ▪ Controller – The Javascript that links your view to your model. Presentation/2Degree.html
- 10. SLIDE TITLE ▪ Click to edit Master text styles ▪ Second level ▪ Third level ▪ Fourth level ▪ Fifth level 10© 2014 KNOWARTH Working With Models
- 11. SLIDE TITLE ▪ Click to edit Master text styles ▪ Second level ▪ Third level ▪ Fourth level ▪ Fifth level 11© 2014 KNOWARTH $http service to read a JSON file Access to HTTP service and ask it to get some information from a JSON file. So our JSON file is in the js folder and its called data.json. Presentation/3Degree.html
- 12. SLIDE TITLE ▪ Click to edit Master text styles ▪ Second level ▪ Third level ▪ Fourth level ▪ Fifth level 12© 2014 KNOWARTH Filtering content using directives We can easily add a filter to one of these pieces of data by just typing in a pipe character, which right above one of the slashes on your keyboard. https://docs.angularjs.org/guide/filter Presentation/4Degree.html
- 13. SLIDE TITLE ▪ Click to edit Master text styles ▪ Second level ▪ Third level ▪ Fourth level ▪ Fifth level 13 Dividing Your App Into Partials © 2014 KNOWARTH
- 14. SLIDE TITLE ▪ Click to edit Master text styles ▪ Second level ▪ Third level ▪ Fourth level ▪ Fifth level 14© 2014 KNOWARTH $routeProvider service Presentation/5/5Degree.html The $route service is usually used in combination with the ngView directive. The role of the ngView directive is to include the view template for the current route into the layout template.
- 15. SLIDE TITLE ▪ Click to edit Master text styles ▪ Second level ▪ Third level ▪ Fourth level ▪ Fifth level http://www.lynda.com/AngularJS-tutorials/Up-Running- AngularJS/154414-2.html http://www.toptal.com/angular-js/a-step-by-step-guide- to-your-first-angularjs-app References 15© 2014 KNOWARTH
- 16. SLIDE TITLE ▪ Click to edit Master text styles ▪ Second level ▪ Third level ▪ Fourth level ▪ Fifth level QUERY & QUESTIONS 16© 2014 KNOWARTH
- 17. SLIDE TITLE ▪ Click to edit Master text styles ▪ Second level ▪ Third level ▪ Fourth level ▪ Fifth level THANK YOU © 2014 KNOWARTH