Why this simple Angular.js example does not work? - javascript

I'm reading AngularJS from O'REILLY, and i tried to see how angular works with an example but i can make it functional:
The 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>
and the logic within the controllers.js :
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
but when i display the hello.html on the browser, i can see {{ greeting.text }}, Hello.
What is wrong here?

You never defined a controller, you just defined a function that happened to have "controller" in the name.
Try initializing the app properly:
var myApp = angular.module('myApp',[]);
myApp.controller('HelloController', ['$scope', function($scope) {
$scope.greeting = {text: 'Hello'};
}]);
https://docs.angularjs.org/guide/controller

Related

routeProvider doesn't work and controller undefined using angularjs 1.5

I'm working on my first app. When I open it in the webbrowser I get this error: Uncaught ReferenceError: controller is not defined
at app.js:3
at app.js:15
I got this error after I created the app.js file and tried to link my controller.js to it. Also the routeProvider doesn't seem to work yet. And my placeholders stopt working, which did work before.
I simplified my code to keep it readable. I've got more html files and use bootstrap in combination with JQuery and CSS. Does someone know what's going wrong here?
app.js
(function(){
var myApp = angular.module('myApp', ['ngRoute']).controller('controller', controller)
.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider
.when('/main', {
templateUrl: '../main.html',
controller: 'controller'
})
.otherwise({redirectTo: '../main'});
});
})();
controller.js
(function() {
angular.module('controller', ['ngRoute'])
.controller('controller', ['$scope', function ($scope) {
}]);
})();
index.html
<!DOCTYPE html>
<html data-ng-app = "myApp">
<head>
<meta charset="utf-8"/>
<title> Who Brings What </title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
/*more code here */
</nav>
</div>
<div data-ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular- route.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular- route.js"> </script>-->
<script src = "../controller.js"></script>
<script src = "../app.js"></script>
</body>
</html>
main.html
<div>
Main Body
</div>
There are few issues with your code,
(i)Since you have defined controller separately in a single file, you can safely remove it from the initial module.
function(){
var myApp = angular.module('myApp',['ngRoute'])
myApp.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider
.when('/main', {
templateUrl: './main.html',
controller: 'controller'
})
.otherwise({redirectTo: '/main'});
});
})();
(ii) You do not need to have ngRoute injected twice, You can just use the globally declared module
(function() {
app.controller('controller', ['$scope', function ($scope) {
}]);
})();
DEMO

(AngularJS) Can't inject factory into controller

I'm trying to inject my factory into a controller. If I list the factory as one of the controller's parameters, I get this error:
Error: [$injector:unpr] Unknown provider: wordRushFacProvider <- wordRushFac <- wordrushCtrl
http://errors.angularjs.org/1.6.1/$injector/unpr?p0=wordRushFacProvider%20%3C-%20wordRushFac%20%3C-%20wordrushCtrl
Here is the code for my factory:
(function() {
"use strict";
angular
.module("wordrush")
.factory("wordRushFac", function($http) {
function getValidWords() {
return $http.get('../data/valid-words.txt');
}
return {
getValidWords : getValidWords
}
})
})
And the code for my controller:
(function() {
'use strict'
angular
.module('wordrush')
.controller('wordrushCtrl', function($scope, $http, wordRushFac) {
wordRushFac.getValidWords().then(function(words) {
$scope.words = words.data;
});
$scope.words = 'Hello'
});
})();
And for my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Word Rush</title>
<link rel="stylesheet" href="node_modules/angular-material/angular-material.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="node_modules/angular/angular.js"></script>
<script src="scripts/app.js"></script>
<script src="components/wordrush.ctr.js"></script>
<script src="components/wordrush.fac.js"></script>
</head>
<body ng-app="wordrush" ng-controller="wordrushCtrl">
<h1> {{ words }} </h1>
</body>
</html>
And for my app.js:
angular
.module('wordrush', ['ngMaterial'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('blue')
.accentPalette('green');
})
I made a program with code identical to this except the names and variables were changed, and it worked fine. So what am I doing wrong here?
Here is a plunkr that says "Hello": https://plnkr.co/edit/MyxcXQ8YI4QYqeFsyVJz?p=preview
You have an extra set of open / close parenthesis in your controller definition, remove those:
angular
.module('wordrush')
.controller('wordrushCtrl', function($scope, $http, wordRushFac) {
wordRushFac.getValidWords().then(function(words) {
$scope.words = words.data;
});
$scope.words = 'Hello'
});
Also, are you sure you are including the ng-material JS file? I didn't see that listed in your HTML.
You're not injecting in the controller, should be:
.controller('wordrushCtrl', ['$scope', '$http', 'wordRushFac', function($scope, $http, wordRushFac) {
// Rest of controller code;
}]);
Switch your scripts. Factory script should be first then controller
Ther order should be,
<script src="scripts/app.js"></script>
<script src="components/wordrush.fac.js"></script>
<script src="components/wordrush.ctr.js"></script>
DEMO
I made the following changes and it worked fine.
(function() {
"use strict";
angular
.module("wordrush")
.factory("wordRushFac", function($http) {
function getValidWords() {
return $http.get('../data/valid-words.txt');
};
return {
getValidWords : getValidWords
};
});
}());

