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
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 have created a custom directive named myAddress. I shall be using it in another html page. The custom directive is only working if I give it a ng-app in the element as below.
<my-Address ng-app="customModule"> </my-Address>.
but not working if I write this
<my-Address > </my-Address>.
I should get it working without the ng-app in the element.
The following is the custom directive code.
var mainApp = angular.module("customModule", ['ngSanitize', 'schemaForm']);
mainApp.directive('myAddress', [function() {
var directive ={};
directive.restrict = 'E';
directive.templateUrl = 'customDirective.html';
directive.controller = 'myController';
//directive.module = 'customModule';
directive.compile = function($scope, element, attributes) {
}
return directive;
}]);
The html where the directive is added.
<!Doctype html>
<html >
<head>
<title>Angular JS Custom Directive</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h2> some heading </h2>
<my-Address ng-app="customModule"> </my-Address>
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="customDirectiveScript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.js"></script>
<script src="tv4.js"></script>
<script src="ObjectPath.js"></script>
<script src="schema-form.js"></script>
<script src="bootstrap-decorator.js"></script>
</body>
</html>
Please help, thanks in advance.
try the following
<!Doctype html>
<html >
<head>
<title>Angular JS Custom Directive</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="customModule">
<h2>NationWide Standardized </h2>
<my-Address > </my-Address>
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="customDirectiveScript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.js"></script>
<script src="tv4.js"></script>
<script src="ObjectPath.js"></script>
<script src="schema-form.js"></script>
<script src="bootstrap-decorator.js"></script>
</body>
</html>
Take a good look at the ng-app on the body tag.
If you want to use it inside another ng application. you need to inject you customModule inside this application
see this example
angular.module('myApp',['customModule'])
the custom module you wrote will be injected inside another angular application which gives you access to you my-address directive
Your <html> needs a ng-app attribute, if you're not going to call angular.bootstrap() yourself (you might want to do that for reasons related to asynchrony).
You want to put that on your top-level tag (which should be html), because anything outside of that won't be picked up by angular (that means controllers, views, foreaches, etc, etc).
This is why your code doesn't work: Angular is not "enabled" outside of the ng-app-enabled element.
I am just learning angular.js here is my first 'hello world' script. I am trying to use ng-include to include a navbar from local file /templates/nav.html. I am following a tutorial and cant figure out why its not working.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body ng-app="app">
<header ng-include src="'templates/nav.html'">
</header>
<div ui-view></div>
<section>
</section>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/app.js"></script>
</body>
this is my js/app.js file:
angular
.module('app', [
'ui.router'
]);
templates/nav.html is simply the default bootstrap navbar. what am i doing wrong?
You need to include your js/app.js file as a script - right now there's no angular app being instantiated.
Add this as the last script to be included:
<script src="js/app.js"></script>
It should be:
<div ng-include="'templates/nav.html'"></div>
And put the header tag inside your nav.html.
I am having trouble setting up twitter typeahead. Heres what I have done.
I created an index.html at my test folder.
I saved the typeahead as typeahead.js inside the folder js.
But its still not working. Here is the code for the index.html
<body>
<div>
<input id="product_search" type="text" data-provide="typeahead"
data-source='["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]'>
</div>
<script src="js/typeahead.js"></script>
</body>
And here is the full code.
(typeahead) is not supported in bootstrap version (3.3.4) it is supported in version (2.3.2). So try the following:
<head>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="js/typeahead.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css"></script>
</head>
Always you should include first Jquery link after that bootstrap js then typeahead js then bootstrap css
<head>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/typeahead.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></script>
</head>
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.