Download Build your first Web app : learn to build Web applications from scratch PDF

TitleBuild your first Web app : learn to build Web applications from scratch
LanguageEnglish
File Size8.6 MB
Total Pages326
Table of Contents
                            Title Page
Copyright
Contents
INTRODUCTION
1 USER EXPERIENCE BASICS
	User research
	User research without breaking the bank
	Defining audiences and scenarios
	Designing your first responsive web app
2 APPLICATION FEATURES AND FLOW
	Wireframing
	Sketching out TastyTracker
	Thinking responsively
3 VISUAL DESIGN BASICS
	The meta-principles: consistency, hierarchy, and personality
	Using the visual design tools: layout, type, color, imagery, and styled controls
	Software for your visual design
	Designing TastyTracker
4 PREPARING TO CODE: INSTALLING AND CONFIGURING
	Step 1: Installing the package manager
	Step 2: Setting up the project directory
	Step 3: Setting up and running the project configuration files
	Step 4: Installing dependencies
	Where are we now?
5 BOOTSTRAP
	Bootstrap basics
	Editing and compiling SCSS
	Tracking down errors
	A few final notes on coding
	Getting TastyTracker off the ground
	Adding a modal window
6 GETTING STARTED WITH ANGULAR
	The way Angular thinks
	The application module and what imports where
	The root component
	The first test (and some troubleshooting)
	Second time’s the charm
	That’s it?
7 CODING THE APP
	A set of placeholder components
	We must know our data to make our data services
	The data services
	The meal list
	Totals and trends
8 PUTTING IT ALL TOGETHER
	Breaking up the HTML
	The meal entry component
	The totals and trends component
	The meal list component
	Restaurants and meals
	Error feedback
	Moving forward
9 DEPLOYMENT
	Downsizing the app
	SystemJS and relative paths
	Variations
	Fixing the router
	Production mode
	Taking it further
RESOURCES
ACKNOWLEDGMENTS
ABOUT THE AUTHORS
                        
Document Text Contents
Page 2

BUILD YOUR FIRST
WEB APP

Learn to Build Web Applications from
Scratch

Deborah Levinson
and Todd Belton

Page 163

accordingly.
In other words, we’ve just set up the root component as a “frame” that will display

all our other components, depending on navigation. The only HTML in the root
component that doesn’t change with navigation is the title banner.

We don’t need to import or declare use of in our root component because
we’re not using data or functions anywhere within the component’s code.
We get “for free”—assuming we remember to add the appropriate
declarations to the root module, which we get to shortly.

Finishing up the rest of the placeholders
We still need template contents for and

, and we’ll go ahead and set up the files for the totals and
trends components while we’re at it.

First, create and save as shown (remember, these
template files go in the directory with their components):

http://meal-entry.component.html

Page 164

Right now this contains a form that doesn’t do anything and a Save button that
also doesn’t do anything, but it has a few special tricks already. The Edit Meals
button at the top (we style it to improve its placement and display in the next
chapter) calls the gotoList() function when clicked; as defined in the component, this
will navigate you to the meal-list page. And below the restaurant list (which
currently has no restaurants), there’s some magic going on with something called
*ngIf.

We explain *ngIf more when we do more work on this template, but it’s a
conditional, which says “only display the page element it appears in if its condition
is met.” The condition is the part enclosed in quotes.

Page 325

23 This may be our fault, since we specified our options as <option value="0">, <option
value="1">, etc., instead of <option value=0>, <option value=1>, etc. However, omitting those
quotes is not good HTML and won’t pass some strict validators.
24 This is sometimes referred to as having “truthy” or “falsy” values. Warning: arrays, lists, and
complex data structures automatically evaluate to true if they exist, even if they’re empty.
25 Although local storage works in all browsers, not just in Firefox, we recommend the Mozilla
Developer Network for more in-depth reading about local storage: developer.mozilla.org/en-
US/docs/Web/API/Storage/LocalStorage and developer.mozilla.org/en-
US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API.
26 Another case where we recommend the Mozilla Developer Network: developer.mozilla.org/en-
US/docs/Web/JavaScript/Guide/Regular_Expressions.
27 This is the last thing we’ll use the moment library for in this code, but it has many more useful
tricks. The full documentation can be found at momentjs.com/.
28 The nativeElement portion of this reference is required by Angular. We have been unable to
find a reason why anywhere in their documentation. We just know that if you’re trying to get at
properties of a template item you’ve accessed with @ViewChild(), you’ll need it.
29 Bad things happen. Not fatally bad. A string of spaces defeats our “there’s nothing in this field”
test and will get saved as a restaurant with an empty name. We didn’t go back and try to work
around it because it didn’t seem worth fixing; the user would almost have to be trying to do it
deliberately. Besides, they can use and/or delete an empty-named restaurant; it’s just confusing.
Conversely, we tried several different sets of peculiar characters and they all worked fine. We had a
lot of fun with the tests where all the restaurant names were phrases in Cyrillic and Japanese.
30 We reached a point in trying to deal with Webpack where we realized that we could get it to
work, but only if we completely undid SystemJS’s path handling, which is a vital part of the
application as currently written. We didn’t feel it was worth trying to do that—almost every file in
the app would need to be altered—at this stage in the process. Webpack is probably going to be
around for a while, though, and you may find it worthwhile to investigate. You may also want to
search for resources on tools which try to use SystemJS’s path handling to bundle applications;
search for “SystemJS bundler.” But beware: here be dragons.
31 “Equates to” because there is no literal require statement anywhere in the Angular libraries that
looks like our examples. They create the require statements dynamically, but the end result is the
same.

http://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage
http://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
http://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
http://momentjs.com/

Page 326

32 For the complete list of config.xml options, see the Cordova documentation at
cordova.apache.org/docs/en/6.x/config _ref/index.html. Also, the free ConfiGAP tool
(configap.com), available for Mac and Windows, simplifies the process of creating a config.xml file
for PhoneGap Build.

http://cordova.apache.org/docs/en/6.x/config_ref/index.html
http://configap.com

Similer Documents