i'm followed by dud from tutorial, and now have some issue,
Routing is not work, and when i run gulp, i have and error from 'gulp-eslint' in terminal:
/home/im/Project/react/psadmin/src/main.js
7:13 error Unexpected token =
/home/im/Project/react/psadmin/src/components/homePage.js
6:13 error Unexpected token =
/home/im/Project/react/psadmin/src/components/about/aboutPage.js
6:13 error Unexpected token =
this is my files:
"use strict"
var gulp = require('gulp')
var connect = require('gulp-connect') // Runs a local dev server
var open = require('gulp-open') // Open a URL in a web browser
var browserify = require('browserify') // Bundle JS
var reactify = require('reactify') // Transform React JSX to JS
var source = require('vinyl-source-stream') // Use convertional text streams with Gulp
var concat = require('gulp-concat') // Concatenates files
var lint = require('gulp-eslin') // Lint JS files, including JSX
var config = {
port: 9005,
devBaseUrl: 'http://localhost',
paths: {
html: './src/*.html',
js: './src/**/*.js',
css: [
'node_modules/bootstrap/dist/css/bootstrap.min.css',
'node_modules/bootstrap/dist/css/bootstrap-theme.min.css'
],
dist: './dist',
mainJs: './src/main.js'
}
}
// Start a local development server
gulp.task('connect', () => {
connect.server({
root: ['dist'],
port: config.port,
base: config.devBaseUrl,
livereload: true
})
})
gulp.task('open', ['connect'], () => {
gulp.src('dist/index.html')
.pipe(open({ uri: config.devBaseUrl + ':' + config.port + '/'}))
})
gulp.task('html', () => {
gulp.src(config.paths.html)
.pipe(gulp.dest(config.paths.dist))
.pipe(connect.reload())
})
gulp.task('js', () => {
browserify(config.paths.mainJs)
.transform(reactify)
.bundle()
.on('error', console.error.bind(console))
.pipe(source('bundle.js'))
.pipe(gulp.dest(config.paths.dist + '/scripts'))
.pipe(connect.reload())
})
gulp.task('css', () => {
gulp.src(config.paths.css)
.pipe(concat('bundle.css'))
.pipe(gulp.dest(config.paths.dist + '/css'))
})
gulp.task('lint', () => {
return gulp.src(config.paths.js)
.pipe(lint({config: 'eslint.config.json'}))
.pipe(lint.format())
})
gulp.task('watch', () => {
gulp.watch(config.paths.html, ['html'])
gulp.watch(config.paths.js, ['js', 'lint'])
gulp.watch(config.paths.css, ['css'])
})
gulp.task('default', ['html', 'js', 'lint', 'css', 'open', 'watch'])
main.js
$ = jQuery = require('jquery')
var React = require('react')
var Home = require('./components/homePage')
var About = require('./components/about/aboutPage')
var App = React.createClass({
render: () => {
var Child
switch(this.props.route) {
case 'about':
Child = About
break
default:
Child = Home
}
return (
<div>
<Child />
</div>
)
}
})
function render() {
var route = window.location.hash.substr(1)
React.render(<App route={route} />, document.getElementById('app'))
}
window.addEventListener('hashchange', render)
render()
homePage.js
"use strict"
var React = require('react')
var Home = React.createClass({
render: () => {
return (
<div className="jumbotron">
<h1>Pluralsight Administration</h1>
<p>React, React Router, and Flux for ultra-responsive web apps.</p>
</div>
)
}
})
module.exports = Home
aboutPage.js
"use strict"
var React = require('react')
var About = React.createClass({
render: () => {
return (
<div>
<h1>About</h1>
<p>
This application uses the following technologies:
<ul>
<li>React</li>
<li>React Router</li>
<li>Flux</li>
<li>Node</li>
<li>Gulp</li>
<li>Browserify</li>
<li>Bootstrap</li>
</lu>
</div>
)
}
})
module.exports = About
eslint.conf.json
{
"root": true,
"ecmaFeatures": {
"jsx": true
},
"env": {
"browser": true,
"node": true,
"jquery": true
},
"rules": {
"quotes": 0,
"no-trailing-spaces": 0,
"eol-last": 0,
"no-unused-vars": 0,
"no-underscore-dangle": 0,
"no-alert": 0,
"no-lone-blocks": 0
},
"globals": {
"jQuery": true,
"$": true
}
}
Link to full application where i'm stoped is here on git
here
Link to current tutorial here
You are off a little on your implementation
With React Create class you need to do the following
var About = React.createClass({
render: function() {
return (
<div>
<h1>About</h1>
<p>
This application uses the following technologies:
<ul>
<li>React</li>
<li>React Router</li>
<li>Flux</li>
<li>Node</li>
<li>Gulp</li>
<li>Browserify</li>
<li>Bootstrap</li>
</lu>
</div>
)
}
})
Or you can use the ES6 syntax
class About extends React.Component {
render() {
return (
<div>
<h1>About</h1>
<p>
This application uses the following technologies:
<ul>
<li>React</li>
<li>React Router</li>
<li>Flux</li>
<li>Node</li>
<li>Gulp</li>
<li>Browserify</li>
<li>Bootstrap</li>
</lu>
</div>
)
}
}
Or you can use the ES6 arrow syntax
const About = () => (
<div>
<h1>About</h1>
<p>
This application uses the following technologies:
<ul>
<li>React</li>
<li>React Router</li>
<li>Flux</li>
<li>Node</li>
<li>Gulp</li>
<li>Browserify</li>
<li>Bootstrap</li>
</lu>
</div>
)
Your syntax is wrong.
replace render: () => {
by
render() { return (...) }
or if your project does not support ES6:
render: function(){return ...}
and tell me if that fixes the problem
Related
I am updating to gulp4 from 3.9.1 on an old project. Due to the upgrade I've had to rewrite the tasks as per the documentation. I've switched to name functions and I am using gulp.series but I am getting errors such as:
AssertionError [ERR_ASSERTION]: Task never defined: mobile_styles
Below is my gulp file. It consists mostly of watch scripts for two languages on desktop and mobile
var fontName = "project-icons",
gulp = require("gulp"),
sass = require("gulp-sass"),
sourcemaps = require("gulp-sourcemaps"),
iconfont = require("gulp-iconfont"),
iconfontCss = require("gulp-iconfont-css");
var sassOptions = {
errLogToConsole: true,
outputStyle: "expanded"
};
function iconfont(done) {
gulp.src(["./icons/*.svg"])
.pipe(
iconfontCss({
fontName: fontName,
path: "sass",
targetPath: "../sass/static/icons/_icons.sass",
fontPath: "./fonts/",
cssClass: "icon"
})
)
.pipe(
iconfont({
formats: ["ttf", "eot", "woff", "woff2", "svg"],
fontName: fontName,
normalize: true,
fixedWidth: true,
centerHorizontally: true
})
)
.on("glyphs", function(glyphs, options) {})
.pipe(gulp.dest("./fonts/"));
done();
}
function desktop_styles() {
return gulp
.src("./sass/_en/style.sass")
.pipe(
sourcemaps.init({
loadMaps: true,
identityMap: true,
sourceRoot: "../css/"
})
)
.pipe(sass(sassOptions).on("error", sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest("./css/"));
}
function desktop_styles_rtl() {
return gulp
.src("./sass/_ar/style.sass")
.pipe(
sourcemaps.init({
loadMaps: true,
identityMap: true,
sourceRoot: "../css/"
})
)
.pipe(sass(sassOptions).on("error", sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest("./css/lang/rtl"));
}
function mobile_styles() {
return gulp
.src("./sass/en/mobile/style.sass")
.pipe(sass(sassOptions).on("error", sass.logError))
.pipe(gulp.dest("./css/m"));
}
function mobile_styles_rtl() {
return gulp
.src("./sass/rtl/m/style.sass")
.pipe(sass(sassOptions).on("error", sass.logError))
.pipe(gulp.dest("./css/lang/rtl/m"));
}
gulp.task(
"watch:all",
gulp.series(
"mobile_styles",
"mobile_styles_rtl",
"desktop_styles",
"desktop_styles_rtl",
function() {
gulp.watch("./sass/**/*.sass", ["mobile_styles"]);
gulp.watch("./sass/**/*.sass", ["mobile_styles_rtl"]);
gulp.watch("./sass/**/*.sass", ["desktop_styles"]);
gulp.watch("./sass/**/*.sass", ["desktop_styles_rtl"]);
}
)
);
gulp.task(
"watch:AllDesktop",
gulp.series("desktop_styles", "desktop_styles_rtl", function() {
gulp.watch("./sass/**/*.sass", ["desktop_styles"]);
gulp.watch("./sass/**/*.sass", ["desktop_styles_rtl"]);
})
);
gulp.task(
"watch:desktop_styles_rtl",
gulp.series("desktop_styles_rtl", function() {
gulp.watch("./sass/**/*.sass", ["desktop_styles_rtl"]);
})
);
gulp.task(
"watch:desktop_en",
gulp.series("desktop_styles", function() {
gulp.watch("./sass/**/*.sass", ["desktop_styles"]);
})
);
gulp.task(
"watch:mobile_rtl",
gulp.series("mobile_styles_rtl", function() {
gulp.watch("./sass/**/*.sass", ["mobile_styles_rtl"]);
})
);
gulp.task(
"watch:mobile_en",
gulp.series("mobile_styles", function() {
gulp.watch("./sass/**/*.sass", ["mobile_styles"]);
})
);
gulp.task(
"watch:AllMobile",
gulp.series("mobile_styles", "mobile_styles_rtl", function() {
gulp.watch("./sass/**/*.sass", ["mobile_styles"]);
gulp.watch("./sass/**/*.sass", ["mobile_styles_rtl"]);
})
);
Can someone help me with troubleshooting this? Should I switch to gulp.parallels for the tasks or am I refactoring this the wrong way?
All of your watches should be of the form:
gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles)
So, for example, change to:
gulp.task(
"watch:all",
gulp.series(
mobile_styles,
mobile_styles_rtl,
desktop_styles,
desktop_styles_rtl,
function(done) {
gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles));
gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles_rtl));
gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles));
gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles_rtl));
done();
}
)
);
Note that when referring to named functions they are not enclosed in quotes (as a task created with gulp.task would be). And I added the done to signal when that task has completed which will be important.
You have to change much of your code to this form. And your gulp.task calls could be converted to named functions as well. So the beginning of the above code could be:
function watch_all() {
gulp.series(….
[can't use the : in a function name though.]
I am trying to use KendoUI datetimepicker in my angular(1.x) project. When I directly reference the KendoUI js file in my index.html page, it works fine. But when i try to add a reference to it via gulp, it keeps on throwing the following error:
Uncaught ReferenceError: module is not defined at kendo.ui.core.js:1
In my package.json, I have
"kendo-ui-core": "2017.2.621"
And this is what i have in my gulp file:
/// <reference path="node_modules/moment/moment.js" />
/// <reference path="node_modules/moment/src/moment.js" />
/// <binding BeforeBuild='clean' AfterBuild='build' Clean='clean' />
var gulp = require("gulp"),
rimraf = require("rimraf"),
less = require('gulp-less'),
cssmin = require('gulp-cssmin'),
concat = require("gulp-concat-sourcemap"),
rename = require('gulp-rename'),
jshint = require('gulp-jshint'),
ignore = require('gulp-ignore'),
cacheBuster = require('gulp-cache-bust'),
templateCache = require('gulp-angular-templatecache');
var paths = {
webroot: "./build/",
approot: "./app/"
};
paths.fonts = "./fonts/**/*";
paths.less = "./less/**/*.less";
paths.images = "./images/**/*";
paths.js = paths.approot + "**/*.js";
paths.specs = paths.approot + "**/*.spec.js";
paths.views = paths.approot + "**/*.html";
gulp.task("clean", function (cb) {
rimraf(paths.webroot, cb);
});
gulp.task('jshint', function () {
return gulp.src(paths.js)
.pipe(ignore.exclude('*.spec.js'))
.pipe(jshint('jshint.config.json'))
.pipe(jshint.reporter('gulp-jshint-file-reporter', {
filename: __dirname + '/jshint-output.log'
}));
//.pipe(jshint.reporter("fail")); // Throw error and fail build
});
gulp.task("build:js", function () {
return gulp.src([
paths.approot + "**/*.module.js",
paths.approot + "**/*.config.js",
paths.js,
"!" + paths.specs
])
.pipe(concat('app.js', { sourcesContent: true }))
.pipe(gulp.dest(paths.webroot + "app/"));
});
gulp.task("build:views", function () {
return gulp.src([paths.views])
.pipe(templateCache({ root: "app", module: "goalEnvision" }))
.pipe(gulp.dest(paths.webroot + "app/"));
});
gulp.task("build:fonts", function () {
return gulp.src([
paths.fonts,
'node_modules/bootstrap/dist/fonts/*',
'node_modules/bootstrap-less/fonts/*'
])
.pipe(gulp.dest(paths.webroot + "fonts/"));
});
gulp.task("build:less", function () {
return gulp.src(["./less/**/app.less"]) //compile app + theme less files
.pipe(less({
paths: [
'.',
'node_modules/angucomplete-alt/angucomplete-alt.css'
//'./node_modules/bootstrap-less',
]
}))
.pipe(gulp.dest(paths.webroot + "css/"));
});
gulp.task("build:images", function () {
return gulp.src([paths.images])
.pipe(gulp.dest(paths.webroot + "images/"));
});
gulp.task("build:index.html", function () {
return gulp.src("index.html")
.pipe(gulp.dest(paths.webroot));
});
gulp.task("build:favicon.ico", function () {
return gulp.src("favicon.ico")
.pipe(gulp.dest(paths.webroot));
});
gulp.task("build:cache-bust", ["build:index.html", "build:js", "build:less", "build:libs.js", "build:libs.css"], function () {
return gulp.src(paths.webroot + "index.html")
.pipe(cacheBuster())
.pipe(gulp.dest(paths.webroot));
});
gulp.task('build:libs.js', function () {
gulp.src([
'node_modules/jquery/dist/jquery.min.js',
'node_modules/angular/angular.min.js',
'node_modules/angular-dynamic-locale/dist/tmhDynamicLocale.min.js',
'node_modules/angular-xeditable/dist/js/xeditable.min.js',
'node_modules/angular-file-upload/dist/angular-file-upload.min.js',
'node_modules/angular-loading-bar/build/loading-bar.min.js',
'node_modules/ng-img-crop/compile/minified/ng-img-crop.js',
'node_modules/angular-ui-router/release/angular-ui-router.min.js',
'node_modules/angular-local-storage/dist/angular-local-storage.min.js',
'node_modules/highcharts/highcharts.js',
'node_modules/highcharts-ng/dist/highcharts-ng.min.js',
'node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js',
'node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js',
'node_modules/angular-translate/dist/angular-translate.min.js',
'node_modules/angular-animate/angular-animate.min.js',
'node_modules/angular-toastr/dist/angular-toastr.min.js',
'node_modules/angular-toastr/dist/angular-toastr.tpls.min.js',
'node_modules/jquery-ui-dist/jquery-ui.min.js',
'node_modules/angular-ui-sortable/dist/sortable.min.js',
'node_modules/angular-touch/angular-touch.js',
'node_modules/sweetalert/dist/sweetalert.min.js',
'node_modules/angular-sweetalert/SweetAlert.min.js',
'node_modules/moment/min/moment.min.js',
'node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.js',
'node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.templates.js',
'node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js',
//inkluderas i common/components/guide behövde ändra i källkoden för att disabla automatisk scrolling
//'node_modules/angular-tour/dist/angular-tour-tpls.js',
'node_modules/angular-moment/angular-moment.min.js',
'node_modules/angular-sanitize/angular-sanitize.js',
'node_modules/angular-bootstrap-confirm/dist/angular-bootstrap-confirm.js',
'node_modules/angular-hotkeys/build/hotkeys.min.js',
'node_modules/angucomplete-alt/dist/angucomplete-alt.min.js',
'node_modules/angular-sticky-plugin/dist/angular-sticky.min.js',
'node_modules/kendo-ui-core/js/kendo.ui.core.js',
//Tried with different permutation/combination of these files as well
//'node_modules/kendo-ui-core/js/kendo.core.js',
//'node_modules/kendo-ui-core/js/kendo.popup.js',
//'node_modules/kendo-ui-core/js/kendo.calendar.js',
//'node_modules/kendo-ui-core/js/kendo.datepicker.js',
//'node_modules/kendo-ui-core/js/kendo.timepicker.js',
//'node_modules/kendo-ui-core/js/kendo.datetimepicker.js',
//'node_modules/kendo-ui-core/js/kendo.angular.js',
])
.pipe(concat('libs.js', { sourcesContent: true }))
.pipe(gulp.dest(paths.webroot + "/libs"));
});
gulp.task('build:libs.css', function () {
gulp.src([
'node_modules/angular-toastr/dist/angular-toastr.css',
'node_modules/sweetalert/dist/sweetalert.css',
'node_modules/angular-bootstrap-datetimepicker/src/css/datetimepicker.css',
'node_modules/angular-xeditable/dist/css/xeditable.css',
'node_modules/ng-img-crop/compile/minified/ng-img-crop.css',
'node_modules/angular-loading-bar/build/loading-bar.css',
'node_modules/bootstrap-toggle/css/bootstrap-toggle.css',
'node_modules/angular-tour/dist/angular-tour.css'
])
.pipe(concat('libs.css', { sourcesContent: true }))
.pipe(gulp.dest(paths.webroot + "/libs"));
});
gulp.task("build:webconfig", function () {
return gulp.src("Web.config")
.pipe(gulp.dest(paths.webroot));
});
gulp.task("build", ["jshint", "build:js", "build:less", "build:fonts", "build:images", "build:libs.js", "build:libs.css", "build:views", "build:index.html", "build:favicon.ico", "build:cache-bust", "build:webconfig"]);
gulp.task('watchAndBuild', function () {
gulp.watch(paths.js, ['build']);
gulp.watch(paths.views, ['build']);
});
The exact line where it throws error relates to
I think I am not including the kendoui files in the correct manner. What changes do I need to get it working?
The only way I was able to solve this error was by including a direct reference to the kendo ui js file in the index.html. Hope it will help others.
I am trying to create a component with Vue.js. My component is currently defined like this:
MyComponent.vue
<template id="my-template">
<div>
<button class="btn" v-on:click="increment">increment</button>
</div>
</template>
<script type="text/javascript">
Vue.component('incrementer', {
template: '#my-template',
props: {
i: {
type: Number,
default: 1,
}
},
data: function() {
return {
count: 0
}
},
methods: {
increment: function() {
this.count = this.count + this.i;
}
}
});
</script>
I am trying to create some automated tests for this component. In an attempt to do this, I have the following:
my-component.spec.js
const MyComponent = require('../src/MyComponent.vue');
describe('my-component', function() {
// Inspect the raw component options
it('has a created hook', () => {
expect(typeof MyComponent .created).toBe('function')
});
});
I am trying to run this test via Jasmine through Gulp. In Gulp, my test task looks like this:
gulpfile.js
gulp.task('test', ['build'], function() {
return gulp.src(['test/**/*spec.js'])
.pipe(jasmine({
timeout: 10000,
includeStackTrace: false,
color: false
}))
;
});
When this task gets executed, I receive the following error:
(function (exports, require, module, __filename, __dirname) { <template id="my-template">
^
SyntaxError: Unexpected token <
I don't understand why I'm receiving this error. What do I need to do to test a component in Vue.js via Jasmine?
Thank you!
According to Vue Docs:
In terms of code structure for testing, you don’t have to do anything special in your components to make them testable. Just export the raw options
When you test that component, all you have to do is import the object along with Vue to make many common assertions
So in you MyComponent.vue file:
<template>
<div>
<button class="btn" v-on:click="increment">increment</button>
</div>
</template>
<script type="text/javascript">
export default {
props: {
i: {
type: Number,
default: 1,
}
},
data: function() {
return {
count: 0
}
},
methods: {
increment: function() {
this.count = this.count + this.i;
}
}
}
</script>
Then in your my-component.spec.js:
const Vue = reuqire("vue")
const MyComponent = require('../src/MyComponent.vue');
describe('my-component', function() {
// Inspect the raw component options
it('has a created hook', () => {
expect(typeof MyComponent.created).toBe('function')
});
});
I have a site, which technically consists of a number of separate SPAs.
App/Admin
App/Signup
App/MainApp
How should I organize the App folder and the gulp build to make this into 3-4 separate files / modules that are loaded when required.
Since I had to spend a whole day getting this to work, I will answer my own question.
First, prepare a loader site. This would be the main site that is actually loaded that is responsible from loading all the other sites.
App/main.js - Contains the requirejs setup
In this we would run app.setRoot('shell', 'entrance');
App/shell.js - contains the router config
return router.map([
{ route: 'Admin/*all', moduleId: "Admin/index", nav: true },
{ route: 'Signup/*all', moduleId: "Signup/index", nav: true },
{ route: '*all', moduleId: "MainApp/index", nav: true }
])
.buildNavigationModel()
.activate();
App/shell.html - contains the router usage and common header/footer/loading shield
<div style="height: 100%" data-bind="css: { loading: isLoading }">
<!-- ko compose: 'loading.html'--><!-- /ko -->
<div class="header">...</div>
<!-- ko router: { transition:'entrance' } --><!-- /ko -->
</div>
App/*.js - Files shared among all the SPAs
App/MainApp/index.js - Contains the sub router for that SPA
define(["require", "exports", "plugins/router"], function (require, exports, router) {
"use strict";
var childRouter = router.createChildRouter()
.makeRelative({
moduleId: 'MainApp',
fromParent: false //<!----- FALSE for MainApp, TRUE for other SPA
})
.map([
{ route: '', moduleId: "viewmodels/test", nav: true },
])
.mapUnknownRoutes("viewmodels/err", 'err')
.buildNavigationModel();
return (function () {
function class_1() {
this.router = childRouter;
}
return class_1;
}());
});
App/MainApp/index.html - Uses the router, and performs any rendering of submenues or whatever. Here the bare minimum:
<div data-bind="router: { }"></div>
App/Admin/index.js
Is identical to the MainApp.js, except for the fromParent set to true and moduleId set to the SPAs name.
This should work fine in debug mode now.
The gulp setup becomes:
gulpfile.js
var durandal = require('gulp-durandal');
gulp.task('build', [], function () {
return gulp.start(['build-admin', 'build-signup', 'build-mainapp', 'build-base']);
});
function buildModule(name) {
var path = name + '/';
return durandal({
baseDir: 'App',
output: name + '.js',
minify: true,
almond: false,
verbose: false,
moduleFilter: function (moduleName) {
return moduleName.indexOf(path) > -1;
},
rjsConfigAdapter: function (config) {
config.stubModules = config.exclude;
config.exclude = ["main"];
config.stubModules.push('text');
return config;
}
})
.pipe(gulp.dest('dist'));
}
gulp.task('build-admin', [], function () {
return buildModule('Admin');
});
gulp.task('build-signup', [], function () {
return buildModule('Signup');
});
gulp.task('build-mainapp', [], function () {
return buildModule('MainApp');
});
gulp.task('build-base', [], function () {
return durandal({
baseDir: 'App',
output: 'main.js',
minify: true,
verbose: false,
moduleFilter: function (moduleName) {
return moduleName.indexOf('Admin/') === -1 && moduleName.indexOf('MainApp/') === -1 && moduleName.indexOf('Signup/') === -1;
},
rjsConfigAdapter: function (config) {
config.stubModules = config.exclude;
config.exclude = [];
return config;
}
})
.pipe(gulp.dest('dist'));
});
This will now result in
dist/main.js
dist/Admin.js
dist/MainApp.js
dist/Signup.js
In your default.html (or whatever you call it), you need to tell it how to load these files:
<script>window.require = {
bundles: { 'MainApp': ['MainApp/index'],'Signup': ['Signup/index'], 'Admin': ['Admin/index'] }
};</script>
<script type="text/javascript" data-main="main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>
The reason for this being in the html files rather than the main.js, is that the bundles are only used for the compiled version.
I'm following this tutorial on using angularjs alongside laravel: http://angular-tips.com/blog/2014/11/working-with-laravel-plus-angular-part-2/. However, if I define a route in config.routes.js which points to a controller, any controller, my app crashes. In the console the error "Error: too much recursion" comes up, along with a useless stack trace.
All my files are exactly the same as in the tutorial, I only changed the name of the route and the controller, but that shouldn't make a difference.
I googled around a bit and it seems this error might be caused by using a wrong version of jquery. I use angularjs 1.3.0 and I have no idea which jquery version my app is using, but I used npm install angular, so it'd be weird if that installed a wrong version, right?
I'm completely lost on why this happens and also very frustrated, so any help would be greatly appreciated.
Thanks.
EDIT: Added code:
app/js/config.routes.js
angular.module('app').config(function($routeProvider, $locationProvider)
{
$locationProvider.html5Mode(true).hashPrefix('!');
$routeProvider.when('/transactions',
{
templateUrl: 'features/transactions/transactions.tpl.html',
controller: 'Transactions'
});
});
app/js/transactions/transactions.js:
angular.module('app').controller('Transactions', function($scope, $http)
{
$http.get('/api/transactions').then(function(result)
{
$scope.shows = result.data;
});
});
transactions.tpl.html is empty.
app.js:
angular.module('app', ['ngRoute']);
EDIT 2: added gulp.js
The only thing I changed here is, is that I added the 'webserver' task.
var gulp = require('gulp');
var fs = require('fs');
var plugins = require('gulp-load-plugins')();
var es = require('event-stream');
var del = require('del');
var publicFolderPath = '../public';
var paths = {
appJavascript: ['app/js/app.js', 'app/js/**/*.js'],
appTemplates: 'app/js/**/*.tpl.html',
appMainSass: 'app/scss/main.scss',
appStyles: 'app/scss/**/*.scss',
appImages: 'app/images/**/*',
indexHtml: 'app/index.html',
vendorJavascript: ['vendor/js/angular.js', 'vendor/js/**/*.js'],
vendorCss: ['vendor/css/**/*.css'],
finalAppJsPath: '/js/app.js',
finalAppCssPath: '/css/app.css',
specFolder: ['spec/**/*_spec.js'],
publicFolder: publicFolderPath,
publicJavascript: publicFolderPath + '/js',
publicAppJs: publicFolderPath + '/js/app.js',
publicCss: publicFolderPath + '/css',
publicImages: publicFolderPath + '/images',
publicIndex: publicFolderPath + '/angular.html',
publicJsManifest: publicFolderPath + '/js/rev-manifest.json',
publicCssManifest: publicFolderPath + '/css/rev-manifest.json'
};
gulp.task('scripts-dev', function() {
return gulp.src(paths.vendorJavascript.concat(paths.appJavascript, paths.appTemplates))
.pipe(plugins.if(/html$/, buildTemplates()))
.pipe(plugins.sourcemaps.init())
.pipe(plugins.concat('app.js'))
.pipe(plugins.sourcemaps.write('.'))
.pipe(gulp.dest(paths.publicJavascript));
});
gulp.task('scripts-prod', function() {
return gulp.src(paths.vendorJavascript.concat(paths.appJavascript, paths.appTemplates))
.pipe(plugins.if(/html$/, buildTemplates()))
.pipe(plugins.concat('app.js'))
.pipe(plugins.ngAnnotate())
.pipe(plugins.uglify())
.pipe(plugins.rev())
.pipe(gulp.dest(paths.publicJavascript))
.pipe(plugins.rev.manifest({path: 'rev-manifest.json'}))
.pipe(gulp.dest(paths.publicJavascript));
});
gulp.task('styles-dev', function() {
return gulp.src(paths.vendorCss.concat(paths.appMainSass))
.pipe(plugins.if(/scss$/, plugins.sass()))
.pipe(plugins.concat('app.css'))
.pipe(gulp.dest(paths.publicCss));
});
gulp.task('styles-prod', function() {
return gulp.src(paths.vendorCss.concat(paths.appMainSass))
.pipe(plugins.if(/scss$/, plugins.sass()))
.pipe(plugins.concat('app.css'))
.pipe(plugins.minifyCss())
.pipe(plugins.rev())
.pipe(gulp.dest(paths.publicCss))
.pipe(plugins.rev.manifest({path: 'rev-manifest.json'}))
.pipe(gulp.dest(paths.publicCss));
});
gulp.task('images', function() {
return gulp.src(paths.appImages)
.pipe(gulp.dest(paths.publicImages));
});
gulp.task('indexHtml-dev', ['scripts-dev', 'styles-dev'], function() {
var manifest = {
js: paths.finalAppJsPath,
css: paths.finalAppCssPath
};
return gulp.src(paths.indexHtml)
.pipe(plugins.template({css: manifest['css'], js: manifest['js']}))
.pipe(plugins.rename(paths.publicIndex))
.pipe(gulp.dest(paths.publicFolder));
});
gulp.task('indexHtml-prod', ['scripts-prod', 'styles-prod'], function() {
var jsManifest = JSON.parse(fs.readFileSync(paths.publicJsManifest, 'utf8'));
var cssManifest = JSON.parse(fs.readFileSync(paths.publicCssManifest, 'utf8'));
var manifest = {
js: '/js/' + jsManifest['app.js'],
css: '/css/' + cssManifest['app.css']
};
return gulp.src(paths.indexHtml)
.pipe(plugins.template({css: manifest['css'], js: manifest['js']}))
.pipe(plugins.rename(paths.publicIndex))
.pipe(gulp.dest(paths.publicFolder));
});
gulp.task('lint', function() {
return gulp.src(paths.appJavascript.concat(paths.specFolder))
.pipe(plugins.jshint())
.pipe(plugins.jshint.reporter('jshint-stylish'));
});
gulp.task('testem', function() {
return gulp.src(['']) // We don't need files, that is managed on testem.json
.pipe(plugins.testem({
configFile: 'testem.json'
}));
});
gulp.task('clean', function(cb) {
del([paths.publicJavascript, paths.publicImages, paths.publicCss, paths.publicIndex], {force: true}, cb);
});
gulp.task('watch', ['indexHtml-dev', 'images'], function() {
gulp.watch(paths.appJavascript, ['lint', 'scripts-dev']);
gulp.watch(paths.appTemplates, ['scripts-dev']);
gulp.watch(paths.vendorJavascript, ['scripts-dev']);
gulp.watch(paths.appImages, ['images-dev']);
gulp.watch(paths.specFolder, ['lint']);
gulp.watch(paths.indexHtml, ['indexHtml-dev']);
gulp.watch(paths.appStyles, ['styles-dev']);
gulp.watch(paths.vendorCss, ['styles-dev']);
});
gulp.task('webserver', ['indexHtml-dev', 'images-dev'], function() {
plugins.connect.server({
root: paths.tmpFolder,
port: 5000,
livereload: true,
middleware: function(connect, o) {
return [ (function() {
var url = require('url');
var proxy = require('proxy-middleware');
var options = url.parse('http://localhost:8000/api');
options.route = '/api';
return proxy(options);
})(), historyApiFallback ];
}
});
});
gulp.task('default', ['watch']);
gulp.task('production', ['scripts-prod', 'styles-prod', 'images', 'indexHtml-prod']);
function buildTemplates() {
return es.pipeline(
plugins.minifyHtml({
empty: true,
spare: true,
quotes: true
}),
plugins.angularTemplatecache({
module: 'app'
})
);
}