Weitere ähnliche Inhalte Ähnlich wie AngularJS: What's the Big Deal? (20) Kürzlich hochgeladen (20) AngularJS: What's the Big Deal?2. Who Am I?
Jim Duffy jduffy@takenote.com
CEO/Founder TakeNote Technologies www.takenote.com
Blog: www.geekswithblogs.net/takenote/
Twitter: @jmduffy
Microsoft Regional Director www.msrd.io
11 time Microsoft Most Valuable Professional (MVP)
.NET, ASP.NET, HTML5, JavaScript, AngularJS & SQL Server
Instructor, Mentor, Developer, and Consultant
Experienced conference presenter
Contributor to CODE Magazine
© 2015 TakeNote Technologies
All Rights Reserved
3. Microsoft Regional Director
© 2015 TakeNote Technologies
All Rights Reserved
“I am appointed by Microsoft with an independent external role in
the Regional Director program, as one of the top 130 advocates
worldwide for Microsoft, being recognized for deep and broad
technical expertise in many technologies, public communications,
community leadership and corporate experience, while maintaining
a privileged two-way relationship and communication channel with
the regional office, product teams, and senior Microsoft HQ
personnel.”
tl; dr: Microsoft values and trusts me. I am here to help you and
your organization.
4. The Plan For This Session
What is AngularJS
Why Use AngularJS
AngularJS Overview
Definitions
Code Demos
© 2015 TakeNote Technologies
All Rights Reserved
5. What Is AngularJS
Framework used primarily for building
Single Page Applications
Written in JavaScript
Developed and supported by Google
© 2014 TakeNote Technologies
All Rights Reserved
6. Why Use AngularJS?
It’s modular
It provides powerful two-way data
binding
It uses expressive HTML via directives
It is designed to be testable
Built in route navigation
Because its popular
© 2014 TakeNote Technologies
All Rights Reserved
8. Directives & Data Binding
ng-app: defines the module
One-way data binding
ng-bind
{{ Lastname }} syntax more
common
Two-way data binding
ng-model="Lastname"
© 2014 TakeNote Technologies
All Rights Reserved
9. Directives & Data Binding
© 2014 TakeNote Technologies
All Rights Reserved
<div>
<label for="Lastname">Last Name:</label>
<input type="text"
name="Lastname"
ng-model="vm.Lastname" />
</div>
<div>
<label for="Firstname">First Name:</label>
<input type="text"
name=“Firstname"
ng-model="vm.Firstname" />
</div>
10. Directives & Data Binding
© 2014 TakeNote Technologies
All Rights Reserved
DEMO 1
12. Creating A Module In app.js
© 2014 TakeNote Technologies
All Rights Reserved
// app.js
(function () {
"use strict";
var app = angular.module("collegesApp", []);
}());
Using the angular.module function
Use immediately invoked function
expression (iife)
15. Applying Module To A View
© 2014 TakeNote Technologies
All Rights Reserved
<html ng-app="collegesApp">
<head>
…
<script src="scripts/angular.js"></script>
<script src="app/app.js"></script>
</head>
Using the ng-app directive
16. Apply Module To A View
© 2014 TakeNote Technologies
All Rights Reserved
DEMO 3
18. Controller Code
© 2014 TakeNote Technologies
All Rights Reserved
// collegesCtrl.js
(function () {
"use strict";
angular.module("collegesApp")
.controller("CollegesCtrl", CollegesCtrl);
function CollegesCtrl ()
{
var vm = this;
var propertyOne = "One";
var propertyTwo = 2;
}
}());
19. Wire Up A Controller In A View
© 2014 TakeNote Technologies
All Rights Reserved
<head>
<title>Colleges</title>
…
<script src="app/collegesCtrl.js"></script>
</head>
<body ng-controller="CollegesCtrl as cc">
<div class="page-header">
<h1>{{ cc.propertyOne }}'s Colleges</h1>
</div>
…
Using the ng-controller directive
20. Controller Best Practices
Simple is best…place each controller in
it’s own .js file
Wrap controller in an immediately
invoked function expression(iife)
Use either Controller or Ctrl as the name
suffix (ex: ProductsCtrl or
ProductsController) – Be Consistent
Use Pascal case when naming controller
(ex: MyCoolController) – Be Consistent
© 2014 TakeNote Technologies
All Rights Reserved
22. Defining A Data Model
© 2014 TakeNote Technologies
All Rights Reserved
function CollegesCtrl ()
{
…
vm.colleges = {
conference: "ACC",
items: [{ university: "University of Miami",
city: "Coral Gables",
founder: false },
{ university: "North Carolina",
city: "Chapel Hill",
founder: true }]
};
…
23. Iterating Through Data
© 2014 TakeNote Technologies
All Rights Reserved
<tbody>
<tr ng-repeat="college in cc.colleges.items">
<td>{{ college.name }}</td>
<td>{{ college.city }}</td>
<td>{{ college.founder }}</td>
</tr>
</tbody>
Using the ng-repeat directive
24. Defining A Data Model
© 2014 TakeNote Technologies
All Rights Reserved
DEMO 5
25. Expressions
JavaScript-like code snippets used in
bindings such as {{ expression }}
Examples
1+2={{1+2}}
user.name
© 2014 TakeNote Technologies
All Rights Reserved
<span> 1+2={{ 1+2 }} </span>
<span class="label label-default">
{{cc.colleges.items.length}}
</span>
26. Filters
Filters are implemented with |
© 2014 TakeNote Technologies
All Rights Reserved
<tr ng-repeat="college in cc.colleges.items |
orderBy: 'name' | filter: 'State' ">
<td>{{ college.name | uppercase }}</td>
<td>{{ college.city | lowercase }}</td>
28. Events
Using the ng-click event
© 2014 TakeNote Technologies
All Rights Reserved
<div class="input-group">
<input class="form-control"
ng-model="cc.collegename" />
<span class="input-group-btn">
<button type="button"
class="btn btn-primary"
ng-click="cc.addCollege()">Add</button>
</span>
</div>
30. Routes
Routes are the key to single-page
applications (SPA)
Routes determine which page will be
displayed in the host page
Routes are used to bind the controller
to the view
Routes require use of additional
angular-route.js file
© 2014 TakeNote Technologies
All Rights Reserved
31. © 2014 TakeNote Technologies
All Rights Reserved
//app.js
var app = angular.module('collegesApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/',
{
templateUrl: '/partials/colleges.html',
controller: 'CollegesCtrl',
controllerAs: 'cc'
});
$routeProvider.when('/colleges',
{
templateUrl: '/partials/colleges.html',
controller: 'CollegesCtrl', controllerAs: 'cc'
});
$routeProvider.when('/dataentry',
{
templateUrl: '/partials/dataentry.html',
controller: 'DataEntryCtrl', controllerAs: 'cc'
});
$routeProvider.otherwise({ redirectTo: '/' });
});
33. Data Entry Forms
Visibility attributes
ng-show: Displays an element
ng-hide: Hides an element
Data validation attributes
ng-minlength: min string length
ng-maxlength: max string length
ng-pattern: regex comparison
© 2014 TakeNote Technologies
All Rights Reserved
34. Data Entry Forms
Properties
$pristine
$dirty
$valid
$invalid
$touched
$untouched
$error
© 2014 TakeNote Technologies
All Rights Reserved
35. Data Entry Forms
© 2014 TakeNote Technologies
All Rights Reserved
<div class="form-group">
<label for="firstname">First Name:</label>
<input type="text" name="firstname" autofocus required
placeholder="Enter first name"
ng-model="firstname" ng-minlength="2"
ng-maxlength="20" ng-pattern="/^[a-z]+$/"
class="form-control" />
<div class="error-container"
ng-show="myForm.firstname.$dirty &&
myForm.firstname.$invalid">
<small class="error"
ng-show="myForm.firstname.$error.required">
First name is required.</small>
<small class="error"
ng-show="myForm.firstname.$error.minlength">
First name requires at least 2 char.</small>
<small class="error "
ng-show="myForm.firstname.$error.maxlength">
First Name cannot exceed 20 chars.</small>
</div>
</div>
36. Data Entry Forms - CSS
ng-pristine: Elements the user has
not interacted are added to this class.
ng-dirty: Elements the user has
interacted with are added to this class.
ng-valid: Elements that are valid are
in this class.
ng-invalid: Elements that are not
valid are in this class.
© 2014 TakeNote Technologies
All Rights Reserved
37. Data Entry Forms – CSS
© 2014 TakeNote Technologies
All Rights Reserved
form .ng-pristine {
background-color: #fffeb9;
}
form .ng-valid.ng-dirty {
background-color: lightgreen;
}
form .ng-invalid.ng-dirty {
background-color: #ff0000;
}
39. Resources
https://www.angularjs.org/
https://github.com/angular/angular.js
https://docs.angularjs.org/guide
https://blog.angularjs.org/
https://angularjs.zeef.com/gianluca.arbezzano
www.takenote.com
Hands On Training Classes from TakeNote
Technologies
- AngularJS Fundamentals (2 days)
- Developing Line of Business Applications With
AngularJS (2 days)
© 2015 TakeNote Technologies
All Rights Reserved
40. Thank You for Attending!
My contact info:
Jim Duffy
jduffy@takenote.com
CEO/Founder
TakeNote Technologies
www.takenote.com
Twitter: @jmduffy
© 2015 TakeNote Technologies
All Rights Reserved
41. TakeNote Technologies
© 2015 TakeNote Technologies
All Rights Reserved
Training Division
Provides public and on-
site developer training
classes and mentoring
in:
C#
ASP.NET MVC
SQL Server
HTML5
JavaScript
AngularJS
GrapeCity ActiveReports
Consulting Division
Develops new web and mobile
solutions
Develops cloud-based solutions
and migrate existing solutions
to the cloud
Convert legacy solutions into
modern web & mobile solutions
Manages new or existing
projects
Supplements your development
team