Skip to content

Commit 2687c4a

Browse files
thewheatthewheat
committed
Add intro pages demonstrating angular features
1 parent b55754b commit 2687c4a

10 files changed

+360
-2
lines changed

‎README.md

+11-2
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,14 @@ angularjs-intro
22
===============
33
A quick intro into different Angular concepts
44

5-
Depends on the AngularJS Phone Catalog Tutorial Application
6-
https://github.com/angular/angular-phonecat/
5+
Will need [nodejs].org to run the webserver and for the main angular-phonecat tutorial (please see README.angular-phonecat.md for details)
6+
7+
1. Go to directory
8+
2. Dependencies shouldn't be needed for just running the app but if they are get dependencies using ```npm install```
9+
3. Run ```node scripts/web-server.js``` from the main directory to run a local webserver
10+
4. http://localhost:8000/app/intro.html (port may change depending on your comupter. Check the console for exact)
11+
12+
Depends on the AngularJS Phone Catalog Tutorial Application: https://github.com/angular/angular-phonecat/
13+
(Also see README.angular-phonecat.md)
14+
15+
[nodejs]: http://nodejs.org/

‎app/css/intro.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
div.info{
3+
padding: 0.5em;
4+
margin: 0.5em 0;
5+
background-color: #cccc66;
6+
}
7+
8+
div.section{
9+
padding: 1em;
10+
border-bottom: 1px solid black;
11+
}

‎app/intro-my-pane.html

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<div class="tab-pane" ng-show="selected" ng-transclude>
2+
</div>

‎app/intro-my-tabs.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class="tabbable">
2+
<ul class="nav nav-tabs">
3+
<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">
4+
<a href="" ng-click="select(pane)">{{pane.title}}</a>
5+
</li>
6+
</ul>
7+
<div class="tab-content" ng-transclude></div>
8+
</div>

‎app/intro.html

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!doctype html>
2+
<html lang="en" ng-app="angularApp">
3+
<head>
4+
<meta charset="utf-8">
5+
<link rel="stylesheet" href="css/app.css">
6+
<link rel="stylesheet" href="css/bootstrap.css">
7+
<link rel="stylesheet" href="css/intro.css">
8+
<script src="lib/angular/angular.js"></script>
9+
<script src="lib/angular/angular-route.js"></script> <!-- needed for app js for routing -->
10+
<script src="lib/angular/angular-resource.js"></script> <!-- needed for services using ngResource -->
11+
<script src="js/intro-app.js"></script>
12+
<script src="js/intro-controllers.js"></script>
13+
<script src="js/intro-filters.js"></script>
14+
<script src="js/intro-directives.js"></script>
15+
<script src="js/intro-services.js"></script>
16+
17+
</head>
18+
<body>
19+
<div class="section">
20+
<h3>Resources</h3>
21+
<ol>
22+
<li><a href="http://angularjs.org/">Angular website</a> (with interactive examples and code)</li>
23+
<li><a href="http://docs.angularjs.org/tutorial/index">Tutorial</a> with <a href="https://github.com/angular/angular-phonecat/">GitHub code</a></li>
24+
<li><a href="http://docs.angularjs.org/guide/concepts">Angular Concepts</a></li>
25+
<li><a href="http://docs.angularjs.org/guide/controller">Controllers Guide</a></li>
26+
<li><a href="http://docs.angularjs.org/guide/filter">Filters Guide</a></li>
27+
<li><a href="http://docs.angularjs.org/guide/dev_guide.services.understanding_services">Services Guide</a></li>
28+
<li><a href="http://docs.angularjs.org/tutorial/step_07">Routing & Partials</a> (from tutorial)</li>
29+
<li><a href="http://docs.angularjs.org/guide/directive">Directives Guide</a></li>
30+
</ol>
31+
</div>
32+
<div class="section" ng-controller="introBindingCtrlByFunction">
33+
<h3>Data binding and Scopes</h3>
34+
<div class='info'>using <code>introBindingCtrlByFunction</code> in <code>intro-controllers.js</code> </div>
35+
Search: <input ng-model="query">
36+
<div id="status">Current search: {{query}}</div>
37+
Number of Characters in search: {{lengthOfInput()}}
38+
</div>
39+
<div class="section" ng-controller="introBindingCtrl">
40+
<h3>Data binding, Scopes, Filter</h3>
41+
<div class='info'>using <code>introBindingCtrl</code> in <code>intro-controllers.js</code> </div>
42+
Search: <input ng-model="query">
43+
<div id="status">Current filter: {{query}}</div>
44+
<div class="devices">
45+
<div ng-repeat="device in devices | filter:query | orderBy:orderProp" class="row">
46+
47+
<span class='span1'><a href="#/devices/{{device.id}}">{{device.name}}</a></span>
48+
<span class='span1'>{{device.type}}</span>
49+
<span class='span2'>{{device.resolution}} (Full HD: {{device.resolution | check1080p }})</span>
50+
<span class='span1'>{{device.os}}</span>
51+
<span class='span1'>{{device.screen_size}}</span>
52+
</div>
53+
</div>
54+
</div>
55+
<div class="section" ng-controller="introBindingCtrl">
56+
<h3>Directives</h3>
57+
<div class='info'>using
58+
<ol>
59+
<li><code>myDraggable</code> in <code>intro-directives.js</code></li>
60+
<li><code>myTabs</code> in <code>intro-directives.js</code></li>
61+
<li><code>myPane</code> in <code>intro-directives.js</code></li>
62+
</ol>
63+
</div>
64+
<h4>Custom Behaviour</h3>
65+
<div>
66+
<span my-draggable>Drag ME</span>
67+
<span my-draggable>Drag ME too</span>
68+
<span my-draggable>just add "my-draggable" as an attribute</span>
69+
</div>
70+
<br>
71+
<h4>Custom HTML Tags</h3>
72+
<my-tabs>
73+
<my-pane title="Hello">
74+
<h5 id="creating-custom-directives_source_hello">Hello</h5>
75+
<p>Lorem ipsum dolor sit amet</p>
76+
</my-pane>
77+
<my-pane title="World">
78+
<h5 id="creating-custom-directives_source_world">World</h5>
79+
<em>Mauris elementum elementum enim at suscipit.</em>
80+
<p><a href ng-click="i = i + 1">counter: {{i || 0}}</a></p>
81+
</my-pane>
82+
</my-tabs>
83+
84+
</div>
85+
<div class="section" ng-controller="PhoneListCtrlNotUsingService">
86+
<h3>Retrieving Data via AJAX</h3>
87+
<div class='info'>using <code>PhoneListCtrlNotUsingService</code> in <code>intro-controllers.js</code> </div>
88+
<textarea style='font-family: monospace; height: 150px; width: 100%'>{{phones | json }}</textarea>
89+
</div>
90+
<div class="section">
91+
<h3>Routing and Services</h3>
92+
<div class='info'>using
93+
<ol>
94+
<li><code>angularApp</code> in <code>intro-app.js</code> (main app and dependencies)</li>
95+
<li><code>angularAppJS.config(['$routeProvider',...])</code> in <code>intro-app.js</code> (routing URLs to controllers and partials and putting it in ng-view)</li>
96+
<li><code>introServices</code> in <code>intro-services.js</code></li>
97+
</ol>
98+
</div>
99+
100+
<div class="view-container">
101+
<div ng-view class="view-frame"></div>
102+
</div>
103+
</div>
104+
105+
</body>
106+
</html>
107+
108+

