Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
AngularJS
What’s the Big Deal?
Jim Duffy
TakeNote Technologies
© 2015 TakeNote Technologies
All Rights Reserved
Who Am I?
 Jim Duffy jduffy@takenote.com
 CEO/Founder TakeNote Technologies www.takenote.com
 Blog: www.geekswithblogs....
Microsoft Regional Director
© 2015 TakeNote Technologies
All Rights Reserved
“I am appointed by Microsoft with an independ...
The Plan For This Session
 What is AngularJS
 Why Use AngularJS
 AngularJS Overview
 Definitions
 Code Demos
© 2015 T...
What Is AngularJS
 Framework used primarily for building
Single Page Applications
 Written in JavaScript
 Developed and...
Why Use AngularJS?
 It’s modular
 It provides powerful two-way data
binding
 It uses expressive HTML via directives
 I...
AngularJS At 30,000 Feet
© 2014 TakeNote Technologies
All Rights Reserved
Directives & Data Binding
 ng-app: defines the module
 One-way data binding
 ng-bind
 {{ Lastname }} syntax more
commo...
Directives & Data Binding
© 2014 TakeNote Technologies
All Rights Reserved
<div>
<label for="Lastname">Last Name:</label>
...
Directives & Data Binding
© 2014 TakeNote Technologies
All Rights Reserved
DEMO 1
Modules
 Modules define and contain the
