I'm learning AngularJS and I have a strange problem with it. My code is as follows:
html:
<!doctype html>
<html ng-app="blogApp">
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container" ng-controller="blogPostsCtrl">
<article ng-repeat="post in posts">
{{post.title}}
</article>
</div>
</body>
</html>
js:
var blogApp = angular.module('blogApp', ['ngSanitize', 'ngRoute']);
blogApp.controller('blogPostsCtrl', function($scope, $http) {
$http.get('//jsonplaceholder.typicode.com/posts').success(function(data) {
$scope.posts = data;
$scope.postsLoaded = 'visible-lg';
});
});
It should be working, as I create a module and then controller for it. But it returns an error: https://goo.gl/UWFMNm. What can I do?
Looks like you didn't install ngRoute. It comes separately in its own file/module.
As the error page says:
Using ngRoute
In AngularJS 1.2.0 and later, ngRoute has been moved to its own module. If you are getting this error after upgrading to 1.2.x or later, be sure that you've installed ngRoute.
ngRoute Documentation - include the file from there for it to work
Related
Problem with ng-controller : Error: [$controller:ctrlreg] http://errors.angularjs.org/1.7.8/$controller/ctrlreg?p0=ListDataCtrl
I'm beginner in AngularJS, i'm facing a problem while using ng-controller :
this is my code :
<html>
<head>
<title></title>
</head>
<body ng-app>
<div ng-controller="ListDataCtrl">
<div ng-repeat="item in listData">
<p><strong>{{item.name | uppercase}}</strong></p>
<p>{{item.country}}</p>
<p>*********************</p>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script>
function ListDataCtrl($scope){
$scope.listData =[
{"name":"Achraf", "country":"Tunisia"},
{"name":"Maher", "country":"UAE"},
{"name":"Ahmed", "country":"USA"},
{"name":"Issam", "country":"France"}
];
}
</script>
</body>
</html>
the error message is : angular.js:15567 Error: [$controller:ctrlreg] http://errors.angularjs.org/1.7.8/$controller/ctrlreg?p0=ListDataCtrl
The error indicated that controller is not registered:
The controller with the name 'ListDataCtrl' is not registered.
From AngularJS version 1.3 you have to register your controllers with modules rather than exposing them as globals:
documentation
First of all you need to declare an angularJS module for the app , and then register the controller to that module as below:
<body ng-app="myApp">
In script, app declaration:
var myApp = angular.module('myApp', []);
controller setup:
myApp.controller('ListDataCtrl', ['$scope', function($scope) {
...
}
I am trying to learn angular, and I am stuck in first chapter :-(
I am using angular 2.0, but when i try to create a module I get error "angular is not defined".
My plunker: Plunker:
my script:
(function() {
console.log("Hello");
var app = angular.Module("gitHubViewer", []);
app.controller("MainController", MainController);
var MainController = function($scope) {
$scope.message = "Hello World!";
};
}());
HTML:
<html ng-app="gitHubViewer">
<head>
<script src="https://code.angularjs.org/2.0.0-alpha.20/angular.js" data-semver="2.0.0-alpha.20" data-require="angular.js#*"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
Can some body please help, is this a wrong way of creating module?
Thanks
Please check https://code.angularjs.org/2.0.0-alpha.20/angular.js link.
Display 404 Not Found.
Please download angularJS From https://angularjs.org/ and add it in your project.
I've not looked into Angular 2 very much but your code looks more like Angular 1 to me.
Angular 2 apps are bootstrapped in a very different way using ES6 components (specifically System). It should look more like this:
<html>
<head>
<title>Angular 2 Hello World!</title>
<script src="/dist/es6-shim.js"></script>
</head>
<body>
<my-app></my-app>
<script>
// Rewrite the paths to load the files
System.paths = {
'angular2/*': '/angular2/*.js', // Angular
'rtts_assert/*': '/rtts_assert/*.js', // Runtime assertions
'app': 'app.es6' // The my-app component
};
// Kick off the application
System.import('app');
</script>
</body>
</html>
This code was taken from this excellent tutorial: Getting Started with Angular 2.0.
I use IntelliJ IDEA 13.1.6. I try to compile a simple angular app. I make a new project - Static web.
I just make 2 files - hello.html and controller.js.
hello.html:
<html ng-app>
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
controller.js:
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
Right click on hello.html and Debug hello.html - or Open in Browser - Chrome and it shows {{greeting.text}}, World.
I installed in File - Settings - Plugins - AngularJS and NodeJS, also installed in Settings - Javascript - Libraries - AngularJS - pointing to the folder where I downloaded and unzipped the AngularJS.
What to do to see the "Hello World" in my browser?
Thanks!
It looks like you aren't creating a module with your app's name, and then you aren't registering your controller as an angular controller.
<html ng-app> Isn't doing anything without <html ng-app="myApp">.
myApp is the module that angular will look for when it is loaded. Once it finds that module it will look for anything else that it should register for that module.
Here is a working fiddle for what you're trying to do: https://jsfiddle.net/gf1fa3sx/
The jist is that you need to declare your angular app with angular.module('myApp', []); before angular knows anything about what it should be doing. Then you need to declare your controller on that module with:
angular.module('myApp')
.controller('HelloController', ['$scope',function($scope){
//doStuff
}]);
I hope this helps!
you're missing Angular Library.
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js
Good luck.
The solution is:
hello.html:
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
controller.js:
var app = angular.module("myApp", []);
app.controller("HelloController", function($scope) {
$scope.greeting = { text: 'Hello' };
});
Thanks for your answers! hope my book won't put me in difficulties again :)
I'm using Apache server to host an angular app.
This is the index.html:
<html>
<head>
<script src="/lib/angular/angular.js">
</head>
<script>
myapp = angular.module('myapp', []);
myapp.controller('indexCtrl', function($scope){
$scope.words = ['It','is','what','it','is']
});
</script>
<body ng-app="myapp">
<div ng-controller="indexCtrl">
<div ng-repeat="word in words">
{{word}}
</div>
</div>
</body>
</html>
When I hit the html from the browser, it shows a blank page with this error :
Uncaught Error: [$injector:modulerr] Failed to instantiate module myapp due to: Error: [$injector:nomod] Module 'myapp' 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.
What could be wrong?
The error is because of duplicate values inside array. I have added track by $index inside ng-repeat to resolve this issue.
DOCS: ng-repeat
Modified code:
<html>
<head>
<script src="/lib/angular/angular.js"></script>
</head>
<script>
var myapp = angular.module('myapp', []);
myapp.controller('indexCtrl', function($scope){
$scope.words = ['It','is','what','it','is']
});
</script>
<body ng-app="myapp">
<div ng-controller="indexCtrl">
<div ng-repeat="word in words track by $index">
{{word}}
</div>
</div>
</body>
</html>
Please include angularjs in body.
<script src="/lib/angular/angular.js">
Include this line in body. Hope it will works!
Put the <script> part and the end of the body :
<body ng-app="myapp">
<div ng-controller="indexCtrl">
<div ng-repeat="word in words">
{{word}}
</div>
</div>
<script>
myapp = angular.module('myapp', []);
myapp.controller('indexCtrl', function($scope){
$scope.words = ['It','is','what','it','is']
});
</script>
</body>
that's a good practicte in HTML, and particularly in Angular to put the definition of your JS file just before the body ended
I am currently ramping up with angular, and trying to make dynamic routing work.
Note: I have looked at the question: How to defer routes definition in Angular.js?, and I believe I am doing everything it states, but I'm still getting the error "unknown provider: $routeProvider"
What am I doing wrong?
html:
<!doctype html>
<html ng-app="rProvider">
<head>
<link rel="stylesheet" href="css/style.css">
<script src="lib/angular/angular.js"></script>
<script src="js/routeProviderTest.js"> </script>
</head>
<body>
<div ng-controller="rControl">
<h2>Route Controller Test</h2>
[Route 1 | <a>Route 2</a>]
<hr/>
<span class="partial-info">
Partial: {{routeValue}}
</span>
<div ng-view></div>
<small>The Bottom</small>
</div>
</body>
</html>
js:
var myAppModule = angular.module('rProvider',[]);
myAppModule.config(function($routeProvider){
$routeProvider.when("r1",{templateUrl:"/route1.html"});
});
myAppModule.controller('rControl', function($scope, $route){
$scope.routeValue = 'nothing yet';
});
thanks in advance...
If you are using version 1.2.x, you need to download angular-route.js, include it via the <script> tag, and add it as a dependency module in JavaScript:
<!-- in HTML -->
<script src='angular-route.js'></script>
// in JavaScript
var myAppModule = angular.module('rProvider', ['ngRoute']);
Maybe this will help you:
http://www.egghead.io/video/gNtnxRzXj8s
This guy has some pretty good tutorials on AngularJS. Or some of the next videos about the routeProvider.