Let us learn some angularjs shall we?

This is just the basics, don't get too excited.

Where do I start?


Angular-seed provides an excellent jumping off point for small-largish applications.


Allows for beginners to see some proper file structure and code organization the "Angular way".


https://github.com/angular/angular-seed

NG-APp

Hey! There is some Angular stuff on this page. 

I need you to check this out.

<!DOCTYPE html><html ng-app>  <head>    <title>My Angular App</title>   </head>  <body>    <h1>My first AngularJS App</h1>      </body></html>

I now pronounce you data-bound


Data binding allows you to "marry" to pieces of content together.  A change to the view updates the model and a change to the model updates the view.


Ok Lets see some code...

Tell me more...

NG-REPEAT


insanity (in'sanité) :
doing the same thing over and over again and expecting different results.


That is just want the ng-repeat directive allows us to do.

NG-REpeat

Ng-repeat is a directive that will instantiate a template once per item collection.


This allows for the easy iteration over some data with minimal amount of code. 

<li ng-repeat="thing in things">  Do this for all things.</li>

Controllers

A controller is used to augment the Angular $scope.

($scope is the glue between application controller and the view.)


A controllers main use is to set up the $scope object or provide behavior to the $scope object.


Do not use to:

  • Manipulate the DOM
  • Format Input
  • Filter Output
  • Share code across controllers

Controllers (cont)

Can be added several ways. 
As a directive in the DOM:
<div ng-controller="myController">  Do stuff here.</div>
On a new custom directive:
myApp.directive('newDirective', function() {  return {    controller: "myController",  }})
On a route:
 $routeProvider.when('/home', {templateUrl: 'some-template.html', controller: 'myController'});

Directives

Allows for useful reusable elements.  New directives can be created with classes, attributes, or completely new elements.


Angular comes with several built-in directives like:

ng-model, ng-bind, ng-view.


<twitter-post></twitter-post><div class="twitter-post"></div><div twitter-post></div>

Uses Angular's HTML compiler to attach behavior 
or transform the DOM

Services

Sharing is caring.

Services are shareable functions that can be used throughout your application. Use services to better organize code.

Angular provides some useful services already ($http). But creating your own is easy and allows for easier maintainability.  

Routes

Routes allow angular to create deep-linking URLs  to controllers and views.


Routes can have their own controller and can get parameters from the $routeProvider service.

$routeProvider.when('/issue/:issueId', {templateUrl: 'path/to/template.html', controller: 'myRouteController'});
myControllers.controller('myRouteController', function($scope, $routeParams) {  if ($routeParams.issueId)    $scope.issueId = $routeParams.issueId;});

 

Download here


https://github.com/evanjenkins/angular-project

Made with Slides.com