Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… ·...
Transcript of Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… ·...
![Page 2: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/2.jpg)
Deborah Kurata
Independent Consultant | Developer | Mentor
Web (Angular), .NET
Pluralsight Author
AngularJS Line of Business Applications
Angular Front to Back with Web API
Object-Oriented Programming Fundamentals in C#
Microsoft MVP
![Page 3: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/3.jpg)
Session Materials & Sample Code
![Page 4: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/4.jpg)
New to Angular - no proficiency
Just starting out - limited proficiency
Doing it, not fully understanding it - working proficiency
Been there, done that, can help others - full proficiency
Rate Yourself on Angular
![Page 5: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/5.jpg)
Introduction to Angular
Angular and HTML: Building a View
Data Binding
Angular Code: Building the Module & Controller
Bootstrap: Styling the View
Overview - Part 1
![Page 6: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/6.jpg)
Introduction to SPA
Rule-Based Navigation / Routing
Routing Frameworks (ngRoute/ngNewRouter)
JavaScript Promises
Accessing Data by Calling an HTTP Service
Reusable Code: Building a Service
Overview - Part 2
![Page 7: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/7.jpg)
![Page 8: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/8.jpg)
A client-side JavaScript framework for building
interactive Web applications
Brings simple/clean back to complex Web apps
Originally developed by Google
Now open source: https://angularjs.org/
![Page 9: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/9.jpg)
![Page 10: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/10.jpg)
DOM
Document Object Model
Tree structure that defines all of the
loaded elements in an HTML document
![Page 11: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/11.jpg)
![Page 12: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/12.jpg)
Why Angular?
![Page 13: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/13.jpg)
Movie List View<div ng-controller="MovieListCtrl"><div>{{title}}</div><div>Filter by:</div><input type="text" ng-model="listFilter" />
<div ng-show="listFilter"><h3>Movies filtered by: {{listFilter}}</h3>
</div>
<table ng-if="movies.length"><thead>
<tr><td><button type="button"
ng-click="toggleImage()">{{showImage ? "Hide" : "Show"}} Poster
</button></td><td>Title</td> <td>Director</td> <td>Release Date</td> <td>Rating</td>
</tr></thead><tbody><tr ng-repeat="movie in movies | filter : {title:listFilter} | orderBy : 'title'">
<td><img ng-show="showImage"ng-src="{{movie.imageurl}}" title="{{movie.title}}"></td>
<td>{{ movie.title}}</td><td>{{ movie.director }}</td><td>{{ movie.releaseDate | date }}</td><td>{{ movie.mpaa | uppercase}}</td>
</tr></tbody>
</table></div>
![Page 14: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/14.jpg)
Directives
Extend HTML Apply special behavior to attributes or elements
in the HTML
Are simple to define in the HTML
○ Prefixed with "ng-"
Provide an extensive set of features and capabilities
![Page 15: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/15.jpg)
Directives
<body ng-app="movieHunter">
<table ng-if="movies.length">
<tr ng-repeat="movie in movies | orderBy:'title' ">
<img ng-show="showImage"
ng-src="" />
<button type="button"
ng-click="toggleImage()">Poster
</button>
![Page 16: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/16.jpg)
One Way Data Binding
View is a projection of the model
When the model changes, the view reflects the change
Binding Expression○ {{movie.title}}
![Page 17: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/17.jpg)
One Way Data Binding
<tr ng-repeat="movie in movies | orderBy:'title' ">
<td>
<img ng-show="showImage"
ng-src="{{movie.imageurl}}" />
</td>
<td>
<a>{{movie.title}}</a>
</td>
<td>{{movie.director}}</td>
<td>{{movie.date | date}}</td>
<td>{{movie.mpaa | uppercase}}</td>
</tr>
![Page 18: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/18.jpg)
Two Way Data Binding
Data in the model and the view are synchronized
Changes to the model are reflected in the view
Changes in the view are reflected in the model
Define using a directive: ng-model○ ng-model="listFilter"
![Page 19: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/19.jpg)
Two Way Data Binding
<div>
<div>Filter by:</div>
<div>
<input type="text" ng-model="listFilter" />
</div>
</div>
<div ng-show="listFilter">
<h3>Movies filtered by: {{listFilter}}</h3>
</div>
<tr ng-repeat="movie in movies | orderBy:'title'
| filter : {title : listFilter}">
![Page 20: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/20.jpg)
Directives and Binding
Directives
ng-app
ng-if
ng-repeat
ng-show/ng-hide
ng-model
Data Binding
One way binding
○ {{movie.title}}
Two way binding
○ ng-model="listFilter"
![Page 21: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/21.jpg)
Angular Code
Write using
JavaScript
TypeScript
Divided into
Modules
Controllers
Services
![Page 22: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/22.jpg)
Module
Defines an Angular
component
Tracks the application
code
Tracks all of the dependencies
for the application
Keeps the application
modularized
![Page 23: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/23.jpg)
Angular Module Method
angular.module("movieHunter", ["ngRoute",
"common.services"]);
Setter Method
angular.module("movieHunter");
Getter Method
![Page 24: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/24.jpg)
Angular Main Module
var app = angular.module("movieHunter", []);
![Page 25: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/25.jpg)
Angular Main Module
function () {var app = angular.module("movieHunter",
[]);}
![Page 26: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/26.jpg)
Angular Main Module - IIFE
(function () {var app = angular.module("movieHunter",
[]);}());
![Page 27: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/27.jpg)
The IIFE JavaScript Pattern
Immediately-Invoked Function Expression
JavaScript var declarations have global scope
JavaScript variables and functions defined within
a function have local scope
(function () {// Code here
}());
![Page 28: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/28.jpg)
Module
One "main" module for the application
Any number of additional modules
Group related functionality
Define reusable common code
![Page 29: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/29.jpg)
Controller
• Movies
Defines the Model
• Hide/Show Images
Implements Methods
![Page 30: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/30.jpg)
View, Controller, and $scope
<div ng-controller="MovieListCtrl">
</div>
![Page 31: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/31.jpg)
Angular Controller(function () {
"use strict";
angular.module("movieHunter").controller("MovieListCtrl",
["$scope",MovieListCtrl]);
function MovieListCtrl($scope) {
$scope.movies = [];$scope.title = "Search by Movie Title";$scope.showImage = false;
$scope.toggleImage = function () {$scope.showImage = !$scope.showImage;
};
}());
![Page 32: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/32.jpg)
Angular "Controller As" Syntax
(function () {"use strict";
angular.module("movieHunter").controller("MovieListCtrl",
["$scope",MovieListCtrl]);
function MovieListCtrl($scope) {
$scope.movies = [];$scope.title = "Search by Movie Title";$scope.showImage = false;
$scope.toggleImage = function () {$scope.showImage = !$scope.showImage;
};
}());
![Page 33: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/33.jpg)
Angular "Controller As" Syntax
(function () {"use strict";
angular.module("movieHunter").controller("MovieListCtrl",
[MovieListCtrl]);
function MovieListCtrl() {
$scope.movies = [];$scope.title = "Search by Movie Title";$scope.showImage = false;
$scope.toggleImage = function () {$scope.showImage = !$scope.showImage;
};
}());
![Page 34: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/34.jpg)
Angular "Controller As" Syntax
(function () {"use strict";
angular.module("movieHunter").controller("MovieListCtrl",
[MovieListCtrl]);
function MovieListCtrl() {var vm = this;$scope.movies = [];$scope.title = "Search by Movie Title";$scope.showImage = false;
$scope.toggleImage = function () {$scope.showImage = !$scope.showImage;
};
}());
![Page 35: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/35.jpg)
Angular "Controller As" Syntax
(function () {"use strict";
angular.module("movieHunter").controller("MovieListCtrl",
[MovieListCtrl]);
function MovieListCtrl() {var vm = this;vm.movies = [];vm.title = "Search by Movie Title";vm.showImage = false;
vm.toggleImage = function () {vm.showImage = !vm.showImage;
};
}());
![Page 36: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/36.jpg)
View "Controller As" Syntax<div ng-controller="MovieListCtrl"><div>{{title}}</div><div>Filter by:</div><input type="text" ng-model="listFilter" />
<div ng-show="listFilter"><h3>Movies filtered by: {{listFilter}}</h3>
</div>
<table ng-if="movies.length"><thead>
<tr><td><button type="button"
ng-click="toggleImage()">{{showImage ? "Hide" : "Show"}} Poster
</button></td><td>Title</td> <td>Director</td> <td>Release Date</td> <td>Rating</td>
</tr></thead><tbody><tr ng-repeat="movie in movies | filter : {title:listFilter} | orderBy : 'title'">
<td><img ng-show="showImage"ng-src="{{movie.imageurl}}" title="{{movie.title}}"></td>
<td>{{ movie.title}}</td><td>{{ movie.director }}</td><td>{{ movie.releaseDate | date }}</td><td>{{ movie.mpaa | uppercase}}</td>
</tr></tbody>
</table></div>
![Page 37: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/37.jpg)
View "Controller As" Syntax<div ng-controller="MovieListCtrl as vm"><div>{{title}}</div><div>Filter by:</div><input type="text" ng-model="listFilter" />
<div ng-show="listFilter"><h3>Movies filtered by: {{listFilter}}</h3>
</div>
<table ng-if="movies.length"><thead>
<tr><td><button type="button"
ng-click="toggleImage()">{{showImage ? "Hide" : "Show"}} Poster
</button></td><td>Title</td> <td>Director</td> <td>Release Date</td> <td>Rating</td>
</tr></thead><tbody><tr ng-repeat="movie in movies | filter : {title:listFilter} | orderBy : 'title'">
<td><img ng-show="showImage"ng-src="{{movie.imageurl}}" title="{{movie.title}}"></td>
<td>{{ movie.title}}</td><td>{{ movie.director }}</td><td>{{ movie.releaseDate | date }}</td><td>{{ movie.mpaa | uppercase}}</td>
</tr></tbody>
</table></div>
![Page 38: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/38.jpg)
View "Controller As" Syntax<div ng-controller="MovieListCtrl as vm"><div>{{vm.title}}</div><div>Filter by:</div><input type="text" ng-model="listFilter" />
<div ng-show="listFilter"><h3>Movies filtered by: {{listFilter}}</h3>
</div>
<table ng-if="vm.movies.length"><thead>
<tr><td><button type="button"
ng-click="vm.toggleImage()">{{vm.showImage ? "Hide" : "Show"}} Poster
</button></td><td>Title</td> <td>Director</td> <td>Release Date</td> <td>Rating</td>
</tr></thead><tbody><tr ng-repeat="movie in vm.movies | filter : {title:listFilter} | orderBy : 'title'">
<td><img ng-show="vm.showImage"ng-src="{{movie.imageurl}}" title="{{movie.title}}"></td>
<td>{{ movie.title}}</td><td>{{ movie.director }}</td><td>{{ movie.releaseDate | date }}</td><td>{{ movie.mpaa | uppercase}}</td>
</tr></tbody>
</table></div>
![Page 39: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/39.jpg)
Sample Application
![Page 40: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/40.jpg)
Creating an Angular Project
![Page 41: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/41.jpg)
Selecting a Template
![Page 42: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/42.jpg)
Generated Solution
![Page 43: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/43.jpg)
NuGet Package Manager
![Page 44: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/44.jpg)
Solution Explorer
![Page 45: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/45.jpg)
<head><link …/>
</head><body ng-app=
"movieHunter">
<script …/></body>
[menu code here]<ng-include=
"'movieListView.html'">
<div ng-controller="MovieListCtrl as vm">
...</div>
![Page 46: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/46.jpg)
![Page 47: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/47.jpg)
Bootstrap
Framework for prettifying Web pages
Developed by Twitter
http://getbootstrap.com/
Large third party community
![Page 48: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/48.jpg)
Bootstrap Grid System
![Page 49: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/49.jpg)
![Page 50: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/50.jpg)
Take Away
![Page 51: Deborah Kurata - SDD Conferencesddconf.com/brands/sdd/library/AngularJS_From_The_Ground_Up_Pa… · Deborah Kurata Independent ... Introduction to Angular Angular and HTML: Building](https://reader036.fdocuments.net/reader036/viewer/2022082216/5ae181eb7f8b9a1c248e7c55/html5/thumbnails/51.jpg)
Thank You!
@deborahkurata
http://blogs.msmvps.com/deborahk
https://github.com/DeborahK/SDD2015