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.
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>
I picked up Angular.js yesterday as part of an internship, and Node.js the day before, so I'm a complete beginner with these technologies.
Basically, I tried to make a really simple page with an input field which would print the input text right next to the field, like such. As you can see, it works in a jsfiddle.
But when I try this locally, I get a ReferrenceError at the angular.module call of my controller, and this error in my browser.
Here's my index.html:
<div ng-app="myApp">
<head>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<input ng-model="query"/>
<span><b ng-bind="queryResult()"></b></span>
</div>
<!-- Scripts et liens css.-->
<script src="./controller.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
</body>
And my controller.js:
var myApp = angular.module("myApp", []);
myApp.controller('AppCtrl', function($scope) {
$scope.query = "";
$scope.queryResult = function(){
return $scope.query;
};
});
Any idea what I'm doing wrong ?
you should include
<script src="./controller.js"></script>
after angular js files
The order of your controller file and AngularJS CDN is the problem. Please add your JS file beneath AngularJS CDN.
And also You have added ng-app to a div which does not have a closing tag. It might cause problems too.
Try the following code:
<html ng-app="myApp">
<head>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<input ng-model="query"/>
<span><b ng-bind="queryResult()"></b></span>
</div>
<!-- Scripts et liens css.-->
<script src="./controller.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
</body>
</html>
It looks like you are including jQuery after angular. jQuery should be first.
It also looks like you are including angular twice.
angular.min.js and angular.js
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>
I am trying to add some routing to my project. And I am using basic angular route with Angular 1.3.0
app.js file:
'use strict';
var routerApp = angular.module('mcw', [
'ngRoute',
'mcw.controllers',
'directives',
'filters',
'mcw.services']);
routerApp.config(function ($routeProvider) {
$routeProvider
.when('/', {templateUrl: 'index.html', controller: 'LoginController'})
.when('/Home', {templateUrl: 'templates/home.html', controller: 'ResourcesController'})
.otherwise({redirectTo: '/'});
});
index.html file:
<!DOCTYPE html>
<html lang="en" ng-app="mcw">
<head>
<meta charset="utf-8">
<title>title spec</title>
<script src="js/angular1.3.0/angular.js"></script>
<script src="js/angular1.3.0/angular-route.js"></script>
<script src="js/angular1.3.0/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/commonFunc.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
<script src="js/server.js"></script>
<script src="js/services.js"></script>
</head>
<body>
</body>
</html>
I use 'python -m http.server' (Python 3.4.3) as the server, and the urls of
"127.0.0.1:8000/", "127.0.0.1:8000/index.html", "127.0.0.1:8000/index.html#/Home" all goes to index.html page.
You have missed ng-view directive on page, which loads view from $routeProvider and the template & specified controller will get loaded in the ng-view element.
Add it inside body
<body>
<ng-view></ng-view>
</body>
Yes you need ng-view inside the body.
Only what you load inside the ng-view tag should not be index.html in my view. (but what you want to place inside the ng-view tag). The index.html should be the page where you place your ngview. To load other html files in (insie the ng-view tag)
The way it works is that the 'directives' will be placed INSIDE the ng-view tag.
(to be more specific, the html files you typed in your router {.when} objects.
in your case: templates/home.html and what you called index.html
<!DOCTYPE html>
<html lang="en" ng-app="mcw">
<head>
<meta charset="utf-8">
<title>title spec</title>
<script src="js/angular1.3.0/angular.js"></script>
<script src="js/angular1.3.0/angular-route.js"></script>
<script src="js/angular1.3.0/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/commonFunc.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
<script src="js/server.js"></script>
<script src="js/services.js"></script>
</head>
<body>
<ng-view></ng-view>
</body>
</html>
Or you can even use a div with ng-view inside it if you wish. (i reccomend the first method)
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'});
});