I'm used to code with Java with many files with object paradigm and MVC pattern with packages.
And I begin with AngularJS, I'm trying to enable a simple index.html who use a controller in javascript file but doesn't work.
my html file : index.html
<html ng-app="carre">
<head>
<script src="js/angular.js"></script>
<script src="js/CalculCtrl.js"></script>
<script>
var ctrl = angular.module('carre',[]);
</script>
</head>
<body ng-controller="CalculCtrl">
<div>{{2+2}}</div>
<p>{{temps}}</p>
</body></html>
My javascript file as controller located at js/CalculCtrl.js
carre.controller('CalculCtrl', function($scope)
{
$scope.temps = 'pluie';
}
)
What's wrong here please ?
Thanks in advance.
Rename carre.controller(...) to ctrl.controller
Ctrl is the name of the variable holding a reference to your module, carre is the name you have given it for reference in the ng-app directive.
Edit: Also, I recommend you get the Batarang extension for Chrome, it adds a page to the Developer Tools for debugging Angular apps. Very helpful tool to have.
You should invert the file inclusion and the module declaration:
<html ng-app="carre">
<head>
<script src="js/angular.js"></script>
<script>
var carre = angular.module('carre',[]);
</script>
<script src="js/CalculCtrl.js"></script>
</head>
Also, because you are using a variable called carre inside CalculCtrl.js, you should rename the variabile assignd when creating the module, from ctrl to carre:
var carre = angular.module('carre',[]);
You have created module ctrl and using carre to refer it.And script sequence is wrong.The right answer is
index.html
<html>
enter code here<html ng-app="carre">
<head>
<script src="js/angular.js"></script>
<script>
var carre = angular.module('carre',[]);
</script>
<script src="js/CalculCtrl.js"></script>
</head>
<body ng-controller="CalculCtrl">
<div>{{2+2}}</div>
<p>{{temps}}</p>
</body></html>
CalculCtrl.js
carre.controller('CalculCtrl', function($scope)
{
$scope.temps = 'pluie';
}
);
As an alternative to the other answers you could create your CalculCtrl in it's own module and then depend on that module when declaring carre.
angular.module('Calcul', [])
.controller('CalculCtrl', function($scope)
{
$scope.temps = 'pluie';
}
);
and then for carre
angular.module('carre', ['Calcul']);
In this way you don't need to re-order your script tags as they are
the answer is here
index.html
<html ng-app="AppliName">
<head>
<--! we load angularjs -->
<script src="js/angular.js"></script>
<--! we load our controller in an other javascript file -->
<script src="js/mesControllers.js"></script>
</head>
<body ng-controller="myCtrl">
<p>time is : {{temps}} </p>
</body>
</html>
mesControllers.js located at js/mesControllers.js
var AppliName = angular.module('AppliName', []);
AppliName.controller('myCtrl', function ($scope) {
$scope.temps = 'pluie';
});
run and Keep calm it working now ;p
Related
I want to manage my controller specific to an ng-view page, therefore I put the controller in ng-view page and used that controller specific to that page only. However, the code does not show what it should show from that controller.
Here is my case.
I split my code into 3 files, which are "mainfile.php", "page1file.php", and "page2file.php". "mainfile.php" contains main page which routes to page 1 and page 2. To compare the results, I created different conditions for those 2 pages. "page1file.php" uses controller which has been defined in "mainfile.php", while "page2file.php" uses controller which is defined in the page itself.
In this circumtances, "page1file.php" successfully shows what I want, but "page2file.php" does not show what it should show. Please help me and give a very simple explanation and a simple solution since I'm very new to angularjs.
Here is my code. You can just copy them and run it on your php server.
mainfile.php :
<!DOCTYPE html>
<html>
<head>
<title>learn angular routing</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script type="text/javascript">
function routeReload($scope) {
$scope.routeReloading = function(){
window.location.reload();
};
}
routeReload.$inject = ['$scope'];
function routeConfig($routeProvider) {
$routeProvider
.when('/one',{
templateUrl:'page1file.php'
})
.when('/two',{
templateUrl:'page2file.php'
})
;
}
routeConfig.$inject=['$routeProvider'];
function testOne($scope) {
$scope.name = "page one";
}
testOne.$inject = ['$scope'];
var testNgView = angular.module('testNgView',['ngRoute']);
testNgView.config(routeConfig);
testNgView.controller('routeReload',routeReload);
testNgView.controller('testOne',testOne);
</script>
</head>
<body>
<div ng-app="testNgView">
<div ng-controller="routeReload">
View page <a ng-click="routeReloading();" href="#one">one</a> or
<a ng-click="routeReloading();" href="#two">two</a>
<div ng-view></div>
</div>
</div>
</body>
</html>
page1file.php :
<div ng-controller="testOne">
This is {{name}}
</div>
page2file.php :
<script type="text/javascript">
function testTwo($scope) {
$scope.name = "page two";
}
testTwo.$inject = ['$scope'];
testNgView.controller('testTwo',testTwo);
</script>
<div ng-controller="testTwo">
This is {{name}}
</div>
I don't think you can inline script modules in your view templates. Have a look at this working version of your app, the way I would organize it:
http://plnkr.co/edit/nSsagK1Y04akNJyMToah?p=preview
You can use .php files in place of the .html files, that shouldn't make a difference.
So your main file should look something like this:
<!DOCTYPE html>
<html>
<head>
<title>learn angular routing</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
</head>
<body>
<div ng-app="testNgView">
View page one
or two
<ng-view></ng-view>
</div>
<script src="app.module.js"></script>
<script src="app.routes.js"></script>
<script src="views/page1/controller.js"></script>
<script src="views/page2/controller.js"></script>
</body>
</html>
If your goal is to use PHP to dynamically render your controllers, see the answer to this SO question: Angularjs: server side (php) rendering and data binding client side after an event
You may also be interested in this article, about loading Angular components after the application has been bootstrapped: http://www.bennadel.com/blog/2553-loading-angularjs-components-after-your-application-has-been-bootstrapped.htm
TL;DR: You would need to store a reference to $controllerProvider in the config phase, and then call $controllerProvider.register('MyController', MyController) in your inline script. I'm not sure how I feel about that though...
I'm new to angular and I'm learnign it using phpStorm tool.
It looks like I've done everything right, but I still can't get the right result when I execute the following html and Javascript codes, I did lots of researches on this and made sure that I followed the solutions provided without getting a step ahead:
index.html
<!DOCTYPE html>
<html ng-app="myApp" >
<head >
<title>Ang Tut</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Groups</h1>
<div ng-controller="GroupController">
<ul>
<li ng-repeat="group in groups" ng-model="group.group_name">
{{group.group_name}}
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</html>
and my app.js file:
var app = angular.module("myApp", []);
app.controller("GroupController", function($scope){
$scope.groups= [
{"id":"144","group_name":"new grouppp"},
{"id":"303","group_name":"Combination group"},
{"id":"323","group_name":"pcb"}
]
});
Same code is working, angular.min.js may not included properly, access your index.html file using http:// instead of file://
var app = angular.module("myApp", []);
app.controller("GroupController", function($scope){
$scope.groups= [
{"id":"144","group_name":"new grouppp"},
{"id":"303","group_name":"Combination group"},
{"id":"323","group_name":"pcb"}
]
});
<!DOCTYPE html>
<html ng-app="myApp" >
<head >
<title>Ang Tut</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Groups</h1>
<div ng-controller="GroupController">
<ul>
<li ng-repeat="group in groups" ng-model="group.group_name">
{{group.group_name}}
</li>
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</html>
I had to change the js file, so to include "function()" at the beginning of it, and also "()" at the end line. That solved the problem
You have to include ngRoute in your project.
<script src="angular-route.js"> You can get this file here.
And in your app.js
var app = angular.module("myApp", ['ngRoute']);
And it will start working correctly.
Now, the reason this works in jsFiddle but not locally.
That is because if you look at left pane in jsFiddle under Frameworks & Extensions, you will find the selected option to be no wrap - in <body>
Which means that the code you write in javascript block of js fiddle will be placed inside the body tag the the generated html and therefore, you don't need ngRoute.
But while running locally, I see you have your module initialization in different file viz. app.js that is where ngRoute comes into picture.
In older versions of angular ngRoute was included in angular itself. But in latest versions (not sure from which versions) the ngRoute module is provided separately.
I am currently doing the egghead.io AngularJS course and have run into an issue a few others seem to have.
Any solutions I have come across here aren't working for me though.
In the second video the instructor is showing how to connect controllers to ng-apps. I have followed the video exactly, restarted a few times, and tried solutions on here.
I am given the following error console:
In the long list of errors there, I have picked out the first as as saying:
"FirstCtrl' is not a function, got undefined"
Anyone know of a solution?
Was something changed in the Angular spec in regards to assigning controllers, or is this course skipping information?
Code:
function FirstCtrl($scope) {
$scope.data = {
message: "Hello"
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Angular App</title>
<link href='https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed:700' rel='stylesheet' type='text/css'>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h1>You said:</h1>
<h3>{{data.message}}</h3>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>
</html>
Here is your exemple working (Run the exemple ...).
Add you app name.
Declare your controller using angular.controller.
angular.module('myApp', []);
angular.module('myApp').controller('FirstCtrl', FirstCtrl);
function FirstCtrl($scope) {
$scope.data = {
message: "Hello"
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Angular App</title>
<link href='https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed:700' rel='stylesheet' type='text/css'>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>You said:</h1>
<h3>{{data.message}}</h3>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>
</html>
An Angular controller is defined like this :
var app = angular.module('myApp',[]); //Your app
//The controller in the myApp module, first param is the controller's name
//Second is the controller's dependencies
app.controller('FirstCtrl', ['$scope', function($scope) {
//Do whatever you want in this controller
$scope.data.message = 'Hello!';
}]);
Then you bind your controller to the view (your HTML) using the ng-controller attribute.
You're missing the part where you define your controller.
You can definitely have your FirstCtrl be a function. You just need to first define that the FirstCtrl is a controller.
Example:
angular.module("app").controller("FirstCtrl", FirstCtrl);
And then you have your FirstCtrl function:
function FirstCtrl($scope) {
$scope.data = {
message: "Hello"
};
}
You also need to include that file in your html scripts
<script src="mypath/firstctrl.js"></script>
I too was facing problem when defined controller just like a simple JavaScript function and then I downgraded the cdn link version for angular from "1.4.5" to "1.2.28" and it started recognising controller (A simple javascript function). Also you have to include the .js file in which you have created your controller in your html file . Actually they have deprecated the use of simple javascript function as a controller from angular 1.3 version.
I am new to angularjs and this might sound very silly but I want to know why my angularjs app won't bootstrap without making a module even though egghead.io and several tutorials showing otherwise.
Here is my HTML template
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.1" src="https://code.angularjs.org/1.4.0-beta.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
And the controller.js file which DOESN'T WORKS
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
When i register the module [and naming the ng-app as 'hello' ofcourse] and write a controller it works
angular.module('hello', []).controller('HelloController', function($scope) {
$scope.greeting = { text: 'Hello' };
});
I just want to know the reason for this behavior.
Thanks in anticipation.
This is a breaking change of angular 1.3. You can see a list of breaking changes here
Because of this change, you cannot use global functions as a controller. You can override this behavior by using allowGlobals (More info here) but I won't recommend that.
I created my own service for some util methods. The idea was to simply inject the utilsservice into the modules where I need the methods. The Problem is I get an ReferrenceError: myFunction is not defined.
I think it has to do with the wrong injecting of the service, but i can't figute out myself what's wrong with my approach.
The service i made:
angular.module('utils',[]).service('UtilsService',function(){
this.myFunction = function(){};
});
In my app.js file i have following structure:
(function(){
angular.module('utils',[]);
angular.module('translation',[]);
var app = angular.module('myApp',['translation','utils']);
app.controller('myController',['$http',function($http,UtilsService){
UtilsService.myFunction();
}]);
});
The order I included the scripts in my .html file:
<script type="text/javascript" src="../Libraries/angular.min.js"></script>
<script type="text/javascript" src="../js/angular-js/services/utilService.js"></script>
<script type="text/javascript" src="../js/angular-js/app.js"></script>
<script type="text/javascript" src="../js/angular-js/translate.js"></script>
I already tried to change the order but it doesn't make any difference.
I am thankfull for any advice you may have!
Please try the below. You will need to change the script references to point to the files where you have them. Once the index.html file has loaded, you should see the output "you called myFunction()" in the console window. That is being printed from within the service which shows it's being called correctly. I've also created a fiddle
index.html:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Directives</title>
</head>
<body>
<div ng-controller="myController"></div>
<script src="angular.js"></script>
<script src="app.js"></script>
<script src="utilsService.js"></script>
</body>
</html>
app.js (I have moved the code out of the function you created since it wasn't working. Also, you had a typo for spelling anguar on the line that begins with var app. I have also removed the dependency for translation in my code since I didn't create any module by that name):
(function(){
//angular.module('utils',[]);
//angular.module('translation',[]);
});
var app = angular.module('myApp',['utils']);
app.controller('myController',['$scope', 'UtilsService',function($scope,UtilsService){
UtilsService.myFunction();
}]);
utilsService.js:
angular.module('utils',[])
.service('UtilsService',function(){
this.myFunction = function(){ console.log ('you called myFunction()')};
});