Web Development

AngularJS by Example

AngularJS by Example

Language: English

Pages: 446

ISBN: 1783553812

Format: PDF / Kindle (mobi) / ePub


Learn AngularJS, and tackle the challenges of modern web development by creating your own applications with these practical examples you can use and adapt

About This Book

  • Learn the AngularJS development workflow and uncover a more effective way to build, deploy, and test applications
  • Explore the core components of AngularJS and find out how it makes JavaScript web development easier
  • Learn by example, as you create increasingly more complex real-world applications and dive deeper into AngularJS

Who This Book Is For

If you've always wanted to get started with AngularJS, this is an essential guide designed to help you do exactly that. Start building applications immediately with the featured examples, and uncover a simpler approach to JavaScript web development. You will need some prior experience with HTML, CSS, and JavaScript to get started.

What You Will Learn

  • Get to grips with Angulara€™s Model-View-Controller architecture
  • Gain a understanding of single page applications from an AngularJS perspective
  • Manage code organization using modules and component dependencies with the Dependency Injection Framework
  • Find out how to use AngularJS directives to extend the behavior of HTML on your web page
  • Effectively use a range of JavaScript tools, from extending your app with jQuery plugins, to testing with Jasmine
  • Create forms for your single page applications and see how Angular helps you to bind, validate, and submit form data

In Detail

AngularJS makes web JavaScript web development less painful and more organized – it's unsurprising that today it's one of the most popular tools in web development.

AngularJS by Example helps you get started with this essential web development framework quickly and easily, guiding you through AngularJS by showing you how to create your own real-world applications. By adopting this approach, you can bridge the gap between learning and doing immediately, as you follow the examples to learn the impressive features of Angular and experience a radically simple–and powerful–approach to web development.

You'll begin by creating a simple Guess the Number game, which will help you get to grips with the core components of Angular, including its MVC architecture, and learn how each part interacts with one another. This will give you a solid foundation of knowledge from which you can begin to build more complex applications, such as a 7 minute workout app and an extended personal trainer app. By creating these applications yourself, you will find out how AngularJS manages client-server interactions and how to effectively utilize directives to develop applications further. You'll also find information on testing your app with tools such as Jasmine, as well as tips and tricks for some of the most common challenges of developing with AngularJS.

AngularJS by Example is a unique web development book that will help you get to grips with AngularJS and explore a powerful solution for developing single page applications.

High Performance Web Sites: Essential Knowledge for Front-End Engineers

Beginning Web Programming with HTML, XHTML, and CSS (Wrox Programmer to Programmer)

Crafting Rails 4 Applications: Expert Practices for Everyday Rails Development

Getting Started with Drupal Commerce

 

 

 

 

 

 

 

 

 

 

 

 

access the scope in the directive compile function, which is evident even from the parameters passed to compile; there is no parameter scope there. The role of the controller function will be discussed in the following sections, but most directives use the link function to implement the core directive behavior. This stands true for each of the directives we have discussed. This is where we register DOM event handlers, alter directive scope, or set up any required Angular watch. The reason to

using the super-awesome data binding capabilities of AngularJS. It's going to be simple, sweet, and elegant! For the 7 Minute Workout view, we need to show the exercise name, exercise image, a progress indicator, and time remaining. Add the following lines to index.html inside the container div.

exercise is about to endAn audio clip plays during the rest phase and informs users about the next exercise Modern browsers have good support for audio. The

of the event or scope on which the event is raised to the parent scope related to the parent DOM element. This mechanism is useful when a child component wants to interact with its parent component without creating any dependency. Based on the previous diagram, if we do a $scope.$emit implemention on scope s4, then scope s2 and $rootScope can catch the event with $scope.$on, but scope s5, s3, or s1 cannot. For emitted events, we have the ability to stop propagation of the event.$broadcast is just

For example, when ng-model is used with input, the change and input events (yes, input is the name of an event too) are subscribed by the input directive, and model data is updated when these events are triggered. This effectively creates a two-way binding between the model data and the HTML element on which ng-model is declared. Why don't we verify this binding work? Add a model interpolation expression against any of the linked input such as this one:

Download sample

Download