ng-app making the script run to infinity - javascript

I'm working on an angular application using asp.net web application empty template and i have a problem with using ng-app, when i use it and lave it blank i the $routeProvider doesn't get instantiated, but when i specify ng-app="myApp" to my module name, the content of the body starts to repeat to infinite loop.
I'm sure i'm missing something basic, but this problem is driving me crazy
thanks
here's my html code
this is main
view1
<div>
<div ng-view></div>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>
and here's myApp code
(function () {
'use strict';
var app = angular.module('myApp', ['ngRoute']);
app.config([
'$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'index.html',
controller: 'main'
}).when('/view1', {
templateUrl: 'view1.html',
controller: 'main'
}).otherwise({
redirectTo: '/'
});
}
]);
app.controller('main', function ($scope) {
setTimeout(function() {
alert("from set");
},10000);
});
})();

the problem here is that index.html is not the template that should be loaded into the ng-app, it is the outer shell page. You are loading the entire app inside itself over and over, producing something like the following:
view1
<div>
view1
<div>
view1
<div>
view1
<div>
//... more and more loaded here
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>
... essentially forever.
You should instead be loading only templates in your routes.

Is your default route loading the page into itself?
$routeProvider.when('/', {
templateUrl: 'index.html', <----- ???
controller: 'main'
})

Related

using ngRoute breaks any controller-driven page

I have an application that uses a Router to load pages across a shared template, and other pages that are organized by Controllers, Services, and templates that run within the context of those controllers. It's a simple process to get the various entries of the Controllers and application to run within the same context, but when I have a set of ngRoute defined rules in place, the router stops working.
The routes I have in place are set in js/core/app.js and look like this:
var app = angular.module('ApplicationSystem', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/login', {
templateUrl: 'js/login/templates/login.html',
controller: 'LoginController'
})
.when('/application', {
templateUrl: 'js/application/templates/application.html',
controller: 'ApplicationController'
})
.otherwise({
redirectTo: '/login'
});
}
]);
And as an example, the Login application itself does not load. Only a blank page loads. The Actual application in reference is loaded via an ng-controller directive (ng-app is used in the parent template).
<div class="container" ng-controller="LoginController">
<h2>Login</h2>
<!-- Contents -->
</div>
The parent template (index.html by reference)
<!doctype html>
<html>
<head>
<title>Application</title>
<script type="text/javascript" src="settings.js"></script>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="lib/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="lib/angular-bootstrap/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="lib/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="lib/angular-ui-grid/ui-grid.min.js"></script>
<script type="text/javascript" src="lib/ngstorage/ngStorage.min.js"></script>
<script type="text/javascript" src="lib/ng-file-upload/ng-file-upload.min.js"></script>
<script type="text/javascript" src="lib/spin.js/spin.min.js"></script>
<script type="text/javascript" src="js/core/app.js"></script>
<script type="text/javascript" src="js/login/LoginController.js"></script>
</head>
<body>
<div class="masterwrapper" ng-app="ApplicationSystem">
<div ng-view></div>
</div>
</body>
</html>
And the aforementioned controller
var app = angular.module('ApplicationSystem', []);
app.controller('LoginController', function ($scope, $cookies, $location, $ngStorage) {
console.log("Init LoginController");
$scope.LogIn = function (username, password) {
//Login service and factory calls here
};
});
I'm not really clear on what the culprit could be here. If I can get the template to render again, that would at least get me back on track. Any suggestions?

Angular Ui-router inline template not rendering

