AngularJS Essentials

Recommendations

Info

Chapter 2 The parking lot is empty Pick a color Park app.js var parking = angular.module("parking", []); controllers.js parking.controller("parkingCtrl", function ($scope) { $scope.appTitle = "[Packt] Parking"; $scope.cars = []; $scope.colors = ["White", "Black", "Blue", "Red", "Silver"]; $scope.park = function (car) { [ 33 ] www.it-ebooks.info
Creating Reusable Components with Directives car.entrance = new Date(); $scope.cars.push(car); delete $scope.car; }; }); Creating our own directives Now that we have already studied a bunch of built-in directives of a framework, it's time to create our own reusable components! First, we need to know how to register a new directive into our module. Basically, it's the same process that we use for the controller; however, the directives require the creation of something called Directive Definition Object that will be used to configure the directive's behavior: parking.directive("directiveName", function () { return { }; }); Our first challenge involves the creation of an alert component. Following this, there is an image of the component that we are going to create together step by step: The original code consists of a group of elements associated with some styles. Our mission is to transform this code into a reusable directive using the following directive configuration properties: template, templateUrl, replace, restrict, scope, and transclude: Something went wrong! You must inform the plate and the color of the car! [ 34 ] www.it-ebooks.info
Page 1 and 2: www.it-ebooks.info
Page 3 and 4: AngularJS Essentials Copyright © 2
Page 5 and 6: About the Author Rodrigo Branas is
Page 7 and 8: About the Reviewers Andrei M. Eichl
Page 11 and 12: Table of Contents The ngIf directiv
Page 13 and 14: Table of Contents Chapter 7: Unit T
Page 15 and 16: Preface Only 2 months later, I laun
Page 17 and 18: Preface A block of code is set as f
Page 19 and 20: Preface Piracy Piracy of copyright
Page 21 and 22: Getting Started with AngularJS This
Page 23 and 24: Getting Started with AngularJS The
Page 25 and 26: Getting Started with AngularJS
Page 27 and 28: Getting Started with AngularJS app.
Page 31 and 32: Creating Reusable Components with D
Page 45: Creating Reusable Components with D
Page 67 and 68: Data Handling The following code is
Page 69 and 70: Data Handling Now, the output will
Page 71 and 72: Data Handling The expected result i
Page 73 and 74: Data Handling Color Entrance
Page 75 and 76: Data Handling Now, let's introduce
Page 77 and 78: Data Handling To finish, we can add
Page 79 and 80: Data Handling The plate must start
Page 81 and 82: Dependency Injection and Services D
Page 83 and 84: Dependency Injection and Services $
Page 85 and 86: Dependency Injection and Services r
Page 87 and 88: Dependency Injection and Services p
Page 89 and 90: Dependency Injection and Services I
Page 91 and 92: Dependency Injection and Services T
Page 93 and 94: Dependency Injection and Services $
Page 95 and 96: Dependency Injection and Services }
Page 97 and 98:
Dependency Injection and Services }
Page 99 and 100:
Dependency Injection and Services }
Page 101 and 102:
Dependency Injection and Services A
Page 103 and 104:
Dependency Injection and Services n
Page 105 and 106:
Dependency Injection and Services {
Page 107 and 108:
Dependency Injection and Services T
Page 109 and 110:
Dependency Injection and Services L
Page 111 and 112:
Dependency Injection and Services r
Page 113 and 114:
Dependency Injection and Services T
Page 115 and 116:
www.it-ebooks.info
Page 117 and 118:
Scope What happens when we change t
Page 119 and 120:
Scope if (newValue == oldValue) ret
Page 121 and 122:
Scope ng-model="username" placehold
Page 123 and 124:
Scope Consider the following code s
Page 125 and 126:
Scope Now, we need to start tickGen
Page 127 and 128:
www.it-ebooks.info
Page 129 and 130:
Modules The UI module The UI module
Page 131 and 132:
Modules }, template: "" + "{{title}
Page 133 and 134:
Modules A major part
Page 135 and 136:
Unit Testing The topics that we'll
Page 137 and 138:
Unit Testing car.entrance = new Dat
Page 139 and 140:
Unit Testing parkingService = _park
Page 141 and 142:
Unit Testing Filters Next, we are g
Page 143 and 144:
Unit Testing Creating the element w
Page 145 and 146:
Unit Testing '' + '' + 'Please info
Page 147 and 148:
Unit Testing $httpBackend.flush();
Page 149 and 150:
Unit Testing var _saveCar = functio
Page 151 and 152:
Unit Testing At the moment, we have
Page 153 and 154:
Unit Testing R
Page 155 and 156:
Unit Testing 'src/parkingCtrl.js',
Page 157 and 158:
www.it-ebooks.info
Page 159 and 160:
Automating the Workflow Installatio
Page 161 and 162:
Automating the Workflow grunt.initC
Page 163 and 164:
Page 165 and 166:
Page 167 and 168:
Automating the Workflow } }); dist:
Page 169 and 170:
Automating the Workflow } }, lib: {
Page 171 and 172:
Automating the Workflow Cache The r
Page 173 and 174:
directives 129 filters 128 service
Page 175 and 176:
installation, Grunt 146 installatio
Page 177 and 178:
two-way data binding $apply functio
Page 179 and 180:
Dependency Injection with AngularJS
show all

AngularJS Essentials

Create successful ePaper yourself

Delete template?

Save as template?