‎app/js/intro-app.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
'use strict';
2+
3+
/* App Module */
4+
var angularAppJS = angular.module('angularApp', [
5+
'ngRoute',
6+
'introControllers',
7+
'introFilters',
8+
'introServices',
9+
'introDirectives'
10+
]);
11+
12+
angularAppJS.config(['$routeProvider',
13+
function($routeProvider) {
14+
$routeProvider.
15+
when('/phones', {
16+
templateUrl: 'partials/phone-list.html',
17+
controller: 'PhoneListCtrl'
18+
}).
19+
when('/phones/:phoneId', {
20+
templateUrl: 'partials/phone-detail.html',
21+
controller: 'PhoneDetailCtrl'
22+
}).
23+
otherwise({
24+
redirectTo: '/phones'
25+
});
26+
}]);

‎app/js/intro-controllers.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
'use strict';
2+
3+
/* Controllers */
4+
5+
6+
// creates a module in angular
7+
// modules are loaded in app.js
8+
var appControllers = angular.module('introControllers', []);
9+
10+
11+
function introBindingCtrlByFunction($scope){
12+
$scope.query = "Default query";
13+
$scope.lengthOfInput = function(){
14+
return $scope.query.length;
15+
}
16+
}
17+
18+
appControllers.controller('introBindingCtrl', function($scope){
19+
$scope.query = "Nexus";
20+
$scope.devices = [
21+
{'name': 'Nexus 5', 'os': 'Android', 'type': 'Phone', 'resolution': '1920x1080', 'screen_size': '4.95'}
22+
,{'name': 'Nexus 4', 'os': 'Android', 'type': 'Phone', 'resolution': '1280x768', 'screen_size': '4.7'}
23+
,{'name': 'Nexus 10', 'os': 'Android', 'type': 'Tablet', 'resolution': '2560x1600', 'screen_size': '10'}
24+
,{'name': 'Nexus 7', 'os': 'Android', 'type': 'Tablet', 'resolution': '1920x1200', 'screen_size': '7'}
25+
,{'name': 'iPhone 5', 'os': 'iOS', 'type': 'Phone', 'resolution': '1136x640', 'screen_size': '4'}
26+
,{'name': 'iPhone 4S', 'os': 'iOS', 'type': 'Phone', 'resolution': '960x640', 'screen_size': '3.5'}
27+
,{'name': 'iPad', 'os': 'iOS', 'type': 'Tablet', 'resolution': '2048x1536', 'screen_size': '9.7'}
28+
,{'name': 'iPad Mini', 'os': 'iOS', 'type': 'Tablet', 'resolution': '2048x1536', 'screen_size': '7.9'}
29+
];
30+
$scope.lengthOfInput = function(){
31+
return $scope.query.length+2;
32+
}
33+
});
34+
35+
36+
// from angular tutorial
37+
appControllers.controller('PhoneListCtrl', ['$scope', 'Phone', function($scope, Phone) {
38+
$scope.phones = Phone.query();
39+
$scope.orderProp = 'age';
40+
}]);
41+
42+
appControllers.controller('PhoneListCtrlNotUsingService', ['$scope', '$http',
43+
function ($scope, $http) {
44+
$http.get('phones/phones.json').success(function(data) {
45+
$scope.phones = data;
46+
});
47+
$scope.orderProp = 'age';
48+
}
49+
]);
50+
51+
52+
appControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone', function($scope, $routeParams, Phone) {
53+
$scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
54+
$scope.mainImageUrl = phone.images[0];
55+
});
56+
57+
$scope.setImage = function(imageUrl) {
58+
$scope.mainImageUrl = imageUrl;
59+
}
60+
}]);

