Develop Reference

My single page application which is implemented using AngularJS is taking long time to load the page

I am working on the Single page application and using AngularJS. In my application, all DOM elements get loads using ajax and due to this I have used number of ng-repeat and binding expression and this is the reason my page is taking long time to load the page. Please help to solve my issue.
app
angular.module('tabApp', []);
Service
angular.module('tabApp')
.service('mrcService', ['$http', function($http) {
this.categories = [];
this.getCategories = function() {
return $http({
method: "GET",
url: 'mrcdata.aspx'
}).success(function(data) {
categories = data;
return categories;
});
};
}]);
Controller
angular.module('tabApp')
.controller('dynamicContentCtrl', ['$scope', 'mrcService', function($scope, mrcService) {
$scope.categories = [];
mrcService.getCategories().then(function(response) {
$scope.categories = response.data.Categories;
});
}]);
HTML code
<div class="main-content container" ng-controller="dynamicContentCtrl">
<div ng-controller="desktopTabCtrl" class="row desktop-content">
<div class="col-md-3 col-sm-4 category-items">
<nav class="nav categories-nav">
<ul class="categories">
<li ng-repeat="category in categories" class="category" ng-class="{ active: isSet(category.CategoryRank) }">
<a href="javascript:void(0)" ng-click="setTab(category.CategoryRank)" class="text">
<span>{{category.CategoryTitle}}</span>
</a>
<span class="arrow-right"></span>
</li>
<li class="category static">
<C5:LocalLiteral runat="server" Text="mrc.home.learnmoretab"/>
</li>
</ul>
</nav>
</div>
<div class="col-md-9 col-sm-8 document-tiles">
<div ng-repeat="category in categories" ng-show="isSet(category.CategoryRank)" class="tile-container">
<div class="row">
<div ng-repeat="document in category.Documents" class="col-md-6 col-sm-6 tile">
<div class="tile-content row">
<div class="col-md-12 col-sm-12">
<div class="thumbNail-content col-md-6 col-sm-6">
<p class="title">{{document.DocumentTitle}}</p>
<p class="audience">{{document.Audience}}</p>
</div>
<div class="thumbNail-image col-md-6 col-sm-6">
<img alt="Thumb Nail" src="{{document.ThumbnailUrl}}">
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="download-section">
<select class="lang-dropdwn"
ng-model="document.DefaultDialectId"
ng-change="selectLang(document , document.LocalizedDocuments , document.DefaultDialectId )">
<option ng-repeat="localizedDocument in document.LocalizedDocuments"
value="{{localizedDocument.DialectId}}">
{{localizedDocument.LanguageName}}
</option>
</select>
</div>
<div class="button-conatiner" ng-init="document.DownloadLink = document.DocumentId +':'+document.DefaultLocalizedDocumentId">
<a class="button" href="documentdownloader.aspx?documentid={{document.DownloadLink}}"><C5:LocalLiteral runat="server" Text="basket.esddelivery"/></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Here's a few options you can try to improve performance.
1. You should set the track by in the ng-repeats
To minimize creation of DOM elements, ngRepeat uses a function to "keep track" of all items in the collection and their corresponding DOM elements. For example, if an item is added to the collection, ngRepeat will know that all other items already have DOM elements, and will not re-render them.
The default tracking function (which tracks items by their identity) does not allow duplicate items in arrays. This is because when there are duplicates, it is not possible to maintain a one-to-one mapping between collection items and DOM elements.
If you do need to repeat duplicate items, you can substitute the default tracking behavior with your own using the track by expression.
For example, you may track items by the index of each item in the collection, using the special scope property $index.
Example:
<div ng-repeat="item in items track by $index">{{item.name}}</div>
2. You could use one way data binding to items you know wont be changed. This will disable the watchers for those items and improve performance. Example:
Instead of this
{{item.name}}
Use this
{{::item.name}}
Please remember that this is a one way binding and these values will not be updated if something changes in your scope but you will need to manually update it.
3. Try to limit the ng-show and ng-hide attributes since this will add more watchers and leads to poor performance.

AngularJS: Set element to class active by default