Angular JS Expression is not working when I use a controller and module

I've just started learning Angular JS but soon I got a problem which I don't know how to resolve.
This code prints:
<h1>{{author[0].name}}</h1>
<p>{{author[0].title+ ', '+author[0].company}}
instead of:
<h1>MKJ</h1>
<p>Web Developer, Student Organization</p>
The code is given here as well:
<!doctype html>
<!-- Declaring the ng-app -->
<html ng-app="myApp">
<head>
<title>Parking</title>
<!-- Importing the angular.js script -->
<script src="lib/angular/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("MyController", function ($scope){
$scope.author = {
'author': 'MKJ',
'title': 'Web Developer',
'company': 'Student Organization',
};
}
</script>
</head>
<!-- Attaching the view to the MyController -->
<body ng-controller="MyController">
<h1>{{author[0].name}}</h1>
<p>{{author[0].title+ ', '+author[0].company}}
See this snippet or correct the code on JS fiddle?
var myApp = angular.module("myApp", []);
myApp.controller("MyController", function ($scope){
$scope.author = {
'author': 'Ravy VIllalbobs',
'title': 'Staff Author',
'company': 'Lynda.com',
};
}
<div ng-controller="MyController">
<h1>{{author.name}}</h1>
<p>{{author.title+ ', '+author.company}}
</div>
$scope.author is an Object so you don't need to specify index in brackets here
<h1>{{author.name}}</h1>
<p>{{author.title+ ', '+author.company}}
updated fiddle

AngularJS: values of defined variables inside controller are not getting displayed correctly

I am learning angular.. I have tried to run a small example through pluralsight, but wasn't able to render correct output..
http://plnkr.co/edit/cYEDSW3FrAKeh1SBjUVN?p=preview
HTML
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{text}}</h1>
<div>
<div>First name: {{person.firstName}}</div>
<div>Last name: {{person.lastName}}</div>
<img ng-src="person.imageSrc" title="{{person.firstName}} {{person.lastName}}">
</div>
</body>
</html>
script.js
var MainController = function($scope) {
var person = {
firstName: "Ajay",
lastName: "Sattikar",
imageSrc: "http://odetocode.com/Images/scott_allen_2.jpg"
};
$scope.text = "Hello Angular!";
$scope.person = person;
};
I am not able to figure out why angular variables are getting displayed as normal text instead of its assigned value. Experts, kindly help...
There are a few things that need to be changed in your code
you need to create an angular module
var app = angular.module('app', []);
2 add directive to html element
<html ng-app='app'>
need to register MainController against angular module like this:
app.controller('MainController', function($scope) {
var person = {
firstName: "Ajay",
lastName: "Sattikar",
imageSrc: "http://odetocode.com/Images/scott_allen_2.jpg"
};
$scope.text = "Hello Angular!";
$scope.person = person;
});
Here is a working demo - http://plnkr.co/edit/i9N2OC75EGZwUTDcKtLB?p=preview
You missed a few steps:
1. Declaring your app
<html ng-app='myApp'>
2. Declaring your controller inside your app module:
angular.module('myApp', [])
.controller('MainController', function($scope) {
var person = {
firstName: "Ajay",
lastName: "Sattikar",
imageSrc: "http://odetocode.com/Images/scott_allen_2.jpg"
};
$scope.text = "Hello Angular!";
$scope.person = person;
})

Issue in angular js routeProvider

I have a problem in angular js routeProvider. If i am clicking register or login link then its not going to the next page just shows url like this. http://localhost:3000/#/register or http://localhost:3000/#/login
Following is my code. thanks in advance
// I gave ngRoute,ngResource, services for intializing myapp but no benefit
script.js
var myapp = angular.module('myapp', []);
myapp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/login', {
templateUrl : '/template/login.html',
controller : loginController
}).when('/register', {
templateUrl : '/template/register.html',
controller : registerController
}).otherwise({
redirectTo : '/'
});
}] );
login.js
function loginController($scope){
}
register.js
function registerController($scope) {
$scope.submit = function() {
if (!($scope.cnfrmPasswd == $scope.passwd)) {
} else {
$.get("/register/"+$scope.name+"/"+$scope.username+"/"+$scope.passwd, function(data) {
});
}
};
}
index.html
<html ng-app="myapp">
<head >
<script src="js/angular/angular-1.0.5/angular.min.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/script.js"></script>
<script src="js/login.js"></script>
<script src="js/register.js"></script>
</head>
<body>
register
login
</body>
</html>
// I tried by adding <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script> <script src="js/angular-resource.js"></script>
You need to add ngView inside your index.html:
<body>
register
login
<ng-view></ng-view>
</body>
Define your controllers with app.controller('LoginCtrl', ...) and reference them with their name as string:
$routeProvider.when('/login', {
templateUrl : '/template/login.html',
controller : 'LoginCtrl'
})
You have to add ng-view inside your body tag and you need to define 'ngRoute' inside your module.
body tag of your index.html
<body>
register
login
<div data-ng-view="" id="ng-view"></div>
</body>
Your myapp variable after added 'ngRoute'
var myapp = angular.module('myapp', ['ngRoute']);
lets see it will work fine.

Categories

Resources