#megasaur

[casinobedava]

Büyük dinozorların yok olduğuna inanmayın! Megasaur, RTG firmasının hazırladığı 5 çarklı ve 25 ödeme çizgili slot oyunudur. “Feature Guarantee” sistemini kullanılan oyun size inanılmaz keyifli saatler geçirtirir. Oyundaki semboller çeşitli dinozor resimlerinden oluşuyor. Biraz korkunç ama bol kazançlı oyunu oynayın!

[colossallandscape]

The Megasaur Poachers by Alex Konstad

[pettamapossum]

Daily thing #425 (Subject)

Bonus sketches:

[learnbutts]

Dependencies and Services

Dependencies

The first lesson of angular covered the creation of modules, including an empty array for specifying dependencies.

You can break out some angular directives into a new module, and make those directives a dependency of a controller that uses them.

Custom directives cut down on our bulky HTML, and adding new modules will cut down on our bulky javascript, allowing us to split it into multiple files.

Services

Angular comes with a number of built-in services. All built-in services start with a dollar sign. The $http service makes an asynchronous request to a server.

$http Examples

$http({ method: 'GET', url: '/file.json' }); $http.get('/file.json', { apiKey: 'myApiKey' });

Both variations return a Promise object with .success() and .error().

Including a Service

app.controller('SomeController', [ '$http', '$log', function($http, $log) { var self = this; this.remoteVar = []; $http.get('/file.json').success(function(data) { self.remoteVar = data; }); } ]);

Angular also refers to this as dependency injection.

Dash

The end of the angular tutorial referred to a website called Dash. Dash allows you to download and search a wide variety of APIs and documentation offline. I'm going to go download that.

[learnbutts]

Custom Directives and Directive Controllers

In addition to Angular's broad options for directives, you can create custom directives for pieces of HTML that you wish to re-use throughout your page. 

The "ng-include" Directive

The ng-include directive lets you re-use custom HTML, but will send a request to the server for the included file.

include-file.html

{{ product.name }} <em class="pull-right">${{ product.price}}</em>

To include this in your normal code, use ng-include.

index.html

<h3 ng-include="'include-file.html'"></h3>

The ng-include directive expects a variable containing the filename, so the single quotes turn the hard-coded filename into something that can be evaluated.

Custom Directives

Javascript

app.directive('productTitle', function() { return { restrict: 'E', templateUrl: 'include-file.html' }; });

The restrict of 'E' defines the type of the directive. E is for a new HTML element.

HTML

<product-title></product-title>

Some elements don't like self-closing tabs, so don't use them.

Attribute vs. Element Directives

Attribute directives should be used for mixin behaviors (ie tooltips), and element behaviors for UI widgets. I'm writing this down as a note, but I'm not sure exactly what represents a mixin behavior. Hopefully I'll be able to write a post about that distinction later.

Attribute Example

<h3 product-title></h3>

When defining attribute directives, you use a restrict of 'A'.

Directive Controllers

So directive controllers are really cool, and eliminate some of the clunkiness I complained about in Angular, Continued. Directive controllers are defined by adding a "controller" to the directive definition. 

Javascript

app.directive('customDirective', function() { return { restrict: 'E', templateUrl: 'custom-directive.html', controller: function() { ... }, controllerAs: controllerName }; });

The directive controllers functionality makes it much easier to break your code into neatly contained modules, and modules make writing large javascript projects much easier.

Furthermore, custom directives coupled with directive controllers let you see what your HTML is trying to do just by reading the HTML.

[learnbutts]

Angular Forms

Angular lets you create named forms.

<form name="formname">

Form Models

You can bind the forms to a model with the ng-model directive. There are number of possible input options.

<form name="form"> <blockquote> {{formModel.text}} </blockquote> <textarea ng-model="formModel.text"></textarea> <input ng-model="formModel.terms" type="checkbox" /> <input ng-model="formModel.true" type="radio" value="true"/>

Form Submission

To enable form submission, angular has a ng-submit directive. In the example, they use the current "product" as input to the submit function.

<form name="form" ng-controller="FormController as formCtrl" ng-submit="formCtrl.sendForm(formTarget)">

Forms are simply objects and can be reset by being set to an empty object, {}.

Form Validation

Angular recommends you turn off default HTML validation on your form.

<form name="form" novalidate>

Individual form elements can be marked as required.

<input ng-model="formModel.terms" type="checkbox" required />

You can use $valid to check the form before submission.

<form name="form" ng-submit="form.$valid && formController.submit()">

Styling Validation

Angular has CSS classes for valid, invalid, and "dirty" elements (.ng-valid, .ng-invalid, .ng-dirty).

[learnbutts]

Angular, Continued

Filters

In Angular, filters are used for formatting data. It looks something like this:

{{ data | filter:options }}

For example:

{{ <timestamp> | date:'MM/dd/yyyy' }} {{ phrase | uppercase }} <li ng-repeat="item in controller.variable | limitTo:3"> <li ng-repeat="item in controller.variable | orderBy:'-price'"> <img ng-src="{{ image source }}">

Check Array Size

I had some trouble in one of the challenges - showing a div based on whether there were any images in an array of images.

<div ng-show="controller.arrayVar.length">

Tabs and "ng-click"

Angular works with bootstrap nav tabs or nav pills to let you make tabs in a single page application.

The ng-class directive will let you set an active class by passing an object into the directive. I don't remember having to do this manually when I've used bootstrap tabs in the past, so this seemed clunky.

<section ng-init="tab = 1"> <ul class="nav nav-pills"> <li ng-class="{ active:tab === 1 }"> <a href ng-click="tab = 1">Tab 1</a></li> </li> </ul> <div ng-show="tab === 1"> blah </div> </section>

Thankfully, the Angular tutorial agreed that this was clunky, and introduced a new controller to deal with the logic buildup in the HTML.

Javascript

app.controller("PanelController", function() { this.tab = 1; this.selectTab = function(setTab) { this.tab = setTab; }; this.isSelected = function(checkTab) { return this.tab === checkTab; }; });

HTML

<section ng-controller="PanelController as panel"> <ul class="nav nav-pills"> <li class="{ active:panel.isSelected(1) }"> <a href ng-click="panel.selectTab(1)">Tab 1</a> </li> </ul> <div ng-show="panel.isSelected(1)"> blah </div> </section>

This got rid of some of the clunky, but I'm not thrilled with the final result. We'll see where it goes next.

[learnbutts]

More Angular Notes

Megasaur continues the Angular tutorial with her goldfish brain.

Built In Directives

ng-show

The ng-show directive allows conditional display. There’s a corresponding “ng-hide” directive that does what you would expect, and saves you from using “!” to negate the item in ng-show.

<button ng-show="controller.variable.conditional">Button Text</button>

ng-repeat

The ng-repeat directive will step through the values of an array.

<div ng-repeat="item in controller.arrayVar> <h2>{{item.name}}</h2> </div>