Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
DaTA
formation-angularjs
Commits
55c3288c
Commit
55c3288c
authored
Oct 15, 2016
by
Pesah Arthur
Browse files
Add commentaries to the code
parent
5d9d406b
Changes
5
Hide whitespace changes
Inline
Side-by-side
app/scripts/app.js
View file @
55c3288c
'
use strict
'
;
// Load the main module (the application) and its dependancies
angular
.
module
(
'
movieSearch
'
,
[
'
ngCookies
'
,
'
ngResource
'
,
'
ngRoute
'
,
])
])
// no ';' here!
.
config
(
function
(
$routeProvider
)
{
$routeProvider
.
when
(
'
/
'
,
{
templateUrl
:
'
views/all.html
'
,
controller
:
'
searchCtrl
'
.
when
(
'
/
'
,
{
// The root of the website (http://127.0.0.1:9000/#/)
templateUrl
:
'
views/all.html
'
,
// it loads this template...
controller
:
'
searchCtrl
'
// ... with this controller
})
.
when
(
'
/detail/:idMovie
'
,
{
.
when
(
'
/detail/:idMovie
'
,
{
// :idMovie is a variable (ex: 'tt1234567')
templateUrl
:
'
views/detail.html
'
,
controller
:
'
detailCtrl
'
})
.
otherwise
({
redirectTo
:
'
/
'
redirectTo
:
'
/
'
// if the url doesn't make sense, redirect to the root
});
});
app/scripts/controllers.js
View file @
55c3288c
angular
.
module
(
'
movieSearch
'
)
.
controller
(
'
searchCtrl
'
,
function
searchCtrl
(
$scope
,
searchFactory
)
{
// load the list of the movies from the resource in searchFactory
$scope
.
items
=
searchFactory
.
allMoviesResource
.
get
(
successFn
,
errorFn
);
function
successFn
()
{
$scope
.
items
=
$scope
.
items
[
"
Search
"
]
$scope
.
items
=
$scope
.
items
[
"
Search
"
]
// first key of the dictionary loaded contains an array
console
.
log
(
$scope
.
items
)
}
function
errorFn
()
{
...
...
@@ -13,6 +14,7 @@ angular.module('movieSearch')
})
.
controller
(
'
detailCtrl
'
,
function
searchCtrl
(
$scope
,
$routeParams
,
searchFactory
)
{
// rootParams : $rootParams.idMovie contains the value of idMovie passed in the url (ex : 'tt1234567')
$scope
.
movie
=
searchFactory
.
detailMovieResource
.
get
({
idMovie
:
$routeParams
.
idMovie
});
function
successFn
()
{
...
...
app/scripts/filter.js
View file @
55c3288c
...
...
@@ -3,7 +3,7 @@ angular.module('movieSearch')
.
filter
(
'
searchFor
'
,
function
(){
return
function
(
arr
,
searchString
){
if
(
!
searchString
){
if
(
!
searchString
){
// if nothing is typed in the search bar
return
arr
;
}
...
...
app/scripts/services.js
View file @
55c3288c
...
...
@@ -2,10 +2,14 @@ angular.module('movieSearch')
.
factory
(
'
searchFactory
'
,
function
(
$resource
)
{
// url for all movies with 'la' inside
var
allMoviesResource
=
$resource
(
'
http://www.omdbapi.com/?s=la&y=&plot=short&r=json&page=1
'
);
// i=:idMovie (look at the url) means that we can pass idMovie as a parameter to the resource
var
detailMovieResource
=
$resource
(
'
http://www.omdbapi.com/?i=:idMovie&plot=short&r=json
'
,
{
idMovie
:
'
@idMovie
'
}
);
// a factory always return a dictionary of the variables and functions we want to access outside of the factory
return
{
allMoviesResource
:
allMoviesResource
,
detailMovieResource
:
detailMovieResource
...
...
app/views/all.html
View file @
55c3288c
<div
class=
"bar"
>
<!-- ng-model means that searchString becomes an element of the $scope -->
<input
type=
"text"
ng-model=
"searchString"
placeholder=
"Enter your search terms"
/>
</div>
<ul>
<li
ng-repeat=
"i in items | searchFor:searchString"
>
<li
ng-repeat=
"i in items | searchFor:searchString"
>
<!-- Loop and filter (look at filter.js) -->
<a
href=
"#/detail/{{i.imdbID}}"
><img
ng-src=
"{{i.Poster}}"
/></a>
<p>
{{i.Title}}
</p>
</li>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment