I started out with this code, app.js:
var app = angular.module('myProject', ['ngStorage', 'ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when("/", {
controller: "loginController",
controllerAs: "vm",
templateUrl: "/index.html"
}).otherwise({
controller: "loginController",
controllerAs: "vm",
templateUrl: "/views/login.html"
});
});
If someone visited -
http://localhost:8885
it would redirect to http://localhost:8885/#!/ and show the index.html template the $routeProvider had declared.
And if someone visited either -
http://localhost:8885/#!/asdfasdfasdf or http://localhost:8885/#!/1234
the pages would load and show the /views/login.html template.
Everything was working fine.
Then, to exclude the hash-bang, known as (/#!/), I added:
$locationProvider.html5Mode(true) to the end of the config mentioned above.
This caused my project to no longer serve my src -> MyProject -> wwwroot folder files anymore, but rather the content inside of my src -> Views -> App -> Index.html file. File structure shown below:
Why is this the case? How do I solve this to not only exclude the hash-bang but also to serve from my wwwroot folder?
EXTRA INFO -
My _Layout.cshtml file has this for a body:
<body ng-view>
<div>
#RenderBody()
</div>
</body>
I've also tried to place <base href="/"> inside the <head> but it didn't work.
Any help?
Related
Problem
I am trying to write a Single Page Application (SPA) where initially the app shows module "A". When the user clicks an element in "A", module "B" is displayed and is passed an ID from A. (For example A displays a list of Employee IDs, clicking on one employee means B will display details of that employee)
Initially my URL is :
http://localhost:8000/
Clicking on an item in A with an id of 123, the URL changes to following which is correct:
http://localhost:8000/A/123
However, I get the following error
GET http://localhost:8000/b/js/viewModels/B.js net::ERR_ABORTED 404 (Not Found)
ojModule failed to load viewModels/B
ojlogger.js:257 Error: Script error for "viewModels/B"
I do not know why it has changed the path and added an extra "/b/" to get the B.js/B.html file. Of course it can not find this file as there is no such folder "b" in my project structure.
Oracle Jet Cookbook Sample
https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=router&demo=stateParams
I am using the sample in the OracleJet Cookbook for a Router with State Parameters. If you open this example in full screen you see that the URL for the first screen (A) is
https://www.oracle.com/webfolder/technetwork/jet/content/router-stateParams/demo.html
Clicking on a person in the list changes the URL to the following, which is the same as mine.
https://www.oracle.com/webfolder/technetwork/jet/content/router-stateParams/demo.html/detail/7566
This cookbook sample does not error like mine.
My Code
project structure
src
|- index.html
|- js
|- main.js
|- viewModels
|- A.js
|- B.js
|- views
|- A.html
|- B.html
index.html
....
<body>
<div id="routing-container">
<div data-bind="ojModule:router.moduleConfig"></div>
</div>
</body>
....
main.js
requirejs.config(
{
baseUrl: 'js',
....
}
require(['ojs/ojbootstrap', 'ojs/ojrouter', 'knockout', 'ojs/ojmodule-element-utils', 'ojs/ojknockout', 'ojs/ojmodule'],
function (Bootstrap, Router, ko) {
// Retrieve the router static instance and configure the states
var router = Router.rootInstance;
router.configure({
'a': {label: 'a', value: 'A', isDefault: true},
'b/{id}': {label: 'b', value: 'B' }
});
var viewModel = {
router: router
};
Bootstrap.whenDocumentReady().then(
function(){
ko.applyBindings(viewModel, document.getElementById('routing-container'));
Router.sync();
}
);
});
A.html
....
<div on-click="[[onClicked]]" >
....
</div>
...
A.js
define(['ojs/ojcore', 'ojs/ojrouter', 'knockout', '],
function (oj, Router, ko) {
function AViewModel(params) {
....
router = Router.rootInstance;
....
this.onClicked= function(event) {
router.go('b/'+ 123);
}
....
};
}
return AViewModel;
}
Attempts
I have tried adding one of the following in "main.js" and it doesn't make a difference.
Router.defaults['baseUrl'] = '';
Router.defaults['baseUrl'] = 'js';
Router.defaults['baseUrl'] = '/js';
Router.defaults['baseUrl'] = '/js/';
Updated answer after gleeming more information
I have finally resolved this with some advice from a colleague.
Make sure the "baseUrl" specified in your requireJS is absolute when you are using the urlPathAdapter router.
main.js
requirejs.config(
{
baseUrl: '/js',
RequireJS's baseUrl is used as the starting location for RequireJS to download its relative content. Most of the time its set to "js" but that will not work nicely with the UrlPathAdapter router. This is because the router will change the URL which RequireJS tries to add its path to when its not absolute. The result is that the path requireJS is trying to use to get its content is invalid.
For example:
you accessed your app with the URL "protocol://server:port/my/app"
RequireJS will try and access content by appending "js", for example "protocol://server:port/my/app/js/viewModel/..." which works when you are at the root of your application
you use the router to navigate to a different url, the url is now "protocol://server:port/my/app/newPath"
now RequireJS will try and use the URL "protocol://server:port/my/app/newPath/js/viewModel" which is wrong
When the RequireJS baseURL is absolute, it will always be added to the apps URL, for example "protocol://server:port/my/app/js/viewModel" where the content will be found
NOTE: I also ensured the baseUrl in "path-mapping" was absolute as well
path_mapping.json
{
"baseUrl": "/js",
Another solution was to change my router adapter from the default urlPathAdapter to urlParamAdapter.
Router.defaults.urlAdapter = new Router.urlParamAdapter();
var router = Router.rootInstance;
Using ZURB Foundation Template, building with NPM.
I have the following code in my default.html layout page:
<script src="{{root}}assets/js/app.js"></script>
{{#ifpage 'admin'}}
<script src="{{root}}assets/js/single-page/admin.js"></script>
{{/ifpage}}
{{#ifpage 'dashboard'}}
<script src="{{root}}assets/js/single-page/dashboard.js"></script>
{{/ifpage}}
In gulpfile.js I have as a member of the 'javascript' PATHS array:
'!src/assets/js/single-page/**/*'
I then, do:
gulp.task('single-page', function() {
return gulp.src('src/assets/js/single-page/**/*')
.pipe(gulp.dest('dist/assets/js/single-page'))
.on('finish', browser.reload);
});
Then...
gulp.task('build', function(done) {
sequence('clean', ['pages', 'sass', 'javascript', 'single-page', 'images', 'php', 'chart_data', 'copy'], 'styleguide', done);
});
And finally...
gulp.task('default', ['build', 'server'], function() {
gulp.watch(PATHS.assets, ['copy']);
gulp.watch(['src/pages/**/*'], ['pages']);
gulp.watch(['src/{layouts,partials,helpers,data}/**/*'], ['pages:reset']);
gulp.watch(['src/assets/scss/**/{*.scss, *.sass}'], ['sass']);
gulp.watch(['src/assets/js/**/*.js'], ['javascript']);
gulp.watch(['src/assets/js/single-page/**/*.js'], ['single-page']);
gulp.watch(['src/assets/img/**/*'], ['images']);
gulp.watch(['src/assets/php/**/*'], ['php']);
gulp.watch(['src/assets/chart_data/**/*'], ['chart_data']);
gulp.watch(['src/styleguide/**'], ['styleguide']);
});
My three pages are all PHP pages with the names index.php, admin.php, and dashboard.php. The js/single-page directory is being written to the dist folder and the two JS files are there.
The Panini conditional doesn't seem to be working so the admin-specific and dashboard-specific paths do not appear on their respective PHP pages.
Colin Marshall in his answer to How to add JavaScript just for one specific page? mentions a config.yml file and a gulpfile.babel.js file, neither of which are in my project's directory.
Any suggestions?
Thank you.
Simple fix after a bit of fiddling. Seems Panini 'page' var returned the full page name including .php. Once I checked for admin.php or dashboard.php all worked fine.
I can only imagine there's some code change I can make to return the page name without the file extension.
I have a ASP.NET 4 Web Forms project written in C#. I would like to add Angular 2. I've seen a lot of examples on the web using ASP.NET 5 but I can't figure out how to do it in my project.
Have faced similar requirement and did some POC on this and definitely moving forward with it . I worked on with each .aspx page as stand alone angular 2 SPA app. This means each aspx page will have its own App.Component.ts and main.ts file(file name based on Angular 2 documentation). main.ts file contains the code to bootstrap the application (sample code below) so there will be a main.ts file for each .aspx page.
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_BINDINGS} from 'angular2/http';
import {HomeComponent} from './home.component';
bootstrap(HomeComponent, [HTTP_BINDINGS])
.catch(err => console.error(err));
There will be one app.component.ts(named it home.component.ts for my home.aspx) file for each aspx page.
Now in the config file which contains Sytem.config details i defined new map and package entry for my home.aspx as shown below:
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true,
experimentalDecorators: true
},
map: {
app: '../../Javascript/angular/app',
home: '../../Javascript/angular/home'
},
packages: {
app: { main: './main.ts', defaultExtension: 'ts'},
home: { defaultExtension: 'ts' }
}
});
And finally I moved the System.import code part to .aspx page(code below). Each page will import its own package defined in sytem.config.
<script>
System
.import('home/main-home')
.catch(console.error.bind(console));
</script>
here i have named my main.ts as main-home.ts.
Hopefully this helps you and others. Also i am open for suggestion and review/alternate solution of this approach.
For reference please see: bootstrapping-multiple-angular-2-applications-on-the-same-page
I totally agree with #pawan's answer but yes #pawan i found a nice solution of this. This solution definitely helped me and hope it will help all of you too.
We don't need to create main.ts and AppComponent.ts for each and every page.
We need to make our main component which we are bootstrapping dynamic. In our case, in app.component.ts, i am bootstrapping our component dynamically based on url of current page.
Let's say if your page is home.aspx then boostrap HomeComponent or about.aspx then boostrap AboutComponent
I am doing it by implementing ngDoBootstrap method as following.
export class AppModule {
url : string;
constructor(#Inject(DOCUMENT) private document: any){
this.url = this.document.location.href.toLowerCase();
}
ngDoBootstrap(app:ApplicationRef){
if(this.url.indexOf("home.aspx") > 0){
app.bootstrap(HomeComponent);
}
else if(this.url.indexOf("about.aspx") > 0){
app.bootstrap(AboutComponent);
}
}
}
This is how based on page url, we can dynamically bootstrap our Component and save a lot files of main.ts and app.component.ts for each page.
For this, you need to add entry for each component into entryComponents array of NgModule as below:
#NgModule({
entryComponents : [
HomeComponent,
AboutComponent,
]
})
Hope this helps.
change your index.html base route to your webpage
<base href="/YourWebPageRoute">
include the page inside the webform
<% Response.WriteFile("index.html"); %>
I know this question has been asked before but I'm wondering if something has changed with the advent of 1.0.
I don't want Meteor to automatically bundle together every single CSS file in my app. My admin pages are going to have a completely different CSS than my client-facing pages and using namespaces seems like a really over-complicated solution. How do I have Meteor load certain CSS files on certain pages and NOT load certain CSS files on certain pages?
The same question goes for JS files.
I know someone said this would be useful:
https://github.com/anticoders/meteor-modules
Any comments on this package for conditional CSS and JS?
You can just put your CSS files somewhere under /public and manually include them from your templates where required. Everything under /public will NOT get bundled, and the URL will have the /public removed e.g.
Create two files: your_meteor_project/public/one.css and ......./two.css. These will be available from your client at http://example.com/one.css (i.e. the "public" does not form part of the URL, it's like the document root for using meteor as a plain old web server).
meteor create cssSwitcher
cd cssSwitcher/
mkdir public
echo 'html, body { background-color: red; }' > public/one.css
echo 'html, body { background-color: blue; }' > public/two.css
Create a reference to a helper function "appropriateStylesheet" in the head of your HTML :
HTML template
<!-- add code to the <body> of the page -->
<body>
<h1>Hello!</h1>
{{> welcomePage}}
</body>
<!-- define a template called welcomePage -->
<template name="welcomePage">
<!-- add code to the <head> of the page -->
<head>
<title>My website!</title>
<link rel="stylesheet" href="/{{appropriateStylesheet}}" type="text/css" />
</head>
<p>Welcome to my website!</p>
<button id="red">Red</button>
<button id="blue">Blue</button>
</template>
Create a helper function.
JavaScript:
if (Meteor.isClient) {
Session.set("stylesheet","red.css");
Template.registerHelper("appropriateStylesheet", function() {
return Session.get("stylesheet");
});
Template.welcomePage.events({
'click #blue' : function() { Session.set("stylesheet","two.css"); },
'click #red' : function() { Session.set("stylesheet","one.css"); },
});
}
You can do exactly the same thing with JS files. Put them under /public and meteor ignores them.
I want to serve a static HTML file from MeteorJS's public folder (as is possible with Rails and Express). The reason I'm doing this is because I have one template for the dynamic "admin" part of my webapp and another for the sales-y "frontend" part of the app.
I don't want this file to be wrapped in a Meteor template as suggested in this answer as it will automatically bring in the minified CSS, etc... that the dynamic pages use.
Is there a way I can setup the public folder (and all its subfolders) so that it serves index.html? This way http://app.com/ will load public/index.html?
You could use the private folder instead and then use Assets.getText to load the contents of the file, then serve it with a server-side router from iron-router.
So off the top of my head the code would look something like this:
if (Meteor.isServer) {
Router.map(function() {
this.route('serverRoute', {
path: '/',
where: 'server',
action: function() {
var contents = Assets.getText('index.html');
this.response.end(contents);
}
});
});
}
this is what I put in bootstrap.js
Router.route('/', {
where: 'server'
}).get(function() {
var contents;
contents = Assets.getText('index.html');
return this.response.end(contents);
});