I am trying to build an application using d3js in WebStorm because I read that it is the best way to organize your AngularJS project.
However, when I start a new project, select AngularJS project there supposed to be a "hello world" example ready where you have your index.html pointing to view1 and then you click view2. But what happens in my case is that when I click run index.html view1 doesn't appear even when I click on the link leading to it or to view2.
Is there a configuration missing ? Do you know how I can correct that ?
Have you done a bower install to download all the dependencies your project needs ?
Related
I cant able to run applozic-web fullview ui with meteor (1.4.2.6).
(https://github.com/AppLozic/Applozic-Web-Plugin)
I've put src folder under /client/compatiblity folder. I'm newbie and i'm not sure how exactly use jquery plugins. Here is my html code is on http://pastebin.com/6canHZnK
respective js code is nearly empty.
I got ui screen with no functionality.
Thanks in advance.
while I build a page using react, I found it would be blank for few while when the build javascript is not completed loaded. I guess the build package is quite large and this makes it load quite slow. during this time the page stays in blank,
how to solve or avoid this ?
:)
There are two options you could follow --> 1. Make the app isomorphic (render pure html on first page load) or 2. Display a message or loading giff in the div where you are loading your app into (it will get replaced by the app when it loads).
To complete #deowk answer you can also try to minify your JS. It depends on which build tool you use (Webpack, Grunt, Gulp, ...) but you should be able to find a module/plugin to uglify your JS.
I have a web app I am launching from Eclipse using Spring Boot. I am trying to use Angular modals to have a nice looking confirm delete modal and I was following this tutorial to get the right dependencies. The Bower install seemed to go well:
bower install angular-modal-service --save
And I copy this into my html:
<script src="bower_components\angular-modal-service\dst\angular-modal-service.min.js"></script>
And I add the dependency in my Angular file:
var app = angular.module('myApp', ['angularModalService']);
But that is the point at which it fails. If I launch my app I just get a blank page, nothing at all loads. My console output from Chrome's developer tools gives me:
Uncaught Error: No module: angularModalService
This is a general problem I have had, anytime I try to add a dependency with something like
var app = angular.module('myApp', ['DEPENDENCY']);
it doesn't work. Is there something more I need to do in Eclipse in order for it to get it to pick up on my Bower dependencies?
When you have such problem, we can't resolve it for you.
But we can give you some advices to resolve this kind of problem :
Identify the problem. Open the developper tools of your navigator (F12), then the console. If you have nothing here, try to refresh. Angular will let you know if there is a dependency injection problem.
Check if you didn't forgot something. You have to import in your page angular, THEN angular-modal-service, THEN your application. The order is important.
Check if the module you want to use doesn't depend to something else. In your case, do this module needs bootstrap JS files ? Again, take a look at the console. It's here to help you.
Perhaps not specifying type="text/javascript in the script declaration causes your browser not to parse and execute the script? It is required in HTML < 5. Try adding that. Maybe that will help. Post your HTML file, if it still does not work.
Are there any directives to detect swipe events? If not, how can I use something like angular-touch?
An example case is i want to hide a modal on swipe up.
I have just used angular-touch on an app and it seems to work well.
Simply download angular-touch.js from the web or use NPM install angular-touch and it will download a node module. I did this and then copied angular-touch.js into my scripts folder with my app.js file. I then added a script link to the file and then declared the module in my app includes [ngTouch].
To use, all you have to do in the container div in the page is add ng-swipe-left="function()" or ng-swipe-right="function". Remember, the function must be written in your controller for the action to actually happen.
e.g.
Hope this helps.
Summary
While working on an angular based single page app (Ushahidi's v3 frontend), we stumbled over the following issue.
It occurs only in Chrome, not in Firefox (can't say anything about other browsers right now).
The problem is that an element (in our case: the login button) is not positioned correctly when we move its html into an directive (scenario 2), while it looks as expected when using the HTMl directly inside of the main page template (scenario 1).
The rendered HTML of the whole page is in both scenarios the same.
Reproducing both scenarios
You can reproduce both scenarios easily within about 3 minutes via the following steps (first getting the app running, then describing how to see both scenarios):
Quick app setup
needs only to be done once for both the working and not working state
Prerequisites
have node/npm installed
have gulp and napa installed
(sudo) npm install -g gulp napa
git clone https://github.com/spaudanjo/platform-client.git
cd platform-client
git fetch origin fix_T1107_chrome_layout_bug:fix_T1107_chrome_layout_bug
git checkout fix_T1107_chrome_layout_bug
(sudo) npm install
bower install
napa install
gulp --node-server --mock-backend
open Chrome with http://localhost:8080
Working state (scenario 1, without using directives)
git checkout ca99fdeb4613265063c0f481588c2e34ecd109ed
refresh Chrome
make sure that the top right menu looks like expected (the Login button is on the same line as "Create" and "Workspace")
Not working state (scenario 2, using directives)
git checkout 5fe22a68aea3c8cbf1497dc2c3c7f3d83ab822f3
refresh Chrome
make sure that you recognize the layout issue (the Login button is not placed correctly; see attached screenshot)
Changed files
To easily see the affected files, here is the diff of the commit which moves the directives HTML back again to the main template:
https://github.com/spaudanjo/platform-client/commit/ca99fdeb4613265063c0f481588c2e34ecd109ed
Any hints/ideas?