Site pages not scrollable after adding angularjs - javascript

I have a site that was downloaded first as a template. in order to convert into an angular app, i removed all the <head>, <html> and <body> tags of all other pages except the index page which contains the <ng-view>. now the routing is working just fine to redirect to all the pages but the problem is that the pages are not scrolling anymore. the index.html page looks like this
<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="IndexController">
<head>
<title>My site</title>
</head>
<body>
<div ng-view [onload="string"]
[autoscroll="string"]></div>
</body>
</html>
and the other pages look something like this
<div>
<!-- page content goes here-->
</div>
app config is like
var app = angular.module('myApp',['ngRoute','LocalStorageModule','ngStorage']);
app.config(
function($routeProvider)
{
$routeProvider
.when("/", {templateUrl : "home.html", controller: 'HomeController' })
//other routes
});
when i run this site, all the pages that have long content are cut short and cannot scroll to view the rest of the content. please help. I have been working with angularjs for some time now but i have never come across anything like this before.

Related

Angular: A controller with this name is not registered

I've been trying to figure this out for a few hours now, and I can't seem to find the problem. I've read some other questions with similar problems, but they don't have any solutions that have worked for me.
I am having trouble registering my controllers. I am not able to register controllers outside of the file in which I declare the app. Originally, I set up the 'MainController' in a separate file, which failed. I was getting an error saying that "The controller with the name 'MainController' is not registered". Once I put MainController in the same file as the app is declared, there were no problems. However, when I have a lot of code, I don't want all the controllers in the same file, as it will become too difficult to read. Here are examples of my code:
angular.module('myApp', ['ngRoute']);
angular.module('myApp')
.controller('MainController', MainController);
I am keeping other controllers in different files, and they are not registering. For example, in home.controller.js:
angular.module('myApp')
.controller('HomeController', HomeController);
function HomeController(HomeService) {
}
This controller will not register, and I don't know why. Each HTML partial in ng-view has its own controller, and the ng-view is within the MainController. Here is the app.config.js file:
angular.module('myApp')
.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/home', {
templateUrl: 'views/home.html',
controller: 'HomeController as home'
}).when('/profile', {
templateUrl: 'views/profile.html',
controller: 'ProfileController as profile'
});
$locationProvider.html5Mode(true);
});
Here is index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My App</title>
<script src="vendors/angular.min.js"></script>
<script src="vendors/angular-route.min.js"></script>
<script src="scripts/app.module.js"></script>
<script src="scripts/app.config.js"></script>
<scripts src="scripts/home.controller.js"></scripts>
<scripts src="scripts/profile.controller.js"></scripts>
<script src="scripts/main.service.js"></script>
<script src="scripts/home.service.js"></script>
<script src="scripts/profile.service.js"></script>
<base href="/" />
</head>
<body ng-controller="MainController as main">
<header>
<h1>My App</h1>
</header>
<!-- Content varies -->
<div class="container">
<ng-view></ng-view>
</div>
</body>
</html>
I have successfully built projects like this in the past without problem, but I can't find any issue compared to those projects. Any help is appreciated!
When I've had this issue in the past, it was related to script loading order, especially with using async script loading. You don't appear to be doing that.
To troubleshoot:
Fire a console log statement inside the controller's function body (console.log('registering controller x')). This statement will either not show up, or will show up after the error.
Angular used to (and I presume it still does) try to wait for app to load and all controllers to register to app before running the code. Either Angular isn't waiting on this controller, or this controller isn't running.
From there, you would verify that the reference to the file is correct (put a console.log at the top of the file), or determine how Angular decides when it believes all controllers are loaded and why it doesn't wait on your controller.
I haven't dealt with Angular since 1.2, because I think it's a pretty bad framework. But that was my experience then, and it seems like the same basic architecture for this. Back then it was relying on Document.ready. I really hope they don't do that anymore (that's where I ran into my async script loader problems).
Best of luck.

AngularJS routing without the hash '#' - cannot get it work

I have read this post many times, and I have followed the instructions there, but I cannot get this to work.
AngularJS routing without the hash '#'
I have a Qt app that sends a request to a URL with a # in it. That URL is routed to the Angular code. I want to change this to not require the #.
This is my Angular code:
angular.module('app').config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'home.html',
controller : 'home'
})
// route for the workitem page
.when('/workitem/:identifier', {
templateUrl : 'workitem.html',
controller : 'workitem'
});
$locationProvider.html5Mode(true);
});
This is my nginx config:
server {
listen 8000;
server_name foo.bar.com;
location / {
include /usr/local/nginx/conf/mime.types;
root /projects/larry/web;
}
}
In /projects/larry/web there is an index.html, which loads the JS module with the $routeProvider.
When I go to the URL: http://foo.bar.com:8000/#/workitem/12345 this works fine. The JS is loaded, and the $routeProvider gets the URL and does what it's supposed to do.
But if I omit the # and go to http://foo.bar.com:8000/workitem/12345 then the JS code is not loaded and the request fails.
How can I make this work without the hash?
You also need to add the <base href="/" /> in the <head> of your html page.
Example below.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>My Website</title>
<base href="/" />
</head>
<body>
</body>
</html>
EDIT
This will take you to a GitHub post with the answer. https://gist.github.com/cjus/b46a243ba610661a7efb

