the following is my app.html - template where i will be injecting my other partial views as to come,
<html ng-app="billApp">
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
...
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
{{ message }}
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
</body>
</html>
And this is the script.js file which is the controller for the application,
// script.js
// create the module and name it scotchApp
var billApp = angular.module('billApp', []);
// create the controller and inject Angular's $scope
billApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see!';
});
while i try to run the script.js file using my commandline
change directory to nodejs directory
type in 'node path-of-the-project-file\script.js'
which throws the following error,
var billApp = angular.module('billApp', []);
Reference error angular not defined.
I m somehow missing out on some basic detail. It would be great if someone could give me some directions here
Replace
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-resource.min.js"></script>
line with
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-resource.min.js"></script>
Because its not getting library which is required by ngResource.
AND
Include this line in the beggining
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
you need to incude jquery before the angular script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Related
When no modules are added, everything works for the page using controller 'articles', when adding modules needed the page needing controller 'flow' everything works in flow, but 'articles' gives me this error.
var AC = angular.module('AC', ['ngRoute','ngMaterial','firebase'])
AC.controller('articles', function($scope){...})
AC.controller('flow', function($scope,$firebaseArray) {...}
My scripts:
<!-- START STYLE AND SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- END STYLE AND SCRIPTS -->
I addded the ngRoute module, it didn't work. Then I tried using the normal angular.js file as it apparently gives a specific error, didn't work as well.
Any help?
Try this order with the mathcing versions of angular-route and angular-fire
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<!-- Angular Route -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<!-- Angular Material -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<!-- our own app scripts -->
<script src="js/concat/app.js"></script>
Apologies for this question. The libraries were added on the flow.html file but not on the article.html file. The two solutions I provided at the bottom of the question does work as answered in previous questions.
I have an index.ejs page that has a slideMenu which inserts other HTML views in the index.ejs page.
Each html view has its own controller. Each controller is in its own .js file. I am including all these scripts in the index.ejs file, however this causes the following problem and the HTML views don't load properly.
<!DOCTYPE html>
<html ng-app="myapp" xmlns:width="http://www.w3.org/1999/xhtml">
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body layout="column">
<!-- ANGULAR MATERIAL DEPENDENCIES -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- ANGULAR MATERIAL DEPENDENCIES END-->
<md-content>
<div ng-include="'/html/newCode/addCircleTimeSong.html'"></div>
</md-content>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="javascripts/newCode/Controller_CircleTimeSongPage.js"></script>
<script src="javascripts/newCode/Controller_ObservationPage.js"></script>
<script src="javascripts/newCode/Controller_CircleTimeActivityPage.js"></script>
</body>
</html>
I get the following error:
Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=CircleTimeSongPageController&p1=not%20aNaNunction%2C%20got%20undefined
If you have written this statement
var mainApp = angular.module("myapp", ['ngMaterial']);
in all the controller files. This is what causing this error. This statement creates and initializes the myapp module. So if you use this statement in all the controller files, you will be reinitializing the myApp every time hence the angular error.
Replace it with this statement in other controller files
var mainApp = angular.module("myapp");
The above statement means fetch/reference already created/initialized myapp module.
I have a navbar I am trying to inject into a main page. I ran the page and checked F12 > Network which showed that the directive's templateURL (navbar.html) was either not called or not injected. There are no errors. Anyone have any idea what might be wrong with my code?
The directory structure is:
landingpage.html
js
controllers
NavController.js
directives
navappDirective.js
app.js
templates
navbar.html
Below is the code:
landingpage.html
<html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--<link href="../css/landingpage.css" rel="stylesheet">-->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<script type="text/javascript">
alert("this works");
</script>-->
<body>
<div>
<navbar ></navbar>
</div>
<!-- Insert navbar-->
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/NavController.js"></script>
<!-- Directives -->
<script src="js/directives/navappDirective.js"></script>
</body>
navappDirective.js
navapp.directive('navbar', function() {
return {
restrict: 'E',
scope: {
},
/*template: '<p>Hi</p>'*/
templateUrl: 'templates/navbar.html'
};
});
navbar.html just has a paragraph currently for testing purposes.
Thanks
ng-app is missing in landingpage.html
In you landingpage.html, please update it as below
<body ng-app="myapp">
In app.js, you probably should have
angular.module('myapp',[]);
Thank You everyone!
I had ng-app called in navbar because that is where I was using the controller information and thought that would work.
The problem was solved with the following steps:
Changed the templateURL to ../../templates/navbar.html
Called the ng-app directive on the landingpage.html This allows the page to call the app. The still have the ng-controller directive in navbar for encapsulation purposes.
After the above steps I still got a cross referencing error since you cannot call a html file from a file system. So I ran a python server using python -m http.server (for Python 3) after cd'ing to the directory holding my project. Then I could run my project using localhost:8000/
i'm starting with angular,express and node js and i'm trying to load 2 directives in an html page using the oc-lazy-load directive.
I'm doing like this: https://oclazyload.readme.io/docs/oclazyload-directive
<!DOCTYPE html>
<html lang="fr" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Angular,MongoDB,Express,NodeJS</title>
</head>
<body>
<!-- Header placed here and included by oclazyload and header directive -->
<div oc-lazy-load="['./modules/headfoot/directives/header.js']">
<appheader></appheader>
</div>
<main>
<!-- All modules views will be placed here and included by ui-view directive -->
<div ui-view></div>
</main>
<!-- Footer placed here and included by oclazyload and footer directive -->
<div oc-lazy-load="['./modules/headfoot/directives/footer.js']">
<appfooter></appfooter>
</div>
<!-- LOAD FILES -->
<!-- angular -->
<script src="./angular/angular.min.js"></script>
<!-- ocLazyLoad -->
<script src="./oclazyload/dist/ocLazyLoad.min.js"></script>
<!-- ui-router -->
<script src="./angular-ui-router/release/angular-ui-router.min.js"></script>
<!-- app routes -->
<script src="./modules/routes.js"></script>
</body>
</html>
But it always load the last directive.
So if i delete footer it will load the header directive.
If i delete header, it will load footer...
A hint? thank you!
I am new to angular js . I have two modules first2a,first22. Each modules have one controller model1 and model2.
Below is my Html code
<!DOCTYPE html>
<html >
<head>
<link rel="icon" type="image/png" href="globe/images/correct.png"/>
<link rel="stylesheet" type="text/css" href="globe/css/style.css"/>
<script type="text/javascript" src="globe/script/jquery.js"></script>
<script type="text/javascript" src="globe/script/angular.js"></script>
<script type="text/javascript" src="globe/script/mainscope1.js"></script>
<script type="text/javascript" src="globe/script/angular-route.js"></script>
<title>
Html5 All in One
</title>
</head>
<body >
<!-- MAin page -->
<div ng-app="first22" id="maincontainer" >
<div ng-controller="model1">{{message}}</div>
</div>
<!-- MAin page End-->
<!-- Interactivity page -->
<div id="Interactive_content" ng-app="firsta" >
<div ng-controller="model2">{{message}}</div>
</div>
<!-- Interactivity page End-->
</body>
</html>
mainscope1.js
var first2 = angular.module('first22', []);
first2.controller('model1',function($scope)
{
$scope.message="aaaaaaa";
})
var first2a=angular.module('firsta',[]);
first2a.controller('model2',function($scope)
{
$scope.message="aaaaaaa1";
})
Can anyone explain why firsta module is not working here. Thanks in advance
Try using angular boostrap , to happen when the document is ready:
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('maincontainer'), ['first22']);
angular.bootstrap(document.getElementById('Interactive_content'), ['firsta']);
});
Check this fiddle
You can only use ng-app once per page. Are you trying to create two separate web applications side by side on this page, or are you only trying to have two controllers within a single application?
If you really want them to be a single application (which is what you normally would want), you set ng-app so that both ng-controller directives are inside it. For example, you can set ng-app on the html-tag, the body-tag or a div that wraps it.
<!DOCTYPE html>
<html >
<head>
<link rel="icon" type="image/png" href="globe/images/correct.png"/>
<link rel="stylesheet" type="text/css" href="globe/css/style.css"/>
<script type="text/javascript" src="globe/script/jquery.js"></script>
<script type="text/javascript" src="globe/script/angular.js"></script>
<script type="text/javascript" src="globe/script/mainscope1.js"></script>
<script type="text/javascript" src="globe/script/angular-route.js"></script>
<title>
Html5 All in One
</title>
</head>
<body ng-app="myAngularApplication">
<!-- MAin page -->
<div id="maincontainer" >
<div ng-controller="model1">{{message}}</div>
</div>
<!-- MAin page End-->
<!-- Interactivity page -->
<div id="Interactive_content" >
<div ng-controller="model2">{{message}}</div>
</div>
<!-- Interactivity page End-->
</body>
</html>
And the javascript would be:
var first2 = angular.module('myAngularApplication', []);
first2.controller('model1',function($scope)
{
$scope.message="aaaaaaa";
});
first2.controller('model2',function($scope)
{
$scope.message="aaaaaaa1";
});
OR, if you want to create two fully separated applications on the same page, you need to bootstrap them manually without using ng-app. Please see this SO question for details on how to do that.
Possible duplicate of this question:
https://stackoverflow.com/a/12864137/1177295
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