I can not get the exports value When I import external links
js file (main.js) as a dependency with requirejs,see the code.
console.log(m) //undefined
but I define the module "t" as a dependency in internal,it can get the return
value,see the code.
console.log(n) //test
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="https://cdn.bootcss.com/require.js/2.3.3/require.min.js" ></script>
<script type="text/javascript">
define("t",["main"],function(m){
console.log(m) //undefined
return "test";
});
require(["t"],function(n){
console.log(n) //test
});
</script>
</body>
</html>
Here is the main.js:
define("m",[],function(){
return "test";
})
So what's the wrong with it?
Define your main.js module like this and it should work fine:
define([],function(){
return "test";
});
Your HTML will be:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="https://cdn.bootcss.com/require.js/2.3.3/require.min.js"></script>
<script type="text/javascript">
requirejs.config({
baseUrl: '/', // set proper base path
paths: {
"main": "...path to main js...."
}
});
define("t", ["main"], function(m) {
console.log(m)
return "test";
});
require(["t"], function(n) {
console.log(n) //test
});
</script>
</body>
</html>
Here is a working pen
Related
I'm working with Jasmine to do tests on my angular app.
I'm am trying to test a function called calculateAverageAge which is defined in an angular factory called sharedFactory and it is telling me that sharedFactory is undefined.
ReferenceError: sharedFactory is not defined
I've included all the src files. Is there anything I'm missing?
Note: it's working in the actual app but not in the spec. Thanks
Jasmine suite
describe("SharedFactory", function () {
it("should calcuate the average age from an array of ages", function () {
var ageArray = [1,6,9,23,33,62,63,4,5];
var averageAge = sharedFactory.calculateAverageAge(ageArray);
expect(averageAge).not.toBeLessThan(1);
expect(averageAge).not.toBeGreaterThan(120);
});
});
SharedFactory.js
agesApp.factory('sharedFactory', function($http, loginFactory) {
return {
calculateAverageAge: function(ageArray){
var sumOfAges = 0;
var numberofAges = ageArray.length;
ageArray.forEach(function(age) {
sumOfAges += age;
});
var averageAge = sumOfAges/numberofAges;
return averageAge;
}
};
});
SpecRunner.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.6.1</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.6.1/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-2.6.1/jasmine.css">
<script src="lib/jasmine-2.6.1/jasmine.js"></script>
<script src="lib/jasmine-2.6.1/jasmine-html.js"></script>
<script src="lib/jasmine-2.6.1/boot.js"></script>
<script src="../js/angular.min.js"></script>
<script src="../js/angular-route.min.js"></script>
<script src="../js/angular-touch.min.js"></script>
<!-- include source files here... -->
<script src="../modules/agesApp.js"></script>
<script src="../factories/loginFactory.js"></script>
<script src="../factories/sharedFactory.js"></script>
<!-- include spec files here... -->
<script src="spec/SharedFactorySpec.js"></script>
</head>
<body>
</body>
</html>
See the code here: http://plnkr.co/edit/xIRiq10PSYRsvNE0YWx7?p=preview.
I'm getting the following 2 errors.
Route must provide either a path or regex property
[$compile:ctreq]
http://errors.angularjs.org/1.5.3/$compile/ctreq?p0=ngOutlet&p1=ngOutlet
index.html
<!DOCTYPE html>
<html ng-app="favMoviesList">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js</script>
<script src="https://unpkg.com/#angular/router#0.2.0/angular1/angular_1_router.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="module.js"></script>
<script src="movies-list-component.js"></script>
<script src="movie-rating-component.js"></script>
<script src="movie-app-component.js"></script>
</head>
<body>
<movie-app></movie-app>
</body>
</html>
module.js
(function(){
var module = angular.module("favMoviesList",["ngComponentRouter"]);
module.value("$routerRootComponent","movieApp");
module.component("appAbout",{
template:"This is about page"
});
}());
movie-app-component.js
(function(){
var module = angular.module("favMoviesList");
module.component("movieApp",{
templateUrl:"movie-app-component.html",
$routeConfig:[
{ path:"/list",component:"movieList",name:"List"},
{ path:"/about",component:"appAbout",name:"About"},
{ paht:"/**", redirectTo:["List"] }]
});
}());
You made a typo: paht should be path.
The second error is because your controller 'ngOutlet', required by directive 'ngOutlet', can't be found.
This is my script.js code:
var app = angular.module('starter', [])
app.provider('RouteHelpers', function () {
this.basepath = function (uri) {
return 'app/views/' + uri;
};
this.$get = function () {
};
});
app.config(function (RouteHelpers) {
console.log('Never gets here');
});
And this is index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='starter'>
</body>
</html>
And I'm getting this error in my browser: https://tinyurl.com/nbareaa
Does someone have an idea what is wrong in this code?
You have created a provider, which means if you try and inject it into your config function you must append Provider to the end of the providers name, for example:
app.config(function(RouteHelpersProvider){
});
You are getting the error because it cannot find the given injector. You can read more here under provider recipe.
Here is the structure:
Here are the sources:
/* #flow */
"use strict";
(function () {
const app = angular.module('Lesson2', ['ngRoute', 'ngAnimate'] );
app.config(function($routeProvider){
$routeProvider
.when('/what', { controller:'FavoCtrl', templateURL:'pages/what.html'})
.when('/where', { controller:'FavoCtrl', templateURL:'pages/where.html'})
.otherwise({redirectTo:'/what'});
});
app.controller('FavoCtrl', function ($scope) {
$scope.favouriteThings=[
{what:'raindrops', by:'on', where:'roses'},
{what:'whiskers', by:'on', where:'mittens'},
{what:'Brown paper packages', by:'tied up with', where:'strings'},
{what:'schnitzel', by:'with', where:'noodles'},
{what:'Wild geese', by:'that fly with', where:'the moon on their wings'},
{what:'girls', by:'in', where:'white dresses'},
{what:'Snowflakes', by:'that stay on', where:'my nose and eyelashes'}
];
})
})();
<!DOCTYPE html>
<html ng-app="Lesson2">
<head lang="en">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="scripts/app.js"></script>
<meta charset="UTF-8">
<title>Lesson 2</title>
</head>
<body>
Hello!
<ng-view></ng-view>
</body>
</html>
And two "what.html" and "where.html" are plain texts, like This is "where.html"
The hardest thing here is that browser does not throw any error, console is clean. Views are not loaded, all I see is "Hello" of "index.html"
Seems like you have a typo, in your config block, use templateUrl instead of templateURL.
It should look like:
app.config(function($routeProvider){
$routeProvider
.when('/what', { controller:'FavoCtrl', templateUrl:'pages/what.html'})
.when('/where', { controller:'FavoCtrl', templateUrl:'pages/where.html'})
.otherwise({redirectTo:'/what'});
});
First you have a typo in your route configuration, it is "templateUrl" and not "templateURL".
If this doesn't solve your problem try adding the controller in your index.html
<html ng-app="Lesson2" ng-controller="FavoCtrl">
I'm playing around with ReactJS. I have defined three components, which are nested:
UserProfile.jsx
var React = require('react');
var UserProfile = React.createClass({
getInitialState: function() {
return {
username: "zuck"
};
},
render: function() {
return (
<UserProfile>
<ProfileImage username={this.props.username}/>
<ProfileLink username={this.props.username}/>
</UserProfile>
);
}
});
React.render(<UserProfile username="zuck"/>, document.body);
module.exports = UserProfile;
ProfileLink.jsx
var React = require('react');
var ProfileLink = React.createClass({
render: function() {
return (
{this.props.username}
);
}
});
module.exports = ProfileLink;
ProfileImage.jsx
var React = require('react');
var ProfileImage = React.createClass({
render: function() {
return (
<img src="//graph.facebook.com/{this.props.username}/picture"/>
);
}
});
module.exports = ProfileImage;
My html file basically only includes the three jsx files (btw, is there a way to bundle all these into a single request during development?)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React FB Link</title>
</head>
<body>
<script type="text/javascript" src="UserProfile.jsx"></script>
<script type="text/javascript" src="ProfileLink.jsx"></script>
<script type="text/javascript" src="ProfileImage.jsx"></script>
</body>
</html>
I'm using beefy to handle and serve the JSX files, using beefy *.jsx 8000 -- -t reactify.
The resulting files are (in truncated form):
UserProfile.jsx
ProfileLink.jsx
ProfileImage.jsx
Loading the html page results in an error:
Uncaught ReferenceError: ProfileImage is not defined
with reference to line 15 in UserProfile.jsx:
React.createElement(ProfileImage, {username: this.props.username}),
You might need to load ProfileImage.jsx and ProfileLink.jsx before your UserProfile.jsx since right now the page is parsing Userprofile.jsx first and it doesn't know what ProfileImage mean (because you haven't loaded it yet)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React FB Link</title>
</head>
<body>
<script type="text/javascript" src="ProfileLink.jsx"></script>
<script type="text/javascript" src="ProfileImage.jsx"></script>
<script type="text/javascript" src="UserProfile.jsx"></script>
</body>
</html>
You can use any module bundler to bundle up your files (Browserify, Gulp, Webpack) into one single file as entry point