I want to create an angularjs app but each time it requires to press the refresh button in the browser to get the update. thus it bring to this question:
Is there any way to get live update while writing angularjs app? So I don't need to press the refresh button each time I make changes in my angularjs app.
Yes, you can use grunt which is a task runner written in node, grunt has a plugin called grunt-contrib-livereload that reloads the page whenever there are changes in the files/directories that you want to watch. Alternatively, there's a scaffolding tool for client side web applications in AngularJS called yeoman, that has a generator called generator-angular - this generator has an opinionated structure towards AngularJS application development and it comes with a basic setup that you can use for livereloading code changes from any files that you have configured to watch.
Start using yeoman. It has grunt that will solve yr problem plus lots of more exciting stuff.
Check this quick start guide : http://yeoman.io/learning/
I use the open source editor Brackets.io by Adobe. Just click the lightning icon button to the right of the editor to run your web page and will auto refresh for every save.
You can do this in many ways. Many of the options are already mentioned in this post. All of them are workable. In my experience the most simplistic way to do this by the following way.No configuration , No setting , No need to code anything.
Just add this line in your <head> </head> tag of the html file
<script src="http://livejs.com/live.js"></script>
Related
I have got an angular project generated with yeoman/generator-angular with both mobile and desktop views. The mobile templates heavily rely on mobile-angular-ui and it works just fine in development.
For some reason the modals are not displayed after grunt build. Instead, calling a modal would act as if a transparent component was added on top of the page (I mean, with the highest z-index), stealing the focus in the same way that a modal would do. As a consequence, the modal itself is not displayed and the page does not respond to any click event (assuming the fake modal is locking the focus).
The content of my modals is loaded via ng-include directives and it seems to work (from what I can see in the network tool of Chrome). There are no error message complaining about a missing resource in the console and the only thing I can think of is that the code responsible for toggling the modals visibility in mobile-angular-ui was somehow impacted by the build process. Sounds possible?
Any idea of what could cause this difference of behaviour between dev and production?
I am using mobile-angular-ui 1.2.0-beta.11. Feel free to request more information.
Bingo. The problem actually came from a clash between mobile-angular-ui and bootstrap, as I was using both of them for the mobile and desktop views respectively.
Since I use a very limited subset of bootstrap, I decided to remove all my bootstrap dependencies and only work with mobile-angular-ui which also provides a minimalist support for desktop views (namely col-md-xx etc. for responsive layouts).
I don't know about mobile-angular-ui, but in Angular ui-bootstrap you need to include not only the main code but also the templates:
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
When you don't include the tpls, the development is still working, because it's able to load the files from their location in bower_components.
In production you get a similar result as you describe when using modals, because the templates were not bundled in your dist directory. Maybe it's a similar problem?
Some apps got tutorial when the first time open.It seems cool.
I'm trying to create an opening tutorial that consists of four panes for my AngularJs app.
I build my app with css3 and html5 ,use cordova to generate apk.
How to create tutorial for my app when the first time open it?
Is there any solution?
Thanks a lot!
Sorry maybe I didn't make myself clear.The app is almost done,and splash screen has done.
But I need few pages or images on the first time run.
Use database. For example if you use localStorage, inside the deviceready function
check=localStorage.getItem('first_time');
if(check.length<0)
{
startTutorial();
localStorage.setItem('first_time','NO it is old');
}
After the first run value will be changed and tutorial will be shown once.
You can use other databases like indexedDB or webSQL.
Its been about a month since I started using AngularJS. I used to write my codes in SublimeText2 but i wanted to use WebStorm since it claimed to be more AngularJS friendly. I wrote a simple Hello World app and tried to run it but i couldn't get any hint of how to do it. I also don't have any knowledge about Node.js.Do i need Node.js to run app on WebStorm? Is Node.js a server? I tried going through tutorials on WebStorm page and also read few articles on Node.js but couldn't understand it. Can anyone explain it in a simple and understandable way?
You can open your HTML+JS application in the selected browser in WebStorm by clicking on the browser icon on the top right corner of the editor tab with index.html file opened (or any other html file you'd like to open in browser).
The same action could be done from the file context menu: Open in - Browser.
WebStorm will automatically start built-in web server for your convenience.
Note that you still can go to your project folder and execute your particular HTML file from there, the same way you would do it with the text editor.
Read more on working with AngularJS in WebStorm in this blog post.
If you have back-end in Node.js for your app, then you, of course, need Node.js installed. To run your node web app you need to create Node.js run configuration. More on it here.
I could not think of a better title, Please suggest one.
I am planning to work on a large web application. It will take time to load the full application before application starts functioning.
Suppose its something like asana.com. If you have a link to the task and you open the link. It loads the application first and then shows the detail of the task.
Note: I have added another example in update 2
I want to do just the opposite. Suppose if I try to open the link directly. It should show me the tasks details first and then load the whole application in background.
What development strategy should I follow to implement such feature. Will angular be good for this? I have worked with angular for small projects and am capable of think in angular :)
I just wanted to be pointed in right direction.
Update 1:
I am using Apache2 PHP5 in backing as ReST API. I am thinking to change to GoLang http server. But that does not matter in this context :)
Update 2:
I have not yet started working on the application, but I know that its size is going to be big and its going to take time to load the application. This will be a javascript application, all the communication to web will be done mostly by API. APIs will be fast and it wont be slowing down the application. My main concern is the javascript library and the approach to the issue that I want to display the content of the page before the application is loaded and load the application in background.
As second example: https://chrome.google.com/webstore/detail/a-journey-through-middle/gjgkjeheegjnnmheaflhdocglkiegoni?utm_source=chrome-ntp-icon
If you open this link in chrome, it will load the application and then load the specific content in a popup. I want to load the content of the popup first and then load the application in background. How should I write my application to achieve that.
My suggestion (and I say this as I start to do similar vs. having proven it successful) would be to make some level of framework fairly static so that users get an almost instant response to the site loaded and then start the angular app with something like this
angular.bootstrap(document.getElementById("container"), ["app"])
Ref for the api - https://docs.angularjs.org/api/ng/function/angular.bootstrap
Ref for a demonstration of this - https://egghead.io/lessons/angularjs-angular-bootstrap-app-init
My expectation then is that you will be able to
Load your static elements quickly (which will just have placeholders for your content/material)
Access the data you want in the order you want to get it to present on the screen
Release any other part of the app you need to chrome it up/decorate or populate side items.
What is the most conventional way to make an AngularJS single page app automatically reload in the browser every time I change its code?
In other words, if I have a code editor open editing the HTML for the AnguarJS single page app, and a browser at that app, side-by-side on the same screen, hitting Save in my editor should instantly trigger the browser to refresh.
Alternatively, same scenario as above except instead of hitting Save on my editor, I did a Commit in my VCS.
Use Grunjs watch task for this.
That is the work of your task runner like gulp or grunt to watch the changes over specified files and perform action. None of this is related to angularjs