Everything is a Directive – View ← $scope → Controller

View Github Repository Open presentation in a new window

shizik

See all presentation from shizik

Everything is a Directive – View ← $scope → Controller

0 0

CodeCamp-MK-2013

Presentation for Macedonian Code Camp 2013

On Github shizik / CodeCamp-MK-2013

Building Kickass SPAswith AngularJS

Marko Ilievski Sr. Software Engineer, Netchexgithub.com/shizikgithub.com/wcpro/ScaffR

What is a SPA anyway?

Web app providing

rich and fluid UX

by loading and executing code

within a single page

What's wrong with jQuery?

It's imperative :(

<label>Name:</label>
<input type="text" id="name">
<p id="greeting"></p>
Name:

Hello !

<script type="text/javascript">
  $(function () {
    var $name = $('#name');
    var $greeting = $('#greeting');

    $name.keyup(function () {
      $greeting.text('Hello '+ $name.val() + '!');
    })
  })
</script>

Lets see AngularJS?

<label>Name:</label>
<input type="text" ng-model="name">
<p>Hello {{name}}!</p>
Name:

Hello !

Declarative!

Data Binding

HTML/DOM ⇔ JavaScript

<input
    ng-model="model.message"
    value="Hello Campers!" />
$scope.model = {
    message: "Hello Campers!"
};
$scope.model.message = "Hello there!"

Dirty checking

Render↓Render↓Render↓Render↓Render↓$apply

Is that it?!?

Nope. There is a lot more going on:

  • Data Binding
  • Views
  • Templates
  • Routing and Deep Linking
  • Pub/Sub
  • Dependency Injection
  • MV*
  • ...

Full Featured Framework!

There are other frameworks, why Angular?!?

Well...

“Angular is the only framework that doesn’t make MVC seem like putting lipstick on a pig.”

Everything is a Directive

<!DOCTYPE html>
<html ng-app>
<head>
    <title></title>
</head>
<body>
    <div>
        Name: <input type="text" ng-model="name">
        <p>The name is: <span ng-bind="name"></span></p>
    </div>

    <script src="Scripts/angular.js"></script>
</body>
</html>
						
<p>The name is: <span ng-bind="name"></span></p>

You should use handlebars instead of ng-bind

<p>The name is: {{ name }}</p>

And get much cleaner templates

<div ng-init="names=['Angular','Ember','Knockout']">
        <p>Looping with the ng-repeat Directive</p>
        <ul>
           <li ng-repeat="name in names">{{ name }}</li>
        </ul>
</div>

Looping with the ng-repeat Directive

  • Angular
  • Ember
  • Knockout

Imagine teaching the HTML new tricks

Well you can! By using directives!

More on that later...

<div ng-controller="MyController">
    Your name:
    <input type="text" ng-model="username">
    <button ng-click="sayHello()">greet</button>
    <p>{{greeting}}</p>
</div>

View ← $scope → Controller

<script type="text/javascript">
    function MyController($scope) {
        $scope.username = 'World';
 
        $scope.sayHello = function() {
            $scope.greeting = 'Hello ' + $scope.username + '!';
        };
    }
</script>
Your name: Greet 

<html ng-app="moduleName">

Defining a Module

var myModule = angular.module('myModule', []);
 
// add some controllers and services
myModule.controller('myController', ...);
myModule.service('myService', ...);

// Add provider configuration (route provider for example) 
myModule.config(function(){...});

// Add service configuration 
myModule.run(function(){...});

Defining Routes

var myModule = angular.module('myModule', ['ngRoute']);
 
myModule.config(function ($routeProvider) {
    $routeProvider
        .when('/',
            {
                controller: 'indexController',
                templateUrl:'index.html'
            })
        .when('/details',
            {
                controller: 'detailsController',
                templateUrl:'details.html'
            })
        .otherwise({ redirectTo: '/' });
});

Where are these views rendered?

<div ng-view></div>

or

<ng-view></ng-view>

Defining Services

var myModule = angular.module('myModule');

myModule.factory('customerService', function() {
    var newServiceInstance = {};
    var customers = [ ... ];
	
    newServiceInstance.getCustomers = function () {
        return customers;
    };

    return newServiceInstance;
});

Injecting Services

var myModule = angular.module('myModule');

myModule.controller('customerCtrl', function($scope, customerService) {
    $scope.customerList = customerService.getCustomers();
    // do stuff with the list
});

Factory vs Service vs Provider

Live Coding

Putting it all together

Important!

Be careful when using $apply

// Bad
$scope.message = "Yo!";
$scope.$apply();
				
//Good				
$scope.$apply(function() {
    $scope.message = "Yo!";
});

Tools Batarang | Yeoman | Karma

UI Components AngularUI | KendoUI | Wijmo

Libraries BreezeJS | Firebase

Good place to starthttp://docs.angularjs.org/guide/

Questions?

  • Complete electronic evaluation forms on the computers in the hall and enter to win!!
    • Infragistics Ultimate
    • Telerik DevCraft
    • JetBrains .NET tools
    • Semos training vouchers
    • Pluralsight subscriptions
    • and many more...
0