I just started to learn angular, and I`ve created a basic app with angular-material. But I have an error:
[$injector:modulerr]
My html:
<html>
<head>
...
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="assets/javascripts/app.js"></script>
</body>
</html>
In app.js I have this:
var app = angular.module('angularTest', ['ngMaterial', 'ngRoute'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('pink')
.accentPalette('orange');
});
If I remove script tag with app.js, and replace with <script> var app = ...</script> then it works. :(
Does anyone have a solution?
Thanks a lot!
Please check your code, maybe share a plnkr link of it breaking.
There were a few things that were missing in your code snippet (including a closing head, a body start, the ng-app tag and more), which I'm assuming is in the ... section
I created a plnkr with what you had mentioned, and it seems to be working correctly:
<html>
<head></head>
<body ng-app="angularTest">
{{1+2}}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="script.js"></script>
</body>
This correctly loads, and shows 3 in the browser when opened. Plnkr link
You must initialize the angular app on your html page. I can see in the snippets that the app is not intialized. Here is the code which will help you -:
<html ng-app="angularTest">
<body>...</body>
</html>
Related
My Simple Angular JS app isn't working. Can anybody help me out, the following is the code. Index.js is the main file which includes a script file controller.js .
The browser does not shows any errors when I try to run the app:
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.name="Angad";
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>Welcome</title>
</head>
<body ng-controller="myCtrl">
<nav>Navigation</nav>
<div ng-controller="myCtrl">
<input type="text" ng-model="name">
<h1>{{name}}</h1>
</div>
<footer>Copyright-2017</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
it is due to script loading statement
change
<script src="js/angular.min.js" />
<script src="js/controller.js" />
with
<script src="js/angular.min.js"></script>
<script src="js/controller.js"></script>
Simple Angularjs app works without a webserver.
Your example will also work.
Just close the script tag properly.
<script src="js/angular.min.js"></script>
<script src="js/controller.js"></script>
My Html is here:
-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>Events Web</title>
</head>
<body ng-controller="LoginController">
<p>{{name}}, world</p>
</body>
</html>
My app.js is here:
var app = angular.module('LoginPage',[]);
app.controller('LoginController',['$scope',
function($scope){
$scope.name = "100";
}]);
Can some one please help me with this? I tried a lot and couldn't find any mistake.
May be its a small one, but I couldn't find what's the issue
You have forgot to add ng-app="LoginPage"
<html ng-app="LoginPage">
<body ng-controller="LoginController">
<p>{{name}}, world</p>
</body>
</html>
See a basic example of Angularjs 1.3 setup - Sample
So I'm learning angular and I have a very basic html with a js script and I keep getting 'angular is undefined' on line 1 of App.js. I have all of the angular scripts and my script in a Scripts folder. What am I missing?
index.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="appMain">
<head>
<title>{{ Heading }}</title>
</head>
<body ng-controller="homePageViewModel">
{{ Heading }}
<button ng-click="SayHello()">Click me</button>
<script src="Scripts/angular-min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/App.js"></script>
</body>
</html>
App.js
var appMainModule = angular.module('appMain', []);
appMainModule.controller("homePageViewModel", function($scope, $http, $location){
$scope.Heading = "This is the heading";
$scope.SayHello = function () {
alert('Hello');
}
});
Folder structure in VS:
your script is wrongly named it should be this
<script src="Scripts/angular.min.js"></script>
instead of this:
<script src="Scripts/angular-min.js"></script>
Look at your file name and look at your script name.
Given that I've copied your code into a codepen; and the only changes I've made are to reference the CDNJS versions of Angular and Angular Route; and I'm not seeing an issue.
Your issue lies elsewhere.
Specifically, if you're building this project, your output folders need the same relative path to Scripts. In other words, your directory structure expects the following to be true:
- index.html
|
- Scripts
|
- app.js
- angular-min.js
- angular-route.js
Another issue could be that you don't have Copy to output Directory=true or don't have the angular-min.js set as Content (something to be copied to the output folder).
Here's the codepen changes:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="appMain">
<head>
<title>{{ Heading }}</title>
</head>
<body ng-controller="homePageViewModel">
{{ Heading }}
<button ng-click="SayHello()">Click me</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.min.js"></script>
</body>
</html>
you need to set type="text/javascript" in your angular script definitions.
try
<script type="text/javascript" src="Scripts/angular-min.js"></script>
<script type="text/javascript" src="Scripts/angular-route.min.js"></script>
<script type="text/javascript" src="Scripts/App.js"></script>
I faced the same issue about angular being undefined. In my code type="text/javascript" attribute was missing. After I added this attribute, it worked fine. Try this also if the solutions above do not work.
I've been beating my head against what is probably a stupid mistake for the last couple hours. My angular .config module isn't being called and I can't figure out why.
In an effort to eliminate potential sources of trouble, I've reduced my app down to only the entry point index.js file and and am not injecting any dependencies other than ngRoute.
All the files are being loaded just fine and I can trace code execution to the app.config line but breakpoints inside the passed function never get hit and neither of the console.logs ever fire. What am I doing wrong here? I've made angular apps before and never had this issue. I've probably got a typo somewhere that I'm missing but damned if I can find it.
My index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body>
<div class="container">
<div class="row" id="controls">
...
</div>
<div class="row" id="content">
<div ng-view></div>
</div>
<div class="row" id="footer">
...
</div>
</div>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<!--<script type="text/javascript" src="static/js/services.js"></script>
<script type="text/javascript" src="static/js/controllers.js"></script>-->
<script type="text/javascript" src="static/js/index.js"></script>
</body>
</html>
My index.js:
'use strict';
/*global angular*/
var app = angular.module('pagednaApp', ['ngRoute'/*, 'pagednaApp.services', 'pagednaApp.controllers'*/]);
app.config(function($scope, $routeProvider){
console.log('test');
console.log($scope);
$routeProvider
.when('/', {
templateUrl: 'content.html',
controller: 'mainController'
});
});
I think you've forgotten the
ng-app="pagednaApp"
put ng-app
<html lang="en" ng-app="pagednaApp">
You could do angular.bootstrap on your page. That will initialize angular on page.
Add below code to your HTML page.
CODE
<script type="text/javascript">
angular.element(document).ready(function() {
angular.bootstrap(document, ['pagednaApp']);
});
</script>
Thanks.
I have been attempting to follow several different online tutorials, but keep keep failing on the same thing: getting AngularJS to load a HTML template file into the ng-view section in my page.
I have stripped it down as much as possible and am now essentially just copying this simple tutorial.
Please have a look at my test page here: http://inigowebdesign.co.uk/atest/ You should be able to see all the files there in the source code and confirm that they exist and are linked properly. Please, what am I doing wrong?
EDIT: Here is my code as it stands:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Shizzle!</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/angular-route.min.js"></script>
</head>
<body>
<div class="container" ng-app="myApp">
<header>
<h1>Header</h1>
</header>
<div ng-view></div>
<footer>
<h3>Footer</h3>
</footer>
</div>
<script type="text/javascript">
angular.module('myApp', ['ngRoute']).config(function($routeProvider)){
$routeProvider.when('/',{
templateUrl: 'view.html'
})
.otherwise({redirectTo:'/something'});
});
</script>
</body>
</html>
In console you have error: Uncaught SyntaxError: Unexpected token )
This ) was at the end of the first line.
Fixed:
angular.module('myApp', ['ngRoute']).config(function($routeProvider){
$routeProvider.when('/',{
templateUrl: 'view.html'
})
.otherwise({redirectTo:'/something'});
});