I'm building a simple Angular app for a demo for a client. They don't know much about web server technology so I was trying to set it up as a stand along app that will run in there browser. I wanted to use ngRoutes to break my code up into templates but I can't seem to get it to work with any stand alone server (like live-server or nodemon).
Anyhow can I do this without a server or is it not possible. From what I can tell it won't work with anything I try.
Here is my route code.
angular.module("myApp", ['ngRoute','ui.bootstrap','ui-leaflet'])
.config(function($routeProvider,$locationProvider){
$routeProvider
.when('/search',{
controller: 'searchCtrl',
templateUrl: '/views/search.html'
})
.when('/list',{
controller: 'listCtrl',
templateUrl: '/views/list.html'
})
.otherwise({
redirectTo: '/search'
});
$locationProvider.html5Mode(true);
});
OK, Let me clarify something Nodemon itself is NOT a server at all, nodemon is a plugin which Monitor's for any changes in your node.js application and automatically restart the server. you will need to install the server on their local machine I suppose they are running the application locally and if you want to run the server by itself all you have to do is to add it to startup. and It will run automatically.
Related
I'm using SPA technique using AngularJS in ASP.NET MVC framework,AngularJS routing between pages are working fine when it's run from VS2013,but after hosting the application in to IIS8.5 routing not working.
When i run the app using IIS express the url was http://localhost:12345/#/home
After publishing http://localhost/myapp/#/home
Here is my app.js,
$routeProvider.when("/home", {
controller: "homeController",
templateUrl: "/app/views/home.html"
});
In index.html
<li> Home</li>
When i publish my app in windows azure, app is working fine. Because the url was myapp.azurewebsite.net. myapp.azurewebsite.net/#/home
How can i host similarly in local IIS.
You almost find find the answer -- that is all about absolute file path.
Quick fix:
Change templateUrl: "/app/views/home.html" to templateUrl: "app/views/home.html" (remove the heading slash)
Answer:
If you specify the templateUrl as /app/views/home.html, which starts with /, you tell the browser to get it from root.
If your webapp is stored in http://localhost/myapp/, your browser will visit http://localhost/app/views/home.html to get the template.
That also explains why your app works fine when it is places in root directory, but not working in sub directories, like http://localhost/myapp/#/home .
Do not worry about the side effect of relative path. All the resources are calculated relative to index.html.
I'm creating a single page application using flask. If I understand the process correctly, then ill be having flask serve up a single page (html and css) upon the first GET request. From their, the client will only receive data and the it will use already stored html (partials/other pages) to modify the site.
Ideally, I would like to use something that provides a nicer syntax then html, something like slim, haml or jade. Though i don't need the templating aspect, as this functionality will be provided through angularJS.
Assuming the above is correct, my confusion is how to use pyjade (or any such tool) with flask to transform the partials that the client side application would be using. For example, if i have some client side code that creates the routes like so...
var app = angular.module('App');
app.config(function($routeProvider){
$routeProvider.when('/', {
templateURL: 'partials/home.jade',
controller: 'HomeController'
}).otherwise({ redirectTo: '/' });
});
Then i would need home.jade to be transformed into home.html when it was served up to the client. Assuming I understand what 'should' be done correctly, how do I do this?
One such solution would be manually transform the home.jade into home.html and keep my code like this:
var app = angular.module('App');
app.config(function($routeProvider){
$routeProvider.when('/', {
templateURL: 'partials/home.jade',
controller: 'HomeController'
}).otherwise({ redirectTo: '/' });
});
I'm using Flask, PyJade, and jQuery as a controller. You can install PyJade with,
sudo pip install pyjade
And then according to the documentation you can insert the following line in your Flask app,
app.jinja_env.add_extension('pyjade.ext.jinja.PyJadeExtension')
This is in relation to my question about changing node.js configuration in a cordova/ionic application - How to configure node.js routes in a cordova app
I didn't get a satisfactory answer to that. I also had a chat with couple of cordova/ionic guys on their blog, but they mentioned node.js cannot be configured by using express in this case and also did not have any clue to how it can be done.
So, my question is is it at all possible to do something like changing default port or url rewriting in node.js server when working with cordova/ionic applications?
Would love to know what you guys think.
Elaborating more -
Let's say I have a couple of routes like so -
http://localhost:6001/#/home/index
http://localhost:6001/#/content/index
As I didn't want the hash in URL, I added this in my app's config section -
$locationProvider.html5Mode(true);
Which works fine and URLs don't show '#' but on refreshing in browser, now I get this error -
Cannot GET /home/index
This is why I need URL rewriting to be done on server, which I can't seem to figure out.
These are my routes in app.js -
.state('home', {
abstract: true,
url: "/home",
templateUrl: "app/home/home.html"
})
.state('home.index',{
url: "/index",
views: {
"index" : {
templateUrl: "app/home/index.html"
}
}
})
$urlRouterProvider.otherwise('/home/index');
As we discussed in chat, the Cordova_CLI project uses a fixed server for rapid deployment through cordova serve (or ionic serve). This node server does not use express or other plugins to handle routing, it uses a script from the [cordova-lib][1] project.
The script provided for this development server does not take into account URL rewrites, so html5Mode would not work properly without modification of this script. It could be a fork as simple as replacing the do404 function logic to instead set filePath to /index.html.
another option would be running a separate web server (node+express or any other) and including the ionic/cordova scripts in the project.
Ideally, the production app would be running against a public server, and the Cordova_CLI server should only be an issue in dev environments.
I'm using angular to develop an application. I'm developing off my local file system, on Windows. However, when I enable angular-route.js, whenever I hit index.html with my browser, it instead goes to index.html#/C:/.
My route definition is:
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl: 'home.html', controller: 'HomeCtrl'});
}
I think this causes the site to break, because /C:/ doesn't match any angular routes. What's going wrong? How do I fix this?
For routing & ajax (& more) to work properly, run a local development server; avoid use of file:// for development, since browsers have different rules for it.
Tools like yeoman + generator-angular will automatically set up a gruntfile with a server task, which will run a node-connect server to locally serve your files.
You can do this with
python: (3)python -m http.server 8001 (replace http.server with SimpleHttpServer in 2)
node.js + connect
ruby + rack
From the angularjs tutorial (number 5 under "working with the code") - "You need an http server running on your system, but if you don't already have one already installed, you can use node to run scripts\web-server.js, a simple bundled http server."
Response from comments: For phonegap, use the phonegap tools. It does exactly what I said, it runs a local server.
This will work.
angular.module('MainModule', []).config(function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix("!");
$locationProvider.html5Mode(false);
$routeProvider.when('/', {template: './js/templates/home.html', controller:HelloWorldCtrl});
$routeProvider.when('/other', {template: './js/templates/other.html'});
});
In index HTML you need to specify templates:
<script type="text/ng-template" src="./js/templates/home.html"></script>
<script type="text/ng-template" src="./js/templates/other.html"></script>
I have an app that have to be customisable and one parameter is the root of the url. The app ain't necessarily at the root of the website, ie. it can be hosted at http://onedomain.com/index.html, where the appName would be /, as it can be hosted at http://anotherdomain.com/myapp/index.html, where the appName would be /myapp/.
But I need to know the appName in the router, so in the configFn of my module, to do this kind of stuff:
return $routeProvider.when(appName + "index.html", {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
As I have more parameters, I started a service I called Settings but you can't inject services while configuring a module…
What would you do?
For my concern, I started thinking about a custom provider but I'm not sure it's appropriate.
For Settings related information, I use constant:
angular.module(...)
.constant("APPNAME", "/myapp/")
.controller(..., function(..., APPNAME) {...})
Here is a simple plunker to illustrate constant.
Just use .when('/' and <base href="/myapp/" />.