I'm New to Angular, and learning through the tutorials on Thinkster. I'm at the Angular Routing -> Adding a New State step.
I am trying to use ui-router to render an inline template, but the template is not appearing. Here is my index.html (abridged) :
<html>
<head>
<!-- My js files are loaded here -->
</head>
<body ng-app='flapperNews'>
<div class ='row'>
<div class="col-md-6 col-md-offset-3">
<div ui-view></div>
</div>
</div>
<script type="text/ng-template" id="home.html">
<!-- My template written as plain html>
</script>
</body>
</html>
And this is how my routing is currently handled in app.js :
angular.module('flapperNews',['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
return;
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
It is my understanding that ui-router should parse the url and render the appropriate template within the div ui-view tags. (Thinkster says the tag should be 'ui-view' but the ui-router docs seemed to indicate otherwise; I have tried both ).
My page renders blank, and there are no errors logged to the console. For what its worth, I am doing the tutorial with just local files, and since I've added the routing code my url has a # appended to it i.e file://blah/blah/FlapperNews/index.html# and I'm unsure why.
Just tries the following code and seem to work. It is based on the link you provided.
What I fixed from your code:
id="home.html" to id="/home.html"
comment is not closed: <!-- My template written as plain html>
delete return; from config function
removed controller since there wasn't any code for it
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body ng-app='flapperNews'>
<div class ='row'>
<div class="col-md-6 col-md-offset-3">
<div ui-view></div>
</div>
</div>
<script type="text/ng-template" id="/home.html">
test content
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
angular.module('flapperNews', ['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html'
// controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}])
</script>
</body>
</html>
Delete the return in your configuration function.
angular.module('flapperNews',['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}]);

angular js: Not able to pass value from controller to html of an included page

I have a header which remains common for all the pages. So, I included it in my index page like this.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="assets/lib/angular.js"></script>
<script src="assets/lib/angular-route.js"></script>
<script src="headerController.js"></script>
<script src="HomeController.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="header" ng-include="'header.html'"></div>
<div class="main" ng-view></div>
</body>
</html>
header.html
<ul>
<li>{{vm.myName}}"></li>
</ul>
My app.js file looks like this.
( function () {
angular.module('myApp', [
'ngRoute',
'myApp.header',
'myApp.home',
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {
controller: 'HomeController',
templateUrl: 'homeView.html',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/home'
});
}]);
})();
I'm not including home controller or view as they have less importance here now. What I'm trying to do is, to pass a value from headerController.js to it's view header.html
As you can see, there is only one variable in my header.html
On the other side, headerController.js communicates with a backend service and fetches this result. And, I'm sure data is being returned by the service, I can see it in console and it looks like this:
{"myName":"Amelia Earheart"}
and here is my headerController.js
(function() {
angular
.module('myApp.header', [])
.factory('myCommonService', function($http) {
var baseUrl = 'api/';
return {
getName:function() {
return $http.get(baseUrl + 'getName');
}
};
})
.controller('CommonController', function($scope, $routeParams, myCommonService) {
var vm = this;
myCommonService.getName().success(function(data) {
vm.myName = data.myName;
});
});
})();
Can anyone tell why I am not getting the value in html view?
You should link your view with your controller.
Actually, your CommonController is not referenced anywhere. Try adding a ng-controller attribute to the div.header :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="assets/lib/angular.js"></script>
<script src="assets/lib/angular-route.js"></script>
<script src="headerController.js"></script>
<script src="HomeController.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="header" ng-controller="CommonController" ng-include="'header.html'"></div>
<div class="main" ng-view></div>
</body>
</html>
And also you need to bind the value to the $scope (which is your model) rather to this. Your controller should look like this :
.controller('CommonController', function($scope, $routeParams, myCommonService) {
myCommonService.getName().success(function(data) {
$scope.myName = data.myName;
});
});
If you want to use "vm" in your header's view, you can change the ng-controller to ng-controller="CommonController as vm". This should do the trick.
If you don't do this, you'll have to update your header.html to :
<ul>
<li>{{myName}}</li>
</ul>

AngularJs with prettyprint ngView Routing issue

I am using "prettyprint" along with "AngularJs" which is working very well, but only issue is if I use routing, then the prettyprint function is not working (as it might have been configured to run on pageLoad). Now, what if I am going to various ng-view pages and coming back? How to run the prettyprint function even on route change?
HTML:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/google/code-prettify/master/styles/sons-of-obsidian.css">
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
One
Two
Three
<div ng-view=""></div>
<script>
//App Declaration
var app = angular.module('myApp', ['ngRoute'] );
//Controllers
app.controller('myCtrl', function($scope) {
});
//Routers
app.config(function($routeProvider){
$routeProvider
.when('/one', {
templateUrl: 'one.html'
})
.when('/two', {
templateUrl: 'two.html'
})
.when('/three', {
templateUrl: 'three.html'
})
.otherwise({
redirectTo: '/one'
});
});
</script>
</body>
</html>
one.html
This is one
<pre class="prettyprint">
<div>
<p>
<a href="http://www.google.com">Google</a>
</p>
</div>
</pre>
two.html
This is two
Image on first time clicking 'one' link:
Going to 2nd view or 3rd view and then coming back:
Can someone help me out please?

angular js routing not working in localhost

i trying to use angular js routing method to the web app i am building, bt i was not able to route through the directory, i am getting a 404 error, below is my codes.
<!doctype html>
<html ng-app="AngularStore">
<head>
<link rel="stylesheet" type="text/css" href="src/bootstrap/cerulean.css">
<script type="text/javascript" src="src/jquery/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="src/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="src/angular/angular.min.js"></script>
<script type="text/javascript" src="src/angular/angular-route.js"></script>
<script src="product.js" type="text/javascript"></script>
<script src="store.js" type="text/javascript"></script>
<script src="shoppingCart.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="controller.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span10 offset1">
<h1 class="well" >
<a href="default.html">
<img src="img/logo.png" height="60" width="60" alt="logo"/>
</a>
Angular Store
</h1>
<div ng-view></div>
</div>
</div>
</div>
</body>
</html>
here is my app.js file
var storeApp = angular.module('AngularStore', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/store', {
templateUrl: '/partials/store.html',
controller: 'storeController' }).
when('/products/:productSku', {
templateUrl: '/partials/product.html',
controller: 'storeController' }).
when('/cart', {
templateUrl: '/partials/shoppingCart.html',
controller: 'storeController' }).
otherwise({
redirectTo: '/store' });
}]);
Your code is definitely needs 'ngRoute'
var storeApp = angular.module('AngularStore', ['ngRoute']).
here is a plnkr http://plnkr.co/edit/X9gyEPm6v126kobj0lTa
Other thing you could be doing wrong is providing template paths relative to root
templateUrl: 'partials/store.html',
instead of
templateUrl: '/' + 'partials/store.html',
You should load ngRoute along with your app module declaration.
var storeApp = angular.module('AngularStore', ['ngRoute']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/store', {
templateUrl: 'partials/store.html',
controller: 'storeController' }).
when('/products/:productSku', {
templateUrl: 'partials/product.html',
controller: 'storeController' }).
when('/cart', {
templateUrl: 'partials/shoppingCart.html',
controller: 'storeController' }).
otherwise({
redirectTo: '/store' });
}]);
Make sure that you load ngRoute along with your app module declaration.
var app = angular.module("app", ['ngRoute']);
It's not enough that you load the script file. For you it should be:
var storeApp = angular.module('AngularStore', ['ngRoute']);

Categories