I am trying to load an object file from the template. The template is based on ThreeJs library and I am loading using an object loader, see the code here:
loader.load( '{% static "Simu/test.obj" %}', function ( obj ) {
scene.add( obj );
} );
The object file test.obj is stored in a static sub-folder such as myStatic/Simu/test.obj, this is the tree directory of my app:
.
├── myStatic
│ ├── css
│ ├── img
│ ├── js
│ └── Simu
│ ├── 0
│ ├── constant
│ │ ├── polyMesh
│ │ └── triSurface
│ └── system
├── pde
│ ├── migrations
│ │ └── __pycache__
│ ├── __pycache__
│ └── templates
│ └── pde
├── pdeWeb
│ └── __pycache__
└── static
├── admin
│ ├── css
│ │ └── vendor
│ │ └── select2
│ ├── fonts
│ ├── img
│ │ └── gis
│ └── js
│ ├── admin
│ └── vendor
│ ├── jquery
│ ├── select2
│ │ └── i18n
│ └── xregexp
├── css
├── img
└── js
However, when I run the code it cannot find the file and it gives me this error:
Not Found: /pde/{% static "Simu/test.obj" %}
"GET /pde/%7B%%20static%20%22Simu/test.obj%22%20%%7D HTTP/1.1" 404 2102
It seems it is not going to the static folder at all! it tries to reach a folder named pde, why this is happening?
Thank you very much!
I found the mistake. The loader was not in the html template but in a javascript in the static folder. That was causing the error.
I am using nativescript 2.3.0 with angular. I created a starter project with the following command
tns create projname --ng
I have the following folder structure
├── app
│ ├── app.css
│ ├── app.component.html
│ ├── app.component.ts
│ ├── main.ts
In side the main.ts file i have the following.
import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform";
import { NgModule } from "#angular/core";
import { AppComponent } from "./app.component";
#NgModule({
declarations: [AppComponent],
bootstrap: [AppComponent],
imports: [NativeScriptModule]
})
class AppComponentModule {}
platformNativeScriptDynamic().bootstrapModule(AppComponentModule);
Notice that I am importing the AppComponent on line 3
What I want to do is that I want to organize my code so that i have the app.component file in a separate folder
As shown below
│ ├── pages
│ │ └── app.component.ts
│ │ └── app.component.html
│ ├── app.css
│ ├── main.ts
I have changed the import in main.ts file to follows
import { AppComponent } from "./pages/app.component";
Moving the file app.component.html file give the following error.
Unhandled Exception
com.tns.nativescriptException:
Calling js method onCreateView failed
my first post, I have searched but cannot find a solution.
My content from routing cannot be seen in ng-view.
indext.html
<html lang="en" ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="static/js/app.js"></script>
</head>
<body>
<ng-view></ng-view>
</body>
</html>
app.js
var app = angular.module('myApp',[]);
app.config(['$routeProvider',
function($routeProvider,$locationProvider) {
$locationProvider.html5Mode(true);
console.log("Kom till config");
$routeProvider.
when('/', {templateUrl: 'static/partials/mainpage.html',
}).
otherwise({
redirectTo: '/'
});
}]);
I get no errors and do not know how to troubleshoot, I am thankful for your help.
File structure is
C:.
├───.idea
├───.openshift
│ ├───action_hooks
│ ├───cron
│ │ ├───daily
│ │ ├───hourly
│ │ ├───minutely
│ │ ├───monthly
│ │ └───weekly
│ └───markers
├───static
│ ├───css
│ ├───fonts
│ │ ├───font-awesome
│ │ │ ├───css
│ │ │ ├───fonts
│ │ │ ├───less
│ │ │ └───scss
│ │ └───fonts
│ ├───img
│ │ ├───client
│ │ ├───portfolio
│ │ └───team
│ ├───js
│ └───partials
└───templates
├───admin
└───security
It is a flask server that gives the resources to the client.
You have to add ngRoute to your module.
var app = angular.module('myApp',['ngRoute']);
Then use $routeRrovider like this:
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/', {
templateUrl: 'partials/partial.html'
}).
otherwise({
redirectTo: '/'
});
}]);
In your index.html use:
<div ng-view></div>
I am developing a web application using the MEAN framework and gulp for minification of the files. However, the application does not work because there are lots of "is not a function, got undefined" when I inspect the navigator console. When I read the app.min.js file which is generated with gulp, I can't find most of javascripts files (controllers, services and so on).
The folder structure that I am using for the client is the following:
client/
├── app.min.js
├── app.min.js.map
├── controllers
│ ├── auth
│ │ ├── login_controller.js
│ │ └── register_controller.js
│ ├── home
│ │ └── home_controller.js
│ ├── navigation
│ │ └── navigation_controller.js
│ └── profile
│ └── profile_controller.js
├── directives
│ └── navigation.js
├── index.html
├── main.js
├── services
│ ├── authentication.js
│ └── data.js
└── views
├── auth
│ ├── login
│ │ └── login.html
│ └── register
│ └── register.html
├── home
│ └── home.html
├── navigation
│ └── navigation.html
└── profile
└── profile.html
This the the gulp file which I am using:
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var watch = require("gulp-watch");
var sourcemaps = require("gulp-sourcemaps");
var ngHtml2Js = require("gulp-ng-html2js");
gulp.task("scripts", function() {
gulp.src([
"./client/**/*.js",
"!./client/app.min.js"
]).pipe(sourcemaps.init())
.pipe(concat("./app.min.js"))
.pipe(uglify({mangle: true}))
.pipe(gulp.dest("client"))
.pipe(sourcemaps.write("./"))
.pipe(gulp.dest("client"));
});
gulp.task("watch", function() {
watch(["./client/**/*.js", "!./client/**/*.test.js", "!./client/app.min.js"], function() {
gulp.start("scripts");
});
});
gulp.task("default", ["scripts", "watch"]);
Thanks in advance.
EDIT:
This is the generated app.min.js file:
!function(){function t(t,e){t.when("/",{templateUrl:"views/home/home.html",controller:"homeCtrl",controllerAs:"vm"}).when("/register",{templateUrl:"views/register/register.html",controller:"registerCtrl",controllerAs:"vm"}).when("/login",{templateUrl:"views/login/login.html",controller:"loginCtrl",controllerAs:"vm"}).when("/profile",{templateUrl:"views/profile/profile.html",controller:"profileCtrl",controllerAs:"vm"}).otherwise({redirectTo:"/"}),e.html5Mode(!0)}function e(t,e,n){t.$on("$routeChangeStart",function(t,o,r){"/profile"!==e.path()||n.isLoggedIn()||e.path("/")})}angular.module("app",["ngRoute"]),angular.module("app").config(["$routeProvider","$locationProvider",t]).run(["$rootScope","$location","authentication",e])}(),function(){function t(){return{restrict:"EA",templateUrl:"/views/navigation/navigation.html",controller:"navigationCtrl as navvm"}}angular.module("app").directive("navigation",t)}(),function(){function t(t,e){var n=function(t){e.localStorage["token"]=t},o=function(){return e.localStorage["token"]},r=function(){var t,n=o();return n?(t=n.split(".")[1],t=e.atob(t),t=JSON.parse(t),t.exp>Date.now()/1e3):!1},i=function(){if(r()){var t=o(),n=t.split(".")[1];return n=e.atob(n),n=JSON.parse(n),{email:n.email,name:n.name}}},l=function(e){return t.post("/api/register",e).success(function(t){n(t.token)})},a=function(e){return t.post("/api/login",e).success(function(t){n(t.token)})},c=function(){e.localStorage.removeItem("token")};return{currentUser:i,saveToken:n,getToken:o,isLoggedIn:r,register:l,login:a,logout:c}}angular.module("app").service("authentication",t),t.$inject=["$http","$window"]}(),function(){function t(t,e){var n=function(){return t.get("/api/profile",{headers:{Authorization:"Bearer "+e.getToken()}})};return{getProfile:n}}angular.module("app").service("appData",t),t.$inject=["$http","authentication"]}(),function(){function t(t,e){var n=this;n.credentials={name:"",email:"",password:""},n.onSubmit=function(){console.log("Submitting registration"),e.register(n.credentials).error(function(t){alert(t)}).then(function(){t.path("profile")})}}angular.module("app").controller("registerCtrl",t),t.$inject=["$location","authentication"]}(),function(){function t(){console.log("Home controller is running")}angular.module("app").controller("homeCtrl",t)}(),function(){function t(t,e){var n=this;n.user={},e.getProfile().success(function(t){n.user=t}).error(function(t){console.log(t)})}angular.module("app").controller("profileCtrl",t),t.$inject=["$location","appData"]}();
//# sourceMappingURL=app.min.js.map
I'm converting my project from Grunt to Gulp, and have multiple input jsx and output js files. I'm trying to write a [simple] task that'll correctly combine the sources into separate app files. The directory structure is this:
├── dist
│ └── js
│ ├── app1.js
│ └── app2.js
└── src
├── app1.jsx
├── app2.jsx
└── components
├── Button.jsx
├── Dashboard.jsx
├── Item.jsx
├── List.jsx
└── Widget.jsx
Where app1.jsx loads some components and app2.jsx loads different ones. For example:
app1.jsx
var Button = require('./components/Button');
var List = require('./components/List');
var Item = require('./components/Item');
// etc
app2.jsx
var Button = require('./components/Button');
var Dashboard = require('./components/Dashboard');
var Widget = require('./components/Widget');
var List = require('./components/List');
// etc ...
Different app files will be used in different pages, and components will be shared between requiring apps.
So the idea is to run a task that'll run through the requirements for the different app files and compile the outputs using browserify and reactify to separate files unders dist/js/. I got it to work up to the react part using gulp-react, but handling the browserification part proved tricky - here's my gulpfile.js:
var react = require('gulp-react');
var browserify = require('browserify');
var transform = require('vinyl-transform');
var del = require('del');
var browserified = transform(function(filename) {
var b = browserify();
return b.bundle();
});
gulp.task('clean', function() {
del.bind(null, ['dist']);
});
gulp.task('react', ['clean'], function() {
return gulp.src(['src/*.jsx'])
.pipe(react())
.pipe(browserified)
.pipe(gulp.dest('dist'));
});
This generates dist/js/{app1,app2}.js, but they only contain the JS code that defines the require(..) functionality, without the reactified source. If I remove the .pipe(browserified) statement, the files contain the correct reactified code, but don't load and requirements.
I would appreciate some pointers on what I'm doing wrong. thanks.
I think the problem is your path in:
gulp.task('react', ['clean'], function() {
return gulp.src(['src/*.jsx']) // here!
.pipe(react())
.pipe(browserified)
.pipe(gulp.dest('dist'));
});
You are compiling app1.jsx and app2.jsx but not the components/*.jsx files. You can use globbing-patterns to fix it:
gulp.task('react', ['clean'], function() {
return gulp.src(['src/**/*.jsx']) // here!
.pipe(react())
.pipe(browserified)
.pipe(gulp.dest('dist'));
});
Hope it helps :)