ng-view causes page to crash - javascript

Trying to replicate a simple routing example w3schools, but it keeps crashing with "RangeError: Maximum call stack size exceeded" in the console, when accessing index.html.
I tried to add/remove parts of the code to isolate the problem, and the crash seems to happen at <div ng-view></div>. Why is that? The changes I made from the original example are not that drastic.
Here is the code
index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
Red
Green
<div ng-view></div>
</body>
</html>
app.js
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "index.html"
})
.when("/red", {
templateUrl : "red.html"
})
.when("/green", {
templateUrl : "green.html"
});
});
red.html
This is red
green.html
This is green

Yes, index is a container for other views. You should put a partial view instead of index. The problem is here:
$routeProvider
.when("/", {
templateUrl : "index.html"
})
That template url will load the complete index.html inside ng-view, which will load another index.html with a new ng-view to the infinite and Secula Seculorum.
The easy fix: create a new view (like the other routes you have) and put it in the templateUrl

You are looping the app with this statement.
$routeProvider
.when("/", {
templateUrl : "index.html"
})
You should another separate template that stands as your main template not index.html

Related

Angular Material and md-nav-bar routing

I'm digging into Angular and have decided to use the Angular Material library to assist in my first application. So far I have some very basic code I copied from https://material.angularjs.org/1.1.0/demo/navBar which I have modified to fit my own needs. I'm having some trouble wrapping my head around routing and the md-nav-items.
<html>
<head>
<title>PRT - CIT</title>
<meta name="viewport" content="width=device-width, initial-scale=1" </meta>
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> </head>
<body ng-app="MyApp" id="bootstrap-overrides">
<div ng-controller="AppCtrl" ng-cloak="" class="navBardemoBasicUsage main">
<md-content class="md-padding">
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-click="goto('queue')" name="queue">Queue</md-nav-item>
<md-nav-item md-nav-click="goto('detail')" name="detail">Detail</md-nav-item>
<md-nav-item md-nav-click="goto('request')" name="request">Request</md-nav-item>
<!-- these require actual routing with ui-router or ng-route, so they won't work in the demo
<md-nav-item md-nav-sref="app.page4" name="page4">Page Four</md-nav-item>
<md-nav-item md-nav-href="#page5" name="page5">Page Five</md-nav-item>
--></md-nav-bar>
<div class="ext-content"> External content for `<span>{{currentNavItem}}</span>` </div>
</md-content>
</div>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-resource/angular-resource.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="node_modules/angular-messages/angular-messages.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="js/site.js"></script>
<link rel="stylesheet" href="/css/site.css">
</body>
</html>
Here's my JS:
(function () {
'use strict';
var MyApp = angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngRoute']).controller('AppCtrl', AppCtrl);
function AppCtrl($scope) {
$scope.currentNavItem = 'queue';
}
MyApp.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/index.html'
, controller: 'AppCtrl'
}).when('/queue', {
templateUrl: '/partials/queue.html'
, controller: 'AppCtrl'
}).when('/detail', {
templateUrl: '/partials/detail.html'
, controller: 'AppCtrl'
}).when('/request', {
templateUrl: '/partials/request.html'
, controller: 'AppCtrl'
});
});
})();
I'm kind of lost as to how I should route the tabs. From what I've read, md-nav-bar has some routing built in, but I've found examples utilizing ngRoute as well ui-router.
I'm also confused as to actually populate my partial views in the
<div class="ext-content"> External content for `<span>{{currentNavItem}}</span>` </div>
I tried using md-nav-href instead of md-nav-click but it just ended up redirecting me to the pages, not populating the content below my tabs/nav-bar; I rolled back the JS I had written and that part of the HTML. I've read the other questions posted in this area that I could find but none addressed rendering different partials based on nav-bar item. Any suggestions? I was thinking I could monitor currentNavItem and have the right partial render based on the value of it, but again, I'm not sure how to actually do the rendering.
Here is a Plnker that doesn't render correctly in the preview for some reason, but the code is the same as what I have locally.
Here is an image of what it looks like running locally.
Thanks in advance!
Final Edit:
S/O to #Searching for helping me get it working below. I've updated the plnker link to reflect the changes. Note it gets a little laggy due to the base append script.
ngRoute: When $route service you will need ng-view container. This will be used to load all you routed pages.
You do not have a goto() so just use simple md-nav-href tags to navigate around. The currentNavItem is set by md-selected-nav-item which is not what you need. Let's route with your setup
index.html : update your links to look like this. Use md-nav-href
<md-nav-item md-nav-href="queue" name="queue">Queue</md-nav-item>
index.html : when using html5Mode you will need base tag. Instead of manually specifying it just use the script below. Make sure you load angular.js before this script.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
script : enable html5molde, why.. too many resources out there. I encourage you to lookup :)
MyApp.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true)
$routeProvider.when('/', {
templateUrl : 'index.html',
controller : 'AppCtrl'
}).when('/queue', {
templateUrl : 'queue_partial.html',//actual location will vary according to your local folder structure
controller : 'AppCtrl'
}).when('/detail', {
templateUrl : 'detail_partial.html',
controller : 'AppCtrl'
}).when('/request', {
templateUrl : 'request_partial.html',
controller : 'AppCtrl'
});
});

