DOCSLIB.ORG

Angularjs by Example.Pdf

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Angularjs by Example.Pdf www.it-ebooks.info AngularJS by Example Learn AngularJS by creating your own apps, using practical examples which you can use and adapt Chandermani BIRMINGHAM - MUMBAI www.it-ebooks.info AngularJS by Example Copyright © 2015 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: March 2015 Production reference: 2030315 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-78355-381-5 www.packtpub.com www.it-ebooks.info Credits Author Project Coordinator Chandermani Aboli Ambardekar Reviewers Proofreaders Idan Cohen Ting Baker Ashutosh Das Simran Bhogal Prasanna Gautam Stephen Copestake Ruoyu Sun Jurgen Van de Moere Indexer Priya Sane Commissioning Editor Ed Gordon Graphics Disha Haria Acquisition Editor Rebecca Youé Production Coordinator Conidon Miranda Content Development Editor Sriram Neelakantan Cover Work Conidon Miranda Technical Editors Edwin Moses Shruti Rawool Copy Editors Roshni Banerjee Neha Karnani Merilyn Pereira www.it-ebooks.info About the Author Chandermani is a software craftsman with a passion for technology and is an expert on the web stack. With more than a decade of experience under his belt, he has architected, designed, and developed solutions of all shapes and sizes on the Microsoft platform. He never believed JavaScript could be a great platform for app development until he saw Angular. Such is his love for this framework that every engagement he is part of has an Angular footprint. Being an early adopter of the Angular framework, he tries to support the platform in every possible way, whether by writing blog posts on various Angular topics or helping his fellow developers on Stack Overflow, where he is often seen answering questions on AngularJS channels. A former MSFT employee, he now works for Technovert, where he leads a bunch of awesome developers who build cloud-scale web applications using AngularJS and other new-age frameworks. Writing this book has just been a surreal experience and I would like to thank my Technovert family who supported me in all possible ways, be it helping me with sample apps, reviewing the content, or offloading some of my professional commitments to make sure I get enough time to write the book. I especially want to thank Vijay Yalamanchili, who inspired me to take up this endeavor and also made sure there are no impediments while I juggle my professional and book writing commitments. And finally, I want to express my gratitude toward my family. I know your blessings are always with me. www.it-ebooks.info About the Reviewers Idan Cohen is a full-stack web developer at HP Software. He has over a decade of experience in large-scale projects on an enterprise level. He has an unquenchable thirst for cutting-edge technologies and an insatiable hunger for seamless user experience. Since his military service in an elite technological unit (8200), he has worked with a variety of companies and organizations in the fields of media, telecommunication, and business services. Ashutosh Das is mainly a backend developer from Bangladesh with experiences of working with Django, Node.js, Laravel, and so on, as well as works with Angular. js. He spends his spare time in GitHub. He works as a freelancer and has a part-time job. He is also a reviewer of the book Angularjs UI development, Packt Publishing. Prasanna Gautam is an engineer who wears many different hats depending on the occasion. He's worked with various web frameworks over the years for both personal and professional projects and finally settled on AngularJS. When this book came up, he wanted to contribute to it from his experience working on AngularJS projects. www.it-ebooks.info Ruoyu Sun is a designer and developer living in Hong Kong. He is passionate about programming and has been contributing to several open source projects. He founded several tech start-ups using a variety of technologies before going into the industry. He is the author of the book Designing for XOOPS, O'Reilly Media. I would like to thank all my friends and family who have always supported me. Jurgen Van de Moere, born in 1978, grew up in Evergem, Belgium with his parents, sister, and pets. At the age of 6, he started helping his dad, who owned a computer shop, with assembling computers for clients. While his friends were playing computer games, Jurgen was rather fascinated by writing custom scripts and programs to solve problems that his dad's clients were dealing with. After graduating in latin-mathematics from Sint-Lievenscollege in Ghent, Jurgen continued his education at Ghent University, where he studied computer science. His Unix username at university was "jvandemo", the nickname he still goes by on the Internet today. In 1999, Jurgen started his professional career at Infoworld. After years of hard work and dedication as a developer and network engineer, he was awarded various management positions in 2005 and 2006. Being a true developer at heart, he missed writing code, and in 2007, he decided to end his management career to pursue his true passion again: development. Since then, he has been studying and working from his home office in Belgium, where he currently lives with his girlfriend, son, and dogs. In a rapidly evolving world of data, intensive real-time applications, he now focuses on JavaScript-related technologies with a heavy emphasis on AngularJS and Node.js. His many private and public contributions have helped form the foundation of numerous successful projects and companies around the world. If you need help with your project, Jurgen can be reached at [email protected], on his blog at http://www.jvandemo.com, or on Twitter at https://twitter.com/ jvandemo. www.it-ebooks.info www.PacktPub.com Support files, eBooks, discount offers, and more For support files and downloads related to your book, please visit www.PacktPub.com. Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub. com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. TM https://www2.packtpub.com/books/subscription/packtlib Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books. Why subscribe? • Fully searchable across every book published by Packt • Copy and paste, print, and bookmark content • On demand and accessible via a web browser Free access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view 9 entirely free books. Simply use your login credentials for immediate access. www.it-ebooks.info www.it-ebooks.info Table of Contents Preface 1 Chapter 1: Getting Started 7 The basics of Model View Controller 8 The customary Hello Angular app (Guess the Number!) 8 Setting up a development server 9 Building Guess the Number! 10 The app model 10 The controller 12 The app view 13 Interpolation 15 Directives 16 Expressions 18 AngularJS bindings 20 Revisiting the controller 23 Scope 24 App bootstrapping 27 Tools 29 Resources 30 Summary 30 Chapter 2: Building Our First App – 7 Minute Workout 33 What is 7 Minute Workout? 34 Downloading the codebase 35 Code organization 36 Organizing the JavaScript code 36 The 7 Minute Workout model 39 Adding app modules 42 www.it-ebooks.info Table of Contents The app controller 42 Dependency injection 43 Dependency Injection 101 44 Dependency injection in Angular 45 Controller implementations 47 Tracking the duration of an exercise using the $interval service 50 Verifying the implementation 51 Implementing exercise transitions 54 Using $watch to watch the model's changes 54 Exploring $watch 55 Implementing transitions using $watch 57 Using the AngularJS Promise API for exercise transitions 58 The basics of promises 58 The 7 Minute Workout view 61 Image path binding with ng-src 62 Using ng-style with the Bootstrap progress bar 63 Adding start and finish pages 64 Understanding SPAs 64 View layouts for SPAs using ng-view 64 Defining 7 Minute Workout routes 65 The config/run phase and module initialization 66 View navigation in the controller using $location 69 Working with the $location service 70 Learning more about an exercise 71 Adding descriptions and video panels 72 Working with ng-include 75 Working with ng-repeat 77 Displaying the remaining workout
Load more

