Intro to AngularJS2 – Data Binding – Using $scope

View Github Repository Open presentation in a new window

brenelz

See all presentation from brenelz

Intro to AngularJS2 – Data Binding – Using $scope

0 1

Intro-To-Angular-Talk

Winnipeg.js Angular Talk Slides

On Github brenelz / Intro-To-Angular-Talk

Intro to AngularJS2

Created by Brenley Dueck / @brenelz for Winnipeg.js

Who Am I

 

AngularJS

  • Who has worked with Angular?
  • What have you built?

What is AngularJS?

  • JavaScript Framework
  • Maintained by Google
  • Opinionated
  • Great For Single Page Applications

AngularJS Features

  • Data Binding
  • MVC
  • Routing
  • Filters
  • Directives
  • Dependency Injection

AngularJS Initial Setup

index.html
<!DOCTYPE html>
<html ng-app="todoApp">
    <head>
        <title>Angular App | Winnipeg.JS</title>
    </head>
    <body>


        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js">
        </script>
        <script src="js/app.js"></script>
    </body>
</html>
js/app.js
var todoApp = angular.module('todoApp',[]);

Data Binding

index.html
...

<h3>Welcome to {{location || "Winnipeg.js"}}!</h3>
<p><input ng-model="location" placeholder="Enter Location"></p>

...

Welcome to Winnipeg.js!

AngularJS Controllers

index.html
<!DOCTYPE html>
<html ng-app="todoApp">
    <head>
        <title>Angular App | Winnipeg.JS</title>
    </head>
    <body ng-controller="TodoCtrl">


        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js">
        </script>
        <script src="js/app.js"></script>
    </body>
</html>
js/app.js
var todoApp = angular.module('todoApp',[]);
todoApp.controller('TodoCtrl',function($scope){

});

What is this $scope variable?

  • Glue between the Controller and the View
  • Sometimes called the ViewModel
  • Bind your data to this variable

Using $scope

js/app.js
var todoApp = angular.module('todoApp',[]);
todoApp.controller('TodoCtrl',function($scope){
	$scope.name = 'Brenley';
	$scope.todos = [
	   'Go to work',
	   'Grab something to eat',
	   'Present at Winnipeg.js'
	];
});
index.html
...

<h2>Todos List for <span>{{name}}</span></h2>

<ul>
   <li ng-repeat="todo in todos">
      {{todo}}
   </li>
</ul>
...

Todos List for Brenley

  • Go to work
  • Grab something to eat
  • Present at Winnipeg.js

Questions so far?

Filters

index.html
...

<p><input type="text" ng-model="search" placeholder="Search"></p>

<ul>
   <li ng-repeat="todo in todos | filter:search">
      {{todo}}
   </li>
</ul>
...

  • Go to work
  • Grab something to eat
  • Present at Winnipeg.js

Built-in Filters

  • filter
  • orderBy
  • uppercase/lowercase
  • currency
  • date

Directives

  • Adds functionality to HTML elements
  • Can be either an element or an attribute 
    <date-picker></date-picker>
    <div date-picker></div>
  • Custom ones can be created

Built-in Directives

ngApp 
<html ng-app="todoApp">
ngController 
<body ng-controller="TodoCtrl">
ngModel 
<p><input type="text" ng-model="search" placeholder="Search"></p>
ngRepeat 
<ul>
   <li ng-repeat="todo in todos">
</ul>
ngClick/ngSubmit 
<button ng-click="addTodo()">Add Todo</button>
ngShow/ngHide 
<span ng-hide="!items.length" class="num">{{items.length}}</span>

Making AJAX requests

todoApp.controller('TodoCtrl',function($scope,$http){
   $http({
       url: 'http://jsonstub.com/users',
       method: 'GET'
   }).success(function (data) {
       $scope.users = data.users;
   });
});

Making AJAX requests

Users from JsonStub.com

Simple Todo Demo

index.html
<!DOCTYPE html>
<html ng-app="todoApp">
    <head>
        <title>Angular App | Winnipeg.JS</title>
    </head>
    <body ng-controller="TodoCtrl">

<h2>Todos List for <span>{{name}}</span></h2>

<p>{{todos.length}} items visible</p>

<ul>
   <li ng-repeat="todo in todos">
      {{todo}}  | <a ng-click="deleteTodo($index)">Delete</a>
   </li>
</ul>

<p><input type="text" ng-model="todoNew" />
<button ng-click="addTodo()">Add Todo</button></p>

        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js">
        </script>
        <script src="js/app.js"></script>
    </body>
</html>

Simple Todo Demo

app.js
var todoApp = angular.module('todoApp',[]);
todoApp.controller('TodoCtrl',function($scope){
	$scope.name = 'Brenley';
	$scope.todos = [
	   'Go to work',
	   'Grab something to eat',
	   'Present at Winnipeg.js'
	];

	$scope.addTodo = function() {
	    var todo = $scope.todoNew;
	    $scope.todos.push(todo);
	    $scope.todoNew = '';
	};

	$scope.deleteTodo = function(index) {
	    $scope.todos.splice(index,1);
	};
});

Todos List for Brenley

3 items visible

Add Todo

Your Homework

  • Routing
  • Custom Directives
  • Three-Way Data Binding with Firebase
  • Factories, Services, and Providers
  • Dependency Injection

AngularJS Resources

Questions?

http://angular-slides.brenelz.com/

https://github.com/brenelz/Intro-To-Angular-Talk