I'm trying to generate a settings page for my Ember-Cli app. The URL I would like is /settings/:id/ with separate routes such as /settings/:id/overview and /settings/:id/password.
How do I create nested routes using Ember CLI? I've found plenty of examples for Ember, but not for CLI.
UPDATE: As of v0.1.5, Ember-CLI has fixed the issue with not generating the routing map correctly. Running the commands below should now generate the correct code in router.js. It also added a path option for nested routes (rather than resources). You can see the changelog here. It looks as if the changelog notes are currently the only documentation of that feature, but they're easy enough to understand.
Right now, there is no way to fully generate nested routes or resources with Ember-CLI (as far as I can tell). You can have it generate the files for you, but you'll have to edit router.js yourself. For instance, if I run the following lines:
ember generate resource settings
ember generate route settings/overview
You'll get the following router.js:
Router.map(function() {
this.resource('settings', { path: 'settings/:settings_id' }, function() { });
this.route('settings/overview');
});
This is probably just a limitation in the way Blueprints currently works. Go ahead and generate your routes as you see above, then just modify router.js by hand to nest the route calls instead of making them top-level:
Router.map(function() {
this.resource('settings', { path: 'settings/:settings_id' }, function() {
this.route('overview');
});
});
Also, if you want to create a nested route, not a nested resource, I'm not sure there is a blueprint for that yet. I would just generate a resource and then change it to a route manually.
Related
I am re-building our website as a single page React application, but for simplicity would like to keep the landing page the same. The landing page is a large static HTML file (with some JS for animations, bootstrap, etc). A large amount of imports and animations makes it difficult to migrate the entire page as a react component.
I want to add the website under /public/landing-page.html, with all of the extra CSS/JS/assets in the same location. Is there a way to assign a route to serve this page rather than render a route in the usual React way?
This seems like a common problem for people migrating their sites from JS/HTML to React.
You can serve this landing-page.html and corresponding CSS/JavaScript/Asset files as static resources. That is, make Node.js as plain web server for these files, without any connection to React.
For example, if Express framework is used in Node.js, it is pretty easy to make the configuration:
const express = require('express');
const app = express();
...
app.use(express.static(path.join(__dirname, 'public'), { 'extensions': ['html', 'js', 'css', 'png'], 'maxAge': '7d' }));
Then, you can open http://<your-website>/landing-page.html, without any React stuff.
If you want to achieve this within the react structure without using the node server, you should try using
<div __dangerouslySetInnerHTML={{__html: yourSiteAsAString }} />
if you want a safer approach, try using sanitize a node module which sanitizes the html before passing it to __dangerouslySetInnerHTML
I’m currently trying to build the structure of a react app that I’m working on, i have a home page that any one can see, and a dashboard only users with a specific role can view.
I’m using webpack.
How can i put the project structure to separate different pages and split the application so that it loads only the parts the user need ?
Thanks.
Webpack supports multiple entry points:
https://webpack.js.org/concepts/entry-points/#multi-page-application
You can define them like this:
module.exports = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
Based on the comments on another of my questions (gradle how to add files javascript fies to a directory in the war file) I'm trying to use angular-cli to help build and manage an angular project. However, I cannot seem to find any documentation on how to create a second webpage in the project, which to me seems like a very basic task. I tried creating a "component" with ng g component {component name}, but this didn't add anything to the build result.
I had missed the section of the angular docs on routing since I did not make the connection between the word "routing" and what I wanted to do. Routing as described here works perfectly when using Node as your server. However, other web servers such as Tomcat (which I am using for this project) will not since ng build only generates an index.html file. Node knows that it should re-route URLs under the angular base to that file, but Tomcat doesn't. A proxy server such as apache needs to be placed in front of the Tomcat server to redirect the urls to the base url for the application.
With that out of the way, here is the basics of routing:
create a component for each "page" (the component does not need to be responsible for the whole page displayed. see 2)
create a "shell" component that contains features that will be on all pages e.g. toolbar, side navigation.
add <router-outlet></router-outlet> to the point in the shell component component where components for sub-URLs will appear (note that they are inserted into the DOM after this tag, not within it.)
in the imports for your module, add RouterModule.forRoot(). This function takes an array of Route. Each route has a path and a component property. path is the url (relative to the base url) that will cause component to be inserted into the DOM. Note that path values should not begin with a slash.
add a tags with the routerLink property bound to the url of your new page. Note that here, there should be a leading slash.
for a project, I am using Django on the back-end and AngularJs on the front end.
Basically, what I want is to run the Angular app only when the url starts with projectkeeper/.
In other words, lets say my website is example.com. I want the angular app to run for the URLs example.com/projectkeeper/dashboard/, example.com/projectkeeper/projects/ and so on, but not on example.com/about/.
Hope I have made myself clear. Anyway, in order to do this, I am doing the following with my code:
urls.py
urlpatterns = [
url(r'^projectkeeper/$', TemplateView.as_view(template_name='base.html')),
]
In the template base.html, I refer to my angular app obviously. For the angular routing, I have done the following:
myapp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/dashboard/', {
title: 'Dashboard',
controller : 'DashboardController',
templateUrl : 'static/app_partials/projectkeeper/dashboard.html'
})
.otherwise({ redirectTo : '/' });
}]);
So, ideally, what I thought was that going to example.com/projectkeeper/#/dashboard/ would run the DashboardController from my angular app. However, this is not the case, I only get an empty page which means the routing was incorrect.
Any solutions to this? As I said before, I want is to run the Angular app only when the url starts with projectkeeper/.
I think you're pretty close, there is few things to make this works(honestly, this is confusing to understand and I hope I didn't forget anything).
First, your URLs order is important, if you define something before the angular routes they will be rendered first, so use your django app's urls before the angular one.
Then, if you want to make angular know about the sub-path you need to define <base> tag in your header. In your case:
<base href="/projectkeeper/" />
(you can also define projectkeeperit in all of your where functions tho).
For the urls, I would change the regex to: r'^projectkeeper/.*'. Again, should be the last one in your urls list.
You will encounter other issues like the {{ }}, authentication issues, but those will stay for a different answer :)
Try out this ui router for angularJS
https://github.com/angular-ui/ui-router
It will be more helpful on nested views and problem like which you are facing currently.
this should be simple but after extensive googling I havent found an answer.
I use cloudfront as a CDN for my web app. I would like to configure the cloudfront url to a single file, as it might change in the future. I am trying currently to pass the value to the the templates as they use some images via css style background. I have found out that one solution would be to put in the scope in every controller, but there so many of them, and including this to all would make the code more possible for errors if it is forgotten.
So, this is a code example I have tried:
app.js:
.constant('CDNurl', 'https://xxxxxxxxxxx.cloudfront.net/')
main.js:
$rootScope.CDN = CDNurl;
navbar.html:
<div class="avatar__image"
ng-style="{'background-image':'url(' +
$root.CDNurl + currentUser.profileImage+')'}">;
does not work. If I include it in the navbar controller it of course works, but I need to pass it globally.
So what is the correct way of doing this? Configure something and reach it from templates?
If you have a parent controller at the top of the DOM and in that you set $rootScope.CDN = CDNurl;, then you can access CDNurl is available in all the child views.
Or another option might be to use run (I haven't tried this):
var app = angular.module('module', []);
// run blocks
app.run(function($rootScope, CDNurl) {
$rootScope.CDN = CDNurl;
});