Discussion on Angulr - Bootstrap Admin Web App with AngularJS (Page 68)

over 11 years ago

Hi, great template! I’m trying to load partials with spanish charset iso-8859-1 instead of utf-8, but have’nt had any luck, trying to transform int the ui-router, any idea of how to accomplish? Thanks,

Flatfull Author

over 11 years ago

Can you send me the partial file? heyflat@gmail.com

Thanks

louislewis2 Purchased

over 11 years ago

Hi Again,

I have found an issue, and I am not sure if it is just me. I am creating a tabset and within that a number of tabs. When I place in a form in the tab it does not appear correctly, if you take for example one of your forms with or without a panel and place it in a tab, you will see that the background of the tab does not extend downwards and also the form container is much higher than you would expect.

any ideas?

I would love to show you what I am busy with so perhaps you could give a few pointers, but I cannot share links and login details publically though. Is this possible?

Regards

Louis

Flatfull Author

over 11 years ago

You can look into the “Form wizard” page. http://flatfull.com/themes/angulr/#/app/form/wizard

the form in the tabs. maybe you forgot to put a “tab-container” class to wrap the tabs.

Thanks

louislewis2 Purchased

over 11 years ago

Thanks for this hint, it sorted out my issues.

Flatfull Author

over 11 years ago

riaxe Purchased

over 11 years ago

Hi Flatfull, We are needing a jquery knob controller (not based on canvas). Please see if you could put something similar in your components page.

— Thanks

Flatfull Author

over 11 years ago

The jquery knob is using canvas http://anthonyterrien.com/knob/. do you have any recommends?

Thanks

dellonline Purchased

over 11 years ago

Hi Flatfull, i am using with asp.net file but index emtpy.I need help

http://localhost:810/index.aspx#/app/dashboard

Flatfull Author

over 11 years ago

is the page started with ”<html lang=”en” data-ng-app=”app”>”

You can use the Chrome devtool or firebug to see what’s error happening.

Thanks

dopingz Purchased

over 11 years ago

Flatfull?

Flatfull Author

over 11 years ago

Replied. Thanks

dopingz Purchased

over 11 years ago

Hi! What are your plans for the next 2-3 months on this template?

5 other replies

Flatfull Author

over 11 years ago

The basic is including more modules from http://ngmodules.org/ Then some specific apps. like Food app/Media app…

Next version (1.2.0) will add horizontal menu and boxed layout. and some modules asked from the buyers.

Thanks

dopingz Purchased

over 11 years ago

I need your project to finance (stocks Social networking service) the project. But you are using AngularJS. Is there a version without it?

dopingz Purchased

over 11 years ago

Flatfull?

Flatfull Author

over 11 years ago

This theme is for AngularJS fans. the update will add more AngularJS modules.

but you can still use the html/css for non-angularjs project.

Thanks

dopingz Purchased

over 11 years ago

I’m on your site saw a version only with AngularJS. Where you can see only with html/css?

Flatfull Author

over 11 years ago

The html are separated with blocks

/index.html
   /tpl/
      app.html/layout.html
           blocks/header.html
           blocks/aside.html
              blocks/nav.html

Very simple. just need include the blocks.

Thanks

dopingz Purchased

over 11 years ago

Sorry, I haven’t bought your project. Three more questions:

1. When you buy a template, updates are free or need to buy again?

2. I understand you correctly that the project can operate without AngularJS?

2.1. If so, will all the pages are static (and separately)?

2.2. That will not work if you remove AngularJS? Graphics, animation, toggle menu?

Sorry for the many questions.

Flatfull Author

over 11 years ago

1: update for free

2: if you just need the html/css, yes.

2.1: all the html are static with separated blocks.

2.2 the Graphics(charts) is jQuery flot plugin. you can still use but use jquery way to bootstrap it. animation for page transition will not available because it use AngularJS animation module. and the toggle menu class will not available because it use AngularJS directive. but the css class is there. you just need toggle class on some div tag.

Thanks

vasily_mulukov Purchased

over 11 years ago

Hello,

noob question, when the theme loads additional pages, e.g. calendar, mail – it shows loading indicator under navbar, how it is implemented??

Thanks!

vasily_mulukov Purchased

over 11 years ago

found butterbar directive!

Flatfull Author

over 11 years ago

You got it.

jonlau Purchased

over 11 years ago

Is there a stripped-down version of this theme that doesn’t have i18n, lazyloading, localStorage and all the other additional features? I’m trying to get this to work with angular-generator-fullstack.

