Having an issue where angular doesn't seem to be working at all in my app.
Trying to run a message on index page with mainController, and won't even run this.
JSFiddle: https://jsfiddle.net/cj5pe43k/1/.
HTML:
<body ng-app="app" ng-controller="mainController">
<div id="test" style="position:absolute;top:0;left:0;background:#000;width:100vw;height:100vh;color:#fff;display:flex;align-items:center;justify-content:center;"><p>{{message}}</p></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>
JS:
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'index.html',
controller: 'mainController'
})
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
})
app.controller('mainController', function($scope) {
$scope.message = 'Main Controller Active';
})
After checking your jsFiddle, it seems that you are including angular-ui-router, despite typing code for ngRoute. The error returned by the fiddle is a little bit hidden but clear: It can't find ngRoute module. And your attached files are having angular-ui-router included.
Are you following these steps? https://docs.angularjs.org/api/ngRoute
If you want to include ui router, please have a look here instead: https://ui-router.github.io/ng1/docs/latest/index.html#/api/ui.router
Two possible reasons:
Angular is not there in the <head>.
There's an error. Check the console for errors like "module 'app' is not available". This applies to both ngRoute and the main app(you'll need angular-route.js for the ngRoute module). If you use ui-router, you'll need angular-ui-router.js.
you have loaded the ui-router URL .Try working with angular route cdn
otherwise use ui-routing
Related
I'm using angularJS to build a website and use angular-route library for view of different pages of website. my website is working well but there is a hash tag in url when i move on different views. for removal of hash tag I'm using
$locationProvider.html5Mode(true);
but this is not working on page refresh. My code is given below:-
Index.html
<body data-ng-app="myapp" data-ng-controller="myctrl">
<div data-ng-include=" 'pages/menu.html'"></div>
<div ng-view class="view-animate"></div>
<div data-ng-include=" 'pages/footer.php' "></div>
<body>
app.js
'use-strict'
var tc = angular.module('myapp', ['ngRoute']);
tc.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/home', {
templateUrl: 'pages/home.html',
})
.when('/about', {
templateUrl: 'pages/about.html',
})
.otherwise({
redirectTo: '/home'
})
}]);
Use:-
<base href="/" />
And put this in your head tag :-)
I suggest you to use $stateProvider , $routeProvider not suggest by many Angularjs expert. And $stateProvider have more control over route then $routeprovider.
see
Using $routeProvider with $stateProvider
Make sure you have <!doctype html> at the top of your index.html
I'm building an AngularJS application with routed views and to be clear the routing is working, as in the template pages in my /views/ folder are asynchronously loading into the view div on my index.html page.
The problem: These used to be seperate pages linked together the old fashioned way. Index.html, deal.html, and merchant.html. They all rendered perfectly in all browsers at that point but when I added this AngularJS routes feature, the same code is being dropped into the index.html file but the pages are not rendering properly. A lot of the styles are there... just misaligned. I can't wrap my head around it. I've looked everywhere and nobody seems to have documented this issue.
Here's what I've got so far:
head:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="app.js"></script>
The file system:
index.html
app.js
/views/main.html
/views/merchant.html
/views/deal.html
assets/css/
img/
index.html:
<div id="main">
<div class="ng-view" autoscroll="true"></div>
</div>
My app.js:
var appName = angular.module('adamApp', ['ngRoute']);
// configure routes
appName.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl : 'partials/home.html',
controller : 'mainController'
});
$routeProvider.when('/merchant', {
templateUrl : 'partials/merchant.html',
controller : 'merchantController'
});
$routeProvider.when('/deal', {
templateUrl : 'partials/deal.html',
controller : 'dealController'
});
$routeProvider.otherwise({ redirectTo: "/" });
});
Screenshot of old version of site without Angular routes:
Screenshot of Angular routes version with broken stylesheet:
Any ideas on what's going on?
If your html is under "views" in the file system, why are you declaring the templateUrl property to be "partials/..." ?
Change
$routeProvider.when('/deal', {
templateUrl : 'partials/deal.html',
controller : 'dealController'
});
to
$routeProvider.when('/deal', {
templateUrl : 'views/deal.html',
controller : 'dealController'
});
and a piece of advice: drop ngRoute and use ui-router which is become the defacto standard for routing. https://github.com/angular-ui/ui-router
Perhaps this can help:
How to include view/partial specific styling in AngularJS
and pay attention to the point
2. Specify which stylesheets belong to which routes using the $routeProvider
I've just started using AngularJS for a new app I'm looking at putting together but I've run into a problem when using routes and views.
I've stripped this example down to the bare minimum but the issue remains. All this example is doing is hitting the server and returning the index.html page, which then sources Angular etc.
index.html
<!doctype html>
<html lang="en" ng-app="main">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" src="css/style.css" />
<script type="text/javascript" src="js/ext/angular.min.js"></script>
<script type="text/javascript" src="js/ext/angular-route.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/test.js"></script>
<base href="/ui/">
</head>
<body>
<div ng-view></div>
</body>
</html>
main.js
(function() {
var app = angular.module('main', ['ngRoute', 'test']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/test', {
templateUrl: 'html/test.html',
controller: 'TestCtrl'
})
.otherwise({
redirectTo: '/test'
});
$locationProvider.html5Mode(true);
}]);
})();
test.js
(function() {
var app = angular.module('test', []);
// get hierarchy
app.controller('TestCtrl', ['$scope', function($scope) {
alert('here');
}]);
})();
test.html
<div>FooBar!</div>
The alert gets fired infinitely but I just don't know why. I've seen other examples where ng-view and routing appear to be used exactly the same way, so I'm not sure what I'm doing wrong...
I had same problem sometime ago. Please, use firebug or some network control in the same browser at the developers tools panel where you can see the requests to the server for resources and then check that test.html file is requested and is correctly retrieved. It seems like the only one that is retrieved is the index.html and due this, the loop.
Probably you have to use this templateUrl value "/html/test.html" with "/" before. To localize this resource.
This is the idea that I'm proposing you. Localize the test.html resource with the correct way. I hope this can help you.
I had this issue today in March 2016. I have just found out what was causing the infinite loop when ng-view is present in the html (index.html in my case which is the initial html loaded at the start).
Ok, the problem was after all very simple one. I had this route provider setting in my app.js
angular.module('myapp',['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl:'/index.html',
controller:'MyAppCtrl'
})
Since the initial html loaded is index.html, and the url at that point is '/', and the routeProvider invokes the code at when '/'. Yes, it loads index.html again, and again and again and again... till it dies. The solution is not to set index.html as the templateUrl for the '/' route. The html (template) should not include <div ng-view></div>.
Here's how I've done it, example here
Code
.config(['$routeProvider', '$locationProvider',function($routeProvider, $locationProvider) {
$routeProvider
.when('/test', {
template: '<div>test</div>',
controller: 'testCtrl'
})
.when('/other', {
template: '<div>Delete</div>',
controller: 'otherCtrl'
})
.otherwise({
redirectTo: '/test'
});
$locationProvider.html5Mode(true);
}]);
Ok, I solved my problem. I've accepted sergio's as it was closest to how I realised what the problem was - my app was requesting the html file from the application server, which is set up to return the index.html file as a default action. As the html request had no associated action, the default response of returning index.html was kicking in instead of the test.html file.
Once I changed the url so it was getting the html file from the web server, everything worked great. If I'd taken a moment earlier to actually think through what was happening, it would've been obvious.
Thanks for the responses!
newbie to AngularJS here.
I created one AngularJS application using Yeoman, grunt and bower.
The index page contains some style and ng-app and ng-view.
index.html
<html>
<head>
<!-- CSS Imports -->
</head>
<body ng-app="MyApp1">
<div>
//Some divs here to have some styles
<div ng-view></div>
</div>
</body>
<!--importing AgularJS, app.js, controller JS files -->
</html>
app.js
'use strict';
angular.module('MyApp1', [])
.config(function ($routeProvider,$locationProvider) {
$routeProvider
.when('/', {
redirectTo: '/main'
})
.when('/invoice', {
templateUrl: 'views/invoice.html',
controller: 'UploadController'
})
.when('/main', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/login', {
templateUrl: 'views/login.html',
})
.otherwise({
redirectTo: '/main'
});
// $locationProvider.html5Mode(true);
});
angular.module('LoginApp', [])
.config(function ($routeProvider,$locationProvider) {
});
The index page has ng-view that will display invoice.html or main.html. Default is main.html.
main.html
<div class="hero-unit">
<a ng-href="views/login.html" target="_self">Login</a>
<br>
<a ng-href="#invoice">New Document</a>
</div>
Ok. In this main.html, I have two links. Second is a link to invoice. That anyway will display inside index.html ng-view. The controller UploadController belongs to MyApp1 module. And it has separate JS file. It is working fine.
The first link is to another HTML page. Its login.html. It has another ng-app called LoginApp. Both the modules are independent and in diferent pages.
When I click on the first link, it goes to login.html. But in the URL it shows like http://localhost:9000/views/login.html. But I want it to be shown like http://localhost:9000/login, just like for other main.html (http://localhost:9000/#/main). When I edited the link like <a ng-href="#login">Login</a> it is not working.
And also $locationProvider.html5Mode(true); is not working for me.
Put the login.html to same folder like index.html.
I think it's not possible to route to another module. However this route rule for login.html will not working for (external) page.
I'm trying to build an angularjs application. Everything seems fine, there is no error, but it's not working. To remove other factors, I removed everything (requirejs etc.) and dumbed it down to a small html file.
Here is the js code in html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script>
angular.module('application', ['ngRoute']);
angular.module('application').config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {template: 'test content', controller: 'controller1'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
angular.module('application').controller('controller1', ['$scope', function($scope) {
console.log('in controller1');
}]);
angular.bootstrap(document, ['application']);
</script>
</head>
<body>
</body>
</html>
Result I'm expecting to see is "test content" on page, and 'in controller1' in my console.
Can you tell me why it's not working?
Your are missing the ng-view directive that works together with the routes to display the template provided in the route config.
Working plunker
Code:
<body>
<div ng-view></div>
<script>
angular.module('app', [])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {template: '<p>test content</p>', controller: 'controller1'});
$routeProvider.otherwise({redirectTo: '/'});
}])
.controller('controller1', ['$scope', function($scope) {
console.log('in controller1');
}]);
angular.bootstrap(document, ['app']);
</script>
</body>
Angular JS bootstraps by using ng-app and ng-controller directive declared in html.
Refer this:
http://docs.deployd.com/docs/collections/examples/a-simple-todo-app-with-angular.md
Try adding adding this document ready test around you bootstrap call. It'll wait to call bootstrap until the document (DOM) is completely ready.
If you don't wrap bootstrap in the ready() call the browser may still be in the middle of constructing the DOM when angular builds it's view of the DOM. This can lead to angular being unaware of parts of your page, or worse (and this can be tough to debug).
angular.element(document).ready(function() {
angular.bootstrap(document, ['application']);
};
You can read more about that in this guide to angular initialization: http://docs-angularjs-org-dev.appspot.com/guide/bootstrap
Or you could use <html ng-app='application'> instead as others have mentioned if you want to go the more traditional route- but then you'd have to get rid of the angular.bootstrap call.