I've created a custom tabbed element using the following code:
<div class="row step">
<div class="col-md-4 arrow active" ui-sref-active="active">
<a ui-sref="dashboard.create.key_elements" ui-sref-opts="{ reload: true }">
<span class="number">1</span>
<span class="h5">Key Elements</span>
</a>
</div>
<div class="col-md-4 arrow" ui-sref-active="active">
<a ui-sref="dashboard.create.questions" ui-sref-opts="{ reload: true }">
<span class="number">2</span>
<span class="h5">Questions</span>
</a>
</div>
<div class="col-md-4 arrow" ui-sref-active="active">
<a ui-sref="dashboard.create.publish" ui-sref-opts="{ reload: true }">
<span class="number">3</span>
<span class="h5">Publish</span>
</a>
</div>
</div>
As you can see I'm using ui-sref-active="active" to add a class of active to an element when it is clicked. My issue is getting the first element to display with a class of active when the page is first loaded as currently it only happens when an item is clicked. I've tried manually adding active to the first element but this seems to be ignored.

The problem is that the first route dashboard.create.key_elements is not the current route, so ui-router disables it as "active".
Solution:
Add another class in the CSS e.g. "newclassname" to have the same behavior of "active" class
Add ng-class to the first element conditioned to a variable in $scope and ng-click on the other elements so to disable it
In the JS:
$scope.firstActive = true;
$scope.changeFirst = function() {
$scope.firstActive = false;
};
EDIT:
Better yet, instead of dabbling with ng-click, you can simply inject the variable when you define the routes. E.g. from a snippet of my own code
.state('ordini', {
url: '/ordini/:pdv',
templateUrl: 'ordini/ordini.html',
controller: 'OrdiniController',
resolve : {
CartValue: ['$rootScope', '$stateParams', 'CartService', function($rootScope, $stateParams, CartService){
return CartService.getCartValue($rootScope.user.MachCode, $stateParams.pdv);
}]
}
See documentation

ng-repeat conflics with jQuery function call

I combined AngularJS and MaterializeCSS and use ng-repeat to render images. MaterializeCSS includes the jQuery-based materiabox function to execute an animation to open a modal for each element with the materialbox class.
The modal can't be opened by clicking. If I display a single image without ng-repeat it works fine.
Here is my code:
HTML:
<div class="container" ng-controller="MainCtrl">
<span class="col m6 l4">
<li ng-repeat="url in imageUrls">
<img class="materialboxed" ng-src="{{ url }}">
</li>
</span>
</div>
Javascript:
var app = angular.module("app", []);
app.controller("MainCtrl", function($scope) {
$scope.imageUrls = ["https://d13yacurqjgara.cloudfront.net/users/179234/screenshots/1958409/screen_shot_2015-03-04_at_14.58.59.png", "https://d13yacurqjgara.cloudfront.net/users/5276/screenshots/1958408/booze_cruise_icon_kendrickkidd.jpg"];
});
// Code from MaterializeCSS
$(document).ready(function(){
$('.materialboxed').materialbox();
});

Hi i had the same problem , the solution is put the jquery code into a angularjs directive , some like:
Javascript
yourApp.directive('theNameOfYourDirective', function() {
return {
// Restrict it to be an attribute in this case
restrict: 'A',
// responsible for registering DOM listeners as well as updating the DOM
link: function() {
$('.materialboxed').materialbox();
}
};
});
and for the html code ,put the name of the directive like a attr of the tag:
HTML
<div class="container" ng-controller="MainCtrl">
<span class="col m6 l4">
<li ng-repeat="url in imageUrls" theNameOfYourDirective>
<img class="materialboxed" ng-src="{{ url }}">
</li>
</span>
this works for me, greetings
reference : https://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/

Angular UI Typeahead - Prevent dropdown close on select

I wanted to be able to show the whole list after a selection. The way I wanted to do that is by placing the selection in the placeholder and clearing the input's model.
On the typeahead-on-select event, I save the value that was selected and I set the model to be "". I expected the dropdown to appear just like if the input is empty, but it doesn't.
<input type="text" ng-model="myModel" data-min-length="0"
typeahead="item for item in items | filter:$viewValue"
placeholder="{{currentModel}}"
ng-blur="validateSelection()"
typeahead-on-select="onSelect($item, $model, $label)">
When I clear the input's model, typeahead doesn't detect the change in the model. If I then type 1 character and erase it, I get the whole list.
Angular v1.2.9
Angular Bootstrap v0.10.0
Any help would be appreciated, even a different approach.
EDIT:
How do I either prevent the dropdown closing after select or make typeahead detect the change in my model?

I do something similar. I add a button to the right of the typeahead so it looks like a dropdown menu and clicking the button makes the typeahead choices show up. You could do the equivalent of the button click I use to make it happen. You'll have to modify the code below to your needs. This comes from a directive I made
var which = 'idOfTypehead'; // This is actually a variable, I just set it here
// it is the id="XXX" from my typeahead
$("#"+which).focus();
var e = jQuery.Event('keydown', {which: 40 });
$timeout(function() {
$("#"+which).trigger(e);
},0);
} ;

I could solve this just adding a ng-click function stoping the propagation to the modal content. In this way ng-click="dropdownMenuClick($event)".
<header class="top-header clearfix" data-ng-controller="headerController">
<!--modal search panel-->
<li class="dropdown top-bar-item search-panel" ng-show="searchCallback">
<a href="javascript:;" class="dropdown-toggle" toggle="dropdown">
<i class="glyphicon glyphicon-search"></i>
<span>Search modal panel</span>
</a>
<div class="dropdown-menu with-arrow panel panel-dark" style="width: 330px;">
<div class="panel-heading">
<i class="glyphicon glyphicon-search"></i> <span>{{currentSearchTitle}}</span>
</div>
<div ng-click="dropdownMenuClick($event)">
<div class="panel-body">
<div class="row">
<input type="text"
placeholder="Type your word"
ng-model="result"
typeahead="item as item.Name for item in buildings($viewValue)"
typeahead-on-select='onSelect($item, $model, $label)'
class="form-control">
</div>
</div>
</div>
<div class="panel-footer text-right">
<a href="javascript:;" class="" toggle="dropdown" ng-click="searchCallback(seachFilter)">
<i class="glyphicon glyphicon-search"></i>
<span>Search</span>
</a>
</div>
</div>
</li>
<!--modal search panel-->
</header>
In the controller:
(function () {
'use strict';
angular.module('app')
.controller('headerController', [
'$scope', '$http', '$routeParams', 'logger', '$modal', 'appConfig',
function ($scope, $http, $routeParams, logger, $modal, appConfig) {
$scope.dropdownMenuClick = function ($event) {
$event.preventDefault()
};
}
]);
}).call(this);

Nested Angular Switches?

I'm building a MEAN SPA and the current page I'm working on displays the users in the database. I'm pretty new to Angular so I'm still trying to wrap my head around it.
I have a parent container of which the content is controlled by an <ng-switch> and switches to show the relevant content depending on whether the user has clicked 'view all' or 'add new'. This works fine.
What I'm aiming to do now is when the user clicks on a user that's displayed in 'view-all', I want the content to switch to a view containing that users details where they can then go and edit the profile etc. What would be the best way to achieve this?
My HTML is set up like so:
Main staff view
<div class="staff" ng-controller="staffController">
<div class="side-menu">
<h2>Staff</h2>
<ul>
<li><a ng-click="tab='view-all'"><i class="fa fa-user"></i> View All</a></li>
<li><a ng-click="tab='add-new'"><i class="fa fa-plus"></i> Add New</a></li>
</ul>
</div>
<div class="page-content" ng-switch on="tab">
<div ng-switch-when="view-all" class="tab-content">
<staff-view-all></staff-view-all>
</div>
<div ng-switch-when="add-new" class="tab-content">
<staff-add-new></staff-add-new>
</div>
</div>
</div>
Directives:
.directive('staffViewAll', function () {
return {
restrict: 'E',
templateUrl: 'partials/staff/view-all.ejs'
}
})
.directive('staffAddNew', function () {
return {
restrict: 'E',
templateUrl: 'partials/staff/add-new.ejs'
}
})
view-all.ejs
<h2>View all staff</h2>
{{ users.length }} users in system
<ul>
<li ng-repeat="user in users"> <!-- click this and you see the singular view -->
<img ng-src="{{user.avatar}}?dim=100x100" />
<h3>{{user.username}}</h3>
<h4>{{user.email}}</h4>
</li>
</ul>

Use another ng-switch to switch to detailed view for the selected user.
Something like this: jsfiddle
<div ng-switch-when="list">
<ul>
<li ng-repeat="fruit in fruits">
{{fruit}}
</li>
</ul>
</div>
<div ng-switch-when="details">
<p>Details for {{ selectedFruit }}</p>
Back to list
</div>
Controller:
$scope.showDetail = function (fruit) {
$scope.selectedFruit = fruit;
$scope.moduleState = 'details';
}
$scope.showList = function()
{
$scope.moduleState = 'list';
};