I am trying to create a login page and I have the html looking how I want it so now I am trying to create a controller but for some reason the js controller isnt working with the html. here is the plunker. The {{name}} data bind should display world but it isnt. Here is the controller:
(function() {
"use strict";
var app = angular.module('plunker', []);
app.controller('LoginController', function($scope) {
$scope.name = 'World';
});
})();
http://plnkr.co/edit/mqc6ksw1xo7NMhj74Noa?p=preview
The issue is your angularjs link is not working , just replace with this,
<script data-require="angular.js#*" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
Working code
You have the wrong link so it can't load angular, change
https://code.angularjs.org/2.0.0-alpha.31/angular.js
to
https://code.angularjs.org/2.0.0-alpha.31/angular2.js
note the extra '2' at the end
Related
AngularJS: Using angular.module & VM
I have defined my angular module as below and want to use VM as per guidelines. Not sure what I am doing wrong here but it gives me error in console:
Uncaught Error: No module: myApp
Here is my code:
<div ng-controller="Ctrl">
Hello, {{vm.name}}!
</div>
var app = angular.module('myApp');
app.controller('Ctrl', ['$scope', '$http',
function ($scope, $http) {
var vm = this;
vm.name = "John";
}]);
Here is my jsfiddle:
https://jsfiddle.net/dn7pkuf8/
First of, you need to add an empty array(or an array with your dependencies) when you declare your module. Without the array, you will try to fetch the module with the name myApp instead.
var app = angular.module('myApp', []);
Then you need to add the app name to the NgApp directive in the view, else the angular app want bootstrap.
Try it like this
<body ng-app="myApp">
<div ng-controller="Ctrl as vm">
Hello, {{vm.name}}!
</div>
</body>
When you create a new module you must pass an array as the second parameter.
var app = angular.module('myApp', []);
Otherwise it will look for an existing app 'myApp' which doesn't exist.
It looks like you're trying to use ContollerAs syntax. I've set up the plunkr here
Your HTML:
<html>
<head>
<script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<h1>Hello Plunker!</h1>
<div ng-controller="Ctrl as vm">
Hello, {{vm.name}}!
</div>
</body>
</html>
Your Javascript:
var app = angular.module('myApp', []);
app.controller('Ctrl', function () {
var vm = this;
vm.name = "John";
});
I couldn't get this working in your jsfiddle, but I think it was basically the syntax correction in the HTML where you use the controller, as well as the points raised by the others here (including ng-app, your javascript module syntax).
You are not using the correct syntax to create the app instance.
The correct syntax is as below
var app = angular.module('myApp',[]);
So what is the meaning of the sysntax you wrote?
var app = angular.module('myApp');
It means you have already created the instance and you wish to use it. Now you will get why angularjs is throwing this error. Because instead of creating a new instance it will look for that instance which is not created.
Note: The additional parameter [] is required to specify the
dependencies. It means you can add the existing angularjs
applications. Means you can add the dependencies and use it.
And you complete js file should like this below
var app = angular.module('myApp',[]);
app.controller('Ctrl', ['$scope', '$http',
function ($scope, $http) {
var vm = this;
vm.name = "John";
}]);
I am trying to load a template file in an AngularStrap popover, however I am having trouble using $templateCache. I seem to be a step further back than the other SO questions, hence this seemingly double one.
Following the API docs I added a <script type="text/ng-template" id="popoverTemplate.html"></script> right before the closing </body> tag. When I use <div ng-include="'popoverTemplate.html'"></div> on my page, I get nothing. If I try using console.log($templateCache.get("popoverTemplate.html")) I get "$templateCache is not defined", which leads me to assume I am missing a crucial step. However, I can't find how to do it in the docs or other SO questions.
EDIT:
Injecting the service was the missing link. However, when I inject the service, the controller's other function no longer works, but if you inject al the function's parameters the working code becomes:
(function() {
"use strict";
angular.module("app").controller("managerController", ["$scope", "imageHierarchyRepository", "$templateCache", function ($scope, imageHierarchyRepository, $templateCache) {
imageHierarchyRepository.query(function(data) {
$scope.hierarchies = data;
});
var template = $templateCache.get("popoverTemplate.html");
console.log(template);
}]);
})();
To use the template script tag . You have to insert it inside the angular application. That is inside the element with the ng-app attribute or the element used to bootstrap the app if you don't use the ng-app tag.
<body ng-app="myapp">
<div ng-template="'myTemplate.html'"></div>
<script type="text/ng-template" id="myTemplate.html">
// whate ever
</script>
</body>
If you want to retrieve the template on a component of the application then you need to inject the service where you want to consume it:
controller('FooCtrl', ['$templateCache', function ($templateCache) {
var template = $templateCache.get('myTemplate.html');
}]);
Or
controller('FooCtlr', FooCtrl);
FooCtrl ($templateCache) {};
FooCtrl.$inject = ['$templateCache'];
EDIT
Do not register two controllers with the same name because then you override the first one with the last one.
(function() {
"use strict";
angular.module("app").controller("managerController",["$scope", "imageHierarchyRepository", "$templateCache", function ($scope, imageHierarchyRepository, $templateCache) {
var template = $templateCache.get("popoverTemplate.html");
console.log(template);
imageHierarchyRepository.query(function(data) {
$scope.hierarchies = data;
});
}]);
})();
Small addition: Although there are few ways to achieve your goals, like wrapping your whole HTML in <script> tags and all that, the best approach for me was to add the $templateCache logic into each Angular directive. This way, I could avoid using any external packages like grunt angular-templates (which is excellent but overkill for my app).
angular.module('MyApp')
.directive('MyDirective', ['$templateCache', function($templateCache) {
return {
restrict: 'E',
template: $templateCache.get('MyTemplate').data,
controller: 'MyController',
controllerAs: 'MyController'
};
}]).run(function($templateCache, $http) {
$http.get('templates/MyTemplate.html').then(function(response) {
$templateCache.put('MyTemplate', response);
})
});
Hope this helps!
I am newbie to Angularjs. I am trying to create simple directive with the following code:
View:
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<user-info></user-info>
</div>
</body>
</html>
Controller:
myapp = angular.module("myapp", []);
myapp.directive('userInfo', function() {
var directive = {};
directive.restrict = 'E'; /* restrict this directive to elements */
directive.template = "My first directive: ";
return directive;
});
I am following this Tutorial to learn directive
http://tutorials.jenkov.com/angularjs/custom-directives.html
I am getting error:
http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=myApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.14%2F%24injector%2Fnomod%3Fp0%3DmyApp%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A6%3A417%0A%20%20%20%20at%20http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A412%0A%20%20%20%20at%20a%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A53)%0A%20%20%20%20at%20w.bootstrap%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A296)%0A%20%20%20%20at%20http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A35%3A46%0A%20%20%20%20at%20s%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A7%3A302)%0A%20%20%20%20at%20g%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A34%3A399)%0A%20%20%20%20at%20ab%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A38%3A135)%0A%20%20%20%20at%20d%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381
Here is my codepen link
http://codepen.io/anon/pen/NGNKxz
You have error in the name of your app :
myapp = angular.module("myApp", []); // not 'myapp'
Add Your Directive
You need to add the directive to your html like so
<script src="path/to/your/directive.js"></script>
or if your working from one module you will link to the main module. But please restructure your app like this it will keep code up to standard and clean.
I have a git hub repo where I am building an app in this structure here. Best of luck.
Note
You are using angular min. Min is great for production because its small and faster to load but your in development at the moment so use the full version so you can capture errors better with the browser console.
Looks like you did not declare the controller myCtrl. Your directive looks fine.
myapp.controller('myCtrl', function() {
});
Is it the current version of your html file ?
Because you might need to link your controller, between head tags, insert :
<script src="the js file which contains your controller"></script>
or
<script>Your controller</script>
I was building a jsfiddle angular app in coffeescript. It failed, and I reduced the failure to this minimal one:
<body ng-app="MyApp">
<div ng-controller="MyController">
{{text}}
</div>
</body>
This javascript fiddle works: http://jsfiddle.net/nje7H/
var app = angular.module("MyApp", []);
app.controller("MyController", function($scope) {
$scope.text = "Hello."
});
However, this coffeescript fiddle fails: http://jsfiddle.net/nje7H/1/
app = angular.module "MyApp", []
app.controller "MyController", ($scope) ->
$scope.text = "Hello."
The console shows "Uncaught Error: No module: MyApp"
Why?
jsfiddle uses <script type="text/coffeescript"> elements and a library to compile the coffeescript on the client, which doesn't occur until the dom is ready and the code doesn't execute until after angular bootstraps. It will work if you manually bootstrap angular in your code (fiddle):
angular.bootstrap document.body, ['MyApp']
In a production environment you should be compiling your coffeescript into javascript for the browser and there wouldn't be a problem. See this question.
In My angular JS application i have 2 pages using same functionality and i am trying to use abstract controller and i am getting 'Base Ctrl is not defined' error from Summary Ctrl.
am I missing anything...
Markup
<div ng-controller="MainCtrl">
<div ng-controller="SummaryCtrl">{{name}}</div>
<div ng-controller="SearchCtrl"></div>
</div>
MaintCtrl.js
define(['tabs/module'], function (module) {
'use strict';
module.controller('MainCtrl', ['$scope', function ($scope) {
//some code;
}]);
function BaseCtrl($scope) {
$scope.name="test";
}
});
SummaryCtrl.js
define(['tabs/summary/module'], function (module) {
'use strict';
module.controller('SummaryCtrl', ['$scope', function ($scope) {
BaseCtrl($scope);
//child actions`enter code here`
$scope.name = 'Clicked from base controller';
}]);
});
It looks to me like you're using this code as your example:
Angular: Extending controller
I'm still not 100% sure what your problem is, but it seems to me like it could be that in this sample you've supplied, both the code pieces are in the same file. When you do separate it into separate files, make sure when you bootstrap or add your *.js file references.. make sure you add base before the others that are 'dependent' on it
EG
<script language="javascript" src="someUrl/BaseCtrl.js"></script>
<script language="javascript" src="someUrl/SummaryCtrl.js"></script>
EDIT:
Your issue could be with RequirejJS
Have a look at
http://solutionoptimist.com/2013/09/30/requirejs-angularjs-dependency-injection/
Your MainModule is registered in 'tabs/module', but nowhere are you supplying SummaryCtrl any of its dependencies.
EG. SummaryCtrl is not implicitly aware of 'tabs/module', as it's in 'tabs/summary/module'
Try adding this to summary:
define(['tabs/summary/module', 'tabs/module'], function (module, BaseCtrl) {
'use strict';
module.controller('SummaryCtrl', ['$scope', function ($scope) {
BaseCtrl($scope);
//child actions`enter code here`
$scope.name = 'Clicked from base controller';
}]);
});