Code Monkey home page Code Monkey logo

generator-adf-widget's Introduction

angular-dashboard-framework

Packagist Build Status Coverage Status Dependency Status Join the chat at https://gitter.im/sdorra/angular-dashboard-framework

Dashboard framework with Angular.js and Twitter Bootstrap.

The api of angular-dashboard-framework (adf) is documented here. A getting started guide can be found here. Follow me (@ssdorra) on twitter for latest updates and news about adf.

Demo

A live demo of the adf can be viewed here. The demo uses html5 localStorage to store the state of the dashboard. The source of the demo can be found here.

A more dynamic example can be found here.

Build from source

Install bower and gulp:

npm install -g bower
npm install -g gulp

Clone the repository:

git clone https://github.com/angular-dashboard-framework/angular-dashboard-framework
cd angular-dashboard-framework

Install dependencies:

npm install
bower install

Checkout git submodule widgets:

git submodule init
git submodule update

You can start the sample dashboard, by using the serve gulp task:

gulp serve

Now you open the sample in your browser at http://localhost:9001/sample

Or you can create a release build of angular-dashboard-framework and the samples:

gulp all

The sample and the final build of angular-dashboard-framework are now in the dist directory.

Contributing

Please do not commit changes to the dist folder. The dist folder is only generated for releases.

License

The MIT License

Copyright (c) 2015, Sebastian Sdorra

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

generator-adf-widget's People

Contributors

orende avatar pauljordaan avatar sdorra avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

generator-adf-widget's Issues

'gulp task sample' throws error on CSS due to angularFilesort

The gulpfile.js generated, crashes on gulp serve, if the src contains some style.css.
The error is

events.js:160
throw er; // Unhandled 'error' event
^
Error: Error in parsing: "style.css", Line 1: Unexpected token .

I found that following line in the sample task is the culprit,

var files = gulp.src(['src/**/*.js', 'src/**/*.css', 'src/**/*.less', '.tmp/dist/*.js'])
                  .pipe($.if('*.js', $.angularFilesort()));

It invokes $.angular even on CSS.
This exists even if published widgets like adf-widget-clock
I have made following change and it works.

  var files = gulp.src(['src/**/*.js', '.tmp/dist/*.js'])
                  .pipe($.if('*.js', $.angularFilesort()));

  files.push(gulp.src(['src/**/*.css', 'src/**/*.less']));

Hope this post helps for rectification and someone facing the same issue.

NOTE on gulp-if version for adf-widgets

Just a note: I used the normal commands to install the generator

npm install -g generator-adf-widget

And it seems to default to an older version that has a dependency on the gulp-if version that is buggy and will break builds. Took a while to figure out what exactly was broken. Then I realized you have a git tag #3.3 which points to a very recent version of gulp-if. I typed yo, and went through the process of telling it to upgrade this generator through their menu and it told me it was now at [email protected].

So for anyone searching, upgrade this generator if it defaults to an old one and your JS is being put in angular $templateCache.

Also, if anyone downloads copies of the adf-widgets, such as iframe or clock, their package.json files also point to the buggy gulp-if @ ^1.2.5. So if you try to fork those, change the gulp-if dependency to something after 2.x so the build of the widget works correctly.

Work with angular 1.4.x

I know adf 0.11.0 works well with angular 1.4.9.

I cannot seem to make this widget generator work with an updated angular version.
Also, this requires adf version 0.8.0 instead of 0.11.0...

I tried to modify the bower.json to have "angular-dashboard-framework": "0.11.0" and ran bower install.

This updated adf to 0.11.0 (and some other dependancies) so after running gulp serve again I'm getting errors:
knockout-sortable.js:157 Uncaught TypeError: Cannot read property 'bindingHandlers' of undefined

How can I develop new widgets with adf 0.11.0 and angular >= 1.4.9 ?
Thanks in advance!

this creates a 50MB node_modules folder... is this normal?

I am using this generator to create many different widgets. It works well but...:

Last phases of this generator are commands 'npm install & bower install'. This creates, among others, a folder named 'node_modules' which is almost 50MB in size. Should those (mainly gulp) tools not be installed globally by npm?... and not in a folder inside this widget project folder so as not to repeat in each widget project folder?

Or do I have some kind of problem with my npm installation? any comments or help on this would be appreciated ! thanks!

EDIT: Below are the packages that seem to be needed... what if i install each of them manually with the "-g" switch? will that keep this folder almost empty the next time I setup a new widget with this generator?

"gulp": "^3.8.11",
"gulp-angular-filesort": "^1.1.1",
"gulp-angular-templatecache": "^1.6.0",
"gulp-concat": "^2.5.2",
"gulp-connect": "~2.2.0",
"gulp-csslint": "^0.1.5",
"gulp-headerfooter": "^1.0.3",
"gulp-if": "^1.2.5",
"gulp-inject": "^1.2.0",
"gulp-jshint": "^1.9.4",
"gulp-less": "^3.0.2",
"gulp-load-plugins": "^0.9.0",
"gulp-minify-css": "^1.0.0",
"gulp-minify-html": "^1.0.1",
"gulp-ng-annotate": "^0.5.2",
"gulp-rename": "^1.2.0",
"gulp-replace": "^0.5.3",
"ng-annotate-adf-plugin": "^0.1.2",
"gulp-uglify": "^1.1.0",
"jshint-stylish": "^1.0.1",
"wiredep": "~2.2.2",
"del": "^1.1.1"

Dependency on Yo

Hi,

I am trying to install the generator, but I get the following error:

$ npm install -g generator-adf-widget
npm WARN deprecated [email protected]: the module is now available as 'css-select'
npm WARN deprecated [email protected]: the module is now available as 'css-what'
/Users/roozbeh/.nvm/versions/node/v5.1.0/lib
├── [email protected] 
└── UNMET PEER DEPENDENCY yo@>=1.0.0

npm WARN EPEERINVALID [email protected] requires a peer of yo@>=1.0.0 but none was installed.
$ yo --version
1.5.0

I have Yo version 1.5.0 installed, so I should not see this error, no? Or am I missing something obvious?

Thanks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.