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:
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";
}]);
angular.moduleyou need to have two arguments to create the module.angular.module('moduleName', [])creates the modulemoduleName.angular.module('moduleName')retrieves an instance of modulemoduleName