As I am new to angularjs and I have made one small app using ui-router in angular and I want to run it on localhost.Can someone please tell how to do that? I am using windows7. Thanks in advance.
I would recommend you to use grunt or gulp task runner with angular for development process. Configuring them will provide you excellent livereload watcher feature which is really helpful for development.
But if you just want to static host your angular file you can do it with
python:
install python first
then cd to folder with angular file in your cmd and try:
python -m SimpleHTTPServer
with NodeJS:
install nodeJS and NPM then try following in cmd
npm install http-server -g
and then cd to directory with angular files
http-server
Note that here any page name index.html in folder will be consider as default page on loading localhost url
I would recommend you to switch to Angular 4, because in my opinion is little easier and more optimized and you setup enviroment via nodejs with nmp, I learend that from here: https://www.youtube.com/watch?v=htPYk6QxacQ
Related
I'm new to yarn, nodejs and react apps. I've tried running the Sizzy app and it works on my local XAMPP server if I first run yarn start in the cmd terminal and then access via http://localhost:3033, but after a while I have to rerun the same command. I've tried yarn build and then navigating to the build directory but that just loaded a page with a header, it didn't have the same functionality. And the contents of the build directory looks very similar to the contents of the public directory anyway.
I've had a look at this SO post and this one but still unsure why I need to run yarn start everytime.
UPDATE:
I'm still not sure how node, react, and electron fit together and why each is required, much research and learning still to do! Rather than a 'react app' I believe I'm looking at an 'Electron app'. I think if I run the command npm run package-win then I think I should get an exe file and some dlls. But how to instead setup for running on an Apache web server without having to start using the command line, or would you just have to build it with different architecture?
Starting to get a vague understanding from reading this.
If you used the npx create-react-app <app-name> then you just have to change the "start" script in the package.json file as "serve -s build". Run yarn add serve to add For deployment, Heroku is a good choice. Create a Heroku app and connect your git repo to the newly created app. Then go to the deploy tab and deploy your branch.
I have a small web application(html,css,javascript,jquery and angularjs) which runs on nginx server.I've been asked to move it from nginx to nodejs server.What does this mean?And how can it be done?
Node.js is a javascript runtime engine you can install on your computer to execute javascript code outside of the browser.
Nginx is a webserver, and Exprpess is a simple library for creating a webserver with Node. Here's a quick starter on that.
So all you have to do is serve the dist generated from angualar with the node + expresss webserver instead of the Nginx one.
This should be helpful enough to get you started on creating the API.
Install Node, Npm.
using npm install http-server
npm install http-server -g
move to that directory where your all files (html,css,javascript,jquery and angularjs) present. Run the command
http-server -p 3000
It will run you application using node on http://localhost:3000
It means the person who asked you to do that has clearly no idea about both nginx and nodejs. They are compatible.
This will teach you how to make a simple HTTP server:
https://nodejs.org/api/http.html
I want to setup a environment on my machine to learn AngularJS. I saw in the videos of egghead.io where he keeps typing AngularJS code and when it refreshes through a server and displays the changes in realtime in the browser. How to do that? I see WebStrom logo in the videos but that's it.
You will need a server to setup your files. The videos you saw might have used browser-reload plugin which watches the files for changes and refreshes the page as soon as there's a change in any of the files.
You can use yeoman (and one of the generators) for project setup (for scaffolding basically). You will need to install NodeJS first which will install NPM (node package manager) with it. Then you can install YEOMAN and use the generator respectively. My recommendation would be generator-gulp-angular.
See the readme for the instructions, but basically you'll have to run these commands in command prompt after you've installed NodeJS properly.
npm install -g yo gulp bower
the above command installs yeoman,gulp and bower respectively
npm install -g generator-gulp-angular
the above command installs the gulp-angular yeoman generator
Then you can create a directory, say 'testDir' and navigate into it. I.e.
cd testDir
Then run
yo gulp-angular
You'll be asked to select desired technologies. Once you're done, you can run the following command to see it working (with live reload)
gulp serve
not sure what video you're talking about but it sounds like he/she has a gulp or grunt task that is watching for changes and then livereloading your browser. It could be either
gulp-livereload (https://www.npmjs.com/package/gulp-livereload)
or
browsersync (https://www.browsersync.io/)
I am presently reading Manning's AngularJS in Action by Lukas Ruebbelke
The introductory part suggests,
Because you’re pulling files from a CDN, you’ll need to run
Angello Lite(the application name) from a web server. There are a few ways to do this, but one of the easiest ways is to use the npm package serve.
The steps for installing Angello Lite are as follows:
■ Install Node.js. You can find all of the information to do that at http://
nodejs.org/.
■ Install the serve package by running npm install -g serve from the command
line.
■ Download Angello Lite from GitHub, using the URL given above, and place it
on your local machine in a directory named angello-lite.
■ Navigate to the angello-lite directory from the command line and run serve.
■ Go to http://localhost:3000 in your browser to see the application.
Does learning Angular JS require previous exposure to node and git?
If I have Apache Tomcat already configured on my local m/c, what is the procedure to start with it?
Furthermore, just to keep in sync with the author, I installed git and then cloned a dir onto my local m/c from github.
Then i install node.js and Install the serve package by runningnpm install -g servefrom the command line.
Unfortunately when i navigate to the angello-lite directory from the command line and run serve, it shows me
where angello-lite is the repository where the application resides?
Any suggestions on how to configure successfully?
I have no idea regarding node.js and git. Do i really need to learn
these to begin with AngularJS then.
No, that's not a requirement. You don't even need a web server. You can have your static HTML files locally or use some online service like plnkr. Obviously if you need to work with dynamic data then you will need a web server. At some point you might want to start making AJAX calls in order to fetch some dynamic data from your server backend.
If I have Apache Tomcat already configured on my local m/c, what is
the procedure to start with it?
Just add an HTML page to the root of your website, open your favorite browser and invoke this page.
You don't need those tools to learn Angular - you can download latest package from the AngularJS website (both for development and for production).
Node.js and Git may be necessary to pull and build packages from the NPM, run tasks and many more great features, but just to learn Angular all you need is its code.
I have compiled the newest angular.js and find out that links in the doc all point to absolute URL angularjs.org/.... I want to be able to read the doc locally.
You have to run a webserver ("python -m SimpleHTTPServer) to properly browse the docs.
As an alternative, you might want to try Dash for offline documentation for many APIs - http://kapeli.com/dash
"Dash" which is mentioned in another answer costs around $20.
For a free solution, check out http://devdocs.io/
Clone the angular source code in order to have access to the docs directory of all released (and yet unreleased) versions locally.
Local AngularJS API Docs
Here's how I hosted the Angular.JS documentation locally, on my Mac:
Download the zipped version of the Angular.JS Build, which contains both the builds of AngularJS, as well as documentation and other extras.
Unzip the Angular.JS docs folder.
Download and install Node.JS.
Using Mac Terminal, install the npm package http-server globally so that it can be run from the command line.
$ sudo npm install -g http-server
cd to the Angular.JS docs folder and start-up http-server.
$ http-server -a 127.0.0.1
Starting up http-server, serving ./ on: http://127.0.0.1:8080
Use your browser to view the docs # http://127.0.0.1:8080/index-production.html
Note:
Using the default served by http-server (http://0.0.0.0:8080) and http://0.0.0.0:8080/index-production.html in Chrome will end up in a google search. Alternatively you can create a bookmark and Chrome will stop searching for it.
download the lastest version of the doc, then run python -m SimpleHTTPServer, in your browser enter the following url: localhost:8000/index-production.html , it works for me.
If you want a complete local AngularJS documentation, you can clone the angular/angular.js repository on Github. The nodejs webserver is already included.
You just need to install nodejs dependencies (npm install) and build (grunt package), and you can run the local webserver with grunt webserver.
All the documentation (API, tutorials, etc ...) will be available on your computer at http://localhost:8000/build/docs
For a free and open source version of Dash, use Zeal to provide offline documentation. It's also very nice when integrated with your editor (Submlime in my case).
if you are developing a site using "localhost/your-project"
and refer the angular.js file as:
"localhost/your-project/js/angular.js"
then, you can access the docs by:
"localhost/your-project/js/docs/index.html"
For those with WampServer (or anyother *AMP application ),
Simply point your Web Browser to your offline docs ,
http://localhost/angularjs/1.5.3/docs/
it works like charm.