application
© 2014 TakeNote Technologies
All Rights Reserved
Creating A Module In app.js
© 2014 TakeNote Technologies
All Rights Reserved
// app.js
(function () {
"use strict";
var ap...
Modules
© 2014 TakeNote Technologies
All Rights Reserved
DEMO 2
Views
© 2014 TakeNote Technologies
All Rights Reserved
Applying Module To A View
© 2014 TakeNote Technologies
All Rights Reserved
<html ng-app="collegesApp">
<head>
…
<script sr...
Apply Module To A View
© 2014 TakeNote Technologies
All Rights Reserved
DEMO 3
Controllers
© 2014 TakeNote Technologies
All Rights Reserved
Controller Code
© 2014 TakeNote Technologies
All Rights Reserved
// collegesCtrl.js
(function () {
"use strict";
angular.m...
Wire Up A Controller In A View
© 2014 TakeNote Technologies
All Rights Reserved
<head>
<title>Colleges</title>
…
<script s...
Controller Best Practices
 Simple is best…place each controller in
it’s own .js file
 Wrap controller in an immediately
...
Controllers
© 2014 TakeNote Technologies
All Rights Reserved
DEMO 4
Defining A Data Model
© 2014 TakeNote Technologies
All Rights Reserved
function CollegesCtrl ()
{
…
vm.colleges = {
confer...
Iterating Through Data
© 2014 TakeNote Technologies
All Rights Reserved
<tbody>
<tr ng-repeat="college in cc.colleges.item...
Defining A Data Model
© 2014 TakeNote Technologies
All Rights Reserved
DEMO 5
Expressions
 JavaScript-like code snippets used in
bindings such as {{ expression }}
 Examples
 1+2={{1+2}}
 user.name...
Filters
 Filters are implemented with |
© 2014 TakeNote Technologies
All Rights Reserved
<tr ng-repeat="college in cc.col...
Expressions & Filters
© 2014 TakeNote Technologies
All Rights Reserved
DEMO 6
Events
 Using the ng-click event
© 2014 TakeNote Technologies
All Rights Reserved
<div class="input-group">
<input class=...
Events
© 2014 TakeNote Technologies
All Rights Reserved
DEMO 7
Routes
 Routes are the key to single-page
applications (SPA)
 Routes determine which page will be
displayed in the host ...
© 2014 TakeNote Technologies
All Rights Reserved
//app.js
var app = angular.module('collegesApp', ['ngRoute']);
app.config...
Routes
© 2014 TakeNote Technologies
All Rights Reserved
DEMO 8
Data Entry Forms
 Visibility attributes
 ng-show: Displays an element
 ng-hide: Hides an element
 Data validation attr...
Data Entry Forms
 Properties
 $pristine
 $dirty
 $valid
 $invalid
 $touched
 $untouched
 $error
© 2014 TakeNote Te...
Data Entry Forms
© 2014 TakeNote Technologies
All Rights Reserved
<div class="form-group">
<label for="firstname">First Na...
Data Entry Forms - CSS
 ng-pristine: Elements the user has
not interacted are added to this class.
 ng-dirty: Elements t...
Data Entry Forms – CSS
© 2014 TakeNote Technologies
All Rights Reserved
form .ng-pristine {
background-color: #fffeb9;
}
f...
Data Validation
© 2015 TakeNote Technologies
All Rights Reserved
DEMO 9
Resources
 https://www.angularjs.org/
 https://github.com/angular/angular.js
 https://docs.angularjs.org/guide
 https:...
Thank You for Attending!
 My contact info:
Jim Duffy
jduffy@takenote.com
CEO/Founder
TakeNote Technologies
www.takenote.c...
TakeNote Technologies
© 2015 TakeNote Technologies
All Rights Reserved
Training Division
 Provides public and on-
site de...
Upcoming SlideShare
Loading in …5
×

AngularJS: What's the Big Deal?

792 views

Published on

AngularJS, it’s all the rage these days and it's the biggest thing in the JavaScript world since JQuery. Have you heard of it? I’m betting you have if you're a web developer. If you haven’t heard of it, you will the next time you go looking for a job. Perhaps you're a CTO or software development manager and you're wondering if your team should be using AngularJS. In either case, developer or manager, maybe your knowledge is limited to knowing it’s a single-page application framework from Google. Don’t know much else about it? Not to worry. Attend this session and you will learn about the wonderfulness that is AngularJS and there is plenty to learn. You will walk away from this session having learned about directives, views, models, controllers, two-way data binding, expressions, filters, data validation, routing and modules from plenty of code-centric demos. You will also learn where to find more information and additional guidance on taking your next steps on the road to building your first AngularJS application. Web developers with a solid foundation in HTML & JavaScript will benefit most from this session but even newbie web developers will benefit from this introduction to AngularJS.

Published in: Technology
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ♣♣♣ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

AngularJS: What's the Big Deal?

  1. 1. AngularJS What’s the Big Deal? Jim Duffy TakeNote Technologies © 2015 TakeNote Technologies All Rights Reserved
  2. 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. 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. 4. The Plan For This Session  What is AngularJS  Why Use AngularJS  AngularJS Overview  Definitions  Code Demos © 2015 TakeNote Technologies All Rights Reserved
  5. 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. 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
  7. 7. AngularJS At 30,000 Feet © 2014 TakeNote Technologies All Rights Reserved
  8. 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. 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. 10. Directives & Data Binding © 2014 TakeNote Technologies All Rights Reserved DEMO 1
  11. 11. Modules  Modules define and contain the application © 2014 TakeNote Technologies All Rights Reserved
  12. 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)
  13. 13. Modules © 2014 TakeNote Technologies All Rights Reserved DEMO 2
  14. 14. Views © 2014 TakeNote Technologies All Rights Reserved
  15. 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. 16. Apply Module To A View © 2014 TakeNote Technologies All Rights Reserved DEMO 3
  17. 17. Controllers © 2014 TakeNote Technologies All Rights Reserved
  18. 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. 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. 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
  21. 21. Controllers © 2014 TakeNote Technologies All Rights Reserved DEMO 4
  22. 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. 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. 24. Defining A Data Model © 2014 TakeNote Technologies All Rights Reserved DEMO 5
  25. 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. 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>
  27. 27. Expressions & Filters © 2014 TakeNote Technologies All Rights Reserved DEMO 6
  28. 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>
  29. 29. Events © 2014 TakeNote Technologies All Rights Reserved DEMO 7
  30. 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. 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: '/' }); });
  32. 32. Routes © 2014 TakeNote Technologies All Rights Reserved DEMO 8
  33. 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. 34. Data Entry Forms  Properties  $pristine  $dirty  $valid  $invalid  $touched  $untouched  $error © 2014 TakeNote Technologies All Rights Reserved
  35. 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. 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. 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; }
  38. 38. Data Validation © 2015 TakeNote Technologies All Rights Reserved DEMO 9
  39. 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. 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. 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

×