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
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 have been following the tutorial:
https://thinkster.io/angular-rails#angular-routing
I have not done any rails integration yet, the question is specifically to angular.
When I do the hello worlds from the MainCtrl without using the router, everything works. When I use the router, I cannot get the inline angular template to display in my html page. Where is the error here?
app.js:
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.module('flapperNews', [])
.controller('MainCtrl', [
'$scope',
function($scope){
$scope.test = 'Hello world';
}]);
index.html:
<html>
<head>
<title>My Angular App</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view> <!-- this is supposed to display the template below but it shows nothing -->
</div>
</div>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
</script>
</body>
</html>
Your controller is recreating the module instead of referencing it. Change it like so:
angular.module('flapperNews')
.controller('MainCtrl', [
'$scope',
function($scope){
$scope.test = 'Hello world';
}]);
You're defining the 'flapperNews' module twice. Remove the second angular.module('flapperNews', []).
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 try to learn AngularJS. At the moment I focus on ui-Routing.
My Code is very simple, but it doenst work and I don't know why.
Description of my problem:
http://de.tinypic.com?ref=kd22ow.jpg
The browser shows:
"Hello World ui-Routing!" (h1 in index.html)
If I try to enter index.html/home.
It says: Error File not found!
Here is my Code:
index.html
<html>
<head>
<title>My Angular App!</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="Test" ng-controller="MainCtrl">
<h1>Hello World ui-Routing!</h1>
<div ui-view>
</div>
</body>
</html>
app.js:
angular.module('Test', ['ui-router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterprovider)
{
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
.state('test', {
url: '/test',
templateUrl: '/test.html',
controller: 'TestCtrl'
});
$urlRouterProvider.otherwise('home');
}])
.controller('MainCtrl', ['$scope',
function($scope){
$scope.test = "Hello Jan!";
});
.controller('TestCtrl', ['$scope',
function($scope){
$scope.test = "Hello Redirect!";
});
test.html:
<h2>Hello Test! </h2>
home.html:
<h2>Hello Home! </h2>
Where is my problem?
Looking forward to your answers,
Jan
You need to include the ui-router script in your html page too it is a third party and not included in angular.
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