2,99 €
Mehr erfahren.
- Herausgeber: BookRix
- Kategorie: Fachliteratur
- Sprache: Englisch
This title is one of the "Essentials" IT Books published by TechNet Publications Limited.
This Book is a very helpful practical guide for beginners in the topic , which can be used as a learning material for students pursuing their studies in undergraduate and graduate levels in universities and colleges and those who want to learn the topic via a short and complete resource.
We hope you find this book useful in shaping your future career.
This book will be available soon...
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Veröffentlichungsjahr: 2016
Ähnliche
Getting Started with AngularJS
BookRix GmbH & Co. KG81371 MunichTable Of Contents
Table of Contents
Preface
Chapter 1 An Introduction to Angular.js
Chapter 2 Controllers
Chapter 3 Directives
Chapter 4 Filters
Chapter 5 Consuming Externals Services
Chapter 6 URLs, Routing, and Partials
Chapter 7 Using Forms
Chapter 8 Common User Interface Patterns
Chapter 9 Backend Integration with Ruby on Rails
Chapter 10 Backend Integration with Node Express
Detailed Table of Contents
Preface
Preface
Introduction
Angular.js is an open-source JavaScript framework developed by Google. It gives JavaScript developers a highly-structured approach to developing rich, browser-based applications which leads to very high productivity.
If you are using Angular.js or considering it, this cookbook provides easy-to-follow recipes for issues you are likely to face. Each recipe solves a specific problem and provides a solution and in-depth discussion of it.
Code Examples
Code Examples
All code examples in this book can be found on GitHub.
How to Contact Me
How to Contact Me
If you have questions or comments, please get in touch with:
Frederik Dietz ([email protected])
Acknowledgements
Acknowledgements
Special thanks go to my English editor and friend Robert William Smales!
Thanks go to John Lindquist for his excellent screencast project egghead.io, Lukas Ruebbelke for his awesome videos, and Matias Niemela for his great blog. And, of course, the whole development team behind Angular.js!
Chapter 1 An Introduction to Angular.js
Chapter 1 An Introduction to Angular.js
Including the Angular.js Library Code in an HTML Page
Problem
You wish to use Angular.js on a web page.
Solution
In order to get your first Angular.js app up and running, you need to include the Angular JavaScript file via script tag and make use of the ng-app directive:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/ angularjs/1.0.4/angular.js">
</script>
</head>
<body ng-app>
<p>This is your first angular expression: {{ 1 + 2 }}</p>
</body>
</html>
You can check out a complete example on GitHub.
Discussion
Adding the ng-app directive tells Angular to kick in its magic. The expression {{ 1 + 2 }} is evaluated by Angular and the result 3 is rendered. Note that removing ng-app will result in the browser rendering the expression as is instead of evaluating it. Play around with the expression! You can, for instance, concatenate Strings and invert or combine Boolean values.
For reasons of brevity, we will skip the boilerplate code in the following recipes.
Binding a Text Input to an Expression
Binding a Text Input to an Expression
Problem
You want user input to be used in another part of your HTML page.
Solution
Use Angular's ng-model directive to bind the text input to the expression:
Enter your name: <input type="text" ng-model="name"></input> <p>Hello {{name}}!</p>
You can find the complete example on GitHub.
Discussion
Assigning "name" to the ng-model attribute and using the name variable in an expression will keep both in sync automatically. Typing in the text input will automatically reflect these changes in the paragraph element below.
Consider how you would implement this traditionally using jQuery:
<html> <head> <script src="http://code.jquery.com/jquery.min.js"></script> </head> <body> Enter your name: <input type="text"></input> <p id="name"></p> <script> $(document).ready(function() { $("input").keypress(function() { $("#name").text($(this).val()); }); }); </script> </body> </html>
Converting Expression Output with Filters
Converting Expression Output with Filters
Problem
When presenting data to the user, you might need to convert the data to a more user-friendly format. In our case, we want to uppercase the name value from the previous recipe in the expression.
Solution
Use the uppercase Angular filter:
Enter your name: <input type="text" ng-model="name"></input> <p>Hello {{name | uppercase }}!</p>
You can find the complete example on GitHub.
Discussion
Angular uses the | (pipe) character to combine filters with variables in expressions. When evaluating the expression, the name variable is passed to the uppercase filter. This is similar to working with the Unix bash pipe symbol where an input can be transformed by another program. Also, try the lowercase filter!