angular partial not rendering with jade [duplicate]

This question already has an answer here:
angular js ng-view returns blanc partials -- Express/ Jade
(1 answer)
Closed 7 years ago.
I am building an angular app following a tut. However, my angular ng-view is not rendering. I have seen a similar question here yet it has not been answered. Below is my dir structure
app.js
var app = angular.module('app', ['ngResource', 'ngRoute']);
angular.module('app').config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider
.when('/', { templateUrl: 'partials/main', controller: 'mainCtrl'});
});
angular.module('app').controller('mainCtrl', function($scope){
$scope.myVar = "Hello Angular";
});
My layout.jade
doctype html
head
link(rel="styleSheet",href="css/bootstrap.css")
link(rel="styleSheet",href="vendor/toastr/toastr.css")
link(rel="styleSheet",href="css/site.css")
body(ng-app='app')
block main-content
include scripts
My main.jade
h1 This is a partial
h2 {{ myVar }}
The route in my server.js are set as
app.get('partials/:partialPath',function(req,res){
res.render('partials/' + req.params.partialPath);
});
app.get('*', function(req,res){
res.render('index');
});
my index.jade
extends ../includes/layout
block main-content
section.content
div(ng-view)
Although I am thinking that shouldn't be an issue because I am starting with a partial view which is part of a page. When I run my page it returns black. I inspected the elements and ensured that all the js and css where loaded. The html source below was generated on my page:
<!DOCTYPE html>
<head><link rel="styleSheet" href="css/bootstrap.css">
<link rel="styleSheet" href="vendor/toastr/toastr.css">
<link rel="styleSheet" href="css/site.css">
</head>
<body ng-app="app">
<section class="content">
<div ng-view></div></section>
<script type="text/javascript" src="vendor/jquery/dist/jquery.js"></script><script type="text/javascript" src="vendor/angular/angular.js"></script>
<script type="text/javascript" src="vendor/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="vendor/angular-route/angular-route.js"></script><script type="text/javascript" src="app/app.js"></script>
</body>
I was suspecting routeProvider from my app.js here
.when('/', { templateUrl: 'partials/main', controller: 'mainCtrl'});
tried
.when('/', { templateUrl: '/partials/main', controller: 'mainCtrl'});
All to no avail. Please where do I go wrong ? I have tried everything possible. I even restarted the tut yet still blank. Any help would be appreciated.
Thank you for your time. It turns out the issue is in my layout
doctype html
head
link(rel="styleSheet",href="css/bootstrap.css")
link(rel="styleSheet",href="vendor/toastr/toastr.css")
link(rel="styleSheet",href="css/site.css")
body(ng-app='app')
block main-content
include scripts
Changed to
doctype html
head
base(href='/')
link(rel="styleSheet",href="css/bootstrap.css")
link(rel="styleSheet",href="vendor/toastr/toastr.css")
link(rel="styleSheet",href="css/site.css")
body(ng-app='app')
block main-content
include scripts
What was missing is
base(href='/')
It does not load the templates if you remove that base. I learnt that from another tut video by tut plus "[Tuts Plus] Building a Web App From Scratch With AngularJS Video Tutorial" . The presenter specifically mentioned the important of the base(href='/') and warned never to forget . Alternatively , there is another good example from #Alex Choroshin answer here . you should download the doc he suggested . Its a perfect example. Thanks

Simple AngularJS Program is Blank in Browser

