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',
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 am working with AngularJS and using the ngRoute for routing.
I was wondering if this is normal behavior for Angular when it routes to the "otherwise" part and activates all controllers?
var angularApp = angular.module('AngularApp', ['ngRoute']);
angularApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/ExpenseOverview', {
controller: 'ExpenseOverviewController',
templateUrl: 'Angular/Views/ExpenseOverview.vbhtml'
})
.when('/AddExpense',
{
controller: 'AddExpenseController',
templateUrl: 'Angular/Views/AddExpense.vbhtml'
})
.otherwise({ redirectTo: '/ExpenseOverview' });
}]);
I have put an alert at the very top in each controller, even my factory. And on startup, all alerts are shown. Instead of going to "ExpenseOverview" at first, it checks both my controllers and not just the one that is bound to "/ExpenseOverview".
What could be the cause of this?
EDIT: Knowing it's normal for Angular to access all controllers on startup, the main problem isn't fixed yet. This is explained in another thread on StackOverflow. I thought this had something to do with it, because I had no idea that it was normal behavior for Angular to do this.
I could say that this thread is closed, because I have an answer to my question now.
Angular does not access every controller on start up, however, ngRoute does. Any initialization code in a controller that has a corresponding route entry in $routeProvider, will run at initialization.
Here's an example of this at play: http://plnkr.co/edit/WsvbKhcR74yoX80bskdb?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script data-require="ng-route#*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0-rc.3/angular-route.js"></script>
</head>
<body ng-controller="main">
<h1>Hello {{test}}!</h1>
<div ng-view="">Hello?</div>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/route1', {
controller: 'con1',
templateUrl: 'view1'
})
.when('/route2',
{
controller: 'con2',
templateUrl: 'view2'
})
.otherwise({ redirectTo: '/route1' });
});
app.controller('main', function($scope){
alert('1');
$scope.test = 'Yo.';
});
app.controller('con1', function($scope){
alert('2');
$scope.value = 'value1';
});
app.controller('con2', function($scope){
$scope.value = 'value2'
});
</script>
<script type="text/ng-template" id="view1">
View 1 {{value}}
</script>
<script type="text/ng-template" id="view2">
View 2 {{value}}
</script>
</body>
</html>
I'm just getting started with Angular and seem to have fallen down at the first hurdle. I wanted to build a simple skeleton app to start with. I pretty much copied the code of the angularjs.org site and am getting an error talking about injection... Sorry to code dump, but I have no clue where the bug is.
<!DOCTYPE html>
<html ng-app="triangular">
<head>
<title>Angular Skeleton</title>
<link rel="stylesheet" href="/style/bootstrap.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-route-segment/1.3.0/angular-route-segment.min.js" type="text/javascript"></script>
<script type="text/javascript">
var a = angular;
var t = a.module('triangular', ['ngRoute']);
t.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page1', {
templateUrl: 'app/modules/test/partials/partial1.html',
controller: 'Page1Ctrl'
}).
when('/page2', {
templateUrl: 'app/modules/test/partials/partial2.html',
controller: 'Page2Ctrl'
}).
otherwise({
redirectTo: '/page1'
});
}]);
t.controller('Page1Ctrl', ['$scope', '$http', function($scope, $http)
{
$scope.placeholder = 'Test';
}]);
t.controller('Page2Ctrl', ['$scope', '$http', function($scope, $http)
{
$scope.placeholder = 'Test2';
}]);
</script>
</head>
<body>
<div ng-view=""></div>
</body>
</html>
I'm getting this error: Error: [$injector:modulerr].
The link it's providing isn't that useful. It told me to include the route segment js file, which I did, but the error persisted.
try adding:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-route.min.js" type="text/javascript"></script>
to your head right below where you include angular. I had a similar issue and this fixed it right away.
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',[]);