I am have trying to fix this but not able to find a solution since a long time. I an angular newbie and trying to make my website home an angular app. The angular app has a controller and 2-3 directives. In the head section of the page I have:
Home.cshtml:
<head>
//Some other stuff....
<script src="/Scripts/angular.min.js" type="text/javascript"></script>
<script src="/Scripts/myapp.js" type="text/javascript"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HomeController">
<page-tile-grid></page-tile-grid>
</div>
</body>
And myapp.js has
var myapp= angular.module('myapp', [])
.controller("HomeController", function($scope){......})
.directive('page-tile-grid', function () {....})
.directive('page-tiles', function () {....})
.directive('page-tile-info', function () {....})
I see no error on the console. But template in the directive does not load. And see this warning on the Batarang Angular console:
Module "myapp" was created but never loaded.
What if you try something like:
var app = angular.module('myapp', []);
app.controller('HomeCtrl', function($scope) {
$scope.title = "Homepage";
...
});
app.controller('AboutCtrl', function($scope) {
$scope.title = "About";
...
});
Related
So , my website is working on paging , and its done by doing .load to div , i am not using angular JS to load child pages , I just want to use angular in my child pages.
This is my child page
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div data-ng-app="myApp">
<div data-ng-controller="appCtrl">
<p>{{greeting.text}}, world </p>
</div>
</div>
<script>
$(document).ready(function () {
var appname = angular.module('myApp', []);
appname.controller('appCtrl', ['$scope',
function ($scope) {
$scope.greeting = { text: 'Hello' };
}]);
})
</script>
Its loaded to masterPage/Index but angular JS is not working , it doesnt do anything , Am i doing it wrong ?
If i load page its self , without index , application is working ,but with index it doesnt
I am getting this console output message : UPDATE putting body instead of div removed this console output , but still my app is not working. And yet again my whole paging sistem wont work if i have body in it , it removes it when loads page so jeah
Uncaught Error: Unknown provider: $controllerProvider from myApp
You haven't declared an app name:
<div data-ng-app>
should be
<div data-ng-app="myApp">
And then in your code you can do:
angular.module('myApp', []);
You were using jQuery to wait for the document ready event, but jQuery hasnt been included.
Also you don't need the data prefix on app and controller.
Try this:
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="appCtrl">
<p>{{greeting.text}}, world </p>
</div>
</div>
<script>
var appname = angular.module('myApp', []);
appname.controller('appCtrl', ['$scope',
function ($scope) {
$scope.greeting = { text: 'Hello' };
}]);
</script>
I have a page as follows. The controller is not working. Can someone please suggest me whats wrong?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="demoApp">
<head>
<title>AnjularJs Hello World</title>
</head>
<body data-ng-controller="CustomerController">
<h2>Customers</h2>
<div id="Trial">{{name}}</div>
<script src="Scripts/angular.js"></script>
<script>
(function () {
alert("Inside Self invoking function. This is popping up.");
CustomerController = function ($scope) {
alert("Inside controller. But this is NOT popping up");
$scope.name = 'HeHe';
};
CustomerController.$inject = ['$scope'];
angular.module('demoApp').controller('CustomerController', CustomerController);
}());
</script>
</body>
</html>
Alert inside the controller is not popping. The first alert is popping. Also the div with id="Trial" is not printing the name.
What am I missing?
You never create your demoApp-module. With angular.module(name) you get an already created module, with angular.module(name, dependencies) you set(create) a module. So simply add:
angular.module('demoApp', []);
above the line with angular.module('demoApp') and your cord works just fine:
(function () {
alert("Inside Self invoking function. This is popping up.");
CustomerController = function ($scope) {
alert("Inside controller. But this is NOT popping up");
$scope.name = 'HeHe';
};
CustomerController.$inject = ['$scope'];
angular.module('demoApp', []);
angular.module('demoApp').controller('CustomerController', CustomerController);
}());
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="demoApp" data-ng-controller="CustomerController">
<h2>Customers</h2>
<div id="Trial">{{name}}</div>
</body>
I'm trying to learn AngularJS and am creating my first page. I am encountering the error:
Error: $injector:nomod Module Unavailable (here)
I have three files:
/index.html
/js/app.js
/js/controllers/MainController.js
And they are as follows:
/index.html
<!doctype html>
<html>
<head>
<tilte>AngularJS Controllers</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<h1>Controllers</h1>
<div ng-controller="MainController">
<p>{{ message }}</p>
<form ng-submit="updateMessage(newMessage)">
<input type="text" ng-model="newMessage">
<button type="submit">Update Message</button>
</form>
</div>
</div>
<!-- Modules -->
<script type="text/javascript" scr="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/MainController.js"></script>
</body>
</html>
/js/app.js
var app = angular.module("myApp", []);
/js/controllers/MainController.js
app.controller('MainController', ['$scope', function($scope){
$scope.message = 'hello';
$scope.updateMessage = function(message){
$scope.message = message;
};
}]);
Where am I going wrong?
Avoid creating global variables like app for assigning the angular module. Instead angular provides a better syntax to set and get modules across multiple files.
App.js
(function() {
// IIFE (Immediately invoked Function Express) to wrap variables inside the function. it prevents polluting global namespace.
angular.module("myApp", []);
})();
MainController
(function() {
angular.module("myApp") // note [] is missing, it means we're getting a module
.controller('MainController', ['$scope', function($scope){
$scope.message = 'hello';
$scope.updateMessage = function(message){
$scope.message = message;
};
}]);
})();
It is a typo.
When you pull your app.js inside the html, you wrote scr instead of src.
See:
<!-- Modules -->
<script type="text/javascript" scr="js/app.js"></script>
I'm developing html 5 mobile app using visual studio cordova, angular js and ionic framework. In that, I need to save some values to localStorage. I followed some articles but there is an error throwing when saving values to the local storage.
<!doctype html>
<html ng-app="myApp">
<head> <title>Test app</title></head>
<body ng-app="myApp" ng-controller="MainCtrl">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-local-storage.js"></script>
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
<script>
var myApp = angular.module('myApp', ['ionic', 'LocalStorageModule']);
myApp.controller('MainCtrl', ['$scope', 'localStorageService', function ($scope, localStorageService) {
$scope.test = function () {
var storageType = localStorageService.getStorageType();
console.log(storageType);
localStorageService.set('test', 'val');
}
}]);
</script>
<div>
<input type="button" ng-click="test()" value="add new">
</div>
</body>
</html>
It throws ReferenceError: isUndefined is not defined at Object.addToLocalStorage
Any idea??
Here is a plunker working with your application plnkr
var myApp = angular.module('myApp', ['ionic' ,'LocalStorageModule']).config(function(localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('cars')
.setStorageType('localStorage')
.setNotify(false, false);
}).controller('MainCtrl', ['$scope', 'localStorageService', function ($scope, localStorageService) {
$scope.test = function () {
var storageType = localStorageService.getStorageType();
console.log(storageType);
localStorageService.set('test', 'val');
}
}]);
I am kind of new to angular JS and this might be the simple question but i am stuck on this.
What i am trying to do is, I have one page and on that page I want to add a template. My template is kind of dynamic and have it's own controller. My code is something like this..
-- Main Page HTML --
<html ng-app="myApp">
<body ng-controller="MyAppCtrl">
<my-component>
</my-component>
</body>
</html>
-- Main page JS --
var myAppModule = angular.module('myApp');
myAppModule.controller('MyAppCtrl', function ($scope) {
})
.directive('myComponent', function () {
return {
restrict: 'E',
templateUrl: 'myComponent.aspx'
};
});
-- Template(myComponent.aspx) --
<html>
<!-- include template script -->
<body ng-controller="ComponentCtrl">
<div ng-click="showAlert()">
myBtn
</div>
</body>
</html>
-- Template page JS --
var templareModule = angular.module('myApp', []);
templareModule.controller('ComponentCtrl', function ($scope, $http) {
$scope.showAlert = function () {
alert("clicked");
}
});
So for this I am unable to get alert on click.
Thanks in advance.
You really don't need to create a custom directive to be able to do what you describe in your question and since you're a beginner I would suggest you start simple and do without the directive. You will need to use the ng-view tag and routing. There are some other minor issues with your code, some of which were already pointed out by others in the comments. The following code worked for me.
index.html:
<html ng-app="myApp">
<body>
<h1>Test</h1>
<div ng-view></div>
<script> (Insert paths to required Angular scripts and your JS files)</script>
</body>
</html>
App JS file:
Note: You will need to download the ngRoute JavaScript file from Angular's website and include it in your project to get the routing to work correctly. (Go to Downloads on their website, pick your version of Angular, then download ngRoute)
angular.module('myApp', [ 'ngRoute' ])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'myComponent.aspx',
controller: 'ComponentCtrl'
})
}])
.controller('ComponentCtrl', function ($scope) {
$scope.showAlert = function () {
alert("clicked");
}
});
myComponent.aspx:
<div class="ComponentCtrl">
<div ng-click="showAlert()">
myBtn
</div>
</div>
Let me know if you have questions or are still unable to get it to work. I would also suggest you check out some tutorial videos on Egghead.io's website. It helped me figure out the basics of Angular.