Hey I was wondering could someone help me and tell me why my directives aren't running in Webstorm 9.0. Why is it not adding in my directive? I thought this would be very straight forward but it doesn't seem to be injecting it.
enter code here http://plnkr.co/edit/fKKS1TINMHT4yJF4c9Ol?p=preview
Here is a plunker
To star off you havent defined your name in the ng-app thats why your app was not working
and the script files were in different order.
http://plnkr.co/edit/2SthQC5fADsi1rdEhq3C?p=preview
var app = angular.module('docsSimpleDirective', []);
app.controller('Controller', function($scope) {
console.log('Hi');
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
})
.directive('myCustomer', function() {
return {
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
});
Your html
<!DOCTYPE html>
<html ng-app="docsSimpleDirective">
<head>
<link rel="stylesheet" href="style.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div ng-controller="Controller">
<div my-customer/>
</div>
</body>
</html>
Hope it helps
Please change angular.module('docsSimpleDirective', ['index.html']) to angular.module('docsSimpleDirective', []) . index.html is not a dependency. We are linking the js file to html file. not the other way round.
Also, please change <html ng-app> to <html ng-app='docsSimpleDirective'> Because we have given the module name as docsSimpleDirective in angular.module('docsSimpleDirective', [])
Related
I have a small ngRoute example I am trying that to use multiple applications and controllers with. The first app/controller is for the main page, while the second set of app/controller is for the html that ngRoute loads up after pressing a button. However, it doesn't seem to be working. Code below:
Main Module
var app = angular.module("MainModule", ["ngRoute"]);
Main Controller
app.controller("MainController", function ($scope) {
});
app.config(function ($routeProvider) {
$routeProvider
.when('/customers', {
templateUrl: "customers.html",
controller: "CustomerController"
})
});
Customer Module
var CustomerModule = angular.module("CustomerModule", []);
Customer Controller
CustomerModule.controller("CustomerController", function ($scope) {
$scope.Test = "Hey";
$scope.CustomerArray = [
{ "firstName" : "John", "lastName" : "Williams", "Occupation" : "Fireman" },
{ "firstName" : "Louis", "lastName" : "Abrams", "Occupation" : "Policeman" }
]
});
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<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="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MyCSS.css">
</head>
<body>
<div ng-app="MainModule">
<div id="TopDiv">Main Module</div>
<input type="button" value="Load Customers" />
<div ng-view></div>
</div>
</body>
</html>
customers.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>
</head>
<body>
<div ng-app="CustomerModule" ng-controller="CustomerController">
{{Test}}
<ul>
<li ng-repeat="x in CustomerArray">{{x.firstName x.lastName x.Occupation}}</li>
</ul>
</div>
</body>
</html>
Long bits of code there, but hopefully simple code. The output when I press the "Load Customer" button is literally {{Test}} with no array data to follow.
I am just now learning angular, so any help with this issue I would appreciate. I am just doing this for fun, to try to learn. So I suppose the issue is not pressing. :) Thanks!
I wrote out a working example using the code from the question as a base. There are quite a few adjustments that were made, so I will list each piece with a bit of explanation.
It is not necessary for each "page" to have it's own module. However, it is not a bad practice. To support the design you have here of one module for each view, I made the following changes:
Include the CustomerModule as a dependency in the MainModule (MainModule.js):
var app = angular.module("MainModule", ["ngRoute", "CustomerModule"]);
Load ALL scripts in the index.html:
<script src="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>
<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>
With these changes, the $routeProvider is able to locate the CustomerController and instantiate it during a route change. The customers.html now does not have to create a controller, and can be stripped down to a complete partial. Also, the expression used in customers.html needed to be changed, and broken down into individual expressions for each property.
The final customers.html:
{{Test}}
<ul>
<li ng-repeat="x in CustomerArray">{{x.firstName}} {{x.lastName}} {{x.Occupation}}</li>
</ul>
Complete working sample on plnkr.co: http://plnkr.co/edit/EjwW9Fsc2DPhBejUETwB?p=preview
I'm not sure, but the problem is in your MainModule. It should be like this or so:
var app = angular.module("MainModule", ["ngRoute"]);
When you calling angular.module with only one parameter - it's only trying get module, not create.
And customers.html should only contains parts of you html, not full:
Full customers.html
{{Test}}
<ul>
<li ng-repeat="x in CustomerArray">{{ x.firstName }} {{ x.lastName }} {{ x.Occupation }}</li>
</ul>
And add move customer js files to index.html:
<script src="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>
<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>
<link rel="stylesheet" type="text/css" href="MyCSS.css">
Hope, it helps.
Below is my very simple example where I am trying to implement controller.
{{8/2}} is giving correct output i.e. 4 but {{message}} remains same.
It should be replaced by some value e.g. First Controller
I downloaded the angular js from https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js
HTML
<!DOCTYPE html>
<html ng-app>
<head>
<script src="angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>{{8/2}}</h1>
<div ng-controller="HomeController">
{{message}}
</div>
</body>
</html>
Script.js
var HomeController = function($scope) {
$scope.message = "First Controller";
};
I downloaded the angular js from
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js
Well angularjs version 1.4x does not support raw functions controllers to be used as controllers. change the angularjs version to 1.2.x OR use angular.module('someName').controller() syntax to make it work.
Here's the same plunkr you shared(with angularjs 1.2.8)
Here's the plnkr with angular.module() syntax
Update your html from
<html ng-app>
to
<html ng-app="myApp">
Update your script.js to
angular.module("myApp", []).controller("HomeController", function($scope){
$scope.message = "First Controller";
});
replace your Script.js with this
var ng_app = angular.module('ng_app',[]);
ng_app.controller('HomeController', ['$scope', function($scope) {
$scope.message = "First Controller";
}]);
edit ng-app in your html to ng-app='ng_app'
There was a problem with your angular version If you will use a older version then it works fine
<html>
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
</head>
<body ng-app>
{{8/7}}
<div ng-controller="HomeController">
{{message}}
</body>
</html>
<script >
// Code goes here
var HomeController = function($scope) {
$scope.message = "First Controller";
};
</script>
You are using old syntax that is no longer supported.Instead of defining controller as var. Add ng-app="app", then create a module
var myApp = angular.module('app',[]);
Now define your controller -
myApp.controller("HomeController",function($scope){
$scope.message = "Hello";
});
Hi I am having trouble with this tutorial. I copied over the code but for some reason it is not working.
This is the html code
<!DOCTYPE html>
<html ng-app>
<head>
<title>Simple app</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js">
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller = "MyController">
<h1>{{ person }}</h1>
and their name:
<h2> {{person.name}}</h2>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
and here is the JS
var app = angular.module('app', []);
app.controller('MyController', function($scope) {
$scope.person = {
name: "Ari Lerner"
};
});
It doesn't look like the AngularJS code is being recognized. Any ideas?
Your app name in the module definition:
var app = angular.module('app', []);
doesn't match the one you reference in your dom:
<div ng-app="myApp">
Change your module definition to:
var app = angular.module('myApp', []);
Hello I had watched an tutorial about AngularJS. In this tutorial was showed how to build an easy hello world app but when I try the exactly same code it dosen't work.
All scripts are loaded well. Has someone an idea?
index.html
<!DOTYPE html>
<html ng-app>
<head>
/* load angular and controller script */
</head>
<body>
<div ng-controller="MyFirstCtrl">{{test}}</div>
</body>
</html>
Controller
function MyFirstCtrl($scope) {
$scope.test = "Hello World";
}
My output is {{test}}.
You need to give name to your ng-app directive, a different way using Controller as syntax, would be:
<!DOTYPE html>
<html ng-app="myApp">
<head>
/* load angular and controller script */
</head>
<body>
<div ng-controller="MyFirstCtrl as myFirst">{{myFirst.test}}</div>
</body>
</html>
and controller js
var app = angular.module("myApp", []);
app.controller('MyFirstCtrl', function () {
this.test = 'Some test';
});
A jsFiddle Demo
You must create the app like this:
angular.module('myApp',[])
.controller('MyFirstController',['$scope', function($scope) {
$scope.test = "Hello World";
}]);
And load in html ngApp the respective app:
<html ng-app="myApp">
You need to pass the angular script and your controller script
<!DOTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type="text/javascript" src="path/to/controller.js"></script>
</head>
...
I am brand new to AngularJS and I'm following an example from a book but am running into issues with the HTML rendering in a simple example.
Code is working with no problems in JSFiddle - http://jsfiddle.net/2436t/
I am running this in Firefox 30.0 and I just get the following output and no errors in Firebug
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<script type="text/javascript" src="angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app>
<div ng-controller="HelloController">
<p>{{greeting.text}}</p>
</div>
</body>
</html>
Javascript (in external controllers.js file):
function HelloController($scope)
{
$scope.greeting = {text:"Hello"};
}
I am sure I'm missing something simple but any help would be greatly appreciated,
Sean
You are missing ng-app="????"
You also need to inject the controller in the module.
Here is the jsfiddle
http://jsfiddle.net/yogeshgadge/2436t/14/
The HTML
<body ng-app="myApp">
<div ng-controller="HelloController">
<p>{{greeting.text}}</p>
</div>
</body>
The JS part
var app = angular.module('myApp', []);
app.controller('HelloController',
function($scope) {
$scope.greeting = {
text: "Hello"
};
}
);