I am currently using 1.5.3 AngularJS Version & ng-include="'file.html'" is not working
<!DOCTYPE html>
<html lang="en-US" ng-app="myApp">
<head>
<!-- Include AngularJS Files -->
<script src="vendor/AngularJS/angular.min.js"></script>
<title>Website Title</title>
</head>
<body>
<!-- Include Content.html to index.html -->
<header ng-include="'content.html'"></header>
</body>
</html>
When i run this code it doesnt show anything on index.php
content.html exists with:
<h1>Hello, this is my website.</h1>
It will just not work.
my plunker code to see how i am doing it
plnkr.co/edit/OagoGf8AavIRxFgGVZSl
You have to have to use angular.module to have angular bootstrap your application to the dom. This is how angular starts.
The format is
angular to call angular,
.module to specify to angular which module you are looking for,
('myapp' the name of the module
, []) to specify any dependencies your app has. You can attach all sorts of stuff to your app which is extremely useful.
altogether, that's angular.module('myApp', [])
Note, you can hook into your app without re-bootstrapping at anytime with angular.module('myApp') without the array of dependencies. This will retrieve your application without instantiating it. Then you can chain controllers, factories, whatever to it like this:
angular.module('myApp').controller('MyCtrl', function($scope) {})
It looks like you're coming from PHP, so you're in for a real treat once you start using angular. Good luck with your app!
Here, I edited your plunker: http://plnkr.co/edit/fQnngC49d5QsHAzti7Nc
just take a look at console errors?
Plunker says that there is no module "myApp". So, you didn't include any .js files in plunker.
Actually I didn't know, is angular work right way without any js, but in normal case you should define the main app module and controllers for each page
Angular isn't actually running on that page. Just including angular in your <head> isn't quite enough.
Here's what you've done so far:
Define an HTML file that pulls in the angular library.
Write HTML that tells the page that it should be using the angular module myApp.
What you need to do now is simply create that module. To so this, just create a javascript file with one line:
angular.module('myApp', []);
This creates an angular app called myApp on the global scope. Then add a <script> tag to include the new .js file in your index.html. That's it! Now Angular will look at you HTML file, see that you want the app myApp to run on the HTML, and it will find that app in your new JS file.
Here's your plunkr updated
Hope this helps.
Related
I'm building a SPA with AngularJS.
How can I load a javascript file as a dependency, but this dependency can not be declared in the head tag of index.html because of the conflict with another dependency of a partial one, ie I need to inject the dependency when the partial is invoked and when I leave from this partial and to another, I need this dependence to be removed.
The dependency is:
<script src="/geodera/js/validatorsignup.js"></script>
I have index.html as layout, signup.html as partial as needed of this dependency, and UserCtrl.js as controller of that partial.
If my question was not clear, I apologize, because I'm kind of lost here.
You can use import at the top of your UserCtrl.js controller to include the dependency for that controller only.
import ValidatorSignup from '/geodera/js/validatorsignup.js';
Then you can use the dependency under the variable name ValidatorSignup
I am working on angularjs project that I generated using yeoman angular generator.
I have a jQuery function that I need to use in most of my html views.
A possible solution is to add this function to a script.js file for example, and add this file as reference in the html views that require this function. However, I don't think this solution is good.
When yeoman generates an angularjs project, in its index.html file, it adds a section
<!-- build:js({.tmp,app}) scripts/scripts.js -->
within this section, the different script files are added since as I think, on build, those files will be unified in a single scripts/scripts.js file.
I tried to do the same by adding the function to a script file, and added the reference of the this script file to this section. The problem is that the function is not working when I try to call it from any view.
What can I do to solve it?
DOM manipulation is done with directives in angularjs you will need to check out the docs: https://docs.angularjs.org/guide/directive
If you are not manipulating the DOM you can create a service that can be injected into any controller.
Services documentation: https://docs.angularjs.org/guide/services
from there you can assign a function in the controller to the scope that can be accessed in the view. e.g.
$scope.MyFunction = function(){
// Code goes here
}
you can call the function in the html as
<div ng-click="MyFunction()"></div>
I am just beginning to learn javascript and angularjs using
https://thinkster.io/mean-stack-tutorial
I set up a basic IntelliJ javascript project and created the following files
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Angular App!</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="HelloWorld" ng-controller="MainCtrl">
<div>
{{test}}
</div>
</body>
</html>
and app.js
var app = angular.module('HelloWorld', []);
app.controller('MainCtrl', [
'$scope',
function($scope){
$scope.test = 'Hello world!';
}]);
but I keep getting "ReferenceError: angular is not defined" when I attempt to run the program. Searching through the other questions on this website most of the answers involve the
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js">
line being called after app.js is started, which I don't think is the problem here. Can anyone give some insight for a complete beginner?
I'd like to comment directly, but I'm not a power user enough... so I'll go here!
What yarons mean, was use the developer apps in your browser (please not IE) and check the output in the console and also in the console where your Node app is running.
Two suggestions here:
Are the dependencies correctly set in your application? Check your
package.json file, find the angular tag and check whether there
might be a version conflict.
Copy the following files from /node-modules/angular in
/public/libs/angular and set your script ref in your index.html to
angular.min.js
angular.min.js.map
angular-csp.css
<script type="text/javascript" src="libs/angular/angular.min.js"></script>
Note that the most common way is to use the libs from CDN, but there are reasons to keep them locally...
I have some simple pages that don't need a specific application module to be provided in the ng-app attribute. But those pages also use some of my custom directives.
As it seems natural I've put all my directives in separate namespace (namely module) i.e. MyApp.Directives.
This is all great when I also provide my application module, because I add MyApp.Directives as dependency and it works.
angular.module("MyApp", ["MyApp.Directives", ...])
But. As said I also have some very simple pages, that don't really require any particular application module because they don't need any custom controllers or anything. They're just driven by ng-... attributes/directives.
Question
I know I can simply add all my custom directives to ng module and they will become accessible to all pages. Those with custom application module and those without. But this beats the purpose of modules, so I'm wondering if there's any other way to tell dependency injector of my additional directives/filters?
I would like to avoid any unneeded code in my application to keep is small and maintainable. (what AngularJS is all about). What I'm looking is actually some sort of hack that I'd be using in my directives' files to make ng module aware of my directives but without adding them to ng module directly... A rather advanced Angular question as it likely involves some internals manipulation.
I've tried manully adding my directives' module to angular.module("ng").requires array but that didn't do the trick.
#1) If you only have one module you can do it with ngApp:
<html ng-app="MyApp.Directives">
#2) If you have multiple modules you can use angular.bootstrap like so:
angular.element(document).ready(function(){
angular.bootstrap(document,['MyApp.Directives','MyApp.Filters']);
});
#3) Or just create a simple module for declaring dependencies:
<html ng-app="myApp">
......
<script>
angular.module('myApp',['MyApp.Directives','MyApp.Filters']);
</script>
If we could only write something like this:
<html ng-app="MyApp.Directives MyApp.Filters">
I made a patch to the source code:
function angularInit(element, bootstrap) {
// some code
if (appElement) {
bootstrap(appElement, module ? module.split(/\s+/) : []); // split by spaces :)
}
}
Here is a demo: http://plnkr.co/edit/kSrY3WYzLG39NJ4UgTRM?p=preview
I understand that ng-app initializes a module in AngularJS as follows:
var app = angular.module('myApp', []);
<html ng-app="myApp">
But when I teach this to someone new to AngularJS or watch a video, instructors inevitable fumble over the inconsistency in the terminology between app and module. AngularJS is so well thought out as a framework that I'm surprised it hasn't changed to:
var app = angular.app('myApp', []);
<html ng-app="myApp">
OR
var app = angular.module('myModule', []);
<html ng-module="myModule">
Has anyone been following the project long enough to know the history on this part of the framework?
I don't think Craig is asking what does ng-app do or how does it work.
I think he's asking why did the people that created angular name that directive ng-app. Why didn't they name it ng-module. ng-module would be easier to understand.
For example ng-controller should name a controller, ng-module should name a module. The angular methods to create them are named module() and controller(), there is no method or entity called "app".
I tend to agree with Craig. That said if I were go speculate why they named it ng-app I would think it's because you are only allowed to have one ng-app directive in your HTML. If you wanted to have more than one module associated with your HTML page you can do it programmatically.
So ng-app is more of a utility to bootstrap your HTML with a module, it is not a generic way to associate modules with your HTML.
If you look at the documentation that's what it suggests:
Use this directive to auto-bootstrap an AngularJS application. The
ngApp directive designates the root element of the application and is
typically placed near the root element of the page - e.g. on the
or tags.
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. AngularJS applications cannot be
nested within each other.
http://docs.angularjs.org/api/ng/directive/ngApp
All that said if you want an ng-module directive you could always write your own to wrap the angular.bootstrap() function. You can find more details and code about how to do this on a blog post I wrote about it: AngularJS: Getting around ngApp limitations with ngModule
ng-app means: That page has Angular in it!
ng-app="module" means: That page has Angular in it and necessary controls/services/etc are defined in that module.
ng-app defines the main or bootstrap module of your application, which should perform the initialization task of your application. There may be case where at run time you want to decide what which should be the main module of your application. Like in java you have many methods and classes but you define one main method as starting point. Similarly, in angular you have many module, however, you define one module as the starting point of application.