I've created a new meteor project called TEST and ended up with:
test.html
test.css
test.js
Now I installed the iron router and would like that the route page "/" shows directly to the test.html
Now I don't have a template on that page... it's just standard HTML layout:
<head>
...
</head>
<body>
...
</body>
Still Iron router requires a template configurtion e.g.
Router.route('/', {
name: 'home',
template: 'home'
});
So how can I point to that one SINGLE page?
[EDIT]
I tried with:
Router.route('/', {
name: 'body',
template: 'body'
});
and ended up duplicating my test.html page (like replicate itself for 2 times) lol :D
Did you try just Router.route('/')?
I think Iron:router will render all <body></body> tags (they are merged in Meteor) by default, i.e. if no template is set in route configuration.
Related
I am trying to apply routing with the help of flow router package. But it is not working for me as what I had expected. I will share my code, please let me know where I am going wrong! Thanks in Advance.
FlowRouter.route('/',{
name:'home',
action(){
BlazeLayout.render("HomeLayout");
}
});
FlowRouter.route('/test',{
name:'test',
action(){
BlazeLayout.render('MainLayout',{main:'Test'});
}
});
And I am getting following error when I go to localhost:3000/test.
modules-runtime.js:36Uncaught Error: Cannot find module './main.html'
Exception in defer callback: Error: Expected template or null, found: undefined
at ._render (http://localhost:3000/packages/spacebars.js?hash=65db8b6a8e3fca189b416de702967b1cb83d57d5:61:13)
at doRender (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:2027:25)
at http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:1875:20
at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:3687:12)
at http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:1873:29
at Object.Blaze._withCurrentView (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:2214:12)
at viewAutorun (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:1872:18)
at Tracker.Computation._compute (http://localhost:3000/packages/tracker.js?hash=f525263111eb9d90f4ce1ad064f97aca4a6c1b07:339:36)
at new Tracker.Computation (http://localhost:3000/packages/tracker.js?hash=f525263111eb9d90f4ce1ad064f97aca4a6c1b07:229:10)
at Object.Tracker.autorun (http://localhost:3000/packages/tracker.js?hash=f525263111eb9d90f4ce1ad064f97aca4a6c1b07:604:11)
Please tell me where I am wrong? Do I need to make any changes in my code?
Here is my index.html file code :
<head>
<title>intermediate-meteor</title>
</head>
Here is my MainLayout.html:
<template name="MainLayout">
<header>
<h1>My Recipe Book</h1>
</header>
<main>
{{>Template.dyanamic template=main}}
</main>
</template>
<template name="Test">
<h1>Test Template Rendering form Main Template...!!</h1>
</template>
Here is my HomeLayout.html:
<template name="HomeLayout">
<header>
<h1>My Recipe Book</h1>
</header>
<main>
<div class="billboard">
<h2>Organize your meals</h2>
</div>
</main>
</template>
Package.jason file code:
# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.
meteor-base#1.0.4 # Packages every Meteor app needs to have
mobile-experience#1.0.4 # Packages for a great mobile UX
mongo#1.1.12 # The database Meteor supports right now
blaze-html-templates#1.0.4 # Compile .html files into Meteor Blaze views
reactive-var#1.0.10 # Reactive variable for tracker
jquery#1.11.9 # Helpful client-side library
tracker#1.1.0 # Meteor's client-side reactive programming library
standard-minifier-css#1.2.0 # CSS minifier run for production mode
standard-minifier-js#1.2.0 # JS minifier run for production mode
es5-shim#4.6.14 # ECMAScript 5 compatibility for older browsers.
ecmascript#0.5.8 # Enable ECMAScript2015+ syntax in app code
shell-server#0.2.1 # Server-side component of the `meteor shell` command
kadira:flow-router
kadira:blaze-layout
Please go through my code and tell me where i am doing a mistake?
Your index.html file is the one that needs the dynamic Template: index.html
<head>
<title>intermediate-meteor</title>
</head>
<body>
{{> layout}}
</body>
<template name="layout">
{{> Template.dynamic template=main}}
</template>
Then you can control what template gets loaded from what URL in the routes.
So at the end, your routes should look like this:
FlowRouter.route('/', {
action: function() {
BlazeLayout.render('layout', { main: 'MainLayout' });
}
});
FlowRouter.route('/test', {
action: function() {
BlazeLayout.render('layout', { main: 'Test' });
}
});
FlowRouter.route('/home', {
action: function() {
BlazeLayout.render('layout', { main: 'HomeLayout' });
}
});
I have my HTML setup with an index.html file that only load the main template:
<body>
{{> layout}}
</body>
<template name="layout">
{{> Template.dynamic template=main}}
</template>
Then I create a new HTML file for each template: test.html
<template name="test">
<h1>Hello, this is a test page</h1>
</template>
And of course, your homelayout template in another file: homelayout.html
<template name="homelayout">
<h1>Hello, this is the home page</h1>
</template>
It seems that you deleted the default client/main.html file. Did you update the "import './main.html'" line in client/main.js ?
I'm a newbie to angularJS and I'm trying to make the simple thing to work but I fail.
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="main.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body ng-app="app" ng-strict-di>
<div class="test" ng-controller="testSrc">
<p> {{ blah }} </p>
<img ng-src="{{ URLImage }}"/>
<button class="btn btn-sucess" ng-click="goYahoo()">Yahoo</button>
<button class="btn btn-sucess" ng-click="goGoogle()">Google</button>
</div>
</body>
</html>
JS:
var app = angular.module("app", []);
app.controller('testSrc', ['$scope,$location', function ($scope, $location) {
"use strict";
$scope.blah = "blah blah";
$scope.URLImage = 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png';
$scope.goGoogle = function () { $location.url('localhost:58164/g'); };
$scope.goYahoo = function () { $location.url('localhost:58164/y'); };
}]);
app.config(function ($routeProvider) {
"use strict";
$routeProvider
.when('/', {
templateUrl : 'index.html'
})
.when('/g', {
templateUrl : 'http://www.google.com'
})
.when('/y', {
templateUrl : 'http://www.yahoo.com'
});
});
The code has passed all lint warnings. I use the live preview of brackets that opens up Internet explorer. I encounter 3 issues:
1) {{ blah }} does not translate into blah blah, I see {{ blah }} as if the js is ignored. same for the ng-src of the img. It is ignored and I don't see the image.
2) the 2 buttons are not colored in green as I expect it to be from the bootstrap css. I tried it in jsFiddle and did see them as green but when I tried again now, they were regular, not sure what did I do wrong.
3) Routing: I want to browse to Google/Yahoo when navigating to specific url g and y using the 2 buttons. When I open the live preview, the url is: http://127.0.0.1:58164/index.html so how can I route this correctly? http://127.0.0.1:58164/index.html/g won't work.
I'm kinda lost here, not sure if the problem is my code, the browser of the live preview though the JS didn't work also in jsFiddle...
1) You're injecting the dependencies into your controller incorrectly - you need a string for each argument of the function. It's an easy mistake to make!
app.controller('testSrc', ['$scope,$location', function ($scope, $location) { // Wrong
app.controller('testSrc', ['$scope', '$location', function ($scope, $location) { // Right
2) You've misspelled the class name in your buttons. 'sucess' should be 'success'.
<button class="btn btn-sucess" ng-click="goYahoo()">Yahoo</button>
^^^^^^
3) There's numerous things wrong with your routing:
You haven't included the ngRoute module in your HTML - it hasn't been included in the base Angular package for a long time now.
Once that's done, you need to add it as a dependency: var app = angular.module("app", ["ngRoute"]); and add an ng-view tag to your HTML.
By default, the router will use 'hashbangs' for the URL - so the URL would be something along the lines of `http://127.0.0.1:58164/index.html#/g. If this isn't acceptable for you, I'd look into HTML5 mode.
All that being said, I don't think ngRoute will help you accomplish what you're trying to do. The router is designed to route through the pages of your app, not to external sites, so trying to load HTML from another domain probably won't work.
I'd recommend running through the official Angular tutorial if you haven't already - it covers all this stuff quite well. I'd also recommend Shaping Up With Angular.js on Code School, if you would prefer something a bit more hands-on.
Using Meteor 0.9.3 and iron:router 1.0.0-pre2, this error shows on the console even though iron:layout was installed, see below:
willems-mini:iron willem$ meteor add iron:router#=1.0.0-pre2
added iron:location at version 1.0.0-pre2
added iron:dynamic-template at version 1.0.0-pre2
added iron:router at version 1.0.0-pre2
added iron:layout at version 1.0.0-pre2
added iron:middleware-stack at version 1.0.0-pre2
added iron:url at version 1.0.0-pre2
added iron:controller at version 1.0.0-pre2
added iron:core at version 1.0.0-pre2
iron:router: Routing specifically designed for Meteor
There are no other packages, just the defaults for meteor:
willems-mini:iron willem$ meteor list
autopublish 1.0.0 Publish the entire database to all clients
insecure 1.0.0 Allow all database writes by default
iron:router 1.0.0-pre2 Routing specifically designed for Meteor
meteor-platform 1.1.1 Include a standard set of Meteor packages in your app
I am trying to run a very simple app:
1 javascript file:
Router.route('/', function () {
this.render('home');
});
if (Meteor.isClient) {
Template.home.events({
'click button': function () {
console.log('click!');
}
});
}
and 1 html file:
<head>
<title>iron router test</title>
</head>
<body>
{{> defaultLayout}}
</body>
<template name="defaultLayout">
<header>
{{> yield "header"}}
</header>
<article>
{{> yield}}
</article>
<footer>
{{> yield "footer"}}
</footer>
</template>
<template name="home">
{{#contentFor "header"}}
<button>click header</button>
{{/contentFor}}
<button>click</button>
{{#contentFor "footer"}}
<button>click footer</button>
{{/contentFor}}
</template>
This is not how iron:router layouts are supposed to work.
Get rid of your explicit inclusion of the layout in the body :
{{! this is WRONG, remove the body tag altogether }}
<body>
{{> defaultLayout}}
</body>
The place where your specify the layoutTemplate is in the RouteController :
Router.route('/', function () {
this.render('home');
},{
layoutTemplate:"defaultLayout"
});
Declaring explicitly your RouteControllers is usually a nicer design pattern.
lib/router.js
Router.route("/",{
// give the route a name so it figures out itself to use :
// - HomeController
// - a template name "home"
name:"home"
});
lib/controllers/lib/default-layout.js
DefaultLayoutController=RouteController.extend({
layoutTemplate:"defaultLayout"
});
lib/controllers/home.js
HomeController=DefaultLayoutController.extend({
//
});
Well, like your error says you're missing an iron layout.
Could look something like this in your lib/router.js or wherever you hold your router code:
Router.configure({
layoutTemplate: 'layout',
loadingTemplate: 'loading'
});
And so the respective <template name="layout"> should be there.
Have installed the angularjs and Twitter.Bootstrap packages succesfully
This is my index.html:
<!DOCTYPE html>
<html ng-app="TodoApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/app.js"></script>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<title>Amazing Todo</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
This is my app.js:
var TodoApp = angular.module("TodoApp", []).
config(function ($routeProvider) {
$routeProvider.
when('/', { controller: ListCtrl, templateUrl: 'list.html' }).
otherwise({ redirectTo: '/' });
});
var ListCtrl = function ($scope, $location) {
$scope.test = "testing";
};
And, this is my list.html:
<h1>Test: {{test}}</h1>
This should work fine. However the index.html is not showing the content of list.html. I think the angularjs part is not working properly.
No idea about what am i doing wrong?
Once you have defined a module, you need to define your controllers for that module and not independently.
Thus, your controller should be rewritten as:
TodoApp.controller('ListCtrl', [ '$scope', '$location',
function ($scope, $location) {
$scope.test = "Testing";
}
]);
This should show the view in question.
I would say, that if you check errors in console (in Chrome or IE press F12) you should see:
...Failed to instantiate module TodoApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvider...
The reason for this expectation is that we ask IoC to inject $routeProvider while not correctly listing dependent modules. This is the above code:
var TodoApp = angular
// here we say: we do not need any other module
.module("TodoApp", [])
// here we ask: inject $routeProvider from other module
.config(function ($routeProvider)
So to make it runing we have to include the module 'ngRoute'
var TodoApp = angular
// here we say: we need these modules to make our module working properly
.module("TodoApp", [
'ngRoute'
])
// now we can ask for the provider,
// using minification-safe syntax
.config(
[ '$routeProvider',
function ($routeProvider) {
$routeProvider.
...
}]);
And also do not forget to also reference this module scripts:
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<!-- here we have to load this module -->
<script src="Scripts/angular-route.js"></script>
What is your directory structure can you check if list.html is in the same directory as index.html, if not specify a relative path from the application root?
Since no one has posted a full correct answer to this question and it hasn't been closed yet, here is another answer.
This is your function:
var ListCtrl = function ($scope, $location) {
$scope.test = "testing";
};
This is a bare function, which isn't of much use. You need a controller so that Angular knows what to do with {{ test }}:
<div ng-controller="someController">
<h1>{{ test }}</h1>
</div>
If you insist on keeping the function as a separate variable, you could do so and still have a controller:
var ListCtrl = function ($scope, $location) {
$scope.test = "testing";
};
TodoApp.controller('someController', ListCtrl);
This also works.
Despite of this, your UI won't show, as there's an error in it:
var TodoApp = angular.module("TodoApp", [])
You're using $routeProvider and .when(),.otherwise(), for which you need ngRoute as a dependency:
var TodoApp = angular.module("TodoApp", ['ngRoute'])
Your app should work after that.
This seems like a basic one but i can't get Iron Router to render my template in the correct place on the page.
In my router controller I have:
Router.configure({
loadingTemplate: 'loading',
notFoundTemplate: 'notFound'
});
Router.map(function () {
this.route('home', {
path: '/',
template: 'home',
layoutTemplate: 'layout'
});
this.route('posts', {
});
this.route('post', {
path: '/posts/:_id'
});
});
In the layout html page I have:
<body>
<!-- some other static page stuff here -->
<div class="container">
<template name="layout">
{{yield}}
</template>
</div>
</body>
Basic version of home template looks like:
<template name="home">
<h1>Home Page</h1>
</template>
I have tried a few variation on this but the home template is always rendered at the bottom of the layout template just before the closing body tag rather than in the div.container
You've placed the tags a bit incorrectly.
Templates need to be on their own & the body tag should be empty:
<body>
<!-- There isn't anything here really -->
</body>
<template name="layout">
<div class="container">
{{>yield}}
</div>
</template>
This should work for your home route but not your post ones, because you haven't given them a layout template.
You can set a universal layout so it would work on posts and home (if you didn't set a layout template there - which overrides the one below) using:
Router.configure({
loadingTemplate: 'loading',
notFoundTemplate: 'notFound',
layoutTemplate: 'layout'
});
So iron-router places your layoutTemplate in body for you.