Recommended publications
  • ΔΙΠΛΩΜΑΤΙΚΗ ΕΡΓΑΣΙΑ Backbone, Angularjs
    ΕΘΝΙΚΟ ΜΕΤΣΟΒΙΟ ΠΟΛΥΤΕΧΝΕΙΟ ΣΧΟΛΗ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ ΚΑΙ ΜΗΧΑΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ ΤΟΜΕΑΣ ΕΠΙΚΟΙΝΩΝΙΩΝ, ΗΛΕΚΤΡΟΝΙΚΗΣ ΚΑΙ ΣΥΣΤΗΜΑΤΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ Backbone, AngularJS, Ember: Συγκριτική ανάλυση και σενάρια χρήσης JavaScript frameworks ΔΙΠΛΩΜΑΤΙΚΗ ΕΡΓΑΣΙΑ Χρήστος Παπουτσάκης Επιβλέπων : Θεοδώρα Βαρβαρίγου Καθηγήτρια ΕΜΠ Αθήνα, Οκτώβριος 2017 ΕΘΝΙΚΟ ΜΕΤΣΟΒΙΟ ΠΟΛΥΤΕΧΝΕΙΟ ΣΧΟΛΗ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ ΚΑΙ ΜΗΧΑΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ ΤΟΜΕΑΣ ΕΠΙΚΟΙΝΩΝΙΩΝ, ΗΛΕΚΤΡΟΝΙΚΗΣ ΚΑΙ ΣΥΣΤΗΜΑΤΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ Backbone, AngularJS, Ember: Συγκριτική ανάλυση και σενάρια χρήσης JavaScript frameworks ΔΙΠΛΩΜΑΤΙΚΗ ΕΡΓΑΣΙΑ Χρήστος Παπουτσάκης Επιβλέπων : Θεοδώρα Βαρβαρίγου Καθηγήτρια ΕΜΠ Εγκρίθηκε από την τριμελή εξεταστική επιτροπή την 16η Οκτωβρίου 2017. ............................ ............................ ............................ Θεοδώρα Βαρβαρίγου Εμμανουήλ Βαρβαρίγος Δημήτριος Ασκούνης Καθηγήτρια ΕΜΠ Καθηγητής ΕΜΠ Καθηγητής ΕΜΠ Αθήνα, Οκτώβριος 2017 ................................... Χρήστος Παπουτσάκης Διπλωματούχος Ηλεκτρολόγος Μηχανικός και Μηχανικός Υπολογιστών Ε.Μ.Π. Copyright © Χρήστος Παπουτσάκης, 2017 Με επιφύλαξη παντός δικαιώματος. All rights reserved. Απαγορεύεται η αντιγραφή, αποθήκευση και διανομή της παρούσας εργασίας, εξ ολοκλήρου ή τμήματος αυτής, για εμπορικό σκοπό. Επιτρέπεται η ανατύπωση, αποθήκευση και διανομή για σκοπό μη κερδοσκοπικό, εκπαιδευτικής ή ερευνητικής φύσης, υπό την προϋπόθεση να αναφέρεται η πηγή προέλευσης και να διατηρείται το παρόν μήνυμα. Ερωτήματα που αφορούν τη χρήση της εργασίας για κερδοσκοπικό σκοπό πρέπει να απευθύνονται
    [Show full text]
  • Web-Based Wireless Sensor Network Platform
    WEB-BASED WIRELESS SENSOR NETWORK PLATFORM Pérez Cano, José Antonio Academic course 2014-2015 Supervisor: Gabriel Martins BACHELOR’S DEGREE IN AUDIOVISUAL SYSTEMS ENGINEERING Final Degree Project GRAU EN ENGINYERIA EN xxxxxxxxxxxx WEB-BASED WIRELESS SENSOR NETWORK PLATFORM José Antonio Pérez Cano FINAL DEGREE PROJECT Bachelor’s degree in Audiovisual Systems Engineering Polytechnic School – Pompeu Fabra University 2015 Supervisor Gabriel Martins Dias Dedicado a mi familia y amigos. iii Acknowledgement I would like to specially thank my family and friends for supporting me during these recent years of my life, and my supervisors, Toni Adame and Gabriel Martins, for helping me in the development of this project. v Abstract The aim of this project is to design and implement a web-based platform for storing and visualizing the data retrieved by Wireless Sensor Networks (WSNs). This approach is part of the Entomatic project, an European Union (EU) funded plan for addressing a major problem faced by EU Associations of Olive growing Small and Medium-sized Enterprises (SMEs): the Olive fruit fly (Bactrocera oleae). Olive oil trees will feature a series of sensors, mainly consisting of olive fly traps as a way to track its population. Such sensors will output data through a gateway to be finally gathered by the platform proposed in this document. The system presented in this project consists of two parts: (1) a web-server that receives the sensed data and stores them in a database; and (2) a web-application for visualizing the obtained measurements including, among others, map node location, statistics, and charts. Cutting edge web technologies have been used in order to create a modern, yet maintainable and scalable platform.
    [Show full text]
  • A Citizen-Centric and Multi-Curator Document Automation Platform: the Qbox and Further Interoperability Aspects
    A Citizen-Centric and Multi-Curator Document Automation Platform: The qBox and Further Interoperability Aspects Daniel Jose´ Matias Caramujo Thesis to obtain the Master of Science Degree in Information Systems and Computer Engineering Supervisors: Prof. Doutor Alberto Manuel Rodrigues da Silva Prof. Doutor Joao˜ Paulo Pedro Mendes de Sousa Saraiva Examination Committee Chairperson: Prof. Doutor Francisco Joao˜ Duarte Cordeiro Correia dos Santos Supervisor: Prof. Doutor Alberto Manuel Rodrigues da Silva Member of the Committee: Prof. Doutor Andre´ Ferreira Ferrao˜ Couto e Vasconcelos October 2019 Acknowledgments I would like to thank my parents and family for their support and encouragement over all these years, without whom this this project would not be possible. I would also like to acknowledge my dissertation supervisors Prof. Doutor Alberto Silva and Prof. Doutor Joao˜ Saraiva for their insight, support and sharing of knowledge that has made this Thesis possible. Last but not least, to all my friends and colleagues that helped me grow as a person and were always there for me. To each and every one of you, thank you. Abstract Interoperability is an important aspect of complex information systems that have to interact and integrate with a multitude of other systems and services. New interoperability norms and frameworks are being promoted, and in this thesis we discuss some of them in the scope of eGovernment and document automation systems. This thesis explores integration aspects of qDocs, a citizen-centric document automation platform. qDocs aims to make bureaucratic documents (e.g., ID cards, forms, certificates) easily curated by multiple organizations and easily available to citizens.
    [Show full text]
  • Javascript Web Applications
    DIVTAG DEVELOPER MEETUP @ NOV. 12, 2015 JavaScript Web Applications Hiun Kim Computer Science Department, Sejong University Seoul, South Korea <divtag> Computer Research Group We are old, the web as we know.. <divtag> Computer Research Group New Waves of Modern Web <divtag> Computer Research Group <divtag> Computer Research Group Single Page Application Web site that fits on a single web page with the goal of providing a more fuild UX akin to desktop apps - via Wikipedia <divtag> Computer Research Group Single Page Application (cont.) Concepts established circa 2002 (not sure) US Patents 8136109 ( Delivery of data and formatting information to allow client-side manipulation ) <divtag> Computer Research Group Single Page Application (cont.) Provides layout and partial view Every event is related to JavaScript They against the web we know! <divtag> Computer Research Group Enhancing User Experience Proviedes seamless experience through, Reducing round tripping of submission Reducing process of CSS & JavaScript <divtag> Computer Research Group Continuity Page does not reload completely, browser can store state with JavaScript <divtag> Computer Research Group Continuity (cont) Web is not only a document viewer, but data manipulator (Google Spread Sheets) or interactive viewer (Facebook.com ) <divtag> Computer Research Group https://upload.wikimedia.org/wikipedia/commons/c/ce/Bonsack_machine.png Pros Does not require to load whole page, Saving time Seamless user experience <divtag> Computer Research Group http://grannymar.com/wp-content/uploads/2010/03/dscf5587.jpg Cons Not simple, not pure (as definition of today) Often slow for processing Fallback exist but incomplete Sometime impossible <divtag> Computer Research Group Core Mechanism Browser is sandbox JavaScript can manipulate URL and History pushState for creating history <divtag> Computer Research Group Libraries and Frameworks jquery-pjax (pushState + ajax) angularjs ember.js etc.
    [Show full text]