So I am wanting to learn more about how to use AngularJS $route as it seems to be the way to go for my single page application. Naturally, the best place to start is the documentation. They have a nice little Plunker for me to visually and hands-on see how it works. Next up, playing with it and making it my own. Before I can start messing with it to make it my own though, I need it working outside the Plunker: so I made copies of each file and put them all in the same directory.
However, I am getting the following errors:
TypeError: angular is undefined script.js:3:0
ReferenceError: angular is not defined index.html:14:4
The line for the first error is:
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
and the line for the second error is:
angular.module('ngRouteExample', ['ngRoute'])
So to me it is obvious that it is not registering that AngularJS is referenced or something. Nothing about the code is breaking, it just doesn't recognize AngularJS. Why is this? How do I fix this?
Plunker
Original documentation
Have a look at the Angular documentation here. Make sure you have included the Angular library in your index.html (or index.jsp/index.aspx).
<!doctype html>
<html ng-app>
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
</body>
</html>
Not sure why but the Plunker uses
//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js
instead of
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js
Easily grazed over it. My bad. Thought Plunker, JSFIDDLE and all that use direct URLS.
Found error by starting to paste everything back in Plunker.
Related
Mobx is a state management tool often used with React. I'm trying to understand how the MobX tool works, using their 'Ten minute introduction to MobX and React' tutorial. I'm playing with the Task List JSFiddle example link provided at the bottom of the introduction page.
The JSfiddle works fine when first loaded. Change one byte of code, hit the JSfiddle run button and it crashes. I'm trying to understand the JSFiddle crash and how to fix it.
When first loaded, I do see a console warning
VM48 babel.js:60934 You are using the in-browser Babel transformer.
Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
After pressing the run icon in JSfiddle, I see the following error message
Uncaught ReferenceError: mobxReact is not defined
at <anonymous>:47:22
at run (VM48 babel.js:60802)
at check (VM48 babel.js:60868)
at loadScripts (VM48 babel.js:60909)
at runScripts (VM48 babel.js:60936)
at transformScriptTags (VM48 babel.js:324)
(anonymous) # Inline Babel script:4
This makes no sense to me. How can the JSFiddle run correctly when the site is first opened, but fails after the run icon? I can see MobX-react as an external reference. Anybody understand what is going on here, and how to make corrections to JSFiddle (to enable me to really modify & play with MobX to understand what is really going on?)
The error states that you are trying to use the mobx library which is not present as a package.
Uncaught ReferenceError: mobxReact is not defined
To resolve this issue add a script tag in your HTML file to import the mobx library.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Mobx Sample">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app"></div>
<script src="https://npmcdn.com/mobx#2.3.3/lib/mobx.umd.js"></script>
</body>
</html>
then in your JS file, you can import the mobx modules.
const { observable, autorun, computed } = mobx;
For my team, we're between projects, but I'm performing some basic research on TypeScript and how to use Angular 1.x with it, considering that Angular 2 is still being baked. I usually use Plunkr to make small-scale prototypes so that we can see how something works and mess with it in-situ during tech demos and stuff.
The problem, though, is I tried to make a very basic Angular 1.x + TS setup in this plunker, but have been running into issues getting it to work properly. I think some of the problem is the client-side transpilation, but I'm sure that's not the only thing I'm messing up. Specifically...
View Code:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>
<body>
<div ng-controller="testController as ctrl">
<h1>{{ ctrl.testMethod() }}</h1>
</div>
<!-- Scripts... -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script type="text/typescript" src="app.ts"></script>
<script type="text/typescript" src="controllers.ts"></script>
<script type="text/typescript" src="registrations.ts"></script>
<!-- Required for web transpilation... -->
<script type="text/javascript" src="//niutech.github.io/typescript-compile/js/typescript.min.js"></script>
<script type="text/javascript" src="//niutech.github.io/typescript-compile/js/typescript.compile.js"></script>
</body>
</html>
I got the client-side transpilation from this StackOverflow question, but that question's resolution was either, 'Just do it in Visual Studio!' or 'transpile your TypeScript, then plug the JavaScript into Plunkr,' which doesn't work for me, because my team is considering transitioning to TypeScript in the first place - we need to be able to work with typescript, thus the prototype to help us understand how it works. Additionally, that question notes that the transpilation parts are actually significantly outdated.
Question: First, is there an updated clientside TypeScript-to-JavaScript transpiler that I can link to in my prototype plunker? Second, are there any better resources to refer to on how to get Angular 1 to work with TypeScript? I've had very, very little luck finding anything that talks about how to make TypeScript work with Angular 1.x...
Edit:
Turns out you can use typescript on plnkr, which I just learned from the comments below http://embed.plnkr.co/suu7Yg/preview
For implicit mode all this requires is creating a file with the appropriate extension, i.e. script.ts or style.scss, and then referencing it in the head with the expected compiled extension, i.e. script.js or style.css. Very cool, plnkr!
I'm fairly certain Plunker doesn't support typescript (though of course I could be wrong) (edit: yup I was wrong, it's just not obvious that this is a feature). However, I can offer an idea for a possible solution of what you're trying to accomplish.
Try moving your small-scale prototypes and demos over to codepen instead. They're both pretty comparable apps I use all the time, and codepen currently supports typescript so if that's something you need to play with you got it.
It's hidden behind the little gear, along with external js file includes:
Turn on typescript:
Boom. Good to go for your live demos. Hope that helps!
As mentioned by #wesww in his amended answer, Plunker supports server-side compilation of TypeScript. What I mean by that is that when your TypeScript code is sent to the preview server, it is sent un-transformed.
Suppose you have a file script.ts, written in TypeScript, but the index.html of your project requests script.js, Plunker's preview server will compile your file on the fly and serve the compiled version.
You can configure how you want the TypeScript compiler to work by creating a tsconfig.json file (consistent with normal CLI usage) to define your settings.
Please see Definitive Guide to Comiplation on Plunker for more information.
I'm not familiar with plunk is but it's possible to transpile typescript in the browser by just including node_modules/typescript/typescript.js file and use the Compiler API. Checkout my Compiler API playground in the browser: https://cancerberosgx.github.io/typescript-in-the-browser/typescript-compiler/#example=tsTranspilingProject1
See Dynamic execution of TypeScript in the browser for details
I am working on improving the UI of a website, and needed to use Semantic JS with it. The website was written in Angular, and the one piece of Semantic functionality that was not working was Dropdowns. The styling worked fine, but as soon as I tried to initialize the dropdown with a
$('...').dropdown({options});
I encountered a "$('...').dropdown is not a function" error. Looked around and nowhere mentioned the answer to my problem.
Since SemanticJS modifies the $ operator from Jquery, Jquery needs to be included before SemanticJS.
//Index.html//
<html>
<head>
</head>
<div ng-view></div>
<script src="jquery.blah.min.js"></script>
<script src="semantic.min.js"></script>
</html>
Which tag or code invokes AngularJS for very first time. Or what is the entry point of AngularJS.
Let’s take the below example.
<html>
<head>
<script src="Scripts/angular.min.js"></script>
</head>
<body ng-app="myApp">
<h1>Angular application</h1>
</body>
</html>
ng-app specify it is an angular block. This means AngularJS is already running in the document that is why it is able to identify the directive.
<script src="angular.js">
angular.js script which registers a callback that will be executed by the browser when the containing HTML page is fully downloaded. When the callback is executed, Angular looks for the ngApp directive. If Angular finds the directive, it will bootstrap the application with the root of the application DOM being the element on which the ngApp directive was defined.
It's the ng-app but you can bootrap it yourselves as well , then you have the control to initialize
angular.bootstrap(document, ['demo']);
I think you need to look in to how angular works , here are the basic concepts
Is there a way to make the AngularJS partial views a complete HTML files, so they will be easier to edit
and have Angular strip them to their body content (much like what the RequireJS text plugin does with the strip option)
I will clarify my question since the answer and comments show that it was not clear enough:
currently the content of the partial file is:
<p>{{value}}</p>
i want it to be:
<!doctype html>
<html><head><!-- with all things in the head to make it work stand alone HTML of Angular app --></head>
<body>
<p>{{value}}</p>
</body>
</html>
So that i will be able to work on the partial as a stand alone app
Yes, you can use the ng-view in your template HTML file, something like:
<html ng-app="myApp">
<head>
...
<head>
<body ng-view>
</body>
</html>
Then in your $routeProvider you can use templateURL:, like:
$routeProvider.when('/register', {templateUrl: 'partials/register.html', controller: 'RegisterCtrl'});
The file partials/register.html is a complete HTML file.
So far the only answer i did found for this, is to actually use Angular with require.js - then I can leverage the text plugin and have my partials real apps.
The way to do it is to configure your app to load all templates using the text plugin of require with the strip option, then your views can have html with head and body that are ignored - so you can provide the necessary require.js files (it can share the same require.js configuration as the normal app if it is located at the same level as the normal app - i decided to place them in adjacent folders. but they do need different require.js main - so the main needs to reference the configuration)
Setting this up takes some effort, but it helps me develop large views with a lot of logic in them separately, and then just link them into my app as a view (while maintain the ability to access them separately, mostly for debugging)