Tips para AngularJS

Tips para AngularJS.md

Tips para AngularJS

Inicio de una aplicación

Inicio de una aplicación básica

<div ng-app="angularApp" ng-controller="PostsController">
    <ul>
        <li ng-repeat="post in posts">
            {{ post.text }}
        </li>
    </ul>
<div>

angular.module('angularApp', [])
    .controller('PostsController', function($scope, $http) {
        $http.get("http://api.example.com/posts")
            .then(function(response){
                $scope.posts = response.data.posts;
                for(var i = 0; i < $scope.posts.length; i++){
                    // Usar en caso de querer manejar datos recogidos
                }
            }):
    });

Inicio de una aplicación con servicios

http://viralpatel.net/blogs/angularjs-service-factory-tutorial/

Uso de animaciones

https://css-tricks.com/animations-the-angular-way/

Renderizar vistas desde $scope

Usando https://docs.angularjs.org/api/ng/directive/ngBindHtml:

<ANY
  ng-bind-html="expression">
...
</ANY>
<!-- Añadir en header o footer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-sanitize.min.js"></script>

angular.module('angularApp', ['ngSanitize'])

Directivas

Directiva para ng-enter en inputs

app.directive('ngEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.ngEnter);
                });
 
                event.preventDefault();
            }
        });
    };
});

Directiva para ng-model en contenteditable

app.directive('contenteditable', ['$sce', function($sce) {
        return {
            restrict: 'A', // only activate on element attribute
            require: '?ngModel', // get a hold of NgModelController
            link: function(scope, element, attrs, ngModel) {
                if (!ngModel) return; // do nothing if no ng-model

                // Specify how UI should be updated
                ngModel.$render = function() {
                    element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
                };

                // Listen for change events to enable binding
                element.on('blur keyup change', function() {
                    scope.$evalAsync(read);
                });
                read(); // initialize

                // Write data to the model
                function read() {
                    var html = element.html();
                    // When we clear the content editable the browser leaves a <br> behind
                    // If strip-br attribute is provided then we strip this out
                    if ( attrs.stripBr && html == '<br>' ) {
                        html = '';
                    }
                    ngModel.$setViewValue(html);
                }
            }
        };
    }]);

Codigo JS

Eliminar elementos vacíos de un array

function cleanArray(actual) {
  var newArray = new Array();
  for (var i = 0; i < actual.length; i++) {
    if (actual[i]) {
      newArray.push(actual[i]);
    }
  }
  return newArray;
}