I'm having a problem in AngularJS routing and controllers. Here is the code:
Index.html
<!DOCTYPE html>
<html ng-app="contacts">
<head>
<script src="libs/angular.min%20(1).js"></script>
<script src="contacts.js"></script>
<script src="index.js"></script>
<title></title>
</head>
<body >
<div data-ng-view=""></div>
</body>
</html>
index.js
var myApp = angular.module('contacts', []);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', { controller: 'ContactsCtrl', templateUrl: '/views/show-contacts.html' })
//.when('/view2', { controller: 'MyCont', templateUrl: 'V2.htm' })
.otherwise({ redirectTo: '/' });
});
contacts.js
var myApp = angular.module('contacts', []);
myApp.controller('ContactsCtrl', function ($scope) {
$scope.name = "omar";
});
but I'm getting this error:
Argument 'ContactsCtrl' is not a function, got undefined
Any help?
Change your index.html like this;
<script src="index.js"></script>
<script src="contacts.js"></script>
And in your contact.js change
var myApp = angular.module('contacts', []); to
var myApp = angular.module('contacts');
Angular module with two arguments like angular.module('contacts', []); will create a new module, but angular module with single argument like angular.module('contacts'); will pick up the existing module. Here in this case 'contacts'
You are redefining your app in index.js, so the controller created in contacts.js is lost. Remove this line from index.js:
var myApp = angular.module('contacts', []);
I would suggest to create two different module names one in the index.js ( This would be the app name that you would refer in the html ng-app attribute) and other in contacts.js (The module name for the controllers). In the index.js create a dependecy to the contacts.js`. I was able to fix the problem by doing the below.
Updated contacts.js Here i updated the contacts to contactsController
var myApp = angular.module('contactsController', []);
myApp.controller('ContactsCtrl', function ($scope) {
$scope.name = "omar";
});
Updated index.js Here i added the contactsController as the dependency. I found it easier to name this as app.js. This way ng-app is always mapped to the module name in app.js.
var myApp = angular.module('contacts', [contactsController]);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', { controller: 'ContactsCtrl', templateUrl: '/views/show-contacts.html' })
//.when('/view2', { controller: 'MyCont', templateUrl: 'V2.htm' })
.otherwise({ redirectTo: '/' });
});
Related
I try to show a view with angular paths. the console does not throw any error or warning.
But equally the view is not displayed.
What am I doing wrong?
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head></head>
<body>
<ng-view></ng-view>
<!-- build:js bower/vendor -->
<script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
<!-- endbuild -->
<script src="./routes.js"></script>
<!-- build:app scripts/js || CUSTOMER -->
<script src="./components/customer/customerService.js"></script>
<script src="./components/customer/customerController.js"></script>
<!-- endbuild-->
</body>
</html>
routes.js
var _templateBase = './components';
angular.module('app', [
'ngRoute'
])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: _templateBase + '/customer/customer.html' ,
controller: 'customerController',
controllerAs: '_ctrl'
})
.otherwise({
redirectTo: '/'
});
}
]);
costomerService.js
angular.module('app', [])
.factory('customerService', function() {
});
costomerController.js
angular.module('app',[])
.controller('customerController', ['$scope', function($scope, customerService) {
//
}]);
It's wrong? Because the view is not displayed? I'm using obsolete mertodos, guide me lleguar many tutorials there.
Thanks so they can help.
This creates your app because you have included the second parameter (an array of dependencies to inject):
angular.module('app', [
'ngRoute'
])
Remove the second parameter on your other angular.module() definitions because that is causing a new app to be created each time.
angular.module('app') <-- no second parameter tells it to use the existing 'app' module
.factory('customerService', function() {
});
angular.module('app') <-- no second parameter tells it to use the existing 'app' module
.controller('customerController', ['$scope', 'customerService', function($scope, customerService) {
//
}]);
I added customerService to your injection array on your controller definition because the array elements have to match up exactly to your function parameters.
Also, if you are using controllerAs syntax as you have done on your route definition then you may not want to inject $scope into your controller.
I'm teaching myself some AngularJS and have made some progress.
The routing on the following project doesn't seem to work but I don't know what I'm doing wrong. I use WebStorm.
I did an exercise (the adding names part) and now I'm trying to show what's within the views on the index page but this doesn't seem to work..
Index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular/angular.js"></script>
<script src="angular/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="myController as ctrl">
<h1>Lijst met namen</h1>
<input type="text" placeholder="voornaam..." ng-model="ctrl.voornaam">
<input type="text" placeholder="achternaam..." ng-model="ctrl.name">
<input type="button" value="Persoon toevoegen" ng-click="ctrl.addNaam()">
<ul>
<li ng-repeat="person in ctrl.personen">
{{person.name}} {{person.voornaam}}
</li>
</ul>
</div>
<div role="navigation">
<nav>
Home
About us
Contact us
</nav>
</div>
<div ng-view></div>
<script src="controller.js"></script>
<script src="aboutController.js"></script>
<script src="contactController.js"></script>
<script src="homeController.js"></script>
</body>
</html>
App.js:
angular.module('myApp',['ngRoute']).config(moduleConfig);
//Inject dependencies
moduleConfig.$inject = ['$routeProvider'];
//routes configureren
function moduleConfig($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'views/home.html',
controller: 'homeController',
controllerAs: 'homeCtrl'
})
.when('/home', {
templateUrl: 'views/home.html',
controller: 'homeController',
controllerAs: 'homeCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'aboutController',
controllerAs: 'aboutCtrl'
})
.when('/contact', {
templateUrl: 'views/contact.html',
controller: 'contactController',
controllerAs: 'contactCtrl'
})
.otherwise({
redirectTo: '/'
});
} })();
Controller.js:
angular.module('myApp', []).controller('myController', myController);
function myController(){
var vm = this;
vm.personen = [
{name: 'Schrooten', voornaam: 'Mathias'}
];
vm.addNaam = function(){
var newName = {
voornaam: this.voornaam,
name: this.name
};
this.personen.push(newName);
window.alert('Persoon toegevoegd!')
}
}
aboutController:
angular.module('myApp').controller('aboutController', aboutController);
function aboutController(){
this.msg = 'Hello';
}
2 other controllers look almost the same (contactController.js and homeController.js)
views:
about.html:
<div>
<p>About us: ....</p>
<input type="text">
</div>
Same for 2 other views.
this line angular.module('myApp', []) initializes a module.
So basically you have to initialize once.
then you can use it like this angular.module('myApp')
so this in you code:
angular.module('myApp', []).controller('myController', myController);
has to become like the line below because you already have myApp module defined:
angular.module('myApp').controller('myController', myController);
The angular.module('myApp') is a redundant code in your codebase. creating angular modules everywhere is the incorrect thing here. Create it once, store it in a variable, lets say 'app' and use it everywhere else.
Like as follows:
in app.js :
var app = angular.module('myApp', ['ngRoute']);
in route.js :
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'login.html'
})
.when('/home', {
templateUrl : 'main.html',
controller: 'myController'
})
.otherwise({
redirectTo: '/'
});
});
In Controller.js :
app.controller('myController', myController);
function myController(){
var vm = this;
vm.personen = [
{name: 'Schrooten', voornaam: 'Mathias'}
];
vm.addNaam = function(){
var newName = {
voornaam: this.voornaam,
name: this.name
};
this.personen.push(newName);
window.alert('Persoon toegevoegd!')
}
}
You can refer to one of my github repositories to understand a basic angular framework that uses template routing for a single page application here.
Try to do:
angular.module('myApp',['ngRoute']).config(['$routeprovider', moduleConfig]);
And then you should be able to get rid of the .$inject you call.
From your code as first I see this line looks to be wrong, when you register your 'myController' controller. There you are using angular.module('myApp', []) hovewer in App.js there is the 'myApp' module created. In 'Cotnroller.js' use angular.module('myApp').controller(...) without brackets. Currenlty in Controller.js you overwrite the 'myApp' module.
I'm trying to make an AngularJS application but I don't understand why it doesn't route correctly, I followed some guides but haven´t made it work yet.
Here is the code:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<meta charset="UTF-8">
<title>Example App</title>
</head>
<body>
<div ng-view></div>
<!-- Vendor libraries -->
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<!-- Application Files -->
<script src="app/app.js"></script>
<script src="app/home/controllers/HomeController.js"></script>
</body>
</html>
app.js
(function() {
'use strict';
var app = angular
.module('App', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home/views/index.html',
controller: 'HomeController',
controllerAs: 'home'
})
.otherwise({
redirectTo: '/'
});
});
})();
HomeController.js
(function() {
'use strict';
angular
.module('App')
.controller('HomeController', HomeController);
function HomeController(){
var home = this;
}
})();
home's index.html
<div>
Example text
</div>
Thanks in advance
Are you seeing errors in the console? You're probably getting an error relating to the controller not being found, as 'home/controllers/HomeController' is not a proper way to reference HomeController. It should instead read: 'HomeController'. Angular will do the work to traverse your controllers and find one that matches that string.
Here's an updated app.js:
(function() {
'use strict';
var app = angular
.module('App', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home/views/index.html',
controller: 'HomeController',
controllerAs: 'home'
})
.otherwise({
redirectTo: '/'
});
});
})();
Additionally, in HomeController.js, you are re-instantiating the module 'App' by including the brackets after the name. Instead, modify it to more succinctly read:
(function() {
'use strict';
angular
.module('App')
.controller('HomeController', HomeController);
function HomeController(){
var home = this;
}
})();
I'm trying to create a simple website using angular as front-end.
Is there a way to create partial views and routing without having a webserver?
I've been trying to do so, but I keep getting this error:
Uncaught Error: [$injector:modulerr]
Here's my code: index.html
<!DOCTYPE html>
<html lang="en" ng-app="cerrajero">
<head>
<meta charset="UTF-8">
<title>Cerrajero</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body ng-controller="MainCtrl">
<div ng-view></div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script type="text/ng-template" id="partials/contact.html" src="partials/contact.html"></script>
<script type="text/ng-template" id="partials/services.html" src="partials/services.html"></script>
<script type="text/ng-template" id="partials/home.html" src="partials/home.html"></script>
</body>
</html>
and the app.js:
var app = angular.module('cerrajero', []);
app.config([function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/services', {
template: 'partials/services.html'
}).
when('/contact', {
template: 'partials/contact.html'
}).
when('/home', {
template: 'partials/home.html'
}).
otherwise({
redirectTo: '/home',
template: 'partials/home.html'
});
}]);
function MainCtrl ($scope) {
};
What am I doing wrong?
edit
I've added the ngRoute but I still get the same error when I open the index.html file in the browser.
var app = angular.module('cerrajero', ['ngRoute']);
app.config([function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/services', {
template: 'partials/services.html'
}).
when('/contact', {
template: 'partials/contact.html'
}).
when('/home', {
template: 'partials/home.html'
}).
otherwise({
redirectTo: '/home',
template: 'partials/home.html'
});
}]);
function MainCtrl ($scope) {
};
edit 2
Here's the files on github:
https://github.com/jsantana90/cerrajero
and here's the website when it loads:
http://jsantana90.github.io/cerrajero/
edit 3
I've manage to get rid of the error by having the following code:
var app = angular.module('cerrajero', ['ngRoute']);
app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(false);
$routeProvider.
when('/services', {
template: 'partials/services.html'
}).
when('/contact', {
template: 'partials/contact.html'
}).
when('/home', {
template: 'partials/home.html'
}).
otherwise({
redirectTo: '/home',
template: 'partials/home.html'
});
}]);
app.controller('MainCtrl', function ($scope) {
});
I added this app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
But now my page is blank. It doesn't redirects or anything.
Have I placed everything how it's suppose to go?
edit 4
I forgot to change ui-view to ng-view. Now it works but it's showing in the view: partials/home.html instead of the actual view.
edit 5
Ok so, after having this final code:
var app = angular.module('cerrajero', ['ngRoute']);
app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$routeProvider.
when('/services', {
templateUrl: './partials/services.html'
}).
when('/contact', {
templateUrl: './partials/contact.html'
}).
when('/home', {
templateUrl: './partials/home.html'
}).
otherwise({
redirectTo: '/home'
});
}]);
app.controller('MainCtrl', function ($scope) {
});
I get this error:
XMLHttpRequest cannot load file:///partials/home.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Now I'm guessing this is because I don't have a webserver running. How do I get it to work without a webserver?
solution
When I uploaded the files to github it seems to work there, but not locally.
Looks like you are using ngRoute and forgot to include it!
First load angular-route.js after loading angular.js. The inject ngRoute as a module:
var app = angular.module('cerrajero', ['ngRoute']);
Try removing the array syntax brackets from inside your config function. I believe there are two different ways of invoking these functions, either with a standalone function or with an array for any minification processes.
You should either one of the following:
app.config(function ($locationProvider, $routeProvider) {
// your code here
});
Or define the variable names with the array syntax for use in minifiers
app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
// your code here
}]);
When you pass in an array to the config function, I believe Angular is expecting the first parameters to be a string value.
You should use ui-router instead of ng-route. It will allow you to nest views. Most current Angular projects use ui-router. ui-router scotch.io
Also, for your controller try app.controller('MainCtrl', function($scope){...});
Replace
var app = angular.module('cerrajero', []);
with
var app = angular.module('cerrajero', ['ngRoute']);
I started to write an Ionic application and started to write my views and controllers. I want to use a tab-layout.
For clarity i want to seperate my controllers in different files.
My controllers-Folder:
controller.js
main.js
tabs.js
controller.js contains:
angular.module('myApp.controllers', []);
main.js contains:
angular.module('myApp.controllers', ['myApp.services','ionic'])
.controller('MainCtrl', function ($scope) {
$scope.name = "Test";
});
tabs.js contains:
angular.module('myApp.controllers', ['myApp.services','ionic'])
.controller('TabsCtrl', function ($scope) {
});
In the app.js i specify my routings:
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'app/templates/tabs.html',
controller: 'TabsCtrl'
})
.state('tab.main', {
url: '/main',
views: {
'tab-main': {
templateUrl: 'app/templates/main.html',
controller: 'MainCtrl'
}
}
})
And finally in my index.html i include all used files in the header:
<script src="app/app.js"></script>
<!-- Controller-Definition -->
<script src="app/controller/controller.js"></script>
<script src="app/controller/tabs.js"></script>
<script src="app/controller/main.js"></script>
My problem is that in the browser i get the error:
Argument 'TabsCtrl' is not a function, got undefined
and i don't know why its not working!
when i change the order of the tabs.js und main.js in the index.html file
i get:
Argument 'MainCtrl' is not a function, got undefined
Could someone give me help on this problem? it's probably is something small and simple but i don't get it :-)
You overwrite 'myApp.controllers' module in each file. Try this:
controller.js:
angular.module('myApp.controllers', ['myApp.services','ionic']);
main.js:
angular.module('myApp.controllers')
.controller('MainCtrl', function ($scope) {
$scope.name = "Test";
});
tabs.js
angular.module('myApp.controllers')
.controller('TabsCtrl', function ($scope) {
});