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.
Related
I'm working on my first app. When I open it in the webbrowser I get this error: Uncaught ReferenceError: controller is not defined
at app.js:3
at app.js:15
I got this error after I created the app.js file and tried to link my controller.js to it. Also the routeProvider doesn't seem to work yet. And my placeholders stopt working, which did work before.
I simplified my code to keep it readable. I've got more html files and use bootstrap in combination with JQuery and CSS. Does someone know what's going wrong here?
app.js
(function(){
var myApp = angular.module('myApp', ['ngRoute']).controller('controller', controller)
.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider
.when('/main', {
templateUrl: '../main.html',
controller: 'controller'
})
.otherwise({redirectTo: '../main'});
});
})();
controller.js
(function() {
angular.module('controller', ['ngRoute'])
.controller('controller', ['$scope', function ($scope) {
}]);
})();
index.html
<!DOCTYPE html>
<html data-ng-app = "myApp">
<head>
<meta charset="utf-8"/>
<title> Who Brings What </title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
/*more code here */
</nav>
</div>
<div data-ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular- route.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular- route.js"> </script>-->
<script src = "../controller.js"></script>
<script src = "../app.js"></script>
</body>
</html>
main.html
<div>
Main Body
</div>
There are few issues with your code,
(i)Since you have defined controller separately in a single file, you can safely remove it from the initial module.
function(){
var myApp = angular.module('myApp',['ngRoute'])
myApp.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider
.when('/main', {
templateUrl: './main.html',
controller: 'controller'
})
.otherwise({redirectTo: '/main'});
});
})();
(ii) You do not need to have ngRoute injected twice, You can just use the globally declared module
(function() {
app.controller('controller', ['$scope', function ($scope) {
}]);
})();
DEMO
I am trying to make a single page application while using components since my company will be moving to using components in the future and I am trying to follow the angular-phonecat tutorial. The problem I'm having is that for some reason in my app.config.js file, the template for the home page is not being recognized (the home-page portion) and I can't figure out why. If I replace that with a simple string of 'hello', it displays just fine, so it has to be somewhere in my components but I can't track down why it's not recognizing it.
Relevant code:
app.config.js:
angular.
module('newSpa').
config(['$locationProvider', '$routeProvider',
function config($locationProvider, $routeProvider){
$locationProvider.hashPrefix('!');
$routeProvider.
when('/home',{
template: '<home-page></home-page>'
}).
when('/contacts', {
template:'<contacts></contacts>'
}).
otherwise('/home');
}]);
app.module.js:
angular.module('newSpa', [
'ngRoute',
'homePage',
'contacts'
]);
home-page.template.html:
<div>
<p>{{message}}</p>
</div>
home-page.module.js:
angular.module('homePage', []);
home-page.component.js:
angular.module('homePage').component('homePage', {
templateUrl: 'home-page/home-page.template.html',
controller: 'homeCtrl'
});
controllers.js:
angular.module('homePage', []).controller('homeCtrl', ['$scope', function($scope){
$scope.message = 'hello';
}]);
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="newSpa">
<head>
<meta charset="UTF-8">
<title>SPA Contacts</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="home-page/home.module.js"></script>
<script src="home-page/home.component.js"></script>
<script src="contacts/contacts.module.js"></script>
<script src="contacts/contacts.component.js"></script>
<script src="controllers/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
My app.config.js file is in the root "app" directory, and my home files are all in the "/app/home-page" directory. Link to angular-phonecat: https://docs.angularjs.org/tutorial/step_03
So my previous solution was still incorrect. The real solution is that my controller was redefining the 'home' module because I had square brackets. Here is the old controller:
angular.module('homePage', []).controller('homeCtrl', ['$scope', function($scope){
$scope.message = 'hello';
}]);
So as you can see, when I have square brackets in the module definition, I am redefining the module, thereby overwriting all previous definitions of the module. When I removed those brackets:
angular.module('homePage').controller('homeCtrl', ['$scope', function($scope){
$scope.message = 'hello';
}]);
Everything displays properly. So the issue was I was making a new module with just the controller, so it didn't have the template to push to the view to update.
You seem to have named your component 'home' but are using 'home-page' in your template.
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 am trying to implement a navigation into a webpage using angularJS. The problem is that the route does not work at all. The browser console does not give any errors and the ng-view just does not show the templatesUrls.
route.js
var routeApp = angular.module('myApp', ['ngRoute']);
routeApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/task.html',
controller: 'TraineesController'
})
.when('/technology', {
templateUrl: 'partials/technology.html',
controller: 'TraineesController'
})
.otherwise({redirectTo:"/technology"});
});
Index.html
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/taskman.css"/>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
<script type="text/javascript" src="app/route.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body>
<a href="#/technology" class="btn btn-sm btn-danger nav-button-margin">
<i class="glyphicon glyphicon-user"></i> Account panel
</a>
<div class="col-sm-12">
<div ng-view></div>
</div><!-- Closing col-sm-12-->
</body>
</html>
app.js
var app = angular.module('myApp', []);
app.controller('TraineesController', function($scope, $http, $log) {
getTrainee(); // Load all available tasks
function getTrainee(){
$http.post("ajax/getTrainee.php").success(function(data){
$scope.trainees = data;
});
};
});
task.html
<div class="widget-box" id="recent-box" ng-controller="TraineesController">
Random text tables
</div>
remove the ; from here:
.when('/technology', {
templateUrl: 'partials/technology.html',
controller: 'TraineesController'
}) // <-----here you have a ; remove it and it will work.
.otherwise({redirectTo:"/technology"});
; broke the chaining and caused a syntax error there.
update:
you can remove this controller:
<body ng-controller="TraineesController">
and instead you can place the controller in the respective templates.
checkout this plunkr demo.
I've made two different plunkers, the first one is a plain app just to do an example of routes magic with angular...
First example, basic routes
var app = angular.module('plunker', ['ngRoute']);
app.controller('MainCtrl', function($scope) {
$scope.technology = 'this is the tech page';
$scope.task = 'this is the task';
});
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/technology', {
templateUrl: 'technology.html',
controller: 'MainCtrl'
})
.when('/task', {
templateUrl: 'task.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/technology'
});
}
]);
The second example is an myApp example based on your application, it's basicaly your application but slightly different...
Second example, your app
// I like to keep the app.js file "clean", what means that this file will only
// load the app modules and declare the DI of the app...
var app = angular.module('myApp', [
'ngRoute', // ngRoutes directive from angularjs
'myAppControllers', // controllers module, u can add how controllers wtv u need
'myAppRoutes', // routes module, you can keep the routes configs separated or in the same file
]);
// start the modules, other way to do this is to put this lines in every
// single controllers or route file, what is ugly
angular.module('myAppRoutes',[]);
angular.module('myAppControllers',[]);
I'm trying to put together a basic angularjs web page through django (but not really using django for this example). I tried to copy an example exactly, but it's not working. The partial and the controller are not loading. The url is updated, so I know the app is loading. But I don't see it hitting my web server at all for the partial or the data. Help would be appreciated.
Here is the simplest code I could put together.
test.html:
<!doctype html>
<html ng-app="ciqApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
</head>
<body>
TEST
<div ng-view>
</div>
</body>
</html>
js/app.js
var ciqApp = angular.module('ciqApp', [
'ngRoute',
'ciqControllers'
]);
ciqApp.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/questions', {
templateURL: '/static/partials/question-list.html',
controller: 'QuestionListCtrl'
}).
otherwise({
redirectTo: '/questions'
});
}]);
js/controllers.js
var ciqControllers = angular.module('ciqControllers', []);
ciqControllers.controller('QuestionListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('/get_questions').success(function(data) {
$scope.questions = data;
});
}]);
TemplateURL should be TemplateUrl. Also, you can try to remove the first slash from your templateUrl path and see if that makes a difference: So:
templateURL: '/static/partials/question-list.html',
becomes:
templateUrl: 'static/partials/question-list.html',