ngRoute not finding template

I'm new to angular and am having a hard time getting ngRoute to pick up my template file.
Here is my index.html:
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="app.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<nav>
<div>
<ul>
<li>home</li>
</ul>
</div>
</nav>
<body>
<div ng-view>
</div>
</body>
</html>
Here is my app.js:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('MainCtrl', function($scope) {
$scope.message = 'Hello World';
});
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'pages/home.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/home'
});
}]);
Here is my pages/home.html:
<div ng-controller="MainCtrl">
<p>Test</p>
<p>{{ message }}</p>
</div>
I can see that it is appending #/ to the root url so perhaps this is partially working; however, it doesn't seem to be rendering the template at "pages/home.html".
I've checked the cdn url's to make sure there wasn't any version inconsistencies, and what not, but that doesn't seem the be the case.
This is pretty much my first Angular project, and I've just been going off of the docs, but there must be something I'm not seeing. Coming from other server side projects, the lack of stack trace is killing me haha.
Is there something I'm missing in the above code, that is preventing my template from being rendered in '/'?
Thanks!
This is my code and it is working fine, you cam take help from it.
var EventList = angular.module("EventList", ['ngRoute' ,'infinite-scroll']);
EventList.config(function($routeProvider) {
//$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: 'views/business/business_home_events.html',
controller: 'EventListController'
});
});
EventList.controller('EventListController', ['$scope', '$http', '$route', function($scope, $http, $route){
// Do your work
}]);
the problem is with your when ('/'). Since your url has #/home - it looks in the .when to find that route.
change it to
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/home', { // <-
templateUrl: 'pages/home.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
This was an annoying one, but I think I figured it out.
I was encountering this issue while testing locally (no nodejs) on Chrome; however, sure enough when I popped it open in Safari it was working. It seems that ngRoute chokes on local files in Chrome.
I found a reference to the issue here, which is closed, so I'm guessing if I update to a newer version I shouldn't have this issue.
https://github.com/angular/angular.js/issues/4680
Setting up a web server should resolve this problem.
Why AngularJS routes are not working in local?
I have executed you code and is working fine on mozilla.
However, there is an issue in chrome of cross origin request if we run the file without putting in server.
But it is working fine on chrome also if you will put it on server (may be xampp/wampp) and run the file. The angular library you are using have http request to another server.

Angular ngRoute can't load template: Error [$compile:tpload]

