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
Related
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
Angular module is defined as :
angular.module('module1',['ngRoute']);
Route for module1 is defined as
module1.config(function($routeProvider)
{
$routeProvider
.when('/Application1',
{
templateUrl: 'Application1/Application1_HomePage.html',
})
.otherwise({
templateUrl: 'MainPage.html',
controller: 'ctrl'
)}
});
And the controller ctrl is defined as:
module1.controller('ctrl',function($scope,$location)
{
$scope.goToApp1 = function()
{
$location.path('/Application1',true);
}
});
The shell page is as :
<html ng-app="module1">
<body>
<div ng-view> </div>
</body>
</html>
Application1_HomePage.html contains another ng-app than the shell page ng-app module1.
From the shell page shown above, when a call to Application1_HomePage.html is made through routeProvider, initialization of ng-app written inside Application1_HomePage.html is failing. The browser inspector clearly shows nothing out of the DOM.
Considering the above scenario how can I make a navigation from one ng-app to another ng-app?
Assuming both of the modules have an entrance page you can just put a link to the other app page, for example:
you load module1Index.html and on that page you put an link to module2Index.html:
If you need both modules to sit on the same page , just include one in the other:
angular.module('module1', ['module2']);
I trying to learn web technologies (HTML, JS, angular, etc. what is needed to create pages). For practice I downloaded some kind of website template and noticed that there is a lot of same code in different html files(pages).
For example we have pages: login,main,about. Each of this page has same <header/> and <footer> and difference is only in <section/> between them.
So is it possible to have such structure: Main page with header and footer and on menu click changes only section between them? It will look like single page app.
As I use angularjs I know that there is such attribute as a ng-view but I am not sure if it will be suitable here, when, lets call, inner pages have this attribute inside also. (I tried I got RangeError: Maximum call stack size exceeded not sure probably some kind of infinitive loop appeared).
So what would be best solution in particular situation, I am not sure that my suggested structure is good, but I do not want to have same blocks of code in each page or it should be in HTML?
I use HTML, angular, JS, bootsrap for theme.
Examle
I copied two pages as example to plunker, so As you can see a lot of code is same, so I want to show login.html inside index.html (line: 172), but in login.html I also have ng-view (line:177). Maybe someone can with small code sample can show me how it is made?
http://plnkr.co/edit/iJrg2FJgwr9xxKTWMouX?p=preview
Yes, it's possible with AngularJs, and in fact very easy using ng-view or ui-view (from ui-router) .
Depending on your level of expertise I would suggest taking a look at ui-router which has all the ng-router functionalities and even more.
You can use ui-router to achieve this. You can define your states and templates using ui-router. Then for each state you can inject your views into sections marked as ui-view in your templates. Check out the example.
var myApp = angular.module("myApp", ["ui.router"]);
myApp.config(function($stateProvider) {
$stateProvider
.state('main', {
url: '/',
template: 'Main Page'
})
.state('list1', {
url: 'list1',
template: '<div>List1 {{test}}</div>',
controller: function($scope) {
$scope.test = "List 1";
}
})
.state('list2', {
url: 'list2',
template: '<div>List2 {{test}}</div>',
controller: function($scope) {
$scope.test = "List 2";
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<html ng-app="myApp">
<body>
<div><a ui-sref="main">Header</a> <a ui-sref="list1">List1</a> <a ui-sref="list2">List2</a>
</div>
<div ui-view=""></div>
<div>Footer</div>
</body>
</html>
A simple routing setup for an app using ngRoute would be something like this.
angular.module('stack-app', ['ngRoute']);
// set up the views at configure time
angular.module('stack-app').configure(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/view1', { // http://website.com/view1
controller: 'View1Controller', // the controller for view1
templateUrl: 'view1.html' // this is a partial view
});
$routeProvider.when('/view2', { // http://website.com/view2
controller: 'View2Controller', // controller for view 2
template: '<div>inline template should do just fine</div>'
});
$routeProvider.otherwise('/view1'); // http://website.com/anythingelse points to /view1
}
]);
angular.module('stack-app').controller('StackMainController', function() {});
angular.module('stack-app').controller('View1Controller', function() {});
angular.module('stack-app').controller('View2Controller', function() {});
index.html here you would put the common parts, headers etc.
<html ng-app="stack-app">
<body ng-controller="StackMainController">
<!-- this will be replaced by the partial views -->
<ng-view></ng-view>
</body>
</html>
You will have to configure whatever server you are using to serve index.html when receiving requests for /view1 or /view2.
Also don't forget to import the angular-route.js file in your project.
You can also have other modules register routes in their own configure method, there's no need to have a central config.
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!
My question comes from the need to lazy load different/separate ngApps on one page(bootstrapping them with angular.bootstrap), each of them using its own ngRoute definitions(defined in such a way that they do not overlap each other).
Now I have a working plunkr example and all seems to function well, but somehow I have the feeling that this is not the correct approach so that's why Im asking here for advice.
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="col-xs-6 well" id="app1">
<h3>App1</h3>
Route 1
Route 2
Route 3
<div class="well" ng-view></div>
</div>
<div class="col-xs-6 well" id="app2">
<h3>App2</h3>
Route 1
Route 2
Route 3
<div class="well" ng-view></div>
</div>
</div>
<script type="text/javascript" src="https://code.angularjs.org/1.2.21/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.2.21/angular-route.min.js"></script>
<script>
var app1 = angular.module('app1', ['ngRoute']);
app1
.config(function($routeProvider) {
$routeProvider
.when('/:app/:param', {
template: 'app = {{app}}, param = {{param}}',
controller: 'Ctrl1'
})
})
.controller("Ctrl1",['$scope','$routeParams', function($scope,$routeParams) {
$scope.app = $routeParams.app;
$scope.param = $routeParams.param;
}]);
var app2 = angular.module('app2', ['ngRoute']);
app2
.config(function($routeProvider) {
$routeProvider
.when('/:app/:param', {
template: 'app = {{app}}, param = {{param}}',
controller: 'Ctrl2'
})
})
.controller("Ctrl2", ['$scope','$routeParams', function($scope,$routeParams) {
$scope.app = $routeParams.app;
$scope.param = $routeParams.param;
}]);
angular.bootstrap(document.getElementById("app1"), ['app1']);
angular.bootstrap(document.getElementById("app2"), ['app2']);
</script>
</body>
</html>
http://plnkr.co/edit/Y7A9bc3bDUyAXIS13JMZ?p=preview
FYI: I have already checked out ui-router to load separate states on one page, but it all requires for the source code to be loaded upfront(and have a single app.config with all routes in it) which is something I do not want as the Project is quite huge. So for the sake of keeping it simple and modular Im looking for something like the above example.
UPDATE to answer HockeyJ question:
OK I will try to keep this as short as possible. Very basically put - as I said the project could potentially become quite huge, from source code and module dependency perspective. This is why I want to make it in such a way, that each module can be totally separate App, able to be injected at any place and tested separately(thats not really an issue with AnJS). In the same time however the whole project, should be a single page app. As such there should not be screen reloads(to load an App jscript files) etc. Hence comes the lazy loading of scripts on demand and bootstrapping apps to DOM elems. The only possible intersection point of all apps is the URL routing which has strict naming convention for routes i.e. /reports/whatever ; /transactions/whatever etc. and should be managed by ngRoute.
UPDATED:
Checkout overmind project for angular and the demo here
Shows a project broken up into several apps: nav, home, profile, and admin. The nav app is always on the page and is the only app bootstrapped on pageload.
Just take routing out of angular and use something like sammy.js , history.js etc for client side routing.
Use
angular.bootstrap(module, node)
in the routes of your sammy handlers
Also you might want to take a look at react.js (with or without flux) and tide it up with sammy the same way. Consider this example from todombc : https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/react