201404 - Ejemplo Base 2

by scyrizales

HTML

<div id="main" ng-app="app" ng-controller="MainCtrl">
    <input type="text" ng-model="nombre" />
    <span ng-show="bienvenido">Hola</span>
    <span ng-hide="bienvenido">Chau</span>
     {{nombre}}
    <button ng-click="alertar()">
        Cambiar
    </button>
    <ul>
        <li ng-repeat="n in nombres">
            {{n.nombre | titulo}}
        </li>
    </ul>
    {{ fecha | date:'hh:mm:ss' }}
    <button
    ng-click="actualizar()">
        cambiar
    </button>
</div>

JavaScript

angular.module("app", [])
    .controller("MainCtrl", ["$scope", "miServicio", function ($scope, miServicio) {
        $scope.nombre = "Julio";
        $scope.alertar = function(){
            alert($scope.nombre);
        };
        //$scope.nombres = ['Sergio', 'Javier'];
        $scope.nombres = [
            {nombre: 'Sergio'}, 
            {nombre:'Javier'}
        ];
        $scope.fecha = miServicio.ahora;
        $scope.actualizar = function() {
            $scope.fecha = miServicio.now();
        }
}]);
angular.module("app").filter("titulo", function(){
    return function(input){
        return "Don " + input;
    }
}).factory("miServicio", function() {
    var instance = {};
    instance.ahora = new Date();
    instance.now = function() {
        return new Date();
    };
    return instance;
});