nenodias/angular.html

## angular.html
<!DOCTYPE html>
<html lang="en" ng-app="AppModule">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AngularJS</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.0/angular.min.js"></script>
</head>
<body >
    <div ng-controller="AppController">
        <p>{{ message }}</p>
        <hero hero="heroi" on-update="updateHero(hero, prop, value)"></hero>
        <hero hero="heroina" on-update="updateHero(hero, prop, value)"></hero>
    </div>
    <script type="text/javascript">
        var AppModule = angular.module('AppModule', []);


        //Componente Hero
        AppModule.controller('HeroController',  function HeroController(){
            var ctrl = this;
            ctrl.$onInit = function() {
                console.log('HeroController initialized');
            };

            ctrl.click = function(prop, value) {
                console.log(prop, value)
                ctrl.onUpdate({hero: ctrl.hero, prop: prop, value: value});
            };
        });
        AppModule.component('hero', {
            template:`
                <span>Name: {{$ctrl.hero.name}}</span> <button ng-click="$ctrl.click('name','Batman')">OK</button> <br />
            `,
            controller:'HeroController',
            /*
            @ Text binding
            = Two-way binding
            & Method binding (although some call it one-way binding)
            < One-way binding
            */
            bindings: {
                hero: '=',
                onDelete: '&',
                onUpdate: '&'
            }
        });

        AppModule.controller('AppController', ['$scope',function AppController($scope){
            $scope.message = "Hello World";
            $scope.heroi = {
                name: "Monet"
            };
            $scope.heroina = {
                name: "Mulher Maravilha"
            };
            $scope.updateHero = function(hero, prop, value){
                hero[prop] = value;
            };
        }]);
    </script>
</body>
</html>

## index.html
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title></title>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>

    <script>
    var vm = {};
    $(document).ready(function(){

        var events = {};
        vm.events = events;

        _.extend(events, Backbone.Events);

        events.on("alert", function(msg) {
            alert("Triggered " + msg);
        });

        const Pessoa = Backbone.Model.extend({
            setNome: function(nome) {
                this.set({nome});
            },
            getNome: function(){
                return this.get('nome');
            }
        });
        vm.Pessoa = Pessoa;

        let p = new Pessoa({ nome: 'LOL'});

        p.on('change:color', function(model, color) {
            $('#sidebar').css({background: color});
        });

        p.setNome('Neno');

        const HelloView = Backbone.View.extend({
            el: $('#app'),
            model: p,
            className: "document-row",
            tagName: 'DIV',
            events: {
                "click h1":          "open",
                "change input":          "changeInput",
            },
            initialize: function() {
                this.listenTo(this.model, "change", this.render);
                this.render();
            },
            open: function(e){
                this.model.setNome('Dias');
                this.model.trigger('change:color', this.model, 'blue');
            },
            changeInput:function(event){
                debugger;
                var text = null;
                if(typeof(event) === "string"){
                    text = event;
                } else if(event instanceof Object){
                    console.log(event)
                    text = event.target.value;
                }
                if(text){
                    this.model.setNome(text);
                }
            },
            render: function() {
                const p = this.model;
                $(this.el).html(`
                    <div class="home">
                        <h1 id="sidebar">Hello ${p.getNome()}</h1>
                        <input type="text" value="${p.getNome()}" />
                    </div>
                `);
            }
        });

        vm.HelloView = HelloView;

        var Router = Backbone.Router.extend({

            initialize: function(options) {
                this.route(/^(.*?)/, "home");
            },

            home: function(){
                this.page = new HelloView();
            }

        });

        vm.Router = new Router();
        Backbone.history.start({pushState: true});
    });
    </script>

  </body>
</html>
	<!DOCTYPE html>
	<html lang="en" ng-app="AppModule">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AngularJS</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.0/angular.min.js"></script>
	</head>
	<body >
	<div ng-controller="AppController">
	<p>{{ message }}</p>
	<hero hero="heroi" on-update="updateHero(hero, prop, value)"></hero>
	<hero hero="heroina" on-update="updateHero(hero, prop, value)"></hero>
	</div>
	<script type="text/javascript">
	var AppModule = angular.module('AppModule', []);


	//Componente Hero
	AppModule.controller('HeroController', function HeroController(){
	var ctrl = this;
	ctrl.$onInit = function() {
	console.log('HeroController initialized');
	};

	ctrl.click = function(prop, value) {
	console.log(prop, value)
	ctrl.onUpdate({hero: ctrl.hero, prop: prop, value: value});
	};
	});
	AppModule.component('hero', {
	template:`
	<span>Name: {{$ctrl.hero.name}}</span> <button ng-click="$ctrl.click('name','Batman')">OK</button> <br />
	`,
	controller:'HeroController',
	/*
	@ Text binding
	= Two-way binding
	& Method binding (although some call it one-way binding)
	< One-way binding
	*/
	bindings: {
	hero: '=',
	onDelete: '&',
	onUpdate: '&'
	}
	});

	AppModule.controller('AppController', ['$scope',function AppController($scope){
	$scope.message = "Hello World";
	$scope.heroi = {
	name: "Monet"
	};
	$scope.heroina = {
	name: "Mulher Maravilha"
	};
	$scope.updateHero = function(hero, prop, value){
	hero[prop] = value;
	};
	}]);
	</script>
	</body>
	</html>
	<!DOCTYPE html>
	<html lang="pt-br">
	<head>
	<title></title>
	<meta charset="utf-8">
	</head>
	<body>
	<div id="app"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>

	<script>
	var vm = {};
	$(document).ready(function(){

	var events = {};
	vm.events = events;

	_.extend(events, Backbone.Events);

	events.on("alert", function(msg) {
	alert("Triggered " + msg);
	});

	const Pessoa = Backbone.Model.extend({
	setNome: function(nome) {
	this.set({nome});
	},
	getNome: function(){
	return this.get('nome');
	}
	});
	vm.Pessoa = Pessoa;

	let p = new Pessoa({ nome: 'LOL'});

	p.on('change:color', function(model, color) {
	$('#sidebar').css({background: color});
	});

	p.setNome('Neno');

	const HelloView = Backbone.View.extend({
	el: $('#app'),
	model: p,
	className: "document-row",
	tagName: 'DIV',
	events: {
	"click h1": "open",
	"change input": "changeInput",
	},
	initialize: function() {
	this.listenTo(this.model, "change", this.render);
	this.render();
	},
	open: function(e){
	this.model.setNome('Dias');
	this.model.trigger('change:color', this.model, 'blue');
	},
	changeInput:function(event){
	debugger;
	var text = null;
	if(typeof(event) === "string"){
	text = event;
	} else if(event instanceof Object){
	console.log(event)
	text = event.target.value;
	}
	if(text){
	this.model.setNome(text);
	}
	},
	render: function() {
	const p = this.model;
	$(this.el).html(`
	<div class="home">
	<h1 id="sidebar">Hello ${p.getNome()}</h1>
	<input type="text" value="${p.getNome()}" />
	</div>
	`);
	}
	});

	vm.HelloView = HelloView;

	var Router = Backbone.Router.extend({

	initialize: function(options) {
	this.route(/^(.*?)/, "home");
	},

	home: function(){
	this.page = new HelloView();
	}

	});

	vm.Router = new Router();
	Backbone.history.start({pushState: true});
	});
	</script>

	</body>
	</html>