My First Angular

Section 1 Best Practices

MV* separation
DRY
Don't hack

Don't write bad

Performance
Reusability
Square peg, round hole

Test

Write the tests!
Doesn't have to be TDD

Broaden your understanding

Learning curve is steep!
Practice being curious
Refactor!

Read the source code!

Consumable
Error messages are bad! :(
Dissect the source

Section 2

# ng-repeat & ng-repeat-start

# in js
$scope.users = [
    {name:"mike", age: 23},
    {name:"jim", age: 33},
    {name:"larry", age: 43}
]

# html

<div ng-repeat-start="user in users">
    {{ user.name }} - {{ user.age }}
</div>
<hr ng-repeat-end />

Array of Primative Types will barf so we need to override the key

# ng-repeat & ng-repeat-start

# in js
$scope.myarr = [1,2,3,4,5,5,6,7,8,9]

# $index is the zero base index of the array

# html

<div ng-repeat-start="element in myarr track by $index">
    {{ element }}
</div>
<hr ng-repeat-end />

Section 3

Filters

{{ myfilter.name | uppercase }}
{{ myfilter.intergerdate | date }}

<input ng-model="myfilter.str"> //=> 1457819077123
{{ myfilter.str | date }} //=> Mar 12, 2016

Filtering Objects

  $scope.mydata = {arr:[{name:"tom", age:42}, {name:"larry", age:56}]};

Piping the object through myfilter and filtering on myfilter.name allows for search on the name key in the object.

Filters can be chained see orderBy
Filters can be used in the controller app.controller('MainController', function($scope, $filter){})

  <input ng-model="myfilter.name">
  <div ng-repeat="user in mydata.arr | filter:myfilter | orderBy:'age' | limitTo:2">
    {{ user }}
  </div>

Section 4

Constants can't be modified by a decorator but value can

app.constant('twitterAPI', {url: 'api.twitter.com/v1/'});
app.value('valService', function(){ return 'this is return from a fn'});

TODO Understanding the differences between Factory and Service
Providers always return an object with a $get function
- used when you are using app init configuration app.config
Decorators

Section 5

Directives
- Program the DOM

myDirective

# directives can be in 4 forms

<my-directive></my-directive>

<div my-directive></div>

<div class="my-directive"></div>

<!-- my-directive -->

The directive is named in camelCase, in HTML it is hyphen-case (similar to what happens to data[:attributes] => data-attributes in rails)

Directives seem to behave a lot like view helpers that build html elements
TODO understand the 1 way and 2 way data binding with @ & = inside directives
- @ takes the binding from inside the directive. The string is evaluated with interpolated data
- = takes the binding of value of the string
- & pass an expression down from parent controller

app.controller('MainController', function($scope){
  $scope.photo = { url: "http://someurl",
                   date: 'March 13, 2016' }
  $scope.callme = function(msg) {
                    console.log('you gave me: ' +msg);
  }
});

<photo photo-src="photo.url"
  capstring="Taken on: {{photo.date}}"
  local-func="callme(msg)" />

Compile & Link Function in directives

Compile is applied to all instances of thing
- compile will perform DOM manipulations on the template for all instances
- after it will call link then it will call instance DOM manipulations
Link was using $observe to watch for changes
- $observe is only available to the single instance

Section 6

Routing

ng-view is where the template will be inserted
routing can use #, #!, or HTMLPushState
Depending on style you don't have to register the controller in the route you can just define it in the template

var app = angular.module('app', ['ngRoute']);

app.controller('MainController', function($scope, $routeParams){
    // querystrings are added to the routeParams hash
    $scope.somedata = $routeParams.myparam;
})

app.config(function($routeProvider){
$routeProvider
    .when('/', {templateUrl: 'view.html'})
    // instead of having controller: 'MainController' in the hash
    // you can chain routes
    .when('/test/:myparam', {templateUrl: 'view2.html'})
    .otherwise({template: 'Couldn''t match a route'}); // catch all
});

<script type="text/ng-template" id="view.html">
<div ng-controller="MainController">view {{ somedata }}</div>
<script>

Section 7

Events

Emit sends the event to the controller and controllers above
Broadcast sends the event to the controller and controllers down
if there is a string match registered with $scope.$on it will fire that method

`$scope.$apply`

execute an expression in angular from anywhere outside of angular

tjhanley/README.md