This reminds me of an old song:
"You see I've been reading samples of an app with no name..."
I'd better stop or I'll hear from Neil Young's lawyers.
I am studying AngularJS on W3Schools and in some of their examples the ng-app attribute is an empty string. In others it has a name for the app. It seems that when there is no name there is also no controller function defined in the client script and the application is automatically wired up from the HTML. But in those examples if I enter a name in the ng-app tag it breaks the page. So that raises two questions:
1 - What's the difference between having an ng-app tag with a name and one with an empty string? Does no name mean no controller function is defined?
2 - Is it bad to have an ng-app with no name? Should I always name my ng-app and load it with a controller function?
"...it felt good to be out from the rain."
Edit: Looking at the alternate question "Using ng-app without a value", it is similar, but it doesn't directly address my question. It asks: How to use ng-app without a value. I'm asking for someone to explain: What is the difference between using ng-app with a value and without a value.
Few points here:
Recommend the official docs because the author is the person knows the framework the best.
There are two ways to bootstrap the angular apps: automatically and manually
when you use with ng-app="appName", angularjs will automatically find the element with the tag 'ng-app' and initialize the application.
when you ignore the ng-app, you need to bootstrap the app yourself:
.
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
recommend always bootstrap app with either manual or auto.
===EDIT===
To be clearer :
The stackoverflow link given by #Animal2 has very good explanation. In a short, before angular version 1.3, you can use ng-app as DOM element attribute without any value, because angularjs will handle everything else for you
:
<div ng-app>
....
</div>
but after version 1.3 it is NOT recommended to use this syntax. Instead you can use the 'auto' way and 'manual' way mentioned earlier.
You can specify an AngularJS module to be used as the root module for the application. This module will be loaded into the $injector when the application is bootstrapped. It should contain the application code needed or have dependencies on other modules that will contain the code. See angular.module for more information.
https://docs.angularjs.org/api/ng/directive/ngApp
Someone has already asked this question
Using ng-app without a value
While it isn't exactly 'incorrect' to have an empty ng-app, it is not recommended and won't work for even a slightly complex app. Think of it as a way to show whip up something quickly.
If there is no ng-app specified, it only means that there is no module to assign controllers (and whatever else you want) to, but as you can see it does still work... for the time being.
Related
I'm trying to follow this tutorial here: http://www.mattburkedev.com/multiple-angular-versions-on-the-same-page/
It works until I inject my widget into a page that already has includes AngularJS and is using ng-app somewhere in the page. Both my version, and the existing version see the 'ng-app' and try to bootstrap it. The result is an error like:
Uncaught Error: [ng:btstrpd] App Already Bootstrapped with this Element '<div ng-app="myApp" class="ng-scope" ng-controller="IndexController">'
So my question is, is it possible to load in my version of Angular I need for my widget, and then tell it to not try and bootstrap anything automatically. I am handling it via:
angular.bootstrap(angular.element(appDiv), ['myWidget']);
In documentation is written:
only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead.
So, it is possible, but you didn't provide any code.
Here is the example of two applications on one page.
i am a beginner when it comes to angular
so here is the fiddle
http://jsfiddle.net/prantikv/knc6vrd9/1/
i have an simple app and as you can see i am just trying out the basics.
The example works fine on jsfiddle but when i run it on my machine i get a huge piece of error staring like this
Error: [ng:areq] Argument 'SimpleCont' is not a function, got undefined
And the ng-repeat doesnt show any output and the text input also doesnt work as well
i have run the page via a local wamp server as well and get the same result
Ommit creating a function, since angularjs is modular and provides you mechanism to create controllers, which can be used in applications.
So in your code, instead of:
function SimpleCont($scope){
$scope.nameList=[
{firstname:'john'},
{firstname:'jane'}
];
}
Create module and controller within it. First use module method from angular, which takes as first parameter name of module ( later to include in ng-app ) and as a second parameter dependency list, which in this situation is empty.
angular.module('myApp', []).
Then invoke controller function on module.
Module method always return itself, so you can add later another contorllers by using dot ..
controller('SimpleCont', function(){
this.nameList=[
{firstname:'john'},
{firstname:'jane'}
];
});
This is code instead of function, this code sets module and assign controller to it.
In your application to use module and created controller within it, set ng-app properly.
instead of:
<div ng-app>
use:
<div ng-app="myApp">
Generally good to know how to create controllers and modules in angularjs for beggining, because later you can learn other curious things like services, factories and also get to know what is $http service and how to use it for making ajax calls.
Also good to automate work thanks to grunt, karma and yeoman.
Here is good tutorial to start.
Here is about yeoman a tool you can use to work with angular.
Is there a way to prevent Angular from creating "helper" HTML comments? For example,
<div ng-include="myTemplate"></div>
Will transform into something like
<!-- ngInclude: 'hurr-durr.html' -->
<div ng-include="myTemplate"></div>
How do I stop this? I've looked into the Angular source, and I've seen these "helpers" are generated by an unconditional document.createComment inside almost every directive, so I guess there's no way to stop them all at once by using a config setting on a provider or something.
But maybe there is some custom Angular build without "helpers"?
I suppose I could write some Yeoman/Grunt task to remove/comment the .createComment-s from Angular's source whenever I scaffold a new project. Or maybe you guys know of a fiddle that already does that? And also, this raises my last question:
Are those comments somehow crucial to the Angular's normal functioning? And if I remove them, will it cause some kind of instability in my app? Should a just rewrite the CSS and "deal with it"?
The comments are crucial to how Angular handles certain elements. Removing them is not currently an option. What issues are you having with it?
You are able to remove the contents of these angular comments, as well as some of the classes angular attaches to elements (e.g ng-scope) by adding this config to your angular module:
myApp.config(['$compileProvider', function ($compileProvider)
{
$compileProvider.debugInfoEnabled(false);
}]);
According to the angular.js docs, it is actually good to do this in production and should result in a performance boost.
From Angular Doc:
Disabling Debug Data By default AngularJS attaches
information about binding and scopes to DOM nodes, and adds CSS
classes to data-bound elements:
As a result of ngBind, ngBindHtml or {{...}} interpolations, binding
data and CSS class ng-binding are attached to the corresponding
element.
Where the compiler has created a new scope, the scope and either
ng-scope or ng-isolated-scope CSS class are attached to the
corresponding element. These scope references can then be accessed via
element.scope() and element.isolateScope().
Tools like Protractor and Batarang need this information to run, but
you can disable this in production for a significant performance boost
with:
myApp.config(['$compileProvider', function ($compileProvider) {
$compileProvider.debugInfoEnabled(false);
}]);
If you wish to debug an application with this information then you
should open up a debug console in the browser then call this method
directly in this console:
angular.reloadWithDebugInfo();
The page should reload and the debug information should now be
available.
For more see the docs pages on $compileProvider and
angular.reloadWithDebugInfo.
Working on a module based app where depending on the user, I'll load a given template (view) as a module inside a common view. The problem is that the different views require different controllers and they one share a small set of common form inputs.
Based on a call to my server I'll get a JSON response containing what view/controller should be loaded for that user. This solution worked fine earlier as all my controllers were in the global scope:
$scope.corporation.payloadController =
// Contains the String "ComputerPayloadCtrl"
[window]data.corporation.payloadController;
Now however, after I have rewritten the applications to use the angular module design pattern, I get the following error (I no longer use [window]):
Argument 'corporation.payloadController' is not a function, got string
The controller is already defined, so I'm only looking for a way to reference it by String.
.controller('ComputerPayloadCtrl', ['PayloadService', '$scope',
function(PayloadService, $scope) {
$scope.payload = PayloadService.payload;
}])
The more I work with this problem, the more this entire approach I've chosen is bugging me. So if anyone has any suggestions on how to alternatively solve this I'll gladly hear it.
Edit: So I found a very simple workaround, but I'll let the question stand in case there is an actual way to do this.
I've just started using angular and javascript and I can't really figure out how to structure my application.
I started writing a Controller and my first reflex is to put what I would call my model into a class in a different file.
I have different option
1 - putting everything (model + controller ) in one file
2 - using requireJS so my controller can 'include' my model. I've managed to do it, put it wasn't straight forward and I still have problem to make the yeoman dist version to work.
3 - use angular module, which seems to be the recommended way, but if choose this solution do I need to load explicitly my model file in the main html file. I understand that not hardcoding the dependency between files can be a good thing, so you can for example swap or change some components, but it seems wrong when for example a subclass need to requires its parent class. If I need to split a module in lots of angular submodules, do I need to load them all explicitly ? That's seem totally wrong.
Am I missing something ? what is the standard way to do so ?
What I found quite useful are the MTV meetup sessions. They give a good overview about how to apply best practices in AngularJS:
Best Practices: http://www.youtube.com/watch?v=ZhfUv0spHCY
Angular+Yeoman: http://www.youtube.com/watch?v=XOmwZopzcTA
There are many more videos on youtube. I hope this helps giving a first idea.