var voteApp = angular.module('VoteApp', [
'ngRoute',
'students'
]);
voteApp.config(function($routeProvider){
$routeProvider.when('/', {
templateUrl : 'index.html',
controller : 'MainController'
});
});
voteApp.controller('MainController',['$scope',function($scope){
}]);
On loading, the whole page will crash!
Can anyone help me with this?
Did you run your application on a server? If not go to your terminal and type in this: python -m SimpleHTTPServer and then open your application on localhost
Try using angular-ui-router instead of angular-route
What is the difference between angular-route and angular-ui-router?
Related
I build a small app with angular an added the routeProvider to change my ContentView. The Switching betwenn my different htmls works and i can use cars and functions in my html.
var app = angular.module("mainApp", ['ngRoute']);
angular.module("mainApp").config(
[ '$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider.when("/", {
templateUrl : './page1.html',
controller : 'con1'
}).when("/stuff", {
templateUrl : './page2.html',
controller : 'con2'
}).when("/404", {
templateUrl : "./errorPage.html"
})
// else 404
.otherwise({
redirectTo : "/404"
});
} ]);
I added the Functions:
this.$onInit = function() {console.log("test"); };
Do Stuff when my controller is in the Init Mode. (Note: I added this pattern in a other project as well but in this newly project it wont load this.$onInit)
I'm Using Angular 1.6.1 as Webjar and .
Any Ideas why it wont work?
Life-cycle hooks were introduced for directive/component controllers.
They will not fire for the controllers used in $routeProvider mappings.
You can take a look at this jsfiddle and see the output in the console.
Sorry for not writing answer sooner. Yes you guys where right that the lifecyle wont call init if the routingProvider calls the Controller.
I solved it by manuelle triggering the init. I done that by adding the controller to the main body (container) with data-ng-controller="myController"
This calls init on pageload. Kind of hacky but it works great.
I am following a book called MEAN Machine. The code from the part in this book in question can be found at this Github Repo.
When clicking the links in /public/views/index.html which should be routed, I get file not found errors in the web browser.
The code (/public/js/app.routes.js) that does not seem to work:
// inject ngRoute for all our routing needs
angular.module('routerRoutes', ['ngRoute'])
// configure our routes
.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'views/pages/home.html',
controller : 'homeController',
controllerAs: 'home'
})
// route for the about page
.when('/about', {
templateUrl : 'views/pages/about.html',
controller : 'aboutController',
controllerAs: 'about'
})
// route for the contact page
.when('/contact', {
templateUrl : 'views/pages/contact.html',
controller : 'contactController',
controllerAs: 'contact'
});
$locationProvider.html5Mode(true);
});
In the index.html file, we are pointing to the correct files:
<script src="js/app.routes.js"></script>
<script src="js/app.js"></script>
To test their code, I changed the base tag in index.html to my folder's path which eliminated errors of not finding the above files.
Is this material dated? Also, I realize this book is not using Angular 2. Does Angular 2 vary drastically in routing and is this material deprecated?
Simply run command
node server.js
from '12-angular-routing' directory and open in browser http://localhost:8080
The problem is that browsers by default does not allow AJAX requests to files located on your local file system. In this case you should run your local server which serves client application(server.js is simple express server).
I started my first angular application, and am running into an issue where my "home" module isn't working because of a dependency issue. I don't see any dependency missing that I would need. I am using $stateProvider, and $urlProvider, but I am injecting that into the configuration for the home module, so I'm not sure where the problem would lie ?
Config.$inject = ["$stateProvider", "$urlRouterProvider"];
angular.module('home', []).config(Config)
function Config($stateProvider, $urlRouterProvider){
$stateProvider
.state('home', {
url: '/login',
templateUrl: './views/login.html'
})
}
angular.module('home').controller('loginCtrl', function($scope){
$scope.helloWorld = function(){
console.log("This works!")
}
})
The consoled error:
[$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=home&p1=Error%3A%20…
Since "$stateProvider" and "$urlRouterProvider" providers are not part of the core AngularJS module, you need to inject modules, that have this provides into your home module definition. As far as I know, $stateProvider is from ui router module, so
angular.module('home', ['ui.router']).
...
Keep in mind that you also need to include this Javascript in your HTML file. It is in the angular-ui-router file
<script src="js/angular-ui-router.min.js"></script>
I am trying to modify the url of my angularjs app . Initially my urls were http:localhost:8080/a/web/app/index.html#/ and http:localhost:8080/a/web/app/index.html#/next
when I inserted the following code to my app.js
var App =angular.module('App', [
'ngCookies',
'ngResource',
'ngRoute',
])
.config(function ($routeProvider,$locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/a/web/app/views/main.html',
controller: 'ctrl_main'
})
.when('/next', {
templateUrl: '/a/web/app/views/next.html',
controller: 'ctrl_next'
});
$locationProvider.html5Mode(true);
});
My new urls became http:localhost:8080 and
http:localhost:8080/next .
My problem is when I tried to reload the page at http:localhost:8080/next , 404 Not Found error is coming
That's expected with html5 mode. The browser, if you ask it to reload, will send a request to the URL it has in its location bar.
So you need to configure the server to actually send back the index.html page for all the bookmarkable URLs you use in the angular application. The whole page will reload, the angular app will restart, the $route service will restart, and will invoke the controller and display the partial configured for the URL.
I know the answer is a bit outdated, but in my case adding <base> attribute to index.html helped, for example:
<base href="/a/web/app/">
I have the following config for routes:
app.config( function ($routeProvider, $locationProvider, $httpProvider) {
// Routes
$routeProvider.when('/admin', {
templateUrl : '/app/partials/dashboard.html',
controller : 'DashboardCtrl'
});
$routeProvider.when('/admin/settings', {
templateUrl : '/app/partials/settings.html',
controller : 'SettingsCtrl'
});
$routeProvider.when('/404', {
templateUrl : '/app/partials/404.html',
});
$routeProvider.otherwise({redirectTo: '/404'});
$locationProvider.html5Mode(true);
});
Everything is working except, when I'm on /admin/settings and reload the page, it redirects to 404. I tried removing the html5Mode, it works. However, I really want to use html5Mode. What am I missing? Please help me.
Oh, btw, I'm using AngularJS 1.1.5.
I had a very similar error and solved it by inserting <base href='my_app_base_url'></base> into my index.html page, in the head. The idea came from this GitHub issue (https://github.com/angular/angular.js/issues/2774) and this other one (https://github.com/angular/angular.js/issues/2868), as well as the one I mentioned in my comment.
try $location.path('/404').replace();