Angular.JS on Firefox Junk after document element error - angularjs

When I test my index.html on Firefox with console.log it reads a strange error that says. I can't make the oage run on Google Chrome or IE.
junk after document element
This error is caused by the main.html page
<h1>This is my main</h1>
<h3>Scope value: {{ name }} </h3>
I'm just learning angular.js, in fact my code is exactly like this tutorial I was following, but I can't figure out why is not working. Can anyone point me in the right direction and tell me:
Why am I getting the console log error: Junk after document error, and
why can't I make ngview and templateURL work on my site?
Thanks!
My Plnkr Example
App.JS:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateURL: 'pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {
$scope.name = 'Main';
}]);
myApp.controller('secondController', ['$scope', '$log', function($scope, $log) {
$scope.name = 'Second';
}]);
Index.HTML
<header> <nav class="navbar navbar-default"> <div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i>Home</li>
<li><i></i>Second</li>
</ul> </div> </nav> </header>
<div class="container">
<div ng-view></div>
</div>
Main.HTML
<h1>This is my main</h1>
<h3>Scope value: {{ name }} </h3>
Second.HTML
<h1>This is my second</h1>
<h3>Scope value (on second page): {{ name }} </h3>

the code does not run on IE or Chrome cause they don't have a built in localhost feature. Firefox does.
Regarding the Error, I am not 100% sure but I believe that it has to do with Angular HTML format support in the browser itself. I am taking the same course now and facing the same issue. But the app is working fine except for those errors in Firefox.
Chrome: no errors.
MS Edge: no errors.
IE: no errors
===========================
update
Try using Brackets text editor, and use the Live Preview feature.
Open the Index.HTML page in Brackets and hit the button on the top right corner.

Related

it just keep loading the same page with angular ngRoute?

