Initially my controller.js looked like this
function MyCtrl1() {}
MyCtrl1.$inject = [];
function MyCtrl2() {
}
MyCtrl2.$inject = [];
And the html code like this
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<div>Angular seed app: v <span app-version></span></div>
<div>Author is : <span app-author></span></div>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
Here is the service.js code
angular.module('myApp.services', []).
value('version', '0.1')
.value('author','Jay');
And the directive.js code
angular.module('myApp.directives', []).
directive('appVersion', ['version', function(version) {
return function(scope, elm, attrs) {
elm.text(version);
};
}])
.directive('appAuthor', ['author', function(author) {
return function(scope, elm, attrs){
elm.text(author);
};
}]);
The above code worked completely worked fine and displayed version and author configured in service.js
The moment i modify my controller.js to include a new controller as below it stops working and nor the version nor the author is displayed.
The modified controller code is as below
function MyCtrl1() {}
MyCtrl1.$inject = [];
function MyCtrl2() {
}
MyCtrl2.$inject = [];
angular.module('myApp', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {
$scope.panes = [
{ title:"Dynamic Title 1", content:"Dynamic content 1" },
{ title:"Dynamic Title 2", content:"Dynamic content 2" }
];
};
TabsDemoCtrl.$inject = ['$scope'];
Any pointers why this thing is not working.
Looks like your problem is the redeclaration of myApp here:
angular.module('myApp', ['ui.bootstrap']);
I was able to reproduce your problem when I had
angular.module('myApp', ['myApp.services', 'myApp.directives']);
angular.module('myApp', ['ui.bootstrap']);
Switching it to
angular.module('myApp', ['myApp.services', 'myApp.directives', 'ui.bootstrap']);
made everything work again.
Related
I am trying to add typescript to AngularJS and I'm getting the following error
Error: [$controller:ctrlreg] The controller with the name 'MyController' is not` registered
Has anyone clue on what I am doing wrong?
I have created the following class
/// <reference path='references/_all.ts' />
var app = angular.module('shop', []);
class MyController {
constructor($scope: any) {
$scope.message = { title: "Hello World!!" };
};
}
app.controller('MyController', MyController);
and html:
<html>
<head>
...
</head>
<body ng-app="shop">
<div ng-controller="MyController">
{{message.title}}
</div>
</body>
</html>
I am using grunt to compile it:
/// <reference path='references/_all.ts' />
var app = angular.module('shop', []);
var MyController = (function () {
function MyController($scope) {
$scope.message = { title: "Hello World!!" };
};
return MyController;
})();
app.controller('MyController', MyController);
Do you have link file with app?
<script src="./app.js"></script>
Here is my solution:
var app = angular.module('shop', []);
var MyController = (function () {
function MyController($scope) {
$scope.message = { title: "Hello World!!" };
}
return MyController;
})();
app.controller('MyController', MyController);
<head>
<meta charset="utf-8" />
<title>AngularJS + Typescript controller cant be found</title>
<script src="https://code.angularjs.org/1.5.4/angular.js"></script>
<script src="./app.js"></script>
</head>
<body ng-app="shop">
<div ng-controller="MyController">
{{message.title}}
</div>
</body>
</html>
My index file :
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="homingController">
<head>
<title></title>
<script src="./js/jquery-1.9.1.js"></script>
<script src="./js/jquery-ui.js"></script>
<script src="./js/angular.js"></script>
<script src="./js/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="./Controller/homingController.js"></script>
<link rel = "stylesheet" href = "./css/angular-material.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
<link rel = "stylesheet" href = "./css/materialize.min.css">
<link href="./css/icon.css" rel="stylesheet">
<link rel ="stylesheet" href="./css/Main.css">
<title>Home Application</title>
</head>
<body>
<div class="navbar">
Home
about
</div>
<div ng-view></div>
<script>
var mainApp = angular.module('myApp', ['ngRoute']);
mainApp.config(function($routeProvider) {
$routeProvider.when('/home', {
template: "home",
controller: 'homingController'
})
.when('/monitor', {
template: "<p>{{firstName}}{{lastName}}</p>",
controller: 'monitoringController'
})
.
otherwise({
redirectTo: '/'
});
});
mainApp.controller('monitoringController', ['$scope', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
}])
My HomingController.js
var mainApp = angular.module('myApp', ['ngRoute']);
mainApp.controller('homingController', ['$scope', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
}])
My Home.html code :
<div ng-controller="homingController">
{{ lastName }} Hello
</div>
Now I am facing issue :
1) In homingController, if I add first line that is :
var mainApp = angular.module('myApp', ['ngRoute']);
then it give me error :
angular.js:14328 Error: [$controller:ctrlreg] The controller with the name 'homingController' is not registered.
1) In homingController, if I Dont add add first line that is :
var mainApp = angular.module('myApp', ['ngRoute']);
then it give me error :
angular.js:14328 Error: [$controller:ctrlreg] The controller with the name 'homingController' is not registered.
thanks !!
You are declaring the module twice,
//Remove this line in your controller.js file
var app = angular.module("myApp", []);
///
app.controller("homingController", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
DEMO
I think the problem lies in the way you're adding your controller to your module.
Try Changing following line in homingController
var app = angular.module("myApp", []);
to
var app = angular.module("myApp");
Sajeetharan is right. you declared the module twice however deleting it in your controller.js makes an error of Uncaught ReferenceError: app is not defined because you haven't declared the module before creating a controller
my suggestion is to make your main page into
app.config(['$routeProvider', function( $routeProvider) {
// Define routes
$routeProvider.when('/home', {
templateUrl: 'home.html',
controller: 'homingController'
}).when('/monitor', {
templateUrl: 'home.html',
controller: 'monitoringController'
}).otherwise({
redirectTo: 'home'
});
}
]);
since the app is defined first in controller.js
Trying to build a simple application that allows a user to upload a file, and upon clicking the 'add' button, It parses the file and displays the result within the browser.
I am using IntelliJ to generate the AngularJS application stub, and modifying it accordingly.
My attempt is below:
view1.html
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../app.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/ng-file-upload/ng-file-upload-shim.js"></script> <!-- for no html5 browsers support -->
<script src="bower_components/ng-file-upload/ng-file-upload.js"></script>
<!--<script src="view1.js"></script>-->
</head>
<body>
<div ng-controller="View1Ctrl">
<input type="file" id="file" name="file"/>
<br/>
<button ng-click="add()">Add</button>
<p>{{data}}</p>
</div>
</body>
</html>
view1.js
'use strict';
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', ['$scope', function ($scope) {
$scope.data = 'none';
$scope.add = function() {
var f = document.getElementById('file').files[0],
r = new FileReader();
r.onloadend = function(e) {
$scope.data = e.target.result;
}
r.readAsArrayBuffer(f);
}
}]);
view1_test.js
'use strict';
describe('myApp.view1 module', function() {
beforeEach(module('myApp.view1'));
describe('view1 controller', function(){
it('should ....', inject(function($controller, $rootScope) {
//spec body
// var view1Ctrl = $controller('View1Ctrl');
var $scope = $rootScope.$new(),
ctrl = $controller('View1Ctrl', {
$scope: $scope
// $User: {}
});
expect(ctrl).toBeDefined();
}));
});
});
app.js
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
I am not sure where I could potentially be going wrong? I viewed quite a few questions to this and tried multiple different approaches but I cannot get this to work despite all of my tests passing.
The issue was around my view1.js file. I found the Papa Parse library extremely useful.
Here is my solution used from the open source Papa Parse community:
Papa.parse(fileInput[0], {
complete: function(results) {
console.log("Complete!", results.data);
$.each(results.data, function(i, el) {
var row = $("<tr/>");
row.append($("<td/>").text(i));
$.each(el, function(j, cell) {
if (cell !== "")
row.append($("<td/>").text(cell));
});
$("#results tbody").append(row);
});
}
});
I have set up a basic AngularJS app in VS and cannot get the ui-router functionality working. I have looked at videos, blogs, SO answers and as far as I can tell I am doing everything right, although, I am brand new to web development.
First, here is the solution structure:
and the code...
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8" />
</head>
<body ng-app="app">
<div ui-view></div>
<script src="bower_components/angular/angular.js"></script>
<script src="app/app.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
</body>
</html>
app.js:
(function () {
'use strict';
angular.module('app', ['ui.router']);
})();
app.states.js:
(function () {
'use strict';
angular.module('app')
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'templates/test.html',
controller: 'testCtrl',
controllerAs: 'vm'
})
});
})();
test.html:
<div>
<p>TEST PAGE</p>
</div>
testCtrl.js:
(function () {
'use strict';
angular.module('app')
.controller('testCtrl', testCtrl);
testCtrl.$inject = ['$state'];
function testCtrl($state) {
var vm = this;
var userAuthenticated = false;
init();
function init() {
$state.go('home');
};
};
})();
Can anyone see anywhere I have made a mistake?
There is a working example
I would say, that I miss these lines in your index.html
...
<script src="app/app.states.js"></script>
<script src="templates/testCtrl.js"></script>
That will loade the crucial state definition, and related controller. Check it in action here
I have 3 js files in my application
(mainApp.js, template.js, app.js)
index.html
<html lang="en" ng-app="myapp">
mainApp.js
var app = angular.module('myapp',
['myapp.templateApp', 'myapp.demoApp']);
template.js
angular.module('myapp.templateApp', ['slick', 'localization'])
.controller('CountryLaunguageSelection', [
'$scope', '$rootScope','$http',
function($scope, $rootScope,$http) {
}
]);
app.js
var app = angular.module('myapp.demoApp', [
'ui.router',
'ui.grid',
'ngTouch',
'ui.grid.selection',
'ui.bootstrap',
'ngTable'
]);
app.config(function($stateProvider, $urlRouterProvider) {
});
I need the 3 modules to be in 3 different files.Could anybody tell me what is wrong with the above code.
I am getting the below error
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.28/$injector/modulerr?p0=app&p1=Error%3A%20…0%2FdemoApp%2Ftemplate%2Fthird-party%2Fangular%2Fangular.min.js%3A18%3A387)
Just created such a localhost - it works. Try to compare your index.html and dependencies.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head lang="en">
<meta charset="UTF-8">
<script src="angular.min.js"></script>
<script src="mainApp.js"></script>
<script src="app.js"></script>
<script src="template.js"></script>
</head>
<body>
<div ng-controller="CountryLaunguageSelection">
{{data.myData}}
</div>
</body>
</html>
mainApp.js
var app = angular.module('myapp', ['myapp.templateApp', 'myapp.demoApp']);
app.js
var app = angular.module('myapp.demoApp', []);
app.config(function() {
});
template.js
angular.module('myapp.templateApp', [])
.controller('CountryLaunguageSelection', [
'$scope', '$rootScope','$http',
function($scope, $rootScope, $http) {
$scope.data = {
myData: "Hello"
};
}
]);