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.
Related
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/
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>
I'm trying to use these c3 angular charts, but nothing seems to be showing up on the page. THere are no console errors I can find and I've followed the tutorial but nothing appears still.
I've pulled the git repo and referencing the files I think I need.
Why can't I see anything?
Charts:
https://github.com/jettro/c3-angular-directive
Tutorial:
http://jettro.github.io/c3-angular-directive/
Code:
<!DOCTYPE html>
<html ng-app="chart_test" xmlns="http://www.w3.org/1999/html">
<head>
</head>
<body ng-controller="ChartController">
<h1>Line Graph</h1>
<div id="chart1"></div>
<c3chart bindto-id="chart1" show-labels="true">
<chart-column column-id="line1"
column-name="Line 1"
column-color="green"
column-values="30,200,100,400,150,250"
column-type="line"/>
<chart-points point-radius="5"
show-point="true"
point-expand-enabled="true"
point-expand-radius="10"/>
</c3chart>
<script src="d3.min.js"></script>
<script data-require="angular.js#1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="c3-angular.min.js"></script>
<script src="app.js"></script>
<script src="ChartController.js"></script>
</body>
</html>
App.js:
var app = angular.module("chart_test", []);
Chart Controller:
var myApp = angular.module("chart_test");
myApp.controller("ChartController", ["$scope", function($scope){
$scope.message = "hi";
}]);
I am no expert on the subject, but in the getting started section of the page you provided, it says
You have to add the following libraries and stylesheet.
And then lists the following code:
<link href="css/c3.min.css" rel="stylesheet" type="text/css"/>
<script src="js/d3.min.js" charset="utf-8"></script>
<script src="js/c3.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/c3-angular.min.js"></script>
<script src="js/app.js"></script>
From what I see, you have included d3.min.js, angular.min.js, c3-angular.min.js, app.js but NOT c3.min.css and c3.min.js.
I would advise you to try including them and if it then still doesn't work, update your question with how that went.
I'm working on a Node.js project that uses Angular, and I'm trying to implement multiple views and routing. I've followed the instructions outlined here for installing the angular-route.js file and dependent module:
https://docs.angularjs.org/api/ngRoute
But I still get this error in the console:
Uncaught Error: [$injector:modulerr] Failed to instantiate module blogApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.20/$injector/nomod?p0=ngRoute
Here are the parts that seem relevant from my controller and HTML files:
app.js
var blogApp = angular.module('blogApp', ['ngRoute']);
index.html
<!DOCTYPE html>
<html ng-app="blogApp">
<head>
<title>Blog Posts</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- styles -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="stylesheets/style.css" rel="stylesheet" media="screen">
</head>
<body ng-controller="postController">
// page content
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.js"></script>
<script src"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-route.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="javascripts/app.js"></script>
</body>
</html>
I'm new to working with Angular and Node, so any thoughts on this greatly appreciated!
It's just a typo (missing equal sign). This line:
<script src"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-route.js"></script>
Should be:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-route.js"></script>
There is a very small typo in the script include for ngRoute. You had src"https:// rather than src="https://
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-route.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="javascripts/app.js"></script>
You can debug these kinds of issues by checking the developer tools and making sure the script is loaded without error.
i have this files under my project and i'm encountring some trouble loading them with ajax and applying angular , here is the plunk :
http://plnkr.co/MxXzlenAuGcDy8iljKYX
the problem is that the content of sidebar.html get loaded and the controller gets executed correctly but for products.html the content only gets loaded and the controller doesn't get executed.
i am using this under chrome and i don't get any errors in my localhost console
I put together a modified version of your plnkr to show how I would approach this in general with Angular and dropped out jQuery since it wasn't necessary here:
http://plnkr.co/edit/QgPUk1JMP1vaWtwgXGbw
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.14/angular.js" data-semver="1.2.14"></script>
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.14/angular-route.js" data-semver="1.2.14"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="category.js"></script>
<script type="text/javascript" src="products.js"></script>
</head>
<body ng-app="myApp">
<div ng-include="'sidebar.html'"></div>
<div ng-view></div>
</body>
</html>
JS
// Code goes here
var app = angular.module("myApp" , ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/products/:prodId",{templateUrl:"products.html"})
.when("/products",{templateUrl:"products.html"})
.when("/", {templateUrl:"home.html"})
.otherwise({redirectTo:"/"});
})