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')
Related
I just inherited an application where there are several ui-sref="portal.main.content" in the code.
What I'm confused about is, to navigate to this state, we need to enter /#/portal/main/content.
However it is rendered on the page without the #. So it will work when clicking on the page, however it won't work if I try to open into a new tab as that page doesn't exist. What am I missing here?
The problem comes from the fact that your application is served from a server environment that deals with urls as if they were real paths for real resources on the server file system. Therefore, when your are in a single page, it's not reloaded when you navigate to another state url, because ui-router handle this internally, consequently doesn't produce 404 or 403 errors, but when you load a page first time, it's required from the server and gives you 404 and 403 errors because the resource you're looking for doesn't exists or is forbidden.
What you have to do is to configure your server side environment to target the index.html page when your are not refering to a file (like css and js files), so all url will end up in the index.html page with an url to be handled by the ui-router. Each server side technology (Apache, IIS, node.js, etc) will have a different way to handle this, but mostly have a URL Rewrite module and similar ways to handle this.
Also, if it's not a problem by using the hash like url, you can disable html5Mode to prevent ui-router to do such thing. You can achieve this by injecting $locationProvider on your .config and disabling it like so: $locationProvider.html5Mode(false);
For example:
angular.module('myApp', ['ui.router'])
.config(function ($stateProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '',
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
})
.state('about', {
url: '/about',
templateUrl: 'views/about.html',
controller: 'aboutCtrl'
});
$locationProvider.html5Mode(false);
});
I am trying to merge the Angularfire-Seed with a sample Ionic App. This has worked so far quite well.
To browse between my views, I am interested to use the ionic functionality:
// requires ui-router
<ion-nav-view></ion-nav-view>
instead of
// requires ngRoute
<div ng-view></div>
The problem is that the ion-nav-view (Ionic) is part of the ui-router (see here explanation) whereas ng-view part of ngRoute (Angularfire-seed).
Is there therefore a way to keep using the ngRoute (as a lot of coding has been done in the Angularfire-Seed project and thus I dont want to switch to ui-router), but still use ion-nav-view?
Follow-up: has someone implemented AngularFire with Ionic (and thus ui-router)? Available git?
No, ion-nav-view uses the ui-router under the hood. Unless you want to write your own implementation you can't use ngRoute with it.
EDIT
To answer your question about using your linked file with Ionic, you'll have to refactor it to use ui-router. Check the UI Router Guide here and the Ionic docs here. It's well worth reading the first link to get a thorough understanding.
Dependencies
ui-router is included in the Ionic bundle so you don't need to explicitly state it as a dependency.
So provided you already have Ionic as a dependency, instead of
angular.module('myApp.routes', ['ngRoute', 'simpleLogin'])
you can just have
angular.module('myApp.routes', ['simpleLogin'])
.config blocks
I've not used ngRoute but the syntax between the $stateProvider of ui-router look quite similar. With ngRoute you used the $routeProvider like so...
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/chat', {
templateUrl: 'partials/chat.html',
controller: 'ChatCtrl',
})
With ui-router configuring a 'state' is something like the following (the use of $urlRouterProvider.otherwise() at the end catches any URLs that haven't been explicitly defined and redirects to whichever URL you specify)
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('home', {
url: '/',
templateUrl: "partials/home.html",
controller: 'HomeCtrl',
resolve: {
// resolve stuff in here, check the docs for implementation differences
}
})
.state('chat', {
url: '/chat',
templateUrl: "partials/chat.html",
controller: 'ChatCtrl',
}
})
$urlRouterProvider.otherwise('/');
Authentication is handled in your linked file, this link may help angular ui-router login authentication. Good luck!
I'm trying to use AngularJS in a salesforce local hybrid android app, and while a simple test of the angular code works in firefox, when I run it in the Android emulator it loads for a fraction of a second and is replaced with a blank screen.
I've noticed that refreshing the page after routing ( going to [URL]/index.html#/ after the first page load ) ends up with an eternal 'ajax loading' spinner. I suspect this might be the root of my problem. My routing code looks like this:
var contactlistModule = angular.module("AugmentedContactList", ['ngRoute']);
contactlistModule.controller(ContactlistController);
contactlistModule.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
controller: 'ContactlistController',
templateUrl: 'viewparts/contactlistview.html'
}).when('/contact', {
controller: 'ContactController',
templateUrl: 'viewparts/contact.html'
}).otherwise({
redirectTo: '/'
});
}]);
Why does this refreshing error happen? Shouldn't going to index.html have the same effect as index.html#/ ?
I guess going to index.html without enabling html5Mode won't work as you expect.
You can enable it by injecting $locationProvider and adding this line to your config:
$locationProvider.html5Mode(true);
However, be aware that to enable html5 mode you will need to configure your server to return index.html (or whatever your main page is) on every URL request.
See also:
$locationProvider docs
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/" />.
I'm testing a website locally on my machine. It uses AngularJS for routing and page changes, and I'm attempting to test the routes using the Mongoose webserver (extremely light).
My code is as follows:
app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/who', {templateUrl: '/js/partials/who', controller: 'whoPage'});
$routeProvider.when('/what', {templateUrl: 'partials/what'});
$routeProvider.when('/want', {templateUrl: 'partials/want'});
$routeProvider.otherwise({ redirectTo: '/' });
}]);
(I haven't set up controllers for some of the other pages yet. I've been testing the "who" page.)
I'm running the page from localhost:8080. In my application, when I click a link to change the location, nothing happens. The URL changes to "localhost:8080/who", but I get no messages from console, and I get no changes on my page. However, if I then refresh that URL, I get a 404 error.
I don't have any server-side routing set up. Is this a necessity for Angular apps? Is there something wrong with the code I've written, or should I try a different test webserver?
$locationProvider.html5Mode(true);
will make angular use "push state" from the HTML5 History API.
This means that you'll see the url change in the location bar, but that won't cause the browser to actually reload your page. When you reload the page, the browser will now fetch that url from the webserver, which doesn't have it.
A common trick is to use URL rewrites to map any url back to index.html. You should take care of not remapping the urls that point to static files such as your javascript and css resources. That's usually easy because it's a good practice to group all your css and js files in some directory instead of scattering them in the top level dir.
You can read about how to configure mongoose URL rewrites at https://www.cesanta.com/developer/binary#_url_rewrites