I'm trying to make an SPA website with knockout and requirejs from websites I've seen and tutorials, in order to split up the website so it isn't a single gigantic thing. At one point I'm expecting to see:
My first name is: Bryan
But instead I'm getting:
My first name is: function c(){if(0<arguments.length)return c.tb(c[E],arguments[0])&&(c.ga(),c[E]=arguments[0],c.fa()),this;a.l.oc(c);return c[E]}
Starting with my index.thml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>asdf</title>
</head>
<body>
<mainview></mainview>
<!-- global imports -->
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.min.js"></script>
<script type='text/javascript' src="./index.js"></script>
</body>
</html>
My index.js:
"use strict";
requirejs.config({
baseUrl: '',
paths: {
knockout: 'https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min',
text: 'https://cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text.min'
}
});
ko.components.register(
'mainview',
{
require: './indexViewModel'
}
);
ko.applyBindings();
indexViewModel.js:
"use strict";
define(['knockout', 'text!./indexViewModel.html'], function(ko, htmlString) {
function indexViewModel(params)
{
var self = this;
self.firstName = ko.observable('Bryan');
}
return { viewModel: indexViewModel, template: htmlString };
});
Finally my indexViewModel.html:
<div>
<p>input name: <input data-bind="value: firstName"></input></p>
<p>My first name is: <span data-bind='text: firstName'></span></p>
</div>
All this gives the result I stated above.
Now if I change firstname to firstName(), then it initially comes up right, but if I change the input, nothing happens.
ok, with more digging and googling, I happened upon the solution. I don't get the details, but it's requirejs and knockoutjs are colliding some how
Because on my index.html, I import knockout and I have knockout setup as a requirejs parameter from the config.
I found this
Issue loading knockout components view model using requireJS
that clued me in.
ok so I made these changes:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Battlestations Character Generator</title>
</head>
<body>
<mainview></mainview>
<!-- global imports -->
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.min.js"></script>
<!-- no more knockout reference here -->
<script type='text/javascript' src="./index.js"></script>
</body>
</html>
now my index.js:
"use strict";
requirejs.config({
baseUrl: '',
paths: {
knockout: 'https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min',
text: 'https://cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text.min'
}
});
// "app main()"
requirejs(['knockout'], function(ko) {
var self = this;
ko.components.register(
'mainview',
{
require: './indexViewModel'
}
);
ko.applyBindings();
});
and changed <input></input> to <input />, although that changed nothing, but if that's "good practice", I'll go with it.
after those changes, reload, all works, and changing the input changes the <span> right after it.
yay!
I know an answer is accepted, Here I am posting an answer just for the users who have tried the answer and failed. I was also experiencing this issue in my MVC application. The problem was, I was referring the knockout-3.4.0.js file both in _Layout.cshtml and the my page. When I remove the JS reference from _Layout.cshtml and reference the same to only to the page, it was all fine. Cheers!
Related
I am currently doing the egghead.io AngularJS course and have run into an issue a few others seem to have.
Any solutions I have come across here aren't working for me though.
In the second video the instructor is showing how to connect controllers to ng-apps. I have followed the video exactly, restarted a few times, and tried solutions on here.
I am given the following error console:
In the long list of errors there, I have picked out the first as as saying:
"FirstCtrl' is not a function, got undefined"
Anyone know of a solution?
Was something changed in the Angular spec in regards to assigning controllers, or is this course skipping information?
Code:
function FirstCtrl($scope) {
$scope.data = {
message: "Hello"
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Angular App</title>
<link href='https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed:700' rel='stylesheet' type='text/css'>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h1>You said:</h1>
<h3>{{data.message}}</h3>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>
</html>
Here is your exemple working (Run the exemple ...).
Add you app name.
Declare your controller using angular.controller.
angular.module('myApp', []);
angular.module('myApp').controller('FirstCtrl', FirstCtrl);
function FirstCtrl($scope) {
$scope.data = {
message: "Hello"
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Angular App</title>
<link href='https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed:700' rel='stylesheet' type='text/css'>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>You said:</h1>
<h3>{{data.message}}</h3>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>
</html>
An Angular controller is defined like this :
var app = angular.module('myApp',[]); //Your app
//The controller in the myApp module, first param is the controller's name
//Second is the controller's dependencies
app.controller('FirstCtrl', ['$scope', function($scope) {
//Do whatever you want in this controller
$scope.data.message = 'Hello!';
}]);
Then you bind your controller to the view (your HTML) using the ng-controller attribute.
You're missing the part where you define your controller.
You can definitely have your FirstCtrl be a function. You just need to first define that the FirstCtrl is a controller.
Example:
angular.module("app").controller("FirstCtrl", FirstCtrl);
And then you have your FirstCtrl function:
function FirstCtrl($scope) {
$scope.data = {
message: "Hello"
};
}
You also need to include that file in your html scripts
<script src="mypath/firstctrl.js"></script>
I too was facing problem when defined controller just like a simple JavaScript function and then I downgraded the cdn link version for angular from "1.4.5" to "1.2.28" and it started recognising controller (A simple javascript function). Also you have to include the .js file in which you have created your controller in your html file . Actually they have deprecated the use of simple javascript function as a controller from angular 1.3 version.
I am new to angularjs and this might sound very silly but I want to know why my angularjs app won't bootstrap without making a module even though egghead.io and several tutorials showing otherwise.
Here is my HTML template
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.1" src="https://code.angularjs.org/1.4.0-beta.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
And the controller.js file which DOESN'T WORKS
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
When i register the module [and naming the ng-app as 'hello' ofcourse] and write a controller it works
angular.module('hello', []).controller('HelloController', function($scope) {
$scope.greeting = { text: 'Hello' };
});
I just want to know the reason for this behavior.
Thanks in anticipation.
This is a breaking change of angular 1.3. You can see a list of breaking changes here
Because of this change, you cannot use global functions as a controller. You can override this behavior by using allowGlobals (More info here) but I won't recommend that.
Hullo everyone, I am having a problem with AngularJs not reconizing my controller, I have summarised what I have done below.
Starting point: AngularJs tutorial http://www.thinkster.io/angularjs/ZPCQtVfGba/angularjs-controllers
Problem:
defined controller in file (gets retrieved correctly when visiting page), added ng-controller directive to relevant div, got javascript runtime error (
Error: [ng:areq] http://errors.angularjs.org/1.3.0-beta.18/ng/areq?p0=FirstCtrl&p1=not%20a%20function%2C%20got%20undefined
)
Before posting I checked whether I had included my controller implementation before including Angular but it is not the case.
What am I missing? I suspect it might have something to do with declaring controllers in the global scope (e.g. Controller not a function, got undefined, while defining controllers globally) but I am not really sure whether this is indeed the case.
Thanks in advance!
_Layout .cshtml
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#RenderSection("PageSpecificStyles",required:false)
</head>
<body>
#RenderBody()
#RenderSection("BodyScripts", required: false)
</body>
</html>
Index.cshtml:
#{
ViewBag.Title = "Home Page";
}
#section PageSpecificStyles{
<style>
div {
margin-left: 20%;
}
</style>
}
#section BodyScripts{
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>
<script src="~/Scripts/FirstCtrl.js"></script>
}
<div ng-controller="FirstCtrl">
<div>
<h1>Hello {{data.message}}</h1>
</div>
</div>
FirstCtrl.js (in ~/scripts)
function FirstCtrl($scope) {
$scope.data = { message: "Cat!" };
}
As you suspected, since you are using angular 1.3 beta which has no implicit support for Global controller constructor function discovery, you need to register your controller with the module.
angular.module('yourApp').controller('FirstCtrl',['$scope', FirstCtrl]);
and also since you are defining an module you need to specify the module name in your ng-app.
<html ng-app="yourApp">
I created my own service for some util methods. The idea was to simply inject the utilsservice into the modules where I need the methods. The Problem is I get an ReferrenceError: myFunction is not defined.
I think it has to do with the wrong injecting of the service, but i can't figute out myself what's wrong with my approach.
The service i made:
angular.module('utils',[]).service('UtilsService',function(){
this.myFunction = function(){};
});
In my app.js file i have following structure:
(function(){
angular.module('utils',[]);
angular.module('translation',[]);
var app = angular.module('myApp',['translation','utils']);
app.controller('myController',['$http',function($http,UtilsService){
UtilsService.myFunction();
}]);
});
The order I included the scripts in my .html file:
<script type="text/javascript" src="../Libraries/angular.min.js"></script>
<script type="text/javascript" src="../js/angular-js/services/utilService.js"></script>
<script type="text/javascript" src="../js/angular-js/app.js"></script>
<script type="text/javascript" src="../js/angular-js/translate.js"></script>
I already tried to change the order but it doesn't make any difference.
I am thankfull for any advice you may have!
Please try the below. You will need to change the script references to point to the files where you have them. Once the index.html file has loaded, you should see the output "you called myFunction()" in the console window. That is being printed from within the service which shows it's being called correctly. I've also created a fiddle
index.html:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Directives</title>
</head>
<body>
<div ng-controller="myController"></div>
<script src="angular.js"></script>
<script src="app.js"></script>
<script src="utilsService.js"></script>
</body>
</html>
app.js (I have moved the code out of the function you created since it wasn't working. Also, you had a typo for spelling anguar on the line that begins with var app. I have also removed the dependency for translation in my code since I didn't create any module by that name):
(function(){
//angular.module('utils',[]);
//angular.module('translation',[]);
});
var app = angular.module('myApp',['utils']);
app.controller('myController',['$scope', 'UtilsService',function($scope,UtilsService){
UtilsService.myFunction();
}]);
utilsService.js:
angular.module('utils',[])
.service('UtilsService',function(){
this.myFunction = function(){ console.log ('you called myFunction()')};
});
So I'm checking out Emberjs.
Scroll down a little on the homepage to "GETTING STARTED WITH EMBER.JS IS EASY."
Great, that looks simple, I'll give it a go.
Create a new boilerplate HTML5 file.
Paste their template code into my :
<body></body>
Include emberjs:
<script src="ember.js" type="text/javascript"></script>
Include the JS code they provided into a:
<script type="text/javascript"></script>
Within my head tags. Great, let's see what happens.
Load the page, Console tells me it requires jquery. So no problem I include jQuery. Try again, another error, I need to include handlebars. No problem, I include handlebars. Try again, App is not defined... right... so I include
window.App = Ember.Application.create();
Above the snippet they provided. Try again, DS is not defined. At this point I have no idea where to go next. I took a look at the emberjs guides section as I assume I have to define a DS model somewhere, or something. But the guides were no use.
Am I missing something blatantly obvious, or is this in fact not 'easy' as they put it? What do I have to do to make this basic example work (and why the hell have they given 'basic' code that doesn't work out the box as an example)?
Edit:
My full code thus far:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="handlebars.js" type="text/javascript"></script>
<script src="ember.js" type="text/javascript"></script>
<script type="text/javascript">
window.App = Ember.Application.create();
App.Person = DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
fullName: function() {
return this.get('firstName') +
" " + this.get('lastName');
}.property('firstName', 'lastName')
});
App.peopleController = Em.ArrayController.create({
content: App.Person.findAll()
});
</script>
</head>
<body>
<h1>People</h1>
<ul>
{{#each peopleController}}
<li>Hello, <b>{{fullName}}</b>!</li>
{{/each}}
</ul>
</body>
</html>
The problem isn't you, it's that the documentation neglects to list the required dependencies, the naming convention of Handlebars, and suddenly starts talking about a Post controller without providing the code. There's also a couple of places where there's a little bit of cognitive forward referencing going on, so if you know about EmberJs, the guide makes sense, but if you're trying to learning it fresh, you have to hop around, make assumptions, and conduct some tests.
While this isn't the minimal code needed for an EmberJS application, it should be enough to get you started to plug in about 80% of the Getting Started Guide. Hope this helps.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="jquery-1.9.1.js"></script>
<script src="handlebars.js"></script>
<script src="ember-1.0.0-rc.1.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript">
// Make a global variable -- http://emberjs.com/guides/application/
App = Ember.Application.create({
VERSION: '1.0.0',
// store: Ember.Store.create().from(Ember.fixtures)
});
// http://emberjs.com/api/classes/Ember.Application.html
App.ready = function() {
// alert("App initialized!");
};
// Application Controller, extended with custom properties
App.ApplicationController = Ember.Controller.extend({
appName: 'My First Example',
firstName: "Charlie",
lastName: "Brown",
// initial value
isExpanded: false,
expand: function() {
this.set('isExpanded', true);
},
contract: function() {
this.set('isExpanded', false);
}
});
// A router
App.ApplicationRoute = Ember.Route.extend({
setupController: function(controller) {
// `controller` is the instance of ApplicationController
controller.set('title', "Hello world!");
}
});
</script>
<script type="text/x-handlebars" data-template-name="application">
<header>
<h1>A Header - {{appName}}</h1>
</header>
<div>
Hello, {{firstName}} {{lastName}}.
<p/>
{{#if isExpanded}}
<div class='body'>{{body}}</div>
<button {{action "contract"}}>Contract</button>
{{else}}
<button {{action "expand"}}>Show More...</button>
{{/if}}
<hr/>
{{outlet}}
<hr/>
</div>
<footer>
<H1>A Footer</H1>
</footer>
</script>
</body>
</html>
You do not need to define a DS store unless you have included Ember Data. I have the most basic Ember starting template available on jsfiddle. You can view the source of the rendered frame to get an idea that you only need 3 JS files (which you already have included) in order for the application to work.
From there it is up to you, but yes I admit that the documentation is lacking in regards to starting off from scratch.
From your edit, you have a DS object referenced, but you have not referenced the Ember Data script. It's currently an add-on to the default EmberJS script due to the fact that it is not API locked, whereas the main stream is locked.