Angular Readme

README.md

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

Section 8

Testing