You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Nov 27, 2025. It is now read-only.
- Windows download from [here][node-windows]. (You will also need [7 Zip] to unzip the node archive)
21
+
(and don't forget to add `node.exe` to your executable path)
23
22
24
-
Clone the angular-seed repository and start hacking...
23
+
### Java
24
+
-http://www.java.com
25
25
26
+
## Workings of the application
26
27
27
-
### Running the app during development
28
+
- The application filesystem layout structure is based on the [angular-seed] project.
29
+
- There is no backend (no server) for this application. Instead we fake the XHRs by fetching
30
+
static json files.
31
+
- Read the Development section at the end to familiarize yourself with running and developing
32
+
an angular application.
33
+
34
+
## Commits / Tutorial Outline
35
+
36
+
You can check out any point of the tutorial using
37
+
git checkout step-?
38
+
39
+
To see the changes which between any two lessons use the git diff command.
40
+
git diff step-?..step-?
41
+
42
+
### step-0
43
+
44
+
- Initial [angular-seed] project layout
45
+
46
+
47
+
### step-1
48
+
49
+
- We have converted the seed application by removing all of the boiler-plate code.
50
+
- We have added single static HTML file which shows a static list of phones. (we will convert this
51
+
static page into dynamic one with the help of angular)
52
+
53
+
54
+
### step-2
55
+
56
+
- Converted static page into dynamic one by:
57
+
- create a root controller for the application
58
+
- extracting the data from HTML into a the controller as a mock dataset
59
+
- convert the static document into a template with the use of `ng:`[directive] (iterate over
60
+
mock data using [ng:repeat] and render it into a view)
61
+
- Added unit test, which mostly shows how one goes about writing a unit test, rather then test
62
+
something of value on our mock dataset.
63
+
64
+
65
+
### step-3
66
+
67
+
- added a search box to demonstrate how:
68
+
- the data-binding works on input fields
69
+
- to use [$filter] function
70
+
-[ng:repeat] automatically shrinks and grows the number of phones in the view
71
+
- added an end-to-end test to:
72
+
- show how end-to-end tests are written and used
73
+
- to prove that the search box and the repeater are correctly wired together
74
+
75
+
76
+
### step-4
77
+
78
+
- replaced the mock data with data loaded from the server (in our case the JSON return is just a
79
+
static file)
80
+
- The JSON is loaded using the [$xhr] service
81
+
- Demonstrate the use of [services][service] and [dependency injection][DI]
82
+
- The [$xhr] is injected into the controller through [dependency injection][DI]
28
83
29
-
You can pick one of these options:
30
84
31
-
* serve this repository with your webserver
32
-
* install node.js and run `scripts/web-server.js`
85
+
### step-5
33
86
34
-
Then navigate your browser to `http://localhost:<port>/app/index.html` to see the app running in
35
-
your browser.
87
+
- adding phone image and links to phone pages
88
+
- css to style the page just a notch
36
89
37
90
38
-
### Running the app in production
91
+
### step-6
39
92
40
-
This really depends on how complex is your app and the overall infrastructure of your system, but
41
-
the general rule is that all you need in production are all the files under the `app/` directory.
42
-
Everything else should be omitted.
93
+
- making the order predicate for catalog dynamic
94
+
- adding 'predicates' section to the view with links that control the order
95
+
- ordering defaults to 'age' property
96
+
- css sugar
43
97
44
-
Angular apps are really just a bunch of static html, css and js files that just need to be hosted
45
-
somewhere, where they can be accessed by browsers.
46
98
47
-
If your Angular app is talking to the backend server via xhr or other means, you need to figure
48
-
out what is the best way to host the static files to comply with the same origin policy if
49
-
applicable. Usually this is done by hosting the files by the backend server or through
50
-
reverse-proxying the backend server(s) and a webserver(s).
99
+
### step-7
51
100
101
+
- Introduce the [$route] service which allows binding URLs for deep-linking with views
102
+
- Replace content of root controller PhonesCtrl with [$route] configuration
103
+
- Map `/phones' to PhoneListCtrl and partails/phones-list.html
104
+
- Map `/phones/phone-id' to PhoneDetailCtrl and partails/phones-detail.html
105
+
- Copy deep linking parameters to root controller `params` property for access in sub controllers
106
+
- Replace content of index.html with [ng:view]
107
+
- Create PhoneListCtrl view
108
+
- Move code which fetches phones data into PhoneListCtrl
109
+
- Move existing HTML from index.html to partials/phone-list.html
110
+
- Create PhoneDetailsCtrl view
111
+
- Wire [$route] service to map `/phanes/phone-id` to map to this controller.
112
+
- Empty PhoneDetailsCtrl
113
+
- Place holder partials/phane-details.html
114
+
115
+
### step-8
116
+
117
+
- Fetch data for and render phone detail view
118
+
-[$xhr] to fetch details for a specific phone
119
+
- template for the phone detailed view
120
+
- CSS to make it look pretty
121
+
- Detail data for phones in JSON format
122
+
123
+
### step-9
124
+
125
+
- replace [$xhr] with [$resource]
126
+
- demonstrate how a resource can be created using a [service]
127
+
128
+
## Development with angular-seed
129
+
130
+
The following docs apply to all angular-seed projects and since the phonecat tutorial is a project
131
+
based on angular-seed, the instructions apply to it as well.
132
+
133
+
### Running the app during development
134
+
135
+
1. run `./scripts/web-server.js`
136
+
2. navigate your browser to `http://localhost:8000/app/index.html` to see the app running in your
137
+
browser.
52
138
53
139
### Running unit tests
54
140
55
-
We recommend using [jasmine](http://pivotal.github.com/jasmine/) and
56
-
[Testacular](http://vojtajina.github.com/testacular/) for your unit tests/specs, but you are free
57
-
to use whatever works for you.
141
+
Requires java.
58
142
59
-
Requires [node.js](http://nodejs.org/), Testacular (`sudo npm install -g testacular`) and a local
60
-
or remote browser.
143
+
1. start `./scripts/test-server.sh` (on windows `scripts\test-server.bat`)
144
+
2. navigate your browser to `http://localhost:9876/`
145
+
3. click on: capture strict link
146
+
4. run `scripts/test.sh` (on windows `scripts\test.bat`)
147
+
5. edit files in `app/` or `src/` and save them
148
+
6. go to step 4.
61
149
62
-
* start `scripts/test.sh` (on windows: `scripts\test.bat`)
63
-
* a browser will start and connect to the Testacular server (Chrome is default browser, others can be captured by loading the same url as the one in Chrome or by changing the `config/testacular.conf.js` file)
64
-
* to run or re-run tests just change any of your source or test javascript files
150
+
151
+
### Continuous unit testing
152
+
153
+
Requires ruby and [watchr](https://github.com/mynyml/watchr) gem.
154
+
155
+
1. start JSTD server and capture a browser as described above
156
+
2. start watchr with `watchr scripts/watchr.rb`
157
+
3. in a different window/tab/editor `tail -f logs/jstd.log`
158
+
4. edit files in `app/` or `src/` and save them
159
+
5. watch the log to see updates
65
160
66
161
67
162
### End to end testing
@@ -82,14 +177,7 @@ info.
82
177
* run the tests from console with [Testacular](vojtajina.github.com/testacular) via
83
178
`scripts/e2e-test.sh` or `script/e2e-test.bat`
84
179
85
-
86
-
### Receiving updates from upstream
87
-
88
-
When we upgrade angular-seed's repo with newer angular or testing library code, you can just
89
-
fetch the changes and merge them into your project with git.
90
-
91
-
92
-
## Directory Layout
180
+
## Application Directory Layout
93
181
94
182
app/ --> all of the files to be used in production
95
183
css/ --> css files
@@ -141,3 +229,21 @@ fetch the changes and merge them into your project with git.
141
229
## Contact
142
230
143
231
For more information on AngularJS please check out http://angularjs.org/
0 commit comments