View Code? Open in Web Editor
NEW
This project forked from zerrtech/angular-1-training-class
HTML 39.66%
JavaScript 60.34%
angular-1-training-class's Introduction
Angular Training Course - Zerrtech
Step 0: First Controller/View
src/app.js
index.html
- Main HTML file with imports and view entry point
src/app.js
- Add new heroes to the list
index.html
- Use
ng-repeat
to iterate over heroes list
- Use
list-group
, list-group-item
bootstrap classes for ul
and li
- Use
row
and col-xs-6
bootstrap classes for hero item sections
- Use
ng-repeat
to iterate over hero.affiliations
Step 1: Add Heroes Service
src/common/hero.js
src/app.js
- List
hero
as a dependency
- Inject
heroService
into AppController
- Use
heroService.getAll()
to get heroes list instead of hardcoding them
src/common/hero.js
- Add a
heroes
variable (move the heroes
list from app.js
into a local var
)
- Return the
heroes
list in the getAll
function
index.html
Step 2: Add New Route and Click Handler
src/routes/detail/detail.js
src/routes/detail/detail.tpl.html
src/routes/list/list.js
src/routes/list/list.tpl.html
src/app.js
- List
list
and detail
as dependencies
- Inject
$locationProvider
into appConfig
- Call
$locationProvider.html5Mode(true)
in appConfig
- Set default route with
$routeProvider.otherwise('/')
src/routes/list/list.js
- Use
$routeProvider.when('/', { ... })
to set '/' route to use ListController
and src/routes/list/list.tpl.html
. See official docs
- List
hero
as a dependency
- Inject
$scope
and heroService
into ListController
- Set
$scope.hero = heroService.getAll()
src/routes/list/list.tpl.html
- Move list markup from
index.html
into list.tpl.html
Check that ListController works at '/' route before continuing
src/routes/detail/detail.js
- Use
$routeProvider.when('/detail/:id', { ... })
to set route to use DetailController
and src/routes/detail/detail.tpl.html
. See official docs
- List
hero
as a dependency
- Inject
$scope
, $routeParams
, and heroService
into DetailController
- Set
$scope.heroId = parseInt($routeParams.id)
- Set
$scope.hero = heroService.get($scope.heroId)
src/routes/detail/detail.tpl.html
- Use
row
and col-xs-6
classes to display hero
properties
- Use an
<a href="/">X</a>
tag to link back to list page
- Use
ng-repeat
to iterate over hero.affiliations
angular-1-training-class's People
Contributors
Watchers