I am learning angular by building a simple bookstore web app using nodejs as a restful api server. I built the server and it works fine, but once it comes to the front end I face an issue. I built the main page using angular ngRoute to get the data from the server and presented as following:
the picture and the title and the description angular read it with no problem but once I press the button "View Details" I should be redirected to a details page using the book id from the server.
From the front End the route provider:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider.when('/',{
controller: 'BooksController',
templateUrl: 'views/books.html'
})
.when('/books',{
controller: 'BooksController',
templateUrl: 'views/books.hrml'
})
.when('/books/details/:id',{
controller: 'BooksController',
templateUrl: 'views/book_details.html'
})
.when('/books/add', {
controller: 'BooksController',
templateUrl: 'views/add_book.html'
})
.when('/books/edit/:id', {
controller: 'BooksController',
templateUrl: 'views/edit_book.html'
})
.otherwise({
redirectTo: '/'
})
});
Books Controller:
var myApp = angular.module('myApp');
myApp.controller('BooksController', ['$scope', '$http', '$location',
'$routeParams', function($scope, $http, $location, $routeParams){
console.log('BooksController loaded...');
$scope.getBooks = function(){
$http.get('/api/books').then(function(response){
$scope.books = response.data;
});
}
$scope.getBook = function(){
var id = $routeParams.id;
$http.get('/api/books/'+id).then(function(response){
$scope.book = response.data;
});
}
}]);
books html where the panel being designed:
<div class="panel panel-default" ng-init="getBooks()">
<div class="panel-heading">
<h3 class="panel-title">Latest Books</h3>
</div>
<div class="panel-body">
<div class="row">
<div ng-repeat="book in books">
<div class="col-md-6">
<div class="col-md-6">
<h4>{{book.title}}</h4>
<p>{{book.description}}</p>
<a class="btn btn-primary"
href="#/books/details/{{book._id}}">View Details</a>
</div>
<div class="col-md-6">
<img class="thumbnail" src="{{book.image_url}}">
</div>
</div>
</div>
</div>
</div>
</div>
This the details book html where by clicking the button it must be redirected to:
details_book.html
<div class="panel panel-default" ng-init="getBook()">
<div class="panel-heading">
<h3 class="panel-title">{{book.title}}</h3>
</div>
<div class="panel-body">
<div class "row">
<div class ="col-md-4">
<img src="{{book.image_url}}">
</div>
<div class ="col-md-8">
<p>{{book.description}}</p>
<ul class="list-group">
<li class="list-group-item">Genre: {{book.genre}}</li>
<li class="list-group-item">Author: {{book.author}}</li>
<li class="list-group-item">Publisher: {{book.publisher}}
</li>
</ul>
</div>
</div>
</div>
</div>
and this is the get request from the server to prove the server working find using a certain id
The error I get once I open the main page:
And this error I get once I press the button:
Note: Once I press the button it give me this url:
http://localhost:3000/#!/#%2Fbooks%2Fdetails%2F599701c1f3da51117535b9ab
where the id is 599701c1f3da51117535b9ab which we can see it in the end of the url. But it should give url exactly such as:
http://localhost:3000/#!/books/details/599701c1f3da51117535b9ab
and once I write this url manually I get to the page which is the details with no problem but once I press the button from the book.html page I get the previews strange url again which is:
http://localhost:3000/#!/#%2Fbooks%2Fdetails%2F599701c1f3da51117535b9ab
Which load no where.
This is the github url for all the documents:
https://github.com/AbdallahRizk/BookStore.git
Any suggestions Please!!
use $rootScope instead of $scope for getBook function
$rootScope.getBook = function(){
var id = $routeParams.id;
$http.get('/api/books/'+id).then(function(response){
$scope.book = response.data;
});
init(getBook);
}
Note: add $rootScope to your BookController
Seems like I have hashprefix !, then my URL should also have ! after hash(#)
href="#!/books/details/{{book._id}}"
Since Angular 1.6 hashprefix is defaulted to !, you can disable this behavior by setting hashPrefix to ''(blank).
.config(['$locationProvider',
function($locationProvider) {
$locationProvider.hashPrefix('');
}
]);
Note: This answer from, #Pankaj Parkar at I get a weird templateURL not as it suppose to give with angular?

AngularJS controller, template and routing issue

I am having a few issues getting my head around why this is not working:
template
<div>
<ul>
<li ng-repeat="x in get">
{{ x.name }}
</li>
</ul>
</div>
controller
angular.module('app')
.controller('SubstancesCtrl', function ($scope) {
$scope.get = [{name: "LOL"}];
});
routes
angular.module('app')
.config(function ($routeProvider) {
$routeProvider
.when('/', { controller: 'PostsCtrl', templateUrl: '/templates/posts.html' })
.when('/register', { controller: 'RegisterCtrl', templateUrl: '/templates/register.html' })
.when('/login', { controller: 'LoginCtrl', templateUrl: '/templates/login.html' })
.when('/substances', { controller: 'SubstancesCtrl', templateUrl: '/templates/substances.html'})
});
index.html
<!DOCTYPE html>
<html ng-app='app'>
<head>
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='/app.css'>
</head>
<body ng-controller='ApplicationCtrl'>
<nav class='navbar navbar-default'>
<div class='container'>
<ul class='nav navbar-nav'>
<li><a href='/#/'>Posts</a></li>
<li><a href='/#/register'>Register</a></li>
<li><a href='/#/login'>Login</a></li>
<li>Substances</li>
</ul>
<p ng-if='currentUser' class='navbar-text navbar-right'>
Signed in as {{currentUser.username}}
</p>
</div>
</nav>
<div class='container' ng-view></div>
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular-route.js'></script>
<script src='/app.js'></script>
</body>
</html>
I can see that the template is being replaced by the ng-view directive however the get variable is not being treated in the manner i thought it would: i thought i would get one list item node with the value of LOL
You angular module has not been created, You should declare your module in app.js. As you are using angular routing you need to include its module in your app module.
angular.module('app',['ngRoute'])
Also you need to update your Angular to stable versions 1.4.4 is stable one, because you are using 1.3.0-rc.4 in which rc stands for release candidate which is pre-release version, which may have bug in most of the cases. Thats why I told you to go for stable version of AngularJS. You could also use close stable version which is 1.3.14
Additionally your template has <li ng-repeat="x in get()"> but get function is not defined in the scope, resultant would be nothing would be render on the UI.
angular.module('app')
.controller('SubstancesCtrl', function ($scope) {
$scope.lol = "LOL";
$scope.get = function(){
//write a code here which will return list
//so that ng-repeat will loop through the list
//& will show that data on HTML
//something like below
return {"name": "LOL"}; //in real case there must be something different object to return.
}
});
Alexis King was quite correct in that there were 3 very embarrassing issues with the code, it should have looked like this ( -_- )
template
<div>
<ul>
<li ng-repeat="x in get">
{{ x.name }}
</li>
</ul>
</div>
controller
angular.module('app')
.controller('SubstancesCtrl', function ($scope) {
$scope.get = [{name: "LOL"}];
});
routes were exactly the same.
The biggest issue however was in my gulp script which failed to pick up changes in these new files, I have rewrote the build script to ensure all files from the directories containing these files now are watched and all changes are reflected in the browser.
My excuse: need more coffee.

Angular-Fullstack + UI router isn't routing properly

I'm attempting to route my application using UIrouter with the current yeoman-fullstack generator without mongoDB. In this example of my issue, everything is default to test and make sure the UI-router is working properly.
Mainly because I'm not understanding and missing something silly and noobish here, so I apologize.
https://github.com/DaftMonk/generator-angular-fullstack
I'm attempting to edit my routes in client/app/app.js using
'use strict';
angular.module('sr388App', [
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router',
'ui.bootstrap'
])
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider
.otherwise('/');
$stateProvider
.state('about', {
url: '/about',
template: '<h1>Attempting to have this point at /main/about.html but this is for testing purposes</h1>'
});
$locationProvider.html5Mode(true);
});
Now, testing that, localhost:9000/about will load, but when I try to link the state to the navbar it breaks.
'use strict';
angular.module('sr388App')
.controller('NavbarCtrl', function ($scope, $location) {
$scope.menu = [{
'title': 'Home',
'link': '/',
'title': 'About',
'link': '/about'
}];
$scope.isCollapsed = true;
$scope.isActive = function(route) {
return route === $location.path();
};
});
The console error is
Uncaught SyntaxError: Duplicate data property in object literal not allowed in strict mode
Here is the navbar html
<div class="navbar navbar-default navbar-static-top" ng-controller="NavbarCtrl">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
sr388
</div>
<div collapse="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li ng-repeat="item in menu" ng-class="{active: isActive(item.link)}">
<a ng-href="{{item.link}}">{{item.title}}</a>
</li>
</ul>
</div>
</div>
</div>
I'm certain my fundamental understanding of what's happening (supposed to be happening) is flawed.
I did notice the # is not being added when attempting to load states without changing URL.
<a ng-href="{{item.link}}">{{item.title}}</a>
I thought I had found the problem, and this would fix it
<a ui-sref="{{item.link}}">{{item.title}}</a>
But no dice.
Any advice/suggestions would be greatly appreciated. All I'm really trying to do is to create a simple SPA page based on this
http://i.imgur.com/sZYe15o.png
That would just simply run through a few different view states.
/#about
/#contact etc.
In ui-sref just put the state name instead of the URL/link
ui-sref="about"
Then it will work

