I don't know why my template is not being rendered anymore. I get a blank page. It worked before then after some tweaks it stopped working. I've reversed most of the code and i still don't get why is not working . There is no kind of error in the console. How am I supposed to debug this kind of behavior ?
Here is the controller
'use strict';
/* Controllers */
var crmControllers = angular.module('crmControllers', []);
crmControllers.controller('TimelineCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
var emailsId
emailsId = $routeParams.emailsId;
$http.get('http://local.sf.com:8080/timeline/API?emailsId=' + emailsId,
{withCredentials: true}).success(function(timelines){
angular.forEach(timelines, function(timeline) {
var inboxIfr
inboxIfr = 'http://local.sf.com:8080/messages/inbox?email='+
timeline.Email+'&toEmail='+timeline.ToEmail+'&subject='+timeline.Subject
timeline.inboxIfr = inboxIfr
$scope.inboxIfr = inboxIfr
console.log(inboxIfr);
});
});
}]);
inboxIfr shows up in the console log which means that the loop is happening but it's just not rendered.
Html
<body>
<ul ng-repeat="timeline in timelines">
<p>hello <p/>
<iframe class="container well well-small span6"
style="height: 400px;"
ng-src="{{timeline.inboxIfr}}"></iframe>
</ul>
app.js
'use strict';
/* App Module */
var crmApp = angular.module('crmApp', [
'ngRoute',
'crmControllers',
]);
crmApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/timeline/:emailsId', {
templateUrl: 'partials/time.html',
controller: 'TimelineCtrl'
}).
otherwise({
redirectTo: '/timeline:emailsId'
});
}]);
index.html
<!doctype html>
<html lang="en" ng-app="crmApp">
<head>
<meta charset="utf-8">
<title>SF</title>
<!--<<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">-->
<!--<link rel="stylesheet" href="css/app.css">-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/controllers.js"></script>
<!--<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>-->
<!--<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>-->
<script src="js/app.js"></script>
<html>
</head>
<body>
<div ng-view></div>
</body>
</html>
Edit : I've added some dummy text above ng-repeat="timeline in timelines"> and it's being rendered so the real issue is that nothing is rendered inside the ng-repeat loop .
Edit: I've reduced time.html to this and it's still not being rendered . Only the first paragraph is being rendered ("I can see this")
<p>I can see this</p>
<li ng-repeat="timeline in timelines">
<p>I can't see this <p/>
</li>
The default route isn't pointing to a valid route:
app.js:
.otherwise({
redirectTo: '/timeline:emailsId'
});
shoud be:
.otherwise({
redirectTo: '/timeline/:emailsId'
});
EDIT: More HTML/Angular mistakes:
Remove body tags in Angular templates.
Don't use ng-repeat with <ul> tags. Rather use it with <li> or other block-elements like <div>
You use ng-repeat with the scope variable timelines, but you never set $scope.timelines
Related
I am developing a single page web application using AngularJS' ng-view and ng-template directives. But when I run it my browser show this type [1]: http://i.stack.imgur.com/TPuPo.png of error.
Here is my script block with main module and routing configuration.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS - Views</title>
<!--AngularJs Library-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
</head>
<body>
<h2 style="text-align: center;">Simple Application using AngularJS - Views</h2><hr><br>
<!--Start AngularJS App-->
<div ng-app="myApp">
<p>Add Student</p>
<p>View Students</p>
<div ng-view></div>
<!--Script for Add Student-->
<script type="text/ng-template" id="addStudent.htm">
<h2>This is the view of Add Student</h2>
{{message}}
</script>
<!--Script for View Students-->
<script type="text/ng-template" id="viewStudent.htm">
<h2>This is the view of all students</h2>
{{message}}
</script>
</div>
<!--End AngularJS App-->
<!--App Necessary Scripts-->
<script>
var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(['routeProvider',function ($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
}).
when('/viewStudent', {
templateUrl: 'viewStudent.htm',
controller: 'ViewStudentController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
myApp.controller('AddStudentController', function ($scope) {
$scope.message = "This page will be used to display add student form!!";
});
myApp.controller('ViewStudentController', function($scope){
$scope.message = "This page will be used to display all students!!";
});
</script>
</body>
</html>
what can I do to fix it?
Here's your working code. Also here's a CodePen example, I reorganize the code to make it more comfortable, please review it, study it and compare it for learning purpose. http://codepen.io/alex06/pen/rrzRbE?editors=1010
<html ng-app="mainApp">
<head>
<title>Angular JS Views</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div>
<p>Add Student</p>
<p>View Students</p>
<div ng-view></div>
</div>
<script type = "text/ng-template" id = "addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
<script type = "text/ng-template" id = "viewStudents.htm">
<h2> View Students </h2>
{{message}}
</script>
<script>
(function(){
'use strict'
angular
.module('mainApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
})
.when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
})
.otherwise({
redirectTo: '/addStudent'
});
}])
.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
})
.controller('ViewStudentsController', function($scope) {
$scope.message = "This page will be used to display all the students";
});
})();
</script>
</body>
</html>
Just change the following line:
myApp.config(['routeProvider',function ($routeProvider) {
To
myApp.config(['$routeProvider',function ($routeProvider) {
I think this is what you missed.
Define config as this:--
myApp.config(function ($routeProvider) { $routeProvider
Rather than:-- myApp.config(['routeProvider',function ($routeProvider) {
$routeProvider.
I started learning AngularJS so I created two html pages:
index.html
<!DOCTYPE html>
<html ng-app="TodoApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/app.js"></script>
<title>Angular Tutorial</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
and list.html
<input type="text" ng-model="test">
<h1>Hello: {{test}}</h1>
The app.js looks like this
var TodoApp = angular.module("TodoApp", ["ngResource"]).
config(function ($routeProvider) {
$routeProvider.
when('/', { controller: ListCtrl, templateUrl: "list.html" }).
otherwise({ redirectTo: '/' });
});
var ListCtrl = function ($scope, $location)
{
$scope.test = "testing";
};
Unfortunately, when I open the index.html page it is blank. What can be the cause of the problem?
As you mentioned the error:-
1) Add angular-route.js file in main page.
2) Add 'ngRoute' dependency in angular main app.
Doc:-https://docs.angularjs.org/tutorial/step_07
also you need to mention the controller in your HTML with ng-controller="ListCtrl" to initialize it.
And do not declare your controller that way, you must do
todoApp.controller('ListCtrl', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {
$scope.test = "testing";
}]);
It seems that you are missing the controller's definition:
TodoApp.controller('ListCtrl', ListCtrl);
This should fix your issue
You can also take a look at yeoman. It will help you to start with angularjs in zero time.
http://yeoman.io/codelab.html
I have a very simple app. When I start the app it works fine, both angular and angular-route are loaded, the config function is executed and "otherwise" works as intended.
However, both boxes and versions do not work and no HTML is injected. The main page just says
<!-- ngView: -->
and that's it.
THERE ARE 0 ERROR MESSAGES!!! The console is just empty as a desert.
I tried everything and it should work but it doesn't. I even tried replacing the browserify calls and including angular directly in the html - no success.
HTML:
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>app</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="mainheader">
<div class="client-logo"></div>
<div class="logo"></div>
</header>
<nav class="mainmenu">
<ul>
<li class="active">Boxes</li>
<li>Versions</li>
</ul>
</nav>
<div ng-view></div>
<footer></footer>
</body>
<script src="./js/bundle.js"></script>
</html>
My JS:
'use strict';
require('angular/angular');
require('angular-route/angular-route');
var controllers = require('./controllers');
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/boxes', {
tamplate: 'views/boxes.html',
controller: 'boxController'
})
.when('/versions', {
tamplate: 'views/versions.html',
controller: 'versionsController'
})
.otherwise({
redirectTo: '/boxes'
});
}
]);
app.controller('boxController', controllers.boxController);
app.controller('versionsController', controllers.versionsController);
Example view:
<h2>Boxes</h2>
<p>{{ message }}</p>
Example controler:
'use strict';
exports.boxController = function($scope) {
$scope.message = 'Box Controller';
console.log('boxes');
};
exports.versionsController = function($scope) {
$scope.message = 'Versions Controller';
console.log('versions');
};
I'm as stupid as they come, the problem is a spelling error, it's tEmplate!
Thanks for the responses.
UPDATE: It works in Firefox, but not in Chrome! Any ideas???
I am following a tutorial that creates a simple list of Smartphones/Tablets with thumbnails.
http://docs.angularjs.org/tutorial/step_07
The Problem: After I did step 7, the thumbnails won't load anymore.
It actually was working the step before, but I can't figure out what I did wrong. If I call the image URLs in the URL bar directly, it works. But Angular can't do it, somehow. I don't get any errors in Chrome's JavaScript console either.
The Thumbnails are located under /app/img/phones/ (e.g. /app/img/phones/dell-streak-7.0.jpg)
Below are the files I think of that are relevant. If you need more intel, let me know. Thanks a lot!
/app/index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Angular imports -->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<!-- My imports -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
/app/partials/phone-list.html
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<div class="span10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
<img ng-src="{{phone.imageUrl}}">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
/app/js/app.js
'use strict';
/* App Module */
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}
]);
/app/js/controllers.js
'use strict';
/* Controllers */
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
})
$scope.orderProp = 'age'
}
]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId
}
]);
Try without the {{}} around the url in the ng-src attribute.
The ng-src directive takes an expression as the parameter so you don't need to use the binding syntax {{}}. The binding syntax basically is a way to tell angular to expect an expression.
The documentation on http://docs.angularjs.org/api/ng/directive/ngSrc isn't absolutely crystal clear because they use the binding syntax within the expression.
<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>
I have found the solution.
It worked in Firefox as-is, but not in Chrome. Clearing the browsing data didn't help at all. The problem was caused by AngularJS Batarang in some way I don't know.
So I have disabled the Chrome extension AngularJS Batarang and it instantly worked.
See report here: https://github.com/angular/angularjs-batarang/issues/107
I'm new to angular and am trying to tweek the tutorial to my app. I'm trying to add routes to my app and it doesn't seem to be reading my templates or reading the controller correctly. I installed the angularJS extension for Chrome (pretty awesome by the way) and it shows my scope as empty, no models.
Here's my html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="bioSatApp">
<head>
<title>Map Test</title>
<script src="../lib/angular/angular.js"></script>
<script src="../lib/angular/angular-route.js"></script>
<script src="../resources/app.js"></script>
<script src="../resources/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
Here's my app module (app.js):
var bioSatApp = angular.module('bioSatApp', [
'ngRoute',
'biosatAppControllers'
]);
bioSatApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/maptypes', {
templateURL: 'partials/mapType-list.html',
controller: 'MapListCtrl'
}).
when('/maptypes/:type', {
templateURL: 'partials/mapType-detail.html',
controller: 'MapTypeCtrl'
}).
otherwise({
redirectTo: '/maptypes'
});
}]);
Here's my controllers module (controllers.js):
var biosatAppControllers = angular.module('biosatAppControllers', []);
biosatAppControllers.controller('MapListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('../resources/maptypes.json').success(function (data) {
$scope.mapTypes = data;
});
}]);
biosatAppControllers.controller('MapTypeCtrl', ['$scope', '$routeParams',
function ($scope, $routeParams) {
$scope.type = $routeParams.type
}]);
Here's mapType-list.html:
<select onchange="location = this.options[this.selectedIndex].value;">
<option ng-repeat="map in mapTypes" value="#/maptypes/{{map.type}}">
{{map.caption}}
</option>
</select>
Here's mapType-detail.html:
<div>
{{type}}
<div id="legendContainer" style="width: 300px; height: 800px; overflow-y: auto; float: left;">Legend Div</div>
<div id="mapDiv" style="height:800px;">Map Div</div>
</div>
The maptypes.json is valid json and it loaded successfully before I tried to ngRoute.
When I run the code it successfully navigates the app to /maptypes (the otherwise statement in $routeProvider). But it doesn't bring up the mapType-list html, which should be a simple drop down list. I get no errors in my console or anywhere else that says something isn't loading correctly or something's not found. Also, when I run it the ng-view div element:
<div ng-view></div>
get's replaced with a comment:
<!-- ngView: -->
I'm sure it's something very simple that I'm missing or got wrong, but I've looked through the code over and over and I can't look at it anymore.
Try changing your app config to
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
//Your routing here...
Also add <base href="/"> to head of your HTML file.
Here the example I did using the same code
sample1.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="bioSatApp">
<head>
<title>Test</title>
</head>
<body>
<div ng-view></div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="app1.js"></script>
<script src="controllers.js"></script>
</body>
</html>
With app1.js I did different of you because I deleted 2 lines from here:
var bioSatApp = angular.module('bioSatApp', [
'ngRoute',
'biosatAppControllers'
]);
'ngRoute'
'biosatAppControllers'
and also I changed templateURL for templateUrl
This is the result without the 2 lines:
var bioSatApp = angular.module('bioSatApp', []);
bioSatApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/maptypes', {
templateUrl: 'templates/mapType-list.html'
}).
when('/maptypes/:type', {
templateUrl: 'templates/mapType-detail.html',
controller: 'MapTypeCtrl'
}).
otherwise({
redirectTo: '/maptypes'
});
}]);
All the others files are the same