Hi there!
I am in need to create a table with so many records using Angular 2+. For that, I'm trying virtual scroll. Still, I can't find any documentation or samples in a working condition.
Please help me for getting started with Angular 2+ virtual scroll.
You may try ngx-ui-scroll. It provides *uiScroll structural directive that can be directly used in your App component's template. It currently (v0.0.4) doesn't support table-layout, but if you can use div-layout, it may look like
<div class="viewport">
<div *uiScroll="let item of datasource" class="row">
<div class="col1">{{item.data1}}</div>
<div class="col2">{{item.data2}}</div>
<div class="col3">{{item.data3}}</div>
</div>
</div>
Then you need to implement the Datasource object in accordance with documentation or code samples from the demo page.
I strongly recommend ngx-virtual-scroller
It is very robust handling dozens of thousands of complex elements without trouble. I use it in my open source Video Hub App to show a gallery of images & videos (custom elements) allowing the user to change the number of columns. See GitHub for code.
You should have a look at Angular Material VirtualRepeat https://material.angularjs.org/latest/demo/virtualRepeat
The md-virtual-repeat directive provides a md-on-demand attribute which avoids having an array as the data source provider.
[Edit] The Angular Material VirtualRepeat not being available for angular2 yet, I did a few changes on rintoj/angular2-virtual-scroll to get the data from the backend and not from an array.
it's on github here https://github.com/pnocera/ng2-vscroll
Related
So I have a curious situation and I don't think it's going to work, but I figured I'd ask in case it is and someone knows how to. I am using a 3rd party website to create marketing funnels. You can add your own custom html and javascript, but it parses out the html in a rather unfavorable manor. Basically you specify an element on the page and it appends it as a data attribute and dynamically loads it into the DOM. Since this is happening this way, my app isn't being initialized because it's not in the DOM on page load. Is there a way to make this work? I'll explain a little deeper my configuration.
I add custom html such as:
<div data-ng-app="AppName"><div data-ng-controller="ControllerName"><div>perform controller logic here</div></div>
As you can see, this needs to be in the DOM for the app to initialize and, well work. Is there a way to initialize the app after the page has loaded dynamically? I can add my own JS files in the custom html field, but thats about as far as I can go for customization. Any help is appreciated!
Maybe you should execute angular's bootstrap function manually in your script after the required dom loaded.
var app = angular.module('appName', []);
app.controller([...]);
angular.bootstrap(document.getElementById('divId'), ['appName']);
For more information, you can see this doc https://docs.angularjs.org/api/ng/function/angular.bootstrap
I am building a very light Web-App using AngularJS, and i can't seem to find the correct approach as to how to organize it.
To explain it briefly, the App loads a list of objects after the user logs in, and when he choses an object it loads all the detail from that object.
The app (as I am currently building it) will only have to load short JSON text data, so I thought I could have a single page app in a single HTLM file, directed by a single controller who will handle all the data received from the server, and the different views would have been handled by using HTML snippets and AngularJS directives ng-show and ng-includ, like so :
<div ng-show="correctView" ng-include="login_snippet.html >
</div>
<div ng-show="correctView" ng-include="table-view_snippet.html >
</div>
<div ng-show="correctView" ng-include="detail_view_snippet.html >
</div>
The correctView string is changed by the controller to decide which view is to be showned.
Is this a reasonable approach ? I can't seem to find whick one would suit my App best; it doesn't seem to be the right thing to do because the previous button doesnt work with this method, which can't do.
So,
Is there a way to make it so the previous page button would work ?
If not, what would be the correct thing to do ?Is it possible to have several HTML files sharing the same controller ? Or can some controller send data to another ?
I only found examples of single page applications where only parts of the page is changed when the user interacts with it, and this can't do for mine.
I'm working with restangular ngroute and playframework and I'm trying to do my CRUD following this tutorial : http://plnkr.co/edit/d6yDka?p=info
the list.html and detail.html in the index page (in the tutorial), I have them all in customer.scala.html page which call the main page by using this : #main("MyApp") So all my controllers and models are defined in this main page.
So how can I do the routing, the way that when I click on a button I can call the link (localhost:9000/custd) definded here in my js page:
app.config(function($routeProvider, RestangularProvider) {
$routeProvider.
when('/custd', {
controller:ListCtrl,
templateUrl:'list.html'
}).
UPDATE:
this is the link in customer.scala.html
<li>Customers</li>
in the file Application.scala I have this:
def custDetail = Action {
Ok(views.html.custDetail("Your new application is ready."))
}
in routes I have this:
GET / controllers.Application.index
GET /custdetail controllers.Application.custDetail
so how can I link this : /custd (in the angular controller) with my html page
So I think you're jumping in at the deep end a bit here. If you don't understand how to make a simple play web app, and you don't understand how to make a simple angular app then it might not be the best idea trying to integrate both straight away (I tried the same thing when I was new to this and it was complicated!).
Why have you chosen Angular for this given job? If you are not planning to create a single page application (which it sounds like you're not), then just using play templating should be sufficient for your needs (ands there's lots of docs available!).
If you are adamant on using the two, angular routing is geared towards angular applications. Looking at the routing you've provided:
app.config(function($routeProvider, RestangularProvider) {
$routeProvider.
when('/custd', {
controller:ListCtrl,
templateUrl:'list.html'
}).
In this you have provided a controller and a template. These are in reference to Angular controllers html templates, not Play. If you're not sure on how Angular controllers work, Angular has great documentation:
https://docs.angularjs.org
You need to work out exactly what information you need from the server side, create an endpoint to serve that data to your Angular app (using AJAX calls). I know this is a high level answer but really integrating the two is quite complex and hard to summarise in a single reply. My advice would be focus on creating an Angular OR Play app, then once you have the basics down move to integrating the two, but be clear as to the reasons behind chosing your technology as it sounds like you may not be
Robot Framework Version 2.8.3
Selenium2Library Version 1.4
The problem which I am facing is with regards to the controls used in the application under test.
Unlike the conventional coding technique of having the controls with ids, my application has been developed by using 'CSS - Class'.
For example a button is coded as :
where the "btn-do-login" is defined in CSS file.
Here when I enter the ids in the username and password fields, I write Click Element btn-do-login
The keyword clicks on the element but does not submits the data to the host as in the case of Submit Form keyword.
Also to mention, the application does not have any form in it. Instead there is a Div with reference to a CSS class.
Following is the entire hierarchy:
<div class="login-form">
<div class="form-element-username"> … </div>
<div class="form-element-password"> … </div>
<div id="btn-do-login" class="wbutton-login"> … </div>
</div>
Any help on how to Post data to the host is appreciated.
Also, please note that, now on entering manually the access credentials on this WebPage opened by Webdriver, and trying to submit it manually still gives me the javascript error and the page is not submitted. For logging in the application manually I need to close the browser instance (opened by Webdriver) and open a new instance manually for manual logging.
And Lastly just wanted to ask whether Selenium2Library supports HTML5 ?
This is what I have done till now.
> Login With Valid Credentials
>> Input Text ${id_login_email} ${country}
>>> Input Text ${id_login_password} ${PASSWD}
>>>> CLick Element btn-do-login
Here the variables have been defined in separate python files and have been imported as VARIABLE in the setting table.
Thanks in advance.
--Raj Sarodaya
After doing quite a few trail and errors I was able to make this work.
The problem with submit was that the javascripts were not loading as my system was behind proxy and I had not set the proxy ip in the browsers.
For many other websites proxy was not required contrary to this case hence it took some time for me to correct it.
:P
I am developing an HTML 5 mobile angular app with an android style skin. The app will need to be login-aware and I'm looking for advice on best practices. What I need is:
To have a persistent header that will display the current view, change the current view (via a dropdown), and perform login-specific functions (like "view my stuff" or "logout")
To have several different views within the app such as "master view" and "detail view" and "map view"
To have the app display a particular view (login.html) when the user is not logged in.
It seems like 3 is a special case of 1. In any case, the header is persistent throughout the app (except when a user isn't logged in) and the views will change based on user input. What is the best way to tackle this style of application using angular?
I think you want to use ngInclude.
I think you're already using ng-view for your body. Makes things easy :
<body>
<div id="header" ng-include="'header.html'"></div>
<div id="container" ng-view></div>
</body>