ng-cloak

=====Директива ng-cloak===== Все, кто использует AngularJS при разработке сайтов сталкивался с проблемой, когда вначале загружается страница с разметкой, а потом, когда подгружается сам Angular все приходит в норму, и страница приобретает нормальный вид. Но до этого момента, в зависимости от скорости компьютера, скорости интернета, и сложности самой страницы пользователь вынужден наблюдать страницу с разметкой и брекетами ангуларя. Это производит не лучшее впечатление на пользователя -и уж точно не создает вав эффект. Положение еще больше усугубляется, когда страница содержит большие блоки кода, которые должны быть скрыты и показываться по условиям. Понятно, что страницу нужно разгружать через использование ngInclude, но все же все инклудами не разгрузить.\\ \\ Для того чтобы избежать такой ситуации разработчики Angular создали атрибут ngCloak, который призван решить эту проблему. Принцип его работы прост — он устанавливает стиль display: none и убирает его, когда сам ангуляр загружен и выполнил логику отображения — к этому времени страница приобретает законченный вид. Но когда я впервые поставил этот атрибут я был удивлен тем, что он не произвел ожидаемого эффекта — все осталось, как и было. И в чем причина ? Вспомним, что браузер формирует DOM модель в той последовательности в которой он встречает теги в HTML файле. А JavaScript файлы принято грузить не вначале HTML файла, а в конце, так как это позволяет сократить время появления страницы. Но это в свою очередь и является причиной того что мы вначале видим одну картинку, а после того как подгружен JavaScript и выполнен его код — картинка меняется. Поэтому атрибут ngCloak на сам браузер не производит никакого впечатления — он его просто игнорирует. Таким образом, для того чтобы атрибут возымел желаемое действие ангулар нужно загружать вначале. Пример:





    ng-cloak
    
    
    
    
    
    
    


    
        Tasks List
        
            
                
                    
                    {{button}}
                
            
        
        
            
                
                    
                        # Tasks Done
                    
                    
                        {{$index + 1}}
                        {{property}}
                    
                
            
            
                
                    
                        {{task.action}} (Done)
                    
                
            
            
                Select another option to display a layout