Flatfull Author

over 11 years ago

You can remove these features when you integrate this theme into the fullstack. but no stripped-down version.

thanks

divramod Purchased

over 11 years ago

Hey, i tried to use the theme in a chrome packaged app. it gives me some errors. is this solvable?

thanks for the great work.


window.localStorage is not available in packaged apps. Use chrome.storage.local instead.
This browser does not support Web Storage! ngStorage.min.js:1
Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' chrome-extension-resource:". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
 angular.min.js:97
EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' chrome-extension-resource:".

    at Window.Function (native)
    at Ec (chrome-extension://cfnnlkoihfaaafmkcnefmanhinlikahl/js/angular/angular.min.js:97:29)
    at Sb.readIdent (chrome-extension://cfnnlkoihfaaafmkcnefmanhinlikahl/js/angular/angular.min.js:164:413)
    at Sb.lex (chrome-extension://cfnnlkoihfaaafmkcnefmanhinlikahl/js/angular/angular.min.js:160:274)
    at bb.parse (chrome-extension://cfnnlkoihfaaafmkcnefmanhinlikahl/js/angular/angular.min.js:166:389)
    at chrome-extension://cfnnlkoihfaaafmkcnefmanhinlikahl/js/angular/angular.min.js:98:322
    at h (chrome-extension://cfnnlkoihfaaafmkcnefmanhinlikahl/js/angular/angular.min.js:104:473)
    at k.$watch (chrome-extension://cfnnlkoihfaaafmkcnefmanhinlikahl/js/angular/angular.min.js:106:239)
    at new <anonymous> (chrome-extension://cfnnlkoihfaaafmkcnefmanhinlikahl/js/controllers.js:45:14)
    at d (chrome-extension://cfnnlkoihfaaafmkcnefmanhinlikahl/js/angular/angular.min.js:35:36) angular.min.js:92
Uncaught TypeError: undefined is not a function ngStorage.min.js:1

1 other reply

Flatfull Author

over 11 years ago

http://stackoverflow.com/questions/17870701/localstorage-in-chrome-package-apps-using-dart

Seems the angular-cookies works. you can switch localStorage to cookies.

The angular-translate support cookie, but you need change “AppCtrl” in ”/js/controllers.js”. replace the localStorage to cookie code.

Thanks

divramod Purchased

over 11 years ago

thx for the help. i got it running now. had to set


    "permissions": [{
        "storage" 
    ]

in the manifest.json and added the ng-csp attribute to the html-tag


    <html lang="en" data-ng-app="app" data-ng-csp="">

i got another problem now. the app is not responding to scolling.

i tried


    html {
        overflow-y: scroll;
    }

but it doesnt work.

Any hint for me for that one?

thx in advance

divramod Purchased

over 11 years ago

got it running. had to add overflow-y:scoll to body


body {
    overflow-y:scoll;
}

Flatfull Author

over 11 years ago

Great! happy coding.

sethl Purchased

over 11 years ago

I’m looking to integrate this theme with the generator-angular-bootstrap here: https://github.com/DaftMonk/generator-angular-fullstack

Does this sound possible? Any pointers/thoughts on how it could be accomplished would be appreciated.

Thanks!

Flatfull Author

over 11 years ago

Just have a quick look at the Fullstack. i think it’s possible. The AngularJS make your template separated with your logic.

You can setup the app base on the Fullstack. then combine this theme’s css/html into it.

Thanks

mario212 Purchased

over 11 years ago

Hello! Nice theme out there! I wanted to know, how can I have a full-width dashboard? I want to show the Left Aside only for small screens, but for desktop I want to show full width. Is there an easy way to do it? Thanks! (It is super urgent) Thanks!

Flatfull Author

over 11 years ago

if you resize your window to < 768, you will see a menu link on the top. click it will see a off-screen nav(Left Aside).

Thanks

mario212 Purchased

over 11 years ago

Thanks, but what I meant is that I don’t want an “aside” in my project unless you are visiting my site with a mobile phone. I want to completely hide or remove the “aside” not only folded but remove it. Which code should I use? It which div should I apply the “visible-xs” class? Thanks so much.

Also, I have two quick questions:

1. how do I select a predefined header color instead of selecting from the settings button?

2. How do I remove the “settings” from showing up?

Thanks so much! I will appreciate a detailed answer. Thanks so much!!

Flatfull Author

over 11 years ago

if you do not want the aside. you can remove the whole aside html block.

in the “tpl/layout.html” remove the

  <!-- menu -->
  <div data-ng-include=" 'tpl/blocks/aside.html' " class="app-aside hidden-xs {{app.settings.asideColor}}" ng-class="{'hide': app.hideAside }">
  </div>
  <!-- / menu -->

and use a “m-n” class on the “app-content-full” and “app-footer” to remove the margin. i used a ng-class=”{‘m-n’: app.hideAside }” to set it, so it can be set in the “tpl/layout_fullwidth.html” later.

1: for using the class predefined. you need to know the “ng-cliass”, in the “index.html”,

ng-class="{'app-header-fixed':app.settings.headerFixed, 'app-aside-fixed':app.settings.asideFixed, 'app-aside-folded':app.settings.asideFolded}"

means when “app.settings.headerFixed true" will apply class "app-header-fixed" on this div. and you can see the "app.settings.headerFixed" defined in the "AppCtrl" in "js/controllers.js". for the colors, check the "tpl/app.html" or "tpl/layout.html",

<div data-ng-include=" 'tpl/blocks/aside.html' " class="app-aside hidden-xs {{app.settings.asideColor}}">

you can change it to

<div data-ng-include=" 'tpl/blocks/aside.html' " class="app-aside hidden-xs bg-info" >

or change in the AppCtrl.

same as “tpl/blocks/header.html”, {{app.settings.navbarHeaderColor}} and {{app.settings.navbarCollapseColor}}

======================================

BUT, you can pre-define the colors in the AppCtrl in the “js/controllers.js”

$scope.app = {
        .....
        settings: {
          themeID: 1,
          navbarHeaderColor: 'bg-black',
          navbarCollapseColor: 'bg-white-only',
          asideColor: 'bg-black'
          ....
        }
      }

more colors you can check the documents.

2: in the “tpl/app.html”, remove the

<div data-ng-include=" 'tpl/blocks/settings.html' " class="settings panel panel-default">
</div>

Thanks

atplerry Purchased

over 11 years ago

Goodday, Thnaks for the good job well done, The template when view in my localhost it “aside.nav….” every node of nav. as this has been reported before, how to fix it.

The “l10n” folder is already in my folder structre but i cant find the .josn file in the application folder, pls help me out.

Thanks

Flatfull Author

over 11 years ago

you can download it again. there should be a “l10n” folder, and with “de_DE.json”, “en.json”, “it_IT.json” files in it.

you can download the json files from 1 2 3

Thanks

latavish Purchased

over 11 years ago

Hi there,

I am trying to remove the ”#”. As stated here (http://stackoverflow.com/questions/14319967/angularjs-routing-without-the-hash/14320344#14320344) I added $locationProvider.html5Mode(true); to my apps.js.

.config(
  [          '$stateProvider', '$locationProvider',...,
    function ($stateProvider,   $locationProvider,...) {
...
$locationProvider.html5Mode(true);
...
}]

But when I add this to your code, it removes the ”#” from the URL, but I get an Object not found error message after looping for a bit. thanks so much in advance for your help.

Flatfull Author

over 11 years ago

if your app is not on the root. you need set the “base” tag. eg: localhost/angulr/#/app

<html>
<base href="/angulr/">
<body>
...

check this http://scotch.io/quick-tips/js/angular/pretty-urls-in-angularjs-removing-the-hashtag

Thanks

leozhang Purchased

over 11 years ago

Can you show me an example of configuring ui-jq=”sparkline” with tooltipFormat?

Thanks

Flatfull Author

over 11 years ago

You mean the sparkline with tooltip style?

Everlabs Purchased

over 11 years ago

Hi, one more suggestion It would be greate to have flash alerts, something like box with timeout on top-right of page on some action results as errors.

Flatfull Author

over 11 years ago

Next update will add https://github.com/jirikavi/AngularJS-Toaster

Thanks

Everlabs Purchased

over 11 years ago

Yes, cool! That is what I wanted

Flatfull Author

over 11 years ago

Good. will be available in 1.2.0

Thanks

louislewis2 Purchased

over 11 years ago

Hi Again

I have a big question. I am busy writing our application using your template. we are about to release to market, but there is one more thing we would like to add in. I have written a chat system on our server, this system takes care of users, presence, messages and all those wonderful things.

So, the missing ingredient…. the UI.

How much work would it take to add a simple button to the bottom right of the page, that when pressed would open a little window, which would list the online users?

that would be a fantastic start, the first prize would be that when we click on a user in the list, a second window should open also on the bottom of the page which would contain a place where a user could type and view message?

I am no css expert, which is why I am asking, I am certain hat many people would find this a great feature as well.

does this sounds at all possible? And if not could you possibly at least steer me in a direction where I could learn how to implement this kind of functionality via the html and css. the code part is really simply.

Regards

Louis

2 other replies

Flatfull Author

over 11 years ago

on the dashboard page. on the right side column, you can switch to 2nd chat tab. click on the “chat icon” on the right, will bring a chat panel. it’s default full height. but you can use a ’ style=”top:auto” ’ to make it not full height.

Hope this is what you want.

Thanks

louislewis2 Purchased

over 11 years ago

Hi Again, sorry for the delay. It is very close and I have started implementing my chat based on that. Though for now I have made it a single page to test it out, so when you navigate away, you get disconnected. I will do more work on this later on.

One thing I am battling with and can not work out for the love of money Is in your template, I would like to create a chat shout box, like you would see in facebook when you chat to a friend. Of course that windows has its own close button and when a person opens more than one of these chat windows, they simply slot together side by side.

Is this a too tall order for your template?

Flatfull Author

over 11 years ago

you can use a style=”top:auto” on the “app-aside-right” div. so it will not too tall. and you can use a style=”right:240px” to place the order. and need calculate the right position base on the counts of the chat box items.

Thanks

louislewis2 Purchased

over 11 years ago

Hi, thanks for you reply. I think this is a bit out of my league, I will hunt around and see if I can find something like this around. Thanks though

Flatfull Author

over 11 years ago

Good luck.

aizea

over 11 years ago

Hello, Do you know when .psd files will be ready ? It has been one week and there is no update with those.

Flatfull Author

over 11 years ago

Uploading…

Thanks

aizea

over 11 years ago

Thank you !

Flatfull Author

over 11 years ago

Added PSD file in 1.1.3. Thanks

1w333 Purchased

over 11 years ago

Cool template ! Can you assist me on how to use post for the form action using the templates. Since the link are not displaying any files, I dont really know how to send post. Eg, edit action will need to send post to a PHP file named edit.php so all edit logic will be there.

Thanks in advance.

Flatfull Author

over 11 years ago

Not use the “action”, click the “save” button then call a save() function in a controller, then CRUD the model to your server.

you can use $http or $resource to communicate with your server.

read this article for $resource http://coenraets.org/blog/2012/02/sample-application-with-angular-js/

Thanks

1w333 Purchased

over 11 years ago

Thanks for the reply, I will study on this…

Flatfull Author

over 11 years ago

You can check the page_signin.html/page_signup.html

Thanks

plinkstudio Purchased

over 11 years ago

hi, my website show “aside.nav….” every node of nav. how to fix it. thank you.

Flatfull Author

over 11 years ago

Make sure you uploaded the “l10n” folder and the ”.json” file loaded

Thanks

plinkstudio Purchased

over 11 years ago

OK, it work!! Thank you for quick support. Nice Theme.

Flatfull Author

over 11 years ago

Anytime.

fabolivar Purchased

over 11 years ago

Hola,

Es posible que implementes esto en tu Admin Template?

https://github.com/sahat/satellizer

Flatfull Author

over 11 years ago

Really nice module! Definitely will include it in future update.

Thanks

Last Update	20 September 2016
High Resolution	Yes
Compatible Browsers	IE9, IE10, IE11, Firefox, Safari, Opera, Chrome
Compatible With	AngularJS, Bootstrap 3.x
ThemeForest Files Included	HTML Files, CSS Files, JS Files
Columns	4+
Documentation	Well Documented
Layout	Responsive
Tags	admin, admin panel, angular, AngularJS, bootstrap, charts, components, dashboard, flat ui, material, material design, responsive, ui kit, ui route, web app
Created	11 years ago

Discussion on Angulr - Bootstrap Admin Web App with AngularJS

Discussion on Angulr - Bootstrap Admin Web App with AngularJS

Flatfull does not currently provide support for this item.

1480 comments found.

Flatfull

Discussion on Angulr - Bootstrap Admin Web App with AngularJS

Discussion on Angulr - Bootstrap Admin Web App with AngularJS

Flatfull does not currently provide support for this item.

1480 comments found.

Flatfull

Tell us what you think!