Arquivo da categoria: Programação

AngularJS – Unit Testing Directive Scope Binding

app.js

var app = angular.module("app", []);
 
app.directive("ehSimple", function() {
    return {
        scope: {
            ehSimple: "="
      },
        link: linkFn
    }
 
    function linkFn(scope, element) {
        element.addClass("plain");
 
        element.bind("click", function() {
            scope.clicked = true;
 
            scope.ehSimple.message += " world";
        })
    }
})

directive.spec.js

describe("Hello world", function() {
    var element;
    var $scope;
    beforeEach(module("app"));
    beforeEach(inject(function($compile, $rootScope) {
        $scope = $rootScope;
        $scope.data = {message: "Hello"};
        element = angular.element("<div eh-simple='data'>{{2 + 2}}</div>");
        $compile(element)($rootScope);
    }))
 
    it('should equal 4', function() {
    $scope.$digest();
    expect(element.html()).toBe("4");
  })
 
  describe("ehSimple", function() {
    it("should add a class of plain", function() {
        expect(element.hasClass("plain")).toBe(true);
    })
 
    it("should respond to a click", function() {
        browserTrigger(element, "click");
        expect(element.isolateScope().clicked).toBe(true);
    })
 
    it("should update both scopes on click", function() {
        browserTrigger(element, "click");
        expect(element.isolateScope().ehSimple.message).toBe("Hello world");
    })
  })
})

AngularJS – Marcação personalizada

var app = angular.module("app", []);
 
app.controller("AppCtrl", function() {
    this.random = Math.random();
});
 
app.directive("app", function() {
    return {
        restrict: "C",
        controller: "AppCtrl as app"
    };
});
 
angular.bootstrap(document.getElementById("container"), ["app"]);
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <title>Egghead Videos</title>
</head>
<body>
 
  <div id="container" class="app">
    {{app.random}}
  </div>
 
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.js"></script>
</body>
</html>

AngularJS – Usando angular.bootstrap para inicializar o App

var app = angular.module("app", []);
 
app.run(function($rootScope) {
    $rootScope.random = Math.random();
});
 
angular.bootstrap(document.getElementById("container"), ["app"]);
angular.bootstrap(document.getElementById("container2"), ["app"]);
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <title>Egghead Videos</title>
</head>
<body>
 
  <div id="container">
    {{random}}
  </div>
 
  <div id="container2">
    {{random}}
  </div>
 
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.js"></script>
</body>
</html>

AngularJS – Animação com JavaScript

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>Egghead Videos</title>
    <link rel="stylesheet" href="bower_components/topcoat/css/topcoat-desktop-light.css">
</head>
<body class="well-lg" ng-app="app" ng-controller="AppCtrl as app">
 
<button class="topcoat-button--large--cta" ng-click="app.toggle=!app.toggle">Goodbye, fair notification</button>
<hr/>
<div class="topcoat-notification toggle" ng-if="app.toggle">I'm too young to fade! :(</div>
 
<script type="text/javascript" src="bower_components/greensock/src/uncompressed/TweenMax.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
var app = angular.module("app", ["ngAnimate"]);
 
app.controller("AppCtrl", function() {
    this.toggle = true;
});
 
app.animation(".toggle", function () {
    return {
        leave: function (element, done) {
            element.text("Nooooo!!!");
            TweenMax.to(element, 1, {opacity:0.5})
        },
        enter: function (element, done) {
            element.text("Yay, I'm alive!")
            TweenMax.from(element, 1, {opacity:0})
        }
    }
})
{
  "name": "AnimationTutorials",
  "version": "0.0.0",
  "authors": [
    "johnlindquist"
  ],
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular-animate": "~1.2.12",
    "angular": "~1.2.12",
    "greensock": "~1.11.4",
    "topcoat": "~0.8.0"
  }
}

AngularJS – ng-repeat-start, Como usar!?

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <title>Egghead Videos</title>
  <link rel="//cdn.jsdelivr.net/foundation/5.4.7/css/foundation.css">
</head>
<body ng-app="app" ng-controller="AppCtrl as app">
 
  <div ng-repeat-start="thing in app.things">{{thing}}</div>
    Anything in here
  <div ng-repeat-end="">Also in here with binding {{thing}}</div>
 
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
</body>
</html>