I tried some simple Angular Routing, but I cant specify what's the error. Chrome just tells me that Angular can't compile the Template.
In the following Link you can see my directory structure.
directory-structure
-- angular.js
var testApp = angular.module('testApp', ['ngRoute']);
testApp.config(function($routeProvider){
$routeProvider.when('/list', {
templateUrl: 'pages/list.html',
controller: 'mainController'
}).when('/insert', {
templateUrl: 'pages/new.html',
controller: 'newController'
});
});
testApp.controller('mainController', function($scope){
$scope.message = 'main';
});
testApp.controller('newController', function($scope){
$scope.message = 'new';
});
--index.html
<!DOCTYPE html>
<html lang="en" ng-app="testApp">
<head>
<meta charset="UTF-8">
<title>Barfly</title>
<script src="/angular/angular.min.js"></script>
<script src="/angular-route/angular-route.min.js"></script>
<script src="/js/angularApp.js"></script>
</head>
<body ng-controller="mainController">
list
new
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
This is my error,
Browser Error
Thank you in advance!
EDIT. Sorry, I didn't see your directory structure. Are you sure pages directory is accessible to the public? Should the pages directory be moved into public directory?
Old answer:
The error is saying the templateUrl /pages/list.html does not exists. You should either save a template file into /pages/list.html file or add an inline template in the html body like this:
<script type="text/ng-template" id="/pages/list.html">
my template here
</script>
I encountered a sort of similar problem: templateUrl files could be not loaded (all resources didn't). In my case it happened when app was loaded on a browser on a mobile device. It was caused by Content Security Policy restrictions (How does Content Security Policy work?)
I got the CSP to permit all resources except for the templates referenced by templateUrl.
I also tried loading the templates through the script directive (https://docs.angularjs.org/api/ng/directive/script), but to no avail.
Eventually I decided to embed the templates in the route itself, like this:
testApp.config(function($routeProvider){
$routeProvider.when('/list', {
template: '<li ng-repeat="etcetera"></li>',
controller: 'mainController'
});
});
<a data-target="#list">list</a>
<a data-target="#insert">new</a>

Why are scripts tags not displayed in the inpector of browser if and when you put them inside div which has ng-view in angular js?

I am using angular routing. And my question is that, if I include Scripts tags in the div which has ng-view, the script tags are not displayed in the browser inspector. But, still everything works perfectly fine.
Now I am sure that it is a bad practice to include scripts inside ng-view. But still wanted to understand as to why this happens.
P.S. : The execution of scripts works fine. Its just that the browser Inspector does not show the scripts. Although the scripts are still there if I do a view source.
HTML
<html ng-app="imgPrcApp">
<head>
<title>Image Processing</title>
</head>
<body>
<div ng-view>
<script type="text/javascript" src="../javascripts/angular.js"></script>
<script type="text/javascript" src="../javascripts/angular-route.js"></script>
<script type="text/javascript" src="../javascripts/imgPrc.js"></script>
</div>
</body>
</html>
JS
var imgPrcApp = angular.module('imgPrcApp', ['ngRoute']);
imgPrcApp.config(['$routeProvider', '$compileProvider', function($routeProvider, $compileProvider) {
/**** Routing of HTML Templates ****/
$routeProvider
.when('/', {
templateUrl: '/assets/pages/qc.html',
controller: 'QCController'
})
.when('/editor', {
templateUrl: '/assets/pages/editor.html',
controller: 'editorController'
});
}])

A simple angular js program to render different views is not working

Hi i am trying to write a simple Angular JS program but its not working
This is my html file:
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<title>SPA APP</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div data-ng-view=""></div>
<script src="my-module.js"></script>
<script src="my-controller.js"></script>
</body>
</html>
This is my-module.js file
var myApp=angular.module('myApp',[]);
myApp.config(function($routeProvider){
$routeProvider
.when('/',
{
controller:'myController',
templateUrl:'view1.html'
})
.when('/view2',
{
controller:'myController',
templateUrl:'view2.html'
})
.otherwise({redirectTo:'/'});
});
And this is my-controller.js file
myApp.controller('myController',function($scope){
$scope.name="varun";
});
Any help will be appericiated.
In order to use Angular router, you need to include ngRoute module, which is not shipped by default with angular.js file.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
And then you need to declare dependency:
var myApp = angular.module('myApp', ['ngRoute']);
Having done this, you can use $route service in controllers, directives, etc. and $routeProvider in config section to set up routes.

Categories

Resources