1. Problem
For some reason I get in the Internet Explorer / Firefox an old version of the list.html file but as soon as I run the application with chrome, I get the proper output (see below).
Output IE/Firefox : http://oi57.tinypic.com/2a9vgue.jpg
Output Chrome : oi62.tinypic.com/2h7du9x.jpg
2. Problem
The JSON data from my created service isn't added to the body of the table.
Test to consume the JSON data : http://oi59.tinypic.com/v5whus.jpg
Thank you very much in advance.
I've got the following code:
index.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/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/angular-route.js"></script>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<!-- Custom Java Script files -->
<script src="Scripts/app.js"></script>
<script src="Scripts/controllers.js"></script>
<script src="Scripts/services.js"></script>
<title>Amazing Todo</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
app.js
var TodoApp = angular.module("TodoApp", [
"ngRoute",
"ngResource",
"TodoApp.controllers",
"TodoApp.services"
]).
config(function ($routeProvider) {
$routeProvider.
when('/', { controller: "listCtrl", templateUrl: 'list.html' }).
otherwise({ redirectTo: '/' });
});
list.html
<table class="table table-striped table-condensed table-hover">
<thead>
<th>Todo</th>
<th>Priority</th>
<th>Due</th>
</thead>
<tbody>
<tr ng-repeat="item in todos">
<td>{{item.Todo}}</td>
<td>{{item.Priority}}</td>
<td>{{item.DueDate}}</td>
</tr>
</tbody>
</table>
controllers.js
angular.module('TodoApp.controllers', []).
controller('listCtrl', function ($scope, $location, todoApiService) {
$scope.todos = todoApiService.getMyTodos.query();
});
services.js
angular.module('TodoApp.services', []).
factory('todoApiService', function () {
var todoApi = {};
todoApi.getMyTodos = function ($resource) {
return $resource('/api/Todo/:id', { id: '#id' }, { update: { method: 'PUT' } });
};
});
It sounds like a browser cache issue.
Simply do a hard-refresh to clear it, in IE it's Ctrl-R.
Firefox it's Ctrl-Shift-R.
Related
i created a custom key-value pair in $routeProvider and when i tried this key to access in my controller it is not working and showing as undefined. Below is my code
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-controller="AngularCtrl">
<h2>Routes with params</h2>
<table class="table table-striped">
<thead>
<th>
<td>#</td>
<td>Topic</td>
<td>Desc</td>
</th>
</thead>
<tr>
<td>1</td>
<td>Controller</td>
<td>Topic Details</td>
</tr>
<tr>
<td>2</td>
<td>Models</td>
<td>Topic Details</td>
</tr>
<tr>
<td>3</td>
<td>Views</td>
<td>Topic Details</td>
</tr>
</table>
<div ng-view></div>
</body>
<script type="text/javascript">
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when('/Angular/:topicId', {
mytext: "This is Angular",
templateUrl: 'Angular2.html',
controller: 'AngularCtrl'
});
});
app.controller('AngularCtrl', function($scope, $routeParams, $route){
$scope.tutorialid = $routeParams.topicId;
$scope.text = $route.current.mytext;
});
</script>
</html>
and my Angular2.html is
<h2>Angular</h2>
<br>
{{text}}
<br/>
{{tutorialid}}
Why it is showing mytext in controller as undefined when i tried to access this.?
You could use the resolve funtion of when:
app.config(function($routeProvider){
$routeProvider
.when('/Angular/:topicId', {
templateUrl: 'Angular2.html',
controller: 'AngularCtrl',
resolve: {
mytext: function($route){$route.current.params.mytext= 'This is Angular'}
}
});
});
app.controller('AngularCtrl', function($scope, $routeParams, $route){
$scope.tutorialid = $routeParams.topicId;
$scope.text = $routeParams.mytext;
});
i'm using ui-router, and when i change to state neat.home.patientDashboard the view patientBoard does not get replaced with the one in the parent state, so the it keeps the same view. I try to change state when an item of the table in patientTable.html is clicked.
Also, i want to take the url field in the home state, but if i take it the view doesn't display.
I'm kind of new in AngularJS, so if there's something i'm not doing according to standards or something i apologize.
If somebody could help me with this it would be great since i've stuck in this for a day now.
Thanks
neat.js:
angular.module('neat', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: '/views/dataBoard.html',
controller: 'BaseController'
})
.state('home.board', {
views: {
'patientBoard' : {
templateUrl: '/views/patient/patientTable.html',
controller: 'PatientTableController'
},
'messageBoard' : {
templateUrl: '/views/messageBoard.html',
controller: 'MessageBoardController'
}
}
})
.state('home.board.patientDashboard', {
views: {
'patientBoard#' : {
templateUrl: '/views/patient/patientDashboard.html',
controller: 'PatientDashboardController'
}
}
});
$urlRouterProvider.otherwise('/');
});
Here's a sample of the HTML:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NEAT</title>
<link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<script src="../lib/jquery/jquery-1.12.3.min.js"></script>
<script src="../lib/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="../lib/angularJS/angular.min.js"></script>
<script src="../lib/angularJS/angular-ui-router.min.js"></script>
<script src="../js/neat.js"></script>
<script src="../js/controllers/baseController.js"></script>
<script src="../js/controllers/patientTableController.js"></script>
<script src="../js/controllers/patientDashboardController.js"></script>
<script src="../js/controllers/patientInfoController.js"></script>
<script src="../js/controllers/messageBoardController.js"></script>
</head>
<body ng-app="neat">
<div ui-view></div>
</body>
</html>
dataBoard.html:
<div class="container-fluid board">
<div class="row">
<div ui-view="patientBoard" class="col-sm-8"></div>
<div ui-view="messageBoard" class="col-sm-4"></div>
</div>
</div>
patientTable.html
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered">
<tr>
<th>Nome</th>
</tr>
<tr ng-repeat="patient in patientsCollection.items">
<td>
<a ui-sref="home.board.patientDashboard">{{patient.data[1].value}}</a>
</td>
</tr>
</table>
</div>
Uhm your last route home.board.patientDashboard is in another view, you should add another tag ui-view to display it, or rename your $state so you don't add another view.
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 been working off of a pre-existing static site design and am now starting to convert it over to an Angular JS webapp as an exercise. The first step I took was to convert a few of the individual pages to use ngrepeat with some JSON files. After some help from Stack Overflow, I ironed out these issues and decided to take on ngRouting. I have now created a site with a base page (index.html) that ngIncludes a header (templates/header.html) with a navbar and a popout menu and ngViews html partials (partials/foo.html) for the primary site content. The app works fine in a desktop web browser (occasionally stops at displaying "Test"), but does not display the navbar or the html partials on mobile (just displays a "Test" snippet that I included).
index.html
<!DOCTYPE html>
<html ng-app="profileApp">
<head>
<title>Patrick Ackerman - Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,200,600,700,500' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400' rel='stylesheet' type='text/css'>
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="css/narrow.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.min.js"></script>
<script type='text/javascript' src='instafeed.min.js'></script>
<script type='text/javascript' src='resolution-test.js'></script>
<script src='controllers.js' type="text/javascript"></script>
<script type="text/javascript" src="slidemenu.js"></script>
<script type="text/javascript" src="instastart.js"></script>
<body style="background-color:#F8FAE8">
<p>Test</p>
<div ng-include src='"templates/header.html"'></div>
<div ng-view></div>
</body>
</head>
</html>
header.html
<script type="text/javascript" src="slidemenu.js"></script>
<div class = "fixed-nav-bar">
<strong><table width="100%">
<td width="1"><a><div class="slideout-menu-toggle"><div class="round"><img src="me.jpg"/></div></div></a></td><td></td>
<td width="5"><h1>Patrick W. Ackerman</h1></td><td></td>
<td width="1"><img class="icon" src="hamburg.png"></img></td>
</table></strong>
</div>
<div>
<div class="slideout-menu">
<div class="container" ><table id="profile"><td width='1'>
<h1>Patrick Ackerman</h1><em>
<p id="type">Teaching Assistant</p></em></td><td><div class="round2"><img class="round2img" src="proportionalport.jpg"/></div></td></table></div>
<ul ng-controller="MenuCtrl" class="ul">
<li class="profile-li" ng-repeat="item in profileItems">{{item.profileItem}}<li>
</ul>
</div>
</div>
controllers.js
var profileApp = angular.module('profileApp', ['ngRoute']);
profileApp.controller('BookCtrl', function ($scope, $http){
$http.get('books.json').success(function(data) {
$scope.bookItems = data;
});
});
profileApp.controller('MenuCtrl', function ($scope, $http){
$http.get('profile.json').success(function(data) {
$scope.profileItems = data;
});
});
profileApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
// Home
.when("/", {templateUrl: "partials/home.html", controller: "MenuCtrl"})
.when("/home", {templateUrl: "partials/home.html", controller: "MenuCtrl"})
// Pages
.when("/books", {templateUrl: "partials/books.html", controller: "BookCtrl"})
.when("/insta", {templateUrl: "partials/insta.html", controller: "InstaCtrl"})
.when("/education", {templateUrl: "partials/education.html", controller: "EducationCtrl"})
.when("/workHistory", {templateUrl: "partials/workHistory.html", controller: "WorkCtrl"})
.when("/hobbiesInterests", {templateUrl: "partials/hobbiesInterests.html", controller: "HobbiesCtrl"})
//.when("/contact", {templateUrl: "partials/contact.html", controller: "PageCtrl"})
// else 404
.otherwise("/404", {templateUrl: "partials/404.html", controller: "PageCtrl"});
}]);
The site where I am testing it is available here:
http://packtest.atwebpages.com/
After testing on several different browsers in different configurations, I figured out the solution. I'm not sure how I came up with these sources in my original HTML:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.min.js"></script>
But the angular-route module was an older version, and was only compatible in certain browsers. I updated to the current version (same version as the core angular library), and now it is working (to varying degrees) on any browser I test it in.
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.