‎app/js/intro-directives.js

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
var appDirectives = angular.module('introDirectives', []);
2+
3+
4+
// from http://docs.angularjs.org/guide/directive
5+
appDirectives.directive('myDraggable', function($document) {
6+
return function(scope, element, attr) {
7+
var startX = 0, startY = 0, x = 0, y = 0;
8+
9+
element.css({
10+
position: 'relative',
11+
border: '1px solid red',
12+
backgroundColor: 'lightgrey',
13+
cursor: 'pointer'
14+
});
15+
16+
element.on('mousedown', function(event) {
17+
// Prevent default dragging of selected content
18+
event.preventDefault();
19+
startX = event.pageX - x;
20+
startY = event.pageY - y;
21+
$document.on('mousemove', mousemove);
22+
$document.on('mouseup', mouseup);
23+
});
24+
25+
function mousemove(event) {
26+
y = event.pageY - startY;
27+
x = event.pageX - startX;
28+
element.css({
29+
top: y + 'px',
30+
left: x + 'px'
31+
});
32+
}
33+
34+
function mouseup() {
35+
$document.unbind('mousemove', mousemove);
36+
$document.unbind('mouseup', mouseup);
37+
}
38+
}
39+
});
40+
41+
appDirectives.directive('myTabs', function() {
42+
return {
43+
restrict: 'E',
44+
transclude: true,
45+
scope: {},
46+
controller: function($scope) {
47+
var panes = $scope.panes = [];
48+
49+
$scope.select = function(pane) {
50+
angular.forEach(panes, function(pane) {
51+
pane.selected = false;
52+
});
53+
pane.selected = true;
54+
};
55+
56+
this.addPane = function(pane) {
57+
if (panes.length == 0) {
58+
$scope.select(pane);
59+
}
60+
panes.push(pane);
61+
};
62+
},
63+
templateUrl: 'intro-my-tabs.html'
64+
};
65+
})
66+
.directive('myPane', function() {
67+
return {
68+
require: '^myTabs',
69+
restrict: 'E',
70+
transclude: true,
71+
scope: {
72+
title: '@'
73+
},
74+
link: function(scope, element, attrs, tabsCtrl) {
75+
tabsCtrl.addPane(scope);
76+
},
77+
templateUrl: 'intro-my-pane.html'
78+
};
79+
});

‎app/js/intro-filters.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
'use strict';
2+
3+
/* Filters */
4+
5+
var appFilters = angular.module('introFilters', []);
6+
appFilters.filter('checkmark', function() {
7+
return function(input) {
8+
return input ? '\u2713' : '\u2718';
9+
};
10+
});
11+
12+
appFilters.filter('check1080p', function() {
13+
return function(resolution) {
14+
var res_x_y;
15+
var x = 0; var y = 0;
16+
try{
17+
res_x_y = resolution.split("x");
18+
x =parseInt(res_x_y[0]);
19+
y = parseInt(res_x_y[1]);
20+
if(y > x) {
21+
var t = x;
22+
x = y;
23+
y = t;
24+
}
25+
26+
}catch(err){
27+
28+
}
29+
if(isNaN(x)) x = 0;
30+
if(isNaN(y)) y = 0;
31+
return (y >= 1080 && x >= 1920) ? '\u2713' : '\u2718';
32+
33+
};
34+
});

‎app/js/intro-services.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
'use strict';
2+
3+
/* Services */
4+
5+
var appServices = angular.module('introServices', ['ngResource']);
6+
7+
8+
// http://docs.angularjs.org/api/ng.$http
9+
// http://docs.angularjs.org/api/ngResource.$resource
10+
// http://stackoverflow.com/questions/13181406/angularjs-http-and-resource
11+
// $http is for general purpose AJAX. In most cases this is what you'll be using. With $http you're going to be making GET, POST, DELETE type calls manually and processing the objects they return on your own.
12+
// $resource wraps $http for use in RESTful web API scenarios.
13+
14+
15+
// from anugalr tutorial
16+
appServices.factory('Phone', ['$resource',
17+
function($resource){
18+
return $resource('phones/:phoneId.json', {}, {
19+
query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
20+
});
21+
}]);

0 commit comments

Comments
 (0)