csangular/notes.txt at master · bcaytonanderson/csangular · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
RECAP OF UNIT 1: Directives

Directives are "markers on a DOM element (such as an attribute, element name, comment, or CSS class) that tell ANgularJS's HTML compiler ( $compile ) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.

Angular comes with a set of these directives built-in [...]. Much like you can create controllers and services, you can create your own directives for Angular to use. When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements." -docs.angularjs.org/guide/directive

Unit 1 covered:
	-<html ng-app="store">: attach the Application Module to the page

	-<body ng-controller="StoreController as store">: attach a Controller function to the page (the controller function's name must be capitalized)

	-<h1 ng-show="name">: ng-show/hide display a section based on an Expression

	-<li ng-repeat="product in store.products">: repeat a section for each item in an Array.

UNIT 2:
	FILTERS
		-There are a number of filters built in to Angular to handle certain situations.

		-{{ product.price | currency }} will properly format a number to localized currency.

		-Filter format: {{ data | filter:options }}
			-date: {{'1388123412323'| date:'MM/dd/yyyy @ h:mma'}} = 12/27/2013 @ 12:50AM

			-Upper-/Lowercase: {{'octagon gem' | uppercase}} = OCTAGON GEM

			-limitTo: limits the output of the element
				-{{'My Description' | limitTo:8}} = My Descr

				-<li ng-repeat="product in store.products | limitTo:3"> = only returns 3 items from the array.

			-orderBy: sorts output according to filter options
				-<li ng-repeat="product in store.products | orderBy:'-price'"> = lists products by descending price. Without the -, products would be listed in ascending order of price.

	NG-SRC for Images
		-To render images properly, use the ng-src directive on the img tag.
			-<img ng-src="{{product.images[0].full}}"/>

	CREATING TABS AND BEHAVIOR
		-To create various tabs in the display of a product, each showing different information, use the ng-click directive.

		-By assigning a value to each of the tab items the {{tab}} expression automatically gets updated. This expression defines 2-way Data Binding.
			-expressions are re-evaluated when a property changes.

		-ng-init directive allows us to evaluate an expression in the current scope

		-Setting an active tab using the bootstrap class, with the ng-class  directive.
			-<li ng-class="{ active:tab === 1 }">

	ORGANIZING LOGIC
		-Logic shouldn't all be in the HTML. Can put the logic into a controller using the ng-controller directive.

UNIT 3
	FORMS AND MODELS
		-ng-model directive binds the form element value to the property

		-using this for 2-way Data Binding with our live preview

		-can also us ng-model for other things, such as:
			-<input ng-model="review.terms" type="checkbox" /> I agree to the terms (sets either true or false)

			-<input ng-model="review.color" type="radio" value="red" /> Red (sets the value based on which input is selected)

		-ng-submit allows us to call a function when a form is submitted.

	FORM VALIDATIONS
		-Angular has built-in validations.
		-First step is to TURN OFF DEFAULT HTML VALIDATIONS
		-Second, mark required fields
		-"$valid"- the $ mean we are referencing a property, and "valid" is built-in to angular
			-validates that an email address is a valid address.

		-Only want to addReview if the form is valid- so we add "reviewForm.$valid && reviewCtrl.adReview(product)" to make sure the form will not be submitted unless it is valid.
			-Input classes start as ng-pristine and ng-invalid when empty
			-Input class changes to ng-dirty when there is a value, but not a valid one.
			-Input class changes to "ng-dirty ng-valid" when there is a valid entry.

			-We can highlight the invalid fields with some CSS

		-Built-in validations include:
			-emails
			-URLs
			-numbers (can specify a min or max) "min=1 max=10"

UNIT 4: CREATING A DIRECTIVE WITH AN ASSOCIATED CONTROLLER
	-If there are blocks of code which are repeated, we can pull them out into templates.

	-ng-include uses both single and double quotes: ng-include="'product-title.html'"
		-this is because ng-include is expecting a variable with the name of the file to include. To pass the name directly as a string, use single quotes

	-When the browser does a request, it can only pull down one html file (the index). When it gets to the ng-include, it will make an AJAX request back to the server to pull down that file.

	-When we want to include a template, we will use a custom directive.
		-Allows us to write HTML which expresses behavior of the app.

	CUSTOM DIRECTIVES
		-Template-expanding directives are the simplest:
			-define a custom tag or attribute that is expanded or replaced
			-can include Controller logic, if needed

		-Can also be used for:
			-Expressing complex UI
			-Calling events and registering handlers
			-Reusing common components

		-could also write an Attribute Directive so it would look like <h3 product-title></h3>

		-Use Element Directives for UI widgets, and Attribute Directives for mixin behaviors like tooltips

		-Angular allows us to write expressive HTML through custom directives to make code more descriptive/semantic.

		-We can create a directive for bits of code that also use a controller:
			-First, take the code and pull it into a new html file.

UNIT 5: DEPENCIES AND SERVICES
	-Our app needs to be organized into modules.
		-First, pull all product directives into a products.js file.

		-Wrap the entire block in its own closure

		-Define the new module and give it a name

		-Tell app.js that it depends on this new module.

	-SERVICES
		-Allow us to remove our array of objects from the modules and pull it instead from an API.

		-Services give a controller additional functionality, like:
			-fetching JSON data from a web service with $http

			-logging messages to the JS console with $log

			-filtering an array with $filter

		-all built-in services start with $

		-using $http to fetch JSON, result will be automatically decoded into JS objects and arrays

		-A controller uses a service like this:

			app.controller('SomeController', [ '$http', '$log', function($http, $log) {

			} ]);

			-the array lists the service names, which then get used as arguments in the controller function (dependency injection)