I'm working on learning some Angular for an application I'm building.
After going through some tutorials, I had a basic program working which had two views and some routing to flip between them. I'm running it now in the browser, and it's coming up blank. There are no console errors, and I swear I haven't touched it since I had it working last.
Here's my main file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
<style>
body
{
font-family: arial;
padding: 20px;
}
</style>
</head>
<body ng-app = "journal_program">
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src = "app.js"></script>
<div ng-view>
</div>
</body>
</html>
And my Javascript:
var journal_program = angular.module ("journal_program", []);
journal_program.config (['$routeProvider', function ($routeProvider)
{
$routeProvider.
when ('/AddNewOrder',
{
templateUrl: 'templates/add_order.html'
}).
when ('/ShowOrders',
{
templateUrl: 'templates/show_orders.html'
});
}]);
The first view:
<h2>Add New Order</h2>
Show Order
The second view:
<h2>Show Orders</h2>
Back<br>
Any ideas are appreciated. I'm not sure what to check at this point.
UPDATE:
Here are the 3 important things I figured out from this little exercise:
1) Angular views don't have a default route unless you set one with "otherwise". Basically, even if you've set up a couple different routes, ng-view is blank when the page first loads unless either the user loads a route by clicking a link outside the view, or if you've set a default by adding "otherwise" to your route controller.
otherwise (
{
templateUrl: 'templates/add_order.html'
});
This link is extremely helpful:
http://blog.kevinchisholm.com/angular/angular-js-basics-routes-part-iii-creating-a-default-route/
2) Apparently nothing you put inside the html of ng-view will be rendered unless you have a " when ('/' " route in the controller.
3) Angular doesn't work so well when run off the hard drive. You've got to upload it to a server first, for whatever reason.
After adding these steps I got my demo working again. Looking back now, I'm not sure how I got it working the first time around without this knowledge.
It working fine...
Take a look at this Demo
Working Demo
<div ng-view>
</div>
<h2>Show Orders</h2>
Show Order
<h2>Add New Order</h2>
Add Order
<br>

Angular JS: How to load js files in partials

Very new to AngularJS, I am guessing the term for what I am trying to do is lazy load. I have looked at several different blogs and I have not found a complete working solution that is purely using AngularJS.
I understand that if I put the <script src="js/process1.js"></script> in index.html, all works fine, I am trying to cut down on the amount of js that is pulled down on the initial load.
With the script tag sitting in the partial, it is never loaded so the P1Ctrl is never created. So currently, if a user go into the application and never goes to process55, the user still has the code there for process55 even though it was never used.
Is there a way to load the file and inject the objects created in the process1.js into the app defined in main, at the time process1 route is executed?
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Large Angular App</title>
<link rel="stylesheet" href="lib/foundation/css/foundation.min.css" />
</head>
<body ng-app="largeApp" ng-controller="LargeAppController">
<div>
Home | Process1
</div>
<br/>
<br/>
<br/>
<ng-view>Test</ng-view>
<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="lib/angular/angular.js"></script>
<script type="text/javascript" src="lib/angular/angular-route.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
js/main.js:
var app = angular.module("largeApp", ['ngRoute']);
var appCtrl = app.controller("LargeAppController", function(){});
app.config(function ($routeProvider, $controllerProvider) {
// save references to the providers
app.registerCtrl = $controllerProvider.register,
$routeProvider.when('/', {templateUrl: 'partials/home.html'});
//Thinking I need to set up a resolve to fire off a script loader to load js.
$routeProvider.when('/process1', {templateUrl: 'partials/process1/process1.html'});
$routeProvider.otherwise({redirectTo: '/'});
});
partials/home.html:
<div>
Home Page
</div>
partials/process1.html:
<script type="text/javascript" src="js/process1/Process1Controller.js"></script>
Process 1 {{process1data}}
js/process1.js:
console.log("I made it here");
app.registerCtrl('Process1Controller',function($scope){
$scope.process1data = "Hello!";
}
]);
To implement lazy loading of controllers in simple way, you have to do the following:
Save $controllerProvider.register (which is the only method to add a controller into already bootstrapped AngularJS app) to variable in your app (main.js):
var app = angular.module('app',["ngRoute"]);
app.config(['$routeProvider', '$controllerProvider',
function($routeProvider, $controllerProvider) {
// remember mentioned function for later use
app.registerCtrl = $controllerProvider.register;
//your routes
$routeProvider.when('/', {templateUrl: 'partials/home.html'});
$routeProvider.when('/process1', {templateUrl: 'partials/process1.html'});
$routeProvider.otherwise({redirectTo: '/'});
}
]);
process1.html:
<script src="js/process1.js"></script>
<div ng-controller="P1Ctrl">
{{content}}
</div>
And now, in process1.js you use our registerCtrl:
app.registerCtrl('P1Ctrl', function($scope)
{
$scope.content = '...';
});
index.html probably remains the same. Check if your process1.js is being loaded (simply using console.log() right in the body of process1.js, not in P1Ctrl controller). If it isn't, include jQuery before Angular:
<script src="lib/jquery/jquery.js"></script>
<script src="lib/angular/angular.js"></script>
IMPORTANT: This method doesn't work with angular 1.2.0-rc.2 and 1.2.0-rc.3, because this little trick with jQuery doesn't work.
For more complex (and prettier) solution, with .js files as dependencies in route definitions, check that article: http://ify.io/lazy-loading-in-angularjs/ - it also works with rc.2 and rc.3. Here is plunk implementing described method: http://plnkr.co/edit/ukWikO5TVDtQ1l9WlrGD

Categories