THE HITCHHIKERS GUIDE TO. Harper Maddox CTO, EdgeTheory 30 September 2014

Size: px

Start display at page:

Download "THE HITCHHIKERS GUIDE TO. Harper Maddox CTO, EdgeTheory 30 September 2014"

Julian Gaines
5 years ago
Views:

1 THE HITCHHIKERS GUIDE TO! Harper Maddox CTO, EdgeTheory 30 September 2014

2 DON T PANIC

3 ENJOYMENT OF ANGULAR Services, Modules promises, directives Angular RULEZ I m doing it Taken from Alicia Liu s wonderful Leveling Up in Angular talk -

4 DON T TRY TO LEARN EVERYTHING AT ONCE Learn a little at a time You don t have to grok Angular to be able to use it Believe in the magic

5 NG-BABYSTEPS Angular extends the DOM add ng-* to the end of a HTML tag and you re using angular <p ng-show= alive >It s ALIVE!</p>! <p ng-hide= alive >It s Dead :(</p>

6 NG-SHOW & NG-HIDE What does it show if alive === true? What does it show if alive === false? <p ng-show= alive >It s ALIVE!</p>! <p ng-hide= alive >It s Dead :(</p>

7 NG-SHOW/HIDE ++ How does it work? Whatever is inside the quotes is an expression ng-show (truthy) and ng-hide (falsey) evaluate the expression as a conditional Hence, ng-show=!alive is the same as ng-hide= alive, and vice-versa Implementation of hide for ng-hide=true or ng-show=false, the class of the HTML element is set to display:none!important this is similar to jquery s.hide() function

8 NG-IF ng-if behaves almost exactly like ng-show however, ng-if actually nukes the element from the DOM if it is false Use this if you don t want to pollute the DOM with a ton of hidden elements

9 TEMPLATES Have you ever seen something like this? str = ;! str += <div><span>account Name</span><span>Created At</span></ div> ;! for (i in accounts){!! str += <div><span> +accounts[i].name+</span> ;!! str += <span> +accounts[i].created_at+ </span></div> ;! }

10 TEMPLATES This person was doing it the wrong way They should have used templates like this: <div><span>account Name</span><span>Created At</span></div>! <div ng-repeat= account in accounts >!! <span>{{account.name}}</span>!! <span>{{account.created_at}}</span>! </div>

11 HOW DOES IT WORK? <div><span>account Name</span><span>Created At</span></div>! <div ng-repeat= account in accounts >!! <span>{{account.name}}</span>!! <span>{{account.created_at}}</span>! </div>

12 HOW DOES IT WORK? ng-repeat is my favorite directive (oops more on that word later) it iterates through a data structure The current element is automatically scoped to your namespace Double-Moustaches allow us to display text or numbers <div><span>account Name</span><span>Created At</span></div>! <div ng-repeat= account in accounts >!! <span>{{account.name}}</span>!! <span>{{account.created_at}}</span>! </div>

13 ACTION! ng-click takes action it executes whatever expression is inside of it Typically you call a function in a controller Or you could set a variable (not recommended) How many slices of pizza have I eaten?! <p>i ate {{slices}} slices!</p>! <br/>! <button ng-click= slices++ >Eat Another Slice</button>

14 EXERCISE How could we edit the last example and show a different message for 0, 1 and 2+ slices?

15 ANSWER Use ng-show, ng-hide or ng-if Solution 1: 3 text blocks How many slices of pizza have I eaten?! <p ng-show= slices==0 >I have yet to eat a single slice</p>! <p ng-show= slices == 1 >I ate one slice!</p>! <p ng-show= slices > 1 >I ate {{slices}} slices!</p>! <br/>! <button ng-click= slices++ >Eat Another Slice</button>

16 ANSWER Use ng-show, ng-hide or ng-if Solution 2: nest the text blocks! How many slices of pizza have I eaten?! <p ng-show= slices==0 >I have yet to eat a single slice</p>! <p ng-show= slices > 0 >I ate {{slices}} slice<span ngshow= slices > 1 >s!</span></p>! <button ng-click= slices++ >Eat Another Slice</button>!

17 WHERE THE HELL IS THE JAVASCRIPT!!? By now some of you Front End Engineers are rolling your eyes! I purposely didn t talk about MVC, MVVM, MVW and didn t get into best practices in JavaScript.

18 APP AND CONTROLLER Your controller (interactions and business logic written in JAVASCRIPT) sits inside your application There can be many controllers inside one app <body ng-app= JawadApp >! <div ng-ctrl= StudentsController >! <strong>student List</strong><br/>! <div ng-repeat= student in students >!! <span>{{student.name}}</span>! </div>! <input type= text ng-model= name >! <button class= btn ng-click= addstudent >Add</button>! </div>! </body>

19 JAVASCRIPT SWEET JAVASCRIPT Nice! We made it 18 slides without JS. We only had one minor but very ugly exception. We re going to need to define the app and the controller in javascript And we must require those pages in our template Then we re good to go

20 APP.JS Keep it simple Don t include things you don t need! var app = angular.module( JawadApp');!

21 CONTROLLER Again, Keep it simple 1. Connect it to the app 2. Inject the $scope variable 3. Initialize your variables function StudentsController($scope) {!! $scope.students = [{name: Misko Hevery },{name: Christian Hall },{name: Todd Motto }];! }! angular.module('jawadapp')!.controller('studentscontroller', StudentsController);

22 HTML OUTPUT If we run the app with the data in the controller, here s the output Before After <body ng-app= JawadApp >! <body ng-app= JawadApp >! <div ng-ctrl= StudentsController >! <strong>student List</strong><br/>! <div ng-repeat= student in students >!! <span>{{student.name}}</span>! </div>! <input type= text ng-model= name >! <button class= btn ngclick= addstudent >Add</button>! </div>! </body> <div ng-ctrl= StudentsController >! <strong>student List</strong><br/>! <div ng-repeat= student in students >!! <span>misko Hevery</span>! <span>christian Hall</span>! <span>todd Motto</span>! </div>! <input type= text ng-model= name >! <button class= btn ngclick= addstudent >Add</button>! </div>! </body>

23 THEORY (THAT WE SKIPPED) Model-View-Controller (MVC) Persistent data representation in the model Templates let you easily render structured data (arrays of hashes) Dual-Way Data Binding Changes to input fields (DOM) automatically occur in the model Changes to the model automatically affect the DOM

24 MODEL-VIEW-WHATEVER Angular s three core components resemble MVC 1. Views - HTML templates 2. Controllers - View updates model and vice-versa 3. Services - Maintain state, interact w backend NOTE: Small apps can cheat and avoid Services

25 DUAL-WAY DATA BINDING Forms are super easy in Angular It connects ng-model to the scope. Any changes to ng-model are applied to the scope and vice versa <input type="text" class="form-control" ng-model="account. "> $scope.account = {name: Johnny Lee Miller,age: 17, zerocool@aol.com,description: Hacked a Gibson };

26 THAT WAS COMPLICATED I M LOST Don t lose hope Believe in the magic and

27 DON T PANIC

28 THE REAL WORLD While developing your angular app, you ll probably need to do the following: AJAX Multiple Controllers Twitter Bootstrap jquery

29 AJAX Ajax (Asynchronous JavaScript and XML) is implemented with a provider called $http $http works alot like $.ajax() in jquery $http({! method: 'GET',! url: +id! })!.success(function(data, status, headers, config) {! $scope.account = data.account;! })!.error(function(data, status, headers, config) {! console.log("failed to load account");! });

30 $HTTP $HTTP allows you to get data from a website You can either store the data right then, or you can return the $http call, which returns a promise Promises? Yeah, they re a common programming pattern that we ll get to later. Think of them as better callbacks.! return $http({! method: 'GET',! url: +id! });!

31 $HTTP, CONT D Bad Originally, I coded them sloppily into each controller I d have a function in my controller make the call to an API, then I d store the data in the controller s $scope. This works okay if you have a small app Good Use Services to make http calls Maintain your state in the service Bind your variables in the service to your controller, and voila, You ve got data

32 MULTIPLE CONTROLLERS Big apps need multiple controllers Angular was built for large single-page apps Use services to manage this complexity and allow the controllers to 1) maintain local scope and 2) talk to one another We prefer the factory pattern since data is persistent across anywhere it is injected

33 BOOTSTRAP You can keep using Bootstrap s components and CSS But the JavaScript will break Two choices to fix it: DIY - the components aren t that hard to make Use an add on like ng-strap

34 JQUERY Please don t use jquery anymore Angular does not play well with it and Angular frowns on direct DOM manipulation

36 QUESTIONS?

3 Days Training Program

3 Days Training Program What is AngularJS? A JavaScript framework for creating dynamic web applications Open Source GitHub: https://github.com/angular/angular.js MIT License Uses jquery jquery 1.7.1 or