Trying to write first angular app using node.js, express, and jade. So I know it must be something very simple but I have been stuck for a while.
I included angular js ( route using the CDN in the head section of the jade(html) template.
As indicated bellow:
link(href='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js')
link(href='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.js')
I also tried switching from the angular.js in the CDN to a plain include in my own server, without any positive results to my problem.
I use the directive ng-app='myApp' in the html tag of the template (also tried in the body tag after the head includes).
I also include myApp in the head section of the jade (or html) template using:
script(src='/webapp/js/myApp.js')
The code in myApp.js looks like this:
var myApp=angular.module('myApp', [
'ngRoute'
]).config(['$routeProvider', function($routeProvider) {
...
}]);
I keep getting the console error:
ReferenceError: Can't find variable: angular
globalcode - myApp.js:2
The error means that angular isn't loaded, it doesn't know what angular is.
When learning a new technology stack you should approach each piece individually. You can learn the basics of Angular using plnkr.co as the basis for testing those bits of code quickly and easily here's a very simple plnkr to get you started:
http://plnkr.co/edit/WU6y8ka0udXHzZvCeZPc
You can use the find external libraries button on the right side to add in commonly used libraries.
Once you understand how to work with Angular by itself in isolation you can scratch that off the list of possible problems.
Angular needs to be loaded before your script that references angular is loaded so the next step would be using the debug panel (F12) to see the network calls and figure out why angular isn't being loaded.
To test your back-end manually you can use the POSTMan chrome plugin (or curl if you're into that) to test out the server side response to various requests in isolation from the angular code.
Related
I'm building out an angular app and I'd really like to use a single file to handle certain things like nav, meta data etc. Partially for my OCD, but mostly because it will make managing that functionality a lot easier down the road.
I had it all set up and running, but it appears that only my nav app is running (it looks like this)
<nav ng-app="nav">
And has it's own file
<script src="js/nav.js">
Then, I tried adding in some content in another app
<div ng-app="content">
But I'm getting an angular load issue on the controllers in that app saying that they are not functions
Error: [ng:areq] Argument 'chartCtrl' is not a function, got undefined
Even though ng-app content script is loading fine and the "didload" console log I have INSIDE of chartCtrl is working fine...
Just wondering if anyone has seen anything like this before. Thanks!
This is not good idea. By this crumbling, you are dropping most of features that makes Angularjs usefull. One website = one app is what you want. If you worry about organizing files, it is not related to Angularjs, but build process. Time when there was one huge file is long gone.. You can organize files as you wish (into folder structure), then concat/import them via build engine (npm, grunt, gulp, webpack etc..) into one file. Angularjs app then handle loading dependencies in right order... Just read some articles like this and ofc documentation..
I am about the start working on a project which I want to avoid using Angular 2 as it's still not out there and this project will be finished way before Angular2 will be released.
One thing I really like in Angular 2 is it's: templateURL , where you can import html templates at runtime very easily and works great.
After googling I've found Webpack or Browserify but not sure how good they are for this specific functionality I'm looking for.
Are their any other javascript libraries or released frameworks that have this same functionality, if so, what are my options?
You can do it yourself with those simple steps:
Get the html file as string in your code (using http get on the file).
Injecting the result into the DOM. (using innerHTML or some other method)
No framework needed.
I bought a template which should not have problem with AngularJS according authors. When I have one big index then everything works fine. But the problem is when I try to separate it into the smaller template. I have downloaded new AngularJS seed and just did this:
.. header
.. body
<div ng-view></div>
<!-- Vendor Scripts Bundle -->
<script src="vendor.min.js"></script>
<!-- App Scripts Bundle -->
<script src="scripts.min.js"></script>
.. angularJS files
Route to the smaller template works fine, the content is visible, but just these two javascript libraries doesn't work. When I look at code in chrome inspect I see that libraries exist. Is necessary to register them somewhere in AngularJS or must be problem in these libraries?
Whatever AngularJS components you define outside AngularJS will remain outside AngularJS - unless they are integrated at ".config()" state of the app.
The global objects should be usable though (e.g. $ for jQuery); although cleanly would be defined as constants.
The question is pretty generic, I think you need to provide more insight into that to get some proper help, as the comments above stated.
I saw 2 errors at console on plunker.
Uncaught ReferenceError: config is not defined app.js:10
Uncaught Error: No module: ngRoute
Looking at your code I see a few errors. First of all you're using 1.0.x version of AngularJS. In those versions ngRoute is not a separate module so you shouldn't include that. Also you defined view1 modules as view1 but tried to include as myApp.view1. When you fix those issues your code should work.
I have an existing angular / phonegap app that I'm trying to port to a windows metro app for win8. I've replaced my jQuery with a metro specific version and I've wrapped each angular module in the MSAp.execUnsafeLocalFunction method and I'm getting the application to sort of compile.
What is happening is that the page is built using angular ui router, so I'm able to see the dynamically created page, with angular ui router combining the 3 or 4 partials based on the route. However, when Angular starts to go through ng-bind, ng-repeat, etc... I'm getting the following error, "JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, the might be unsafe..."
I've looked to see how others have overcome this issue, but I have not found anything that works. I'm worried that what I'm doing is going to have force me to rewrite the application using the WinJS library.
Does anyone have any resources or experience that can help me with this?
What works for me is adding the ng-csp directive to the HTML tag. This disables some of the dynamic content stuff of Angular. I didn't even wrap anything in exeUnsafeLocaFunction. I'm not sure if it will work on Angular UI Router though...
More on the ng-csp directive here...
I've been playing around with AngularJS - which is a kick-ass front end framework by the way.
Today I tried to incorporate the angular-seed starter app (found here: https://github.com/angular/angular-seed) into a currently existing Rails 3.1.3 application.
Had a few issues getting the demo code - here: http://docs.angularjs.org/#!/tutorial - to work in the asset pipeline, so just for testing purposes I put them into the public folder - old school style.
I followed the tutorial and had all of my views, controllers, services set up correctly. However, when I included the js files at the bottom of my index page:
<script src="angular/app/lib/angular/angular.js" ng:autobind></script>
<script src="angular/app/js/services.js"></script>
<script src="angular/app/js/controllers.js"></script>
... none of the controllers would work. I would get the {{ model.property }} tags within my templates instead of the actual output.
No Javascript errors in Chrome's dev tools - and network and resources showed all expected files loaded properly.
I thought that maybe I had overlooked something in my code, but when I looked at the developers guide, there is a link to angular's cdn:
<script src="http://code.angularjs.org/angular-0.9.19.min.js" ng:autobind></script>
Just for the heck of it, I replaced my local angular.js script call with the cdn, and suddenly everything was working as expected.
I double checked, to make sure that I was loading the local copy from the proper directory, and I was - it's the standard directory that comes with the angular-seed file. This file was also showing as a resource that was downloaded properly.
Anyone have ideas on why the cdn worked but the local copy would not?
The angular-seed uses AngularJS 1.0.0rc5 (currently) which is incompatible with 0.9.19. Check out how the seed app is wired. (e.g. remove ng:autobind and add ng:app or ng-app to the html tag in your layout template).
Looks like you are using an old version: You want to read this: http://docs.angularjs.org/#!/guide/dev_guide.bootstrap.auto_bootstrap
What you should be doing is using the new version, and the docs are here: http://docs-next.angularjs.org/guide/dev_guide.bootstrap.auto_bootstrap
For one thing, you're missing a double-quote in your first script reference.