-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
83 lines (71 loc) · 6.49 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!doctype html>
<head>
<meta charset="utf-8" />
<title>MVC Module - Home Page</title>
<!-- stylesheets -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Introduction to Model - View - Controllers</h1>
<hr>
<p>Welcome to the next learning module of the class. For the next two weeks, we'll be introducing the important topic of <b>Model - View - Controller</b>. </p>
<p><a href="additionalReading/mvc_wiki.pdf" target="blank">Model–View–Controller</a> (MVC) is a software architectural pattern for implementing user interfaces. It divides a given software application into three interconnected parts, so as to separate internal representations of information from the ways that information is presented to or accepted from the user. This architecture has become extremely popular for designing web applications.</p>
<img src="img/mvc.png">
<p>In the diagram above, the three components of the MVC architecture are shown along with their interactions.</p>
<ul>
<li>The view is responsible for defining and rendering the UI.</li>
<li>The model manages the application data.</li>
<li>The controller reacts to view events and user interaction by modifying the view and model.</li>
</ul>
<p>One of the chief underlying principles behind the popularity of MVC architecture is <a href="additionalReading/soc_wiki.pdf" target="blank">Separation of Concerns</a>. The idea is that a software system should be broken into smaller parts that perform specific tasks and overlap in function as little as possible. If done properly, this 'de-coupling' of functionality can lead to better maintainability, extensibility and reusability of the various components.</p>
<h2>MVC Frameworks</h2>
<p>In today's development market, MVC libraries and frameworks are in practically universal use. There are implementations in most major languages, and each one approaches the same problems a little differently. Is one any better than the next? Well, if you ask a group of developers that question, things might get heated pretty quickly. There are strong opinions in the developer community, but the truth is that each option does something well, and the best solution usually depends on the individual project.</p>
<p>For this module, we will look at high-level concepts and work with one of the most popular MVC frameworks in today's market, <b>AngularJS.</b> Also, we have also included the source code, documentation and a text reference for <b>BackboneJS</b>. There are no specific exercises here for Backbone, but feel free to play with it if you like.</p>
<h2>Introduction to AngularJS</h2>
<p>AngularJS is one of the most popular MVC frameworks currently in use, and it will be our focus for this module. There is no way that we could possibly cover the entire scope of this feature-rich software in such a short period of time, so we will spend our time introducing high-level concepts and writing code to implement basic Angular functionality.</p>
<p>If you find that you move quickly through this material, there are additional text resources linked below in the "Additional Reading Material" section.</p>
<p>To get started, follow this link - <a href="angularIntro/angIntro.html">Introduction to AngularJS</a></p>
<h2>AngularJS Exercises</h2>
<p>When you're ready to move on, this section offers some easy, and some more challenging exercises with Angular. Be sure to read the documentation thoroughly, to use your <b>Zeal</b> docs for Angular, and to read the code comments in the "/angularjs-part-01/"" exercise files.</p>
<p>To get started, follow this link - <a href="additionalReading/angular_exercises.pdf" target="blank">AngularJS Exercises</a></p>
<h2>Introduction to REST</h2>
<p>Even though we won't really be working with RESTful practices in this module, they are closely related to the topic of <b>routing</b> within web applications, especially using MVC architecture. We'll introduce them here, and include some references in the Additional Reading Materials below.</p>
<p>REST stands for Representational State Transfer, and is an architecture for creating web services. Read the following material for an introduction to the concepts. You'll definitely learn more about this later!</p>
<ul>
<li><a href="additionalReading/rest_wiki.pdf" target="blank">REST - Wikipedia</a> </li>
<li><a href="intro-REST-APIs/rest_idx.html">Intro to REST API's</a></li>
</ul>
<hr>
<h3>Goals</h3>
<p>Your goal for this learning module should be the following:</p>
<ul>
<li>Gain a high-level understanding of the Model / View / Controller Architecture</li>
<li>Be able to discuss why seperation of concerns in web application development is important, and desirable.</li>
<li>Gain your first experience with AngularJS, and write code to implement the exercises in this module.</li>
<li>Gain a high-level understanding of REST, and how it relates to routing in web applications.</li>
</ul>
<hr>
<h2>Resources</h2>
<h3>Additional Reading Material</h3>
<ul>
<li><a href="additionalReading/angular_lecture_slides.pdf" target="blank">Angular Lecture Slides</a> </li>
<li><a href="additionalReading/AngularJS_Expressions.pdf" target="blank">Angular Expressions Reference</a> </li>
<li><a href="additionalReading/AngularJS_2013.pdf" target="blank">Angular JS</a> </li>
<li><a href="additionalReading/AngularJSDirectives_2013.pdf" target="blank">Angular JS Directives</a> </li>
<li><a href="additionalReading/D3onAngularJS_2014.pdf" target="blank">D3 on AngularJS</a> </li>
<li><a href="additionalReading/ng-book.pdf" target="blank">ng-book</a> </li>
<li><a href="additionalReading/ProAngularJS_2014.pdf" target="blank">Pro AngularJS</a> </li>
<li><a href="additionalReading/ThinkingLikeanEngineer.pdf" target="blank">Thinking Like an Engineer</a> </li>
<li><a href="additionalReading/Backbone.pdf" target="blank">BackboneJS Documentation</a> </li>
<li><a href="additionalReading/backbonetutorials.pdf" target="blank">Backbone Tutorials</a> </li>
<li><a href="additionalReading/mvc_google_intro.pdf" target="blank">Google: Model - View - Controllers</a> </li>
<li><a href="additionalReading/mvc_overview01.pdf" target="blank">MVC Overview</a> </li>
<li><a href="additionalReading/mvc_forJS_devs.pdf" target="blank">MVC for JavaScript Developers</a> </li>
</ul>
<h3>Data Sets and Libraries</h3>
<ul>
<li><a href="resources/lib/angular.js">AngularJS Annotated Source Code</a> </li>
<li><a href="resources/lib/backbone.js">BackboneJS Annotated Source Code</a> </li>
</ul>
</body>
</html>