Skip to content

Commit 5db3925

Browse files
badaczewskibadaczewski
committed
Added Part II Folder
Also updated some CSS and title wording for the step pages.
1 parent 2e6a647 commit 5db3925

File tree

7 files changed

+82
-14
lines changed

7 files changed

+82
-14
lines changed

‎css/global.css

+9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
1+
*, *:before, *:after {
2+
-moz-box-sizing: border-box;
3+
-webkit-box-sizing: border-box;
4+
box-sizing: border-box;
5+
-webkit-font-smoothing: antialiased;;
6+
}
7+
18
html, textarea, input, select {
29
font-family: 'Trebuchet MS', sans-serif;
10+
padding: 0.5em;
11+
min-height: 33px;
312
}
413

514
html, body {

‎index.html

+2-10
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,8 @@
88
<body class="index">
99
<h1>Hooked on AngularJS</h1>
1010
<ol>
11-
<li><a href="/step1/" target="_self">Getting Started with a Blank Template</a></li>
12-
<li><a href="/step2/" target="_self">Create a Controller with a List</a></li>
13-
<li><a href="/step3/" target="_self">Utilize an External Datasource</a></li>
14-
<li><a href="/step4/" target="_self">Filtering &amp; Sorting a List</a></li>
15-
<li><a href="/step5/" target="_self">Routing Multiple Views</a></li>
16-
<li><a href="/step6/" target="_self">View Animations</a></li>
17-
<li><a href="/step7/" target="_self">Add Event Handlers</a></li>
18-
<li><a href="/step8/" target="_self">Create a Directive</a></li>
19-
<li><a href="/step9/" target="_self">Create a Service Factory Function</a></li>
20-
<li><a href="/step10/" target="_self">Understanding Strict Contextual Escaping</a></li>
11+
<li><a href="/step1/" target="_self">AngularJS Basics</a></li>
12+
<li><a href="/step2/" target="_self">Building a Google Maps Directive</a></li>
2113
</ol>
2214
</body>
2315
</html>

‎step1/index.html

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
<!doctype html>
2-
<html lang="en" ng-app>
2+
<html lang="en" ng-app="demoApp">
33
<head>
44
<meta charset="utf-8">
5-
<title>Step 1 - Getting Started with a Blank Template</title>
5+
<title>AngularJS Basics</title>
66
<link rel="stylesheet" href="/css/global.css">
77
<script src="/angular/angular.min.js"></script>
8-
</head>
8+
<script src="/angular/angular-route.min.js"></script>
9+
<script src="js/app.js"></script>
10+
<script src="js/controllers.js"></script>
11+
</head>
912
<body>
10-
<p>1 + 2 = {{ 1 + 2 }}</p>
13+
<div ng-view></div>
1114
</body>
1215
</html>

‎step1/js/app.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
var demoApp = angular.module('demoApp', [
2+
'ngRoute',
3+
'demoControllers'
4+
]);
5+
6+
demoApp.run(function($rootScope) {
7+
$rootScope.phones = null;
8+
});
9+
10+
demoApp.config(['$routeProvider',
11+
function($routeProvider) {
12+
$routeProvider.
13+
when('/phones', {
14+
templateUrl: 'partials/phone-list.html',
15+
controller: 'PhoneListCtrl'
16+
}).
17+
when('/phones/:phoneId', {
18+
templateUrl: 'partials/phone-detail.html',
19+
controller: 'PhoneDetailCtrl'
20+
}).
21+
otherwise({
22+
redirectTo: '/phones'
23+
});
24+
}]);

‎step1/js/controllers.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
var demoControllers = angular.module('demoControllers', []);
2+
3+
demoControllers.controller('PhoneListCtrl', ['$scope', '$rootScope', '$http',
4+
function ($scope, $rootScope, $http) {
5+
if(angular.isObject($rootScope.phones)) {
6+
$scope.phones = $rootScope.phones;
7+
} else {
8+
$http.get('/json/phones.json').success(function(data) {
9+
$rootScope.phones = $scope.phones = data;
10+
});
11+
}
12+
}
13+
]);
14+
15+
demoControllers.controller('PhoneDetailCtrl', ['$scope', '$rootScope', '$routeParams',
16+
function($scope, $rootScope, $routeParams) {
17+
$scope.phoneId = $routeParams.phoneId;
18+
$scope.phones = $rootScope.phones;
19+
}
20+
]);

‎step1/partials/phone-detail.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div class="inner">
2+
<div class="detailed" ng-repeat="phone in phones | filter: { id : phoneId }">
3+
<img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}">
4+
<h3>{{phone.name}}</h3>
5+
<a href="#/phones">Back to Phones</a>
6+
</div>
7+
</div>

‎step1/partials/phone-list.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="inner">
2+
<input id="searcher" ng-model="query" placeholder="Search" />
3+
<select id="sorter" ng-model="orderProp">
4+
<option value="">Sort By</option>
5+
<option value="name">Alphabetical</option>
6+
<option value="age">Newest</option>
7+
</select>
8+
<ul>
9+
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
10+
<p><a href="#/phones/{{phone.id}}">{{phone.name}}</a> - {{phone.snippet}}</p>
11+
</li>
12+
</ul>
13+
</div>

0 commit comments

Comments
 (0)