Angularjs Routing not working with other config options

I'm new to angular trying to implement routing in my angularjs app. My app does the followings
user can login via facebook
then he/she can select a link to navigate
Following is my main angularjs file (with route and facebook connect, facebook connect is working :)), My problem is , routing doesnt work..
#app.js
var app = angular.module('myApp', ['facebook', 'ngRoute'])
.config([
'FacebookProvider',
function(FacebookProvider) {
var myAppId = '<FB app ID>';
FacebookProvider.init(myAppId);
}
],
function($routeProvider) {
$routeProvider
// route for the home page
.when('/add', {
templateUrl : '../pages/add_form.html',
controller : 'addCtrl'
})
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
});
}
)
and when I add a debug pointer to line .when('/add', {control flow is not coming to that line at all.
Following is my href
<li>Add & Edit Recipes</li>
I'm following this tutorial for routing , any help would be greatly appreciated
** UPDATE **
my html
<!DOCTYPE html>
<html class="gt-ie8 gt-ie9 not-ie" data-ng-app="myApp">
<head>
//stuff
<body class="theme-default no-main-menu main-navbar-fixed" data-ng-controller="MainController">
<script>var init = [];</script>
<div id="main-wrapper">
// some html
<ul class="nav navbar-nav">
<li class="dropdown">
Home <i class="navbar-icon fa fa-angle-down"></i>
<ul class="dropdown-menu" data-ng-show="logged">
<li>Add & Edit Recipes</li>
<li>Unpublished</li>
<li>Published</li>
<li class="divider"></li>
<li>Page 3</li>
</ul>
</li>
<li>Recipe</li>
</ul>
<div id="content-wrapper">
<div ng-view>
<%= yield %>
</div>
</div>
<div id="main-menu-bg"></div>
</div>
</body>
</html>

Angularjs browser back button stops partials from loading and causes page refreshes

I have an app that behaves normally when I follow links on the page, but if I use the browser's back and forward buttons, it breaks in the following ways:
It sends a request to the server, but only on "Back".
The template is not rendered at all.
In addition, when I hit "back" to go from page B to page A, chrome's "refresh/stop" button flickers between the top options rapidly, and repeated attemptes to go back and forward causes longer flickering.
Here are the code snippets that I think are relevant:
Edit: I'm working on a plnkr but the site is currently not working. I'll update when it's up and I can verify the bad behavior
Edit 2: Here is the plnkr, but it has problems. It can't find the templateUrls specified in app.js routing, not sure why. Here's the code anyway http://plnkr.co/edit/6cQtnvLi10sJKW8jVzVM
Edit 3: With the help of a friend, I think the problem is coming from using turbo-links on rails 4. I can't test it right now, but when I can I'll post an answer if it works.
file: app.js
window.App = angular.module('app', [
'templates',
'ui.bootstrap'
])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
controller: 'HomeCtrl',
templateUrl: 'home.html'
})
.when('/bars', {
controller: 'BarsPublicCtrl',
templateUrl: 'bars_public.html'
})
.when('/bars/:bar_name', {
controller: 'BarsDetailPublicCtrl',
templateUrl: 'bars_detail_public.html'
})
.otherwise({redirectTo: '/'});
}]);
file: bars_public_ctrl.js
App.controller('BarsPublicCtrl', ['$scope', '$location', 'BarsPublicDataFactory',
function($scope, $location, BarsPublicDataFactory) {
// memoization
$scope.bars = $scope.bars || BarsPublicDataFactory.getBars();
}
]);
BarsPublicDataFactory just returns a static array of fake data, same with the factory in the following snippet
file: bars_detail_public_ctrl.js
App.controller('BarsDetailPublicCtrl', ['$scope', '$routeParams', 'BarsDetailPublicDataFactory',
function($scope, $routeParams, BarsDetailPublicDataFactory) {
$scope.bar = {};
$scope.bar.name = $routeParams.barId;
$scope.barDetails = BarsDetailPublicDataFactory.getBaz($routeParams.bar_name);
$scope.Bazs = BarsDetailPublicDataFactory.getBazs();
}]);
file: bars_public.html
<div class="container">
<div ng-repeat="bar in bars">
<div class="row">
<div class="col-sm-12">
<a href="/bars/{{bar.name}}">
<h4 style="display:inline;">{{ bar.name }}</h4>
</a>
</div>
</div>
<hr />
</div>
</div>
file: bars_detail_public.html
<select ng-model="searchSelect.style" style="width:100%;">
<option value='' selected>All</option>
<option ng-repeat="baz in bazs">{{baz}}</option>
</select>
<div>
<accordion close-others="true">
<accordion-group ng-repeat="foo in foos | filter:searchSelect">
<accordion-heading>
<div>
<h3>{{foo.name}}</h3>
<em>{{foo.style}}</em>
</div>
</accordion-heading>
</accordion-group>
</accordion>
</div>
If you need anything else, let me know.
It turns out that the problem was caused by turbolinks with Rails 4. I failed to mention it because I didn't realize it was important.
I don't know exactly what caused it, but turbolinks injects some javascript, and as best as I can tell, it highjacks some events that cause the page to reload when you use the browse buttons which was breaking my app.
So I followed this advice: http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4
and it worked just fine! Hope someone else can benefit.
befoure:
[installed]jquery_turbo_links
[installed]turbolinks
alter:
[installed]jquery_turbo_links
[removed]turbolinks
It worked!

Resources