AngularJS maintaining web applications curated course new for 2016

AngularJS Maintaining Web Applications A course in four modules Learn AngularJS and full-stack web development with your Course Guide Shiny Poojary Get up to speed building AngularJS applications, then improve and scale full-stack web applications, using the existing AngularJS framework without the trouble of migrating to Angular To contact your Course Guide Email: shinyp@packtpub.com BIRMINGHAM - MUMBAI Meet Your Course Guide Hello and welcome to this AngularJS – Maintaining Web Applications course You now have a clear pathway from learning AngularJS core features right through to coding full-stack AngularJS web applications! This course has been planned and created for you by me Shiny Poojary – I am your Course Guide, and I am here to help you have a great journey along the pathways of learning that I have planned for you I've developed and created this course for you and you'll be seeing me through the whole journey, offering you my thoughts and ideas behind what you're going to learn next and why I recommend each step I'll provide tests and quizzes to help you reflect on your learning, and code challenges that will be pitched just right for you through the course If you have any questions along the way, you can reach out to me over email or telephone and I'll make sure you get everything from the course that we've planned – for you to become a working AngularJS developer and able to work in the full-stack Details of how to contact me are included on the first page of this course Course Structure I've created an AngularJS learning path for you that has four connected modules Each of these modules are a mini-course in their own right, and as you complete each one, you'll have gained key skills and be ready for the material in the next module! So let's now look at the pathway these modules create and how they will take you from AngularJS essentials right through to coding and maintaining your own full-stack AngularJS apps… Course Structure This course begins with the AngularJS Core Learning module, to help you get up to speed with AngularJS – the first concepts you need to get ready with AngularJS You'll learn how to install the AngularJS framework in your development environment, understand the core AngularJS architecture, and then make friends with some of the core concepts including Angular components, scope, directives and how to create your own first AngularJS modules: I've prepared the second Core Coding module so that we can roll up our coding sleeves and create a serious AngularJS application by example – a rich featured workout app We'll take the coding a step at a time at first, then once you're coding a full app in this module, a lot of AngularJS will fall right into place for you: The third Technique Library module is designed to then broaden your AngularJS coding skills: a rich library of AngularJS coding solutions that you can use straight away in your own code projects I'll even challenge you to improve and maintain the workout app we built in the earlier in the course, using the Technique Library! You'll then be ready to move to the next level: the Full-Stack AngularJS Graduation module concludes your course journey by taking your AngularJS skills into a full-stack environment This is also your graduation to full-stack web development, which can open many new coding and career opportunities for you! Course Module 1: Core Learning – AngularJS Essentials Lesson 1: Getting Started with AngularJS Introduction to AngularJS Architectural concepts Setting up the framework Organizing the code Lesson 2: Creating Reusable Components with Directives 11 Lesson 3: Data Handling 47 Lesson 4: Dependency Injection and Services 63 Lesson 5: Scope 99 What is a directive? 12 Using AngularJS built-in directives 13 Refactoring application organization 26 Creating our own directives 28 Animation 42 Expressions 47 Filters 49 Form validation 56 Dependency injection Creating services Using AngularJS built-in services Two-way data binding Best practices using the scope The $rootScope object Scope Broadcasting 64 65 72 99 102 106 106 Lesson 6: Modules 111 Creating modules Recommended modules 111 116 [i] Table of Contents Course Module 2: Core Coding – AngularJS By Example Lesson 1: Building Our First App – Minute Workout 120 Lesson 2: More AngularJS Goodness for Minute Workout 176 Lesson 3: Building Personal Trainer 244 Lesson 4: Adding Data Persistence to Personal Trainer 306 What is Minute Workout? The Minute Workout model Adding app modules The app controller The Minute Workout view Adding start and finish pages Learning more about an exercise Displaying the remaining workout time using filters Adding the next exercise indicator using ng-if Formatting the exercise steps Tracking exercise progress with audio clips Pausing exercises Enhancing the workout video panel Animations with AngularJS The Personal Trainer app – the problem scope The Personal Trainer model The Personal Trainer layout Implementing the workout and exercise list Building a workout AngularJS and server interactions $http service basics Personal Trainer and server integration Getting started with $resource Using $resource to access exercise data Exercising CRUD with $resource Request/response interceptors AngularJS request/response transformers Handling routing failure for rejected promises Fixing the Minute Workout app [ ii ] 121 126 129 129 148 151 158 166 170 177 181 194 202 211 245 247 249 253 255 307 310 312 336 342 345 349 353 355 358 Table of Contents Lesson 5: Working with Directives Directives – an introduction Anatomy of a directive Building a remote validation directive to validate the workout name Model update on blur Implementing a remote validation clues directive Understanding directive-isolated scopes AngularJS jQuery integration 360 361 362 369 378 384 395 403 Course Module 3: Your AngularJS Technique Library – AngularJS Web Application Cookbook Lesson 1: Maximizing AngularJS Directives 417 Introduction 417 Building a simple element directive 418 Working through the directive spectrum 419 Manipulating the DOM 425 Linking directives 427 Interfacing with a directive using isolate scope 430 Interaction between nested directives 434 Optional nested directive controllers 436 Directive scope inheritance 438 Directive templating 440 Isolate scope 443 Directive transclusion 445 Recursive directives 447 Lesson 2: Expanding Your Toolkit with Filters and Service Types 455 Introduction 456 Using the uppercase and lowercase filters 456 Using the number and currency filters 458 Using the date filter 461 Debugging using the json filter 463 Using data filters outside the template 465 Using built-in search filters 466 Chaining filters 469 Creating custom data filters 471 Creating custom search filters 474 Filtering with custom comparators 475 [ iii ] Module Lesson 10 protractor: { e2e: { options: { configFile: 'protractor.conf.js' } } }, jshint: { all: { src: ['server.js', 'config/**/*.js', 'app/**/*.js', 'public/ js/*.js', 'public/modules/**/*.js'] } }, csslint: { all: { src: 'public/modules/**/*.css' } }, watch: { js: { files: ['server.js', 'config/**/*.js', 'app/**/*.js', 'public/ js/*.js', 'public/modules/**/*.js'], tasks: ['jshint'] }, css: { files: 'public/modules/**/*.css', tasks: ['csslint'] } }, concurrent: { dev: { tasks: ['nodemon', 'watch'], options: { logConcurrentOutput: true } }, debug: { tasks: ['nodemon:debug', 'watch', 'node-inspector'], options: { logConcurrentOutput: true } } }, 'node-inspector': { [ 981 ] Automating and Debugging MEAN Applications debug: {} } }); grunt.loadNpmTasks('grunt-env'); grunt.loadNpmTasks('grunt-nodemon'); grunt.loadNpmTasks('grunt-mocha-test'); grunt.loadNpmTasks('grunt-karma'); grunt.loadNpmTasks('grunt-protractor-runner'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-csslint'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-concurrent'); grunt.loadNpmTasks('grunt-node-inspector'); grunt.registerTask('default', ['env:dev', 'lint', 'concurrent:dev']); grunt.registerTask('debug', ['env:dev', 'lint', 'concurrent:debug']); grunt.registerTask('test', ['env:test', 'mochaTest', 'karma', 'protractor']); grunt.registerTask('lint', ['jshint', 'csslint']); }; Let's go over these changes First, you changed the configuration object passed to the grunt.initConfig() method You began by modifying the nodemon task by adding a new debug subtask The debug subtask will use the nodeArgs property to start your application in debug mode Then, you modified the concurrent task by adding a new debug subtask as well This time, the debug subtask is simply using the nodemon:debug task and the new node-inspector task Near the end of the configuration object, you minimally configured the new node-inspector task and then loaded the grunt-node-inspector module You finished by creating a debug task and modifying your default task You can learn more about node-inspector's configuration by visiting the official project at https://github.com/node-inspector/ node-inspector [ 982 ] Module Lesson 10 Running the debug grunt task To use your new debug task, navigate to your application's root folder and issue the following command in your command-line tool: $ grunt debug This will run your application in a debug mode and start the node-inspector server The output in your command-line tool should be similar to the following screenshot: As you can see, the node-inspector task invites you to start debugging the application by visiting http://127.0.0.1:8080/debug?port=5858 using a compatible browser Open this URL in Google Chrome and you should see an interface similar to the following screenshot: Debugging with node-inspector [ 983 ] Automating and Debugging MEAN Applications As you can see, you'll get a list of your project files on the left-hand side panel, a file content viewer in the middle panel, and a debug panel on the right-hand side panel This means your node-inspector task is running properly and identifies your Express project You can start debugging your project by setting some breakpoints and testing your components' behavior Node-inspector will only work on browsers that use the Blink engine, such as Google Chrome or Opera Debugging AngularJS with Batarang Debugging most of the AngularJS part of your MEAN application is usually done in the browser However, debugging the internal operations of AngularJS can be a bit trickier For this purpose, the AngularJS team created a Chrome extension called Batarang Batarang extends the Chrome Developer Tools with a new tab where you can debug different aspects of your AngularJS application Installing Batarang is quite straightforward; all you have to is to visit the Chrome web store at https://chrome.google.com/webstore/detail/angularjs-batarang/ ighdmehidhipcmcojjgiloacoafjmpfk and install the Chrome extension Batarang will only work on the Google Chrome browser [ 984 ] Module Lesson 10 Using Batarang Once you're done installing Batarang, use Chrome to navigate to your application URL Then, open the Chrome Developer Tools panel and you should see an AngularJS tab Click on it and a panel similar to the following screenshot should open: Batarang Tool Note that you need to enable Batarang using the Enable checkbox at the top of the panel Batarang has four tabs you can use: Models, Performance, Dependencies, and Options The last tab is the Help section where you can learn more about Batarang [ 985 ] Automating and Debugging MEAN Applications Batarang Models To explore your AngularJS application models, make sure you've enabled Batarang and click on the Models tab You should see a panel similar to the following screenshot: Batarang models On the left side of the panel, you'll be able to see the page scopes hierarchy When selecting a scope, you'll be able to see the scope model on the right In the preceding screenshot, you can see the scope model for the articles example from the previous Lessons [ 986 ] Module Lesson 10 Batarang Performance To explore your AngularJS application performance, make sure you enabled Batarang and click on the Performance tab You should see a panel similar to the following screenshot: Batarang performance On the left side of the panel, you'll be able to see a tree of your application's watched expressions On the right-hand side of the panel, you'll be able to see the relative and absolute performance status of all of your application's watched expressions In the preceding screenshot, you'll be able to see the performance report for the articles example from the previous Lessons [ 987 ] Automating and Debugging MEAN Applications Batarang Dependencies To explore your AngularJS services' dependencies, make sure you enabled Batarang and then click on the Dependencies tab You should see a panel similar to the following screenshot: Batarang dependencies In the Dependencies tab, you'll be able to see a visualization of the application's services dependencies When hovering with your mouse over one of the services, the selected service will be colored green and the selected service dependencies will turn red Batarang options To highlight your AngularJS components' elements, make sure you've enabled Batarang and then click on the Options tab You should see a panel similar to the following screenshot: [ 988 ] Module Lesson 10 Batarang options When you enable one of the options, Batarang will highlight the respective feature of the application Scopes will have a red outline, bindings will have a blue outline, and applications will have a green outline Batarang is a simple yet powerful tool Used right, it can save you a lot of time of endlessly looking around and using console logging Make sure you understand each tab and try to explore your application yourself [ 989 ] Automating and Debugging MEAN Applications [ 990 ] Reflect and Test Yourself! Answers Part 1: AngularJS Essentials Lesson Q1 Lesson Q1 Lesson Q1 Lesson Q1 Part 2: AngularJS By Example Lesson Q1 Q2 Lesson Q1 Q2 Q3 Lesson Q1 Part 4: MEAN Web Development Lesson Q1 Q2 Bibliography This course is a blend of text and quizzes, all packaged up keeping your journey in mind It includes content from the following Packt products: • AngularJS Essentials, Rodrigo Branas • AngularJS By Example, Chandermani Arora • AngularJS Web Development Cookbook, Matt Frisbie • MEAN Web Development, Amos Q Haviv Thank you for buying AngularJS Maintaining Web Application About Packt Publishing Packt, pronounced 'packed', published its first book "Mastering phpMyAdmin for Effective MySQL Management" in April 2004 and subsequently continued to specialize in publishing highly focused books on specific technologies and solutions Our books and publications share the experiences of your fellow IT professionals in adapting and customizing today's systems, applications, and frameworks Our solution based books give you the knowledge and power to customize the software and technologies you're using to get the job done Packt books are more specific and less general than the IT books you have seen in the past Our unique business model allows us to bring you more focused information, giving you more of what you need to know, and less of what you don't Packt is a modern, yet unique publishing company, which focuses on producing quality, cutting-edge books for communities of developers, administrators, and newbies alike For more information, please visit our website: www.packtpub.com About Packt Open Source In 2010, Packt launched two new brands, Packt Open Source and Packt Enterprise, in order to continue its focus on specialization This book is part of the Packt Open Source brand, home to books published on software built around Open Source licenses, and offering information to anybody from advanced developers to budding web designers The Open Source brand also runs Packt's Open Source Royalty Scheme, by which Packt gives a royalty to each Open Source project about whose software a book is sold Writing for Packt We welcome all inquiries from people who are interested in authoring Book proposals should be sent to author@packtpub.com If your book idea is still at an early stage and you would like to discuss it first before writing a formal book proposal, contact us; one of our commissioning editors will get in touch with you We're not just looking for published authors; if you have strong technical skills but no writing experience, our experienced editors can help you develop a writing career, or simply get some additional reward for your expertise .. .AngularJS Maintaining Web Applications A course in four modules Learn AngularJS and full-stack web development with your Course Guide Shiny Poojary Get up to speed building AngularJS applications, ... this AngularJS – Maintaining Web Applications course You now have a clear pathway from learning AngularJS core features right through to coding full-stack AngularJS web applications! This course. .. full-stack AngularJS apps… Course Structure This course begins with the AngularJS Core Learning module, to help you get up to speed with AngularJS – the first concepts you need to get ready with AngularJS