How do you use those free AngularJS Dashboard Templates you find online?
I found many free angular dashboard templates.
They look nice, but I dont see documentation on how to use them,, some starting point for example.
Looks like you could use them to pull data from a database and represent it dynamically, but I dont know where to start in the most simplistic way.
for example, with this one:
http://startangular.com/product/flatlogic-angular-material-dashboard/
Start by merging your package.json and dev dependencies together, or using their project as the base, then you can do a lot in editing the partials in views/partials, and then for pulling data, you can implement an api into each of their controllers or pass information into each of the directives. There's no starting point for any data manipulation, it's more like a dashboard that you can send data into the panel-widget. This is only front-end stuff, so you must already have a location to pull data from.
Related
I am working on integrating a 2sxc content WebAPI feed into a ReactJS application.
I have managed to get a JSON feed of data into the application, and am in the process of mapping out the data.
I'm wondering what the best practice would be to "resolve" a URL which is coming through as a DNN Page/ Tab ID.
Below I will showcase the various points this is referenced...
First the Setup of the entity / data types...
Then this is an example entry with the data filled out... The page link / URL is set up to point to another internal page on the DNN website:
Finally you can see this data item come through as a JSON feed via the 2sxc API:
What is the best way to convert this piece of data into a URL which can be used in a SPA type application?
There isn't any "server-side" code going on, just reading a JSON feed on the client side...
My initial idea would be to parse this piece of data in JS, to extract the number then use something like this:
http://www.dotnetnuke.com/tabid/85/default.aspx
http://www.dotnetnuke.com/default.aspx?tabid=85
I was hoping someone with more experience would be able to suggest a better / cleaner approach.
Thanks in advance
If you were server-side in Razor you'd be doing something like this:
#using DotNetNuke.Common
View List
XXXX = Dnn.Tab.TabID or define a string with the tab id you want
I seem to have a vague memory that I saw somewhere that Daniel (2sxc) has a way to use Globals.NavigateUrl() or similar on the client side, but I have no idea where or if I did see that.
The Default.aspx?tabid=xx format will certainly work, as it's the oldest DNN convention and is still used in fallbacks. The urls aren't nice, but it's ok.
The reason you're seeing this is because the query doesn't perform the automatic lookup with the AsDynamic(...) does for you. There is an endpoint to look them up, but they are not official, so they could change and therefor I don't want to suggest that you use them.
So if you really want a nicer url, you should either see if DNN has a REST API for this, or you could create a small own 2sxc-api endpoint (in the api folder) just to look that up, then using the NavigateURL. Would be cool if you shared your work.
I currently have an existing Preact JS site set up but want to add blog section.
So basically easy way to add new pages and routes.
I.e. blog/content-1, blog/content-2
I know I could easily create these pages and routes manually but is there something better out there that fits into existing sites ?
I.e. a lot of the static site generators I see out there, basically you need to run from the start and they generate a new site.
But in my case I just wish to add an extra section to my site which will be the static blog entries, not sure what the best tools out there for this is ?
If any ideas or suggestions would be great.
The preactjs.com website is built exactly how you are wanting to build this. It's open source: https://github.com/developit/preact-www
Basically, fetch your HTML content via Ajax (however you'd like), then render.it as Virtual DOM using preact-markup.
For a real-world example, here's how preactjs.com does that:
https://github.com/developit/preact-www/blob/master/src/components/content-region.js
I have generated a meanjs crud module with: yo meanjs:crud-module modulename.
How do i go about changing the meta data values for view.modulename.client.html since their generated on the server side (layout.server.view.html)? I can't seem to find ng-app="" any where, so I could just chuck that into the head tag along with a controller.
Everything else is hooked up quite nicely and its easy to create a basic CRUD app, except for the meta data. I'm trying to change them from the create.modulename.client.html via the form it provides, I get correct values in the body to show up but not in the head. What's best practice here?
For simplicity, I just used jQuery as discussed in these SO answers for title and description.
There are more 'angular' approaches listed here, but they require moving app / controller declarations to the html tag, creating directives, or downloading modules.
The jQuery approach allows you to keep the meta descriptions coupled with the controller primarily responsible for the page, all without making any changes to the meanjs default structure.
I'm currently trying to build an analytics application using Javascript and angularJs.
However I'm having a few problems.
I just have two simple pages and one controller in each one. I tried to share data between these pages using a simple service. The first page is in charge of analyzing multiple csv files and building javascript objects, and the second to iterate through this data to display charts and tables.
However when I'm moving from the "anaylzer" page to the "displayer" page and since the JS files are refresehed, everything is flushed adn I loose the data I recorded inside my service...
I already have a look to a few storing modules like http://www.jstorage.info/, but the data objects I'm building are big (csv files are about 100 000 lines each...)
Do you have any idea ? Maybe I'm not using the right angular JS philosophy ?
Do not hesitate to tell me to put the piece of code I've written.
Thank you a lot in advance,
Angular is primarily tailored for producing single-page applications, but you could look into following alternatives for sharing data among few tabs (pages):
Local Storage - http://diveintohtml5.info/storage.html
File System API - http://www.html5rocks.com/en/tutorials/file/filesystem/
I have been using 1) with great success, but it's designed for storing small amounts of data.
angular is for single page application.
you should use ajax to pull your data from server.
Don't refresh your page.
there is a example how angular change view.
checkout https://docs.angularjs.org/api/ngRoute/service/$route
I want to create a site using assemble, yeoman, and angularJS.
The plan is that assemble will handle content and AngularJS will handle dynamic content via a REST API. Are the two compatible, is this a good choice of architecture? My concern is with the templating engine Assemble uses (HandleBars) and whether it is compatible with AngularJS as they both seem to use {{}}. I have only started investigating but am struggling to find examples of people using a similar architecture. How do i scaffold with Yeoman?
I'm doing something similar and to handle the issue with the template delimiters I use the angular interpolateProvider to change the delimiters for angular.
var app = angular.module('app', []).config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('{%');
$interpolateProvider.endSymbol('%}');
});
I'm not sure if you can configure Yeoman to automatically use the new delimiters when running some of the scaffolds, but I hope this helps separate your templates from the assemble templates.
I've done similar for a client for a retail site, to create a basis, custom CMS.
Originally I had the idea that all the items for sale (the data i.e model) would be represented via the data files - a mix of .json and yaml. (At least the client could edit the yaml file with some ease as it is sort of human readable).
A later improvement was to allow the client to edit the stock via a webpage - rather than editing the data files directly - Angular was ideal for this to have a webapp that basically allowed editing the data / upload and transform images, etc via a much nicer interface.
Assemble uses Handlebars (among others) to render templates, so you can use its syntax to escape Angular templates in a .hbs file, this way:
\{{ qty * cost | currency }}