Skip to content

Commit 81cab38

Browse files
IgorMinarIgorMinar
committed
primer slides
1 parent 36ccffd commit 81cab38

File tree

2 files changed

+190
-0
lines changed

2 files changed

+190
-0
lines changed

‎angular-primer/img/google-logo-small.png

8.27 KB
Loading

‎angular-primer/index.html

+190
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
<!doctype html>
2+
<html lang="en" xmlns:ng="http://angularjs.org/">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>AngularJS Intro</title>
6+
<script src="../jquery-1.4.2.min.js"></script>
7+
<script src="../angular-0.9.17.js" ng:autobind></script>
8+
<script src="../syntaxhighlighter/shCore.js"></script>
9+
<script src="../syntaxhighlighter/shBrushJScript.js"></script>
10+
<script src="../syntaxhighlighter/shBrushXml.js"></script>
11+
<link rel="stylesheet" href="../syntaxhighlighter/shCore.css" type="text/css"/>
12+
<link rel="stylesheet" href="../syntaxhighlighter/shThemeDefault.css" type="text/css"/>
13+
<script src="../slide.js"></script>
14+
</head>
15+
<body>
16+
17+
<slide>
18+
19+
20+
<h1>AngularJS</h1>
21+
<h2>The Primer</h2>
22+
23+
24+
25+
<p>Igor Minar<br>Miško Hevery</p>
26+
</slide>
27+
28+
29+
<!-- **** -->
30+
31+
32+
<slide title="What is AngularJS?">
33+
34+
<ul>
35+
<li>JavaScript Framework for building Web Apps</li>
36+
<li>2.5+ years old</li>
37+
<li>Pure JavaScript</li>
38+
<li>Open Source (@github, MIT)</li>
39+
<li>Google Funded</li>
40+
</ul>
41+
</slide>
42+
43+
44+
<!-- **** -->
45+
46+
47+
<slide title="Yet another JS Framework?">
48+
49+
<h2 class="center">
50+
Why?
51+
</h2>
52+
<h2 class="center">
53+
Because AngularJS
54+
is
55+
fundamentally different.
56+
</h2>
57+
</slide>
58+
59+
60+
<!-- **** -->
61+
62+
63+
<slide title="AngularJS Philosophy">
64+
65+
66+
<pre><h2 class="center">
67+
Be aligned with the past
68+
and
69+
the future of the web.</h2></pre>
70+
</slide>
71+
72+
73+
<!-- **** -->
74+
75+
76+
<slide>
77+
78+
79+
80+
81+
<h2 class="center">
82+
3 pillars of AngularJS
83+
</h2>
84+
</slide>
85+
86+
87+
<!-- **** -->
88+
89+
90+
<slide title="Templating">
91+
92+
93+
<h2 class="center">
94+
DOM-based extensible templating
95+
</h2>
96+
97+
</slide>
98+
99+
100+
<!-- **** -->
101+
102+
103+
<slide title="Templating">
104+
105+
106+
<pre><code style="font-size: 20px; color: black;" ng:non-bindable>
107+
&lt;ul&gt;
108+
&lt;li ng-repeat="user in users" ng-click="selectUser(user)"&gt;
109+
{{user.name}}
110+
&lt;/li&gt;
111+
&lt;/ul&gt;
112+
113+
&lt;markdown&gt;*Hello* **world**!&lt;/markdown&gt;
114+
</code></pre>
115+
116+
</slide>
117+
118+
119+
120+
<!-- **** -->
121+
122+
123+
<slide title="Model Observation">
124+
125+
126+
<h2 class="center">
127+
Nonintrusive model mutation observation
128+
</h2>
129+
130+
</slide>
131+
132+
133+
<!-- **** -->
134+
135+
136+
<slide title="Model Observation">
137+
138+
139+
<pre><code style="font-size: 20px; color: black;">
140+
users = [
141+
{id: 1, name: 'Bob'},
142+
{id: 2, name: 'Jim'}
143+
]
144+
</code></pre>
145+
146+
</slide>
147+
148+
149+
<!-- **** -->
150+
151+
152+
<slide title="Maintainability">
153+
154+
155+
<h2 class="center">
156+
App structure and testability
157+
with Dependency Injection
158+
</h2>
159+
</slide>
160+
161+
162+
<!-- **** -->
163+
164+
165+
<slide title="Maintainability">
166+
167+
168+
<pre><code style="font-size: 20px; color: black;">
169+
function SettingsController($http, dialog) {
170+
...
171+
}
172+
// SettingsController.$inject = ['$http', 'dialog'];
173+
</code></pre>
174+
</slide>
175+
176+
177+
178+
<!-- **** -->
179+
180+
181+
<slide title="Demo time!">
182+
<h2 class="center">
183+
+AngularJS
184+
@AngularJs
185+
186+
<a href="http://angularjs.org">http://angularjs.org</a>
187+
</h2>
188+
</slide>
189+
</body>
190+
</html>

0 commit comments

Comments
 (0)