Sorry if this isn't a particulary enlightening question, but I am at a loss as to why I can't get angularjs to run on my page.
I've stripped it down to the following jsfiddle: http://jsfiddle.net/Inigo/CvWE5/1/
Here is my code:
var app = angular.module('iwd-cms', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
controller: 'TourManager'
}).
otherwise({
redirectTo: '/dashboard'
});
}]);
app.controller('TourManager', function($scope){
alert('hello world');
});
As according to an issue on AngularJS's github repo, you must include a template to match up with your controller:
$routeProvider.
when('/', {
templateUrl: 'TourManager.html',
controller: 'TourManager'
}).
See issue 1838 issue on their github repo: https://github.com/angular/angular.js/issues/1838
It seems to be an ongoing issue; please look for alternative code solutions at the Url.
Related
While developing some SPA AngularJS Application I define the rooting with $routeProvider. Everythings works fine, but I get tired with clicking through the whole application to see particular changes I've done anytime I republish the application to the server. Is there a possibility to change this behaviour? I mean, when I hit refresh on my browser or use some tools for automatical refreshing (like LiveReload Server) is there a way to tell angularJS to not to navigate to the default page?
Regarding to the comments below, here is the routing content.
Below is the MainRoutingContent
'use strict'
angular.module('MainModule')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
controller: 'LoginController',
templateUrl: 'webapp/modules/authentication/views/login.html',
hideMenus: true
})
.when('/register', {
controller: 'RegistrationController',
templateUrl: 'webapp/modules/registration/views/register.html'
})
.when('/', {
controller: 'HomeController',
templateUrl: 'webapp/modules/home/views/home.html'
})
.otherwise({ redirectTo: '/login' });
}]);
The single html page has the ng-view defined:
<div>
<div ng-view></div>
</div>
And some additional for the RegistrationModule:
angular.module('RegistrationModule')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/register/user', {
controller: 'UserRegistrationController',
templateUrl: 'webapp/modules/registration/views/register-user.html'
})
.when('/register/company', {
controller: 'CompanyRegistrationController',
templateUrl: 'webapp/modules/registration/views/register-company.html'
});
}]);
Ok, I got it. I defined some run block in the main module of my application with the redirection to the /login page. Here is the code:
angular.module("app", [...])
.run(['$location',
function ($location) {
$location.path('/login');
}])
If someone will get such an issue with refreshing the page in the future, please look for some run block defined in your code.
Sorry if this seems like a stupid or simple question but I am a little confused, I have been looking up many different kinds of tutorials for Angular to understand the concept and how to create an application.
The issue is how to you attach a Controller to the Page, I have seen two methods:
Add the controller script to the page
Display Controller inside the app.js where the Website Routing is.
Here is what I have at the moment please let me know if there is any issues in this code:
var app = angular.module('myApp', [
'ngRoute'
]);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/home.html',
controller: 'homeController'
}).
when('/login', {
templateUrl: 'partials/login.html',
controller: ''
}).
when('/signup', {
templateUrl: 'partials/signup.html',
controller: ''
}).
when('/dashboard', {
templateUrl: 'partials/dashboard.html',
controller: ''
}).
otherwise({
redirectTo: '/404',
templateUrl: 'partials/404.html'
});
}]);
app.controller('homeController', ['$scope', function($scope) {
$scope.message = "This is the Home Page";
}]);
Again I am really new to Angular.
Updated to single Controller file:
app.js:
var app = angular.module('myApp', [
'ngRoute'
]);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/home.html',
controller: 'controllers/homeController.js'
}).
when('/login', {
templateUrl: 'partials/login.html',
controller: ''
}).
when('/signup', {
templateUrl: 'partials/signup.html',
controller: ''
}).
when('/dashboard', {
templateUrl: 'partials/dashboard.html',
controller: ''
}).
otherwise({
redirectTo: '/404',
templateUrl: 'partials/404.html'
});
}]);
controller file:
app.controller('homeController', ['$scope', function($scope) {
$scope.message = "This is the Home Page";
}]);
Nope, your code is fine. I generally use two different files app.js for all the routing options and a controller.js file for the different controllers. A single file seems a bit too cluttered to me.
A single file per controller works but I see for most usercases it turns out just a few lines of code per page for me, but you can if you have extensive codes in each controller
I create a Controller for every model in my database: e.g: ProjectController.js, PeopleController.js, etc. And I use app.js just for routing and general controllers like header, footer, etc.
There isn't a strict way to do it, you have to decide it based on your architecture design. But i can give you a tip: Never define your controllers in your .html file because it makes it awful and less readable.
That's a purely organizational choice. As long as the browser has the code of the controller available, it doesn't matter.
But unless you're creating a tiny demo, having all the controllers defined in a single JavaScript file will quickly become unmanageable: the file will be too large, you'll search for the controllers constantly, and everyone in the team will modify the same file, leading to conflicts, etc.
The simple rule is: one JS file per AngularJS component.
If you're concerned about two many JS files having to be loaded by the HTML page in production, then make sure to learn using gulp or grunt, and to generate a single minified JS file from all the small JS files used during development.
EDIT:
the controller attribute of the route is not supposed to be the path of a JS file. It's supposed to be the name of a controller. It should thus stay exactly as it was in the first, working example.
You need to understand how the browser works: if the HTML contains two <script> elements, it works the same way as if it had a single one with the code of the two scripts concatenated. So splitting the code in two files doesn't change the way the code is written.
Change your route specification to the following code:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/home.html',
controller: 'homeController' //change here
//controller should be the name of the controller,
//not the file containing the controller function
}).
when('/login', {
templateUrl: 'partials/login.html',
controller: ''
}).
when('/signup', {
templateUrl: 'partials/signup.html',
controller: ''
}).
when('/dashboard', {
templateUrl: 'partials/dashboard.html',
controller: ''
}).
otherwise({
redirectTo: '/404',
templateUrl: 'partials/404.html'
});
}]);
I've been trying to remove the hash for angular urls but with no luck. Tried searching everywhere but anything I use seems to fail
var module = angular.module("App", ['ngRoute']);
module.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/route1', {
templateUrl: '/partials/home.html',
controller: 'RouteController'
}).
otherwise({
redirectTo: '/'
});
}]);
$locationProvider.html5Mode(true);
module.controller("RouteController", function($scope) {
})
This seems to have no effect on the url. I still get a 404 for index.html/route1
Ideally would like example.com/route1
Any help appreciated.
A further update to clarify. My file is app.html.
So /app.html#/ is the current address. Ideally I would like this to be:
/folder/
I've trawled the web but none of the solutions seem to fit.
I tried this solution here.
But didn't work.
So I'm playing around with learning angular and trying to make a project issue tracker, only I'm having problems with ngRoute and routing.
What I'd ideally like is a system whereby (say) issuetrack.com/projectX returns a view of all the issues for projectX, and issuetrack.com/projectX/XYZ returns a view of the specific issue with the related ID (XYZ).
I've setup my config as such:
tracker.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'static/partials/index_partial.html',
}).
when('/dashboard', {
templateUrl: 'static/partials/dashboard.html',
controller: 'DashboardController'
}).
when('/404', {
templateUrl: 'static/partials/fourOHNOfour.html',
}).
when('/:project', {
templateUrl: 'static/partials/project.html',
controller: 'ProjectController'
}).
when('/:project/:issue', {
templateUrl: 'static/partials/issue.html',
controller: 'IssueController'
}).
otherwise({
redirectTo: '/404'
});
$locationProvider.html5Mode(true);
}]);
But every time I visit (say) localhost:8080/example/1 the page just hangs and becomes unresponsive. localhost:8080/example works completely fine though.
Is what I've done the right way to go about it, or is there another way my googling hasn't been able to find?
Thanks!
Fixed! After several hours...
All you need is:
<base href="/" />
In the head of the index page where the ng-view is.
I tried to make the 'getting started' tutorial from Angular JS, but I have a problem when setting the route of a link: the controller of that route does not get called when the user clicks on the link.
Here is my code:
angular.module('phonecat', []).
config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: PhoneListCtrl
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: PhoneDetailCtrl
}).
otherwise({
redirectTo: '/phones'
});
}
]);
function PhoneDetailCtrl($scope, $routeParams, $http) {
$scope.phoneId = $routeParams.phoneId;
$scope.total = 4;
$http.get('phones/' + $routeParams.phoneId + '.json').success(function (data) {
$scope.phone = data;
});
}
function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function (data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}
What angularjs version did you use? I follow the tutorial too, and it use angular-1.0.0rc7.js and if I look up in the app.js file, it use template rather than templateUrl:
$routeProvider.when('/phones', {
template: 'partials/phone-list.html',
controller: PhoneListCtrl
});
so by looking your code, you might want to use angular-1.0.3.js or prior version above the RC
This should work but you need to be sure the link is inside the DOM element which is the root of your app; ie (ng-app='my-app').
It's hard to tell without seeing the page markup.
The problem was solved by the asker:
I fixed the problem - actually I had the HTML of the next step of this tutorial and it was messing up with the app, mainly because it had binding with attribute that did not exist in the model yet.