I'm attempting to make a simple Hello World page with an inline template defined as home.html. The routing used is ui.router, and when the code is run I receive an infinite loop of
GET /home.html 404 0.868 ms - 1076
which indicates to me that angular can't find the home.html template that was defined.
app.js
var app = angular.module('HelloWorld', ['ui.router']);
app.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
$scope.test = 'Hello world!';
$scope.posts = posts.posts;
$scope.addPost = function(){
if(!$scope.title || $scope.title === '') { return; }
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0
});
$scope.title = ''; //Set title to empty
$scope.link = ''; // Set link to empty
};
$scope.incrementUpvotes = function(post) {
post.upvotes += 1;
};
}]);
app.factory('posts', [function(){
var o = {
posts: [
{title: 'post 1', upvotes: 5}
]
};
return o;
}]);
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
index.ejs
<!DOCTYPE html>
<html ng-app="HelloWorld">
<head>
<title>Hello World</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.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="javascripts/app.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script type="text/ng-template" id="home.html">
<div class="page-header">
<h1>Hello World</h1>
</div>
</script>
</body>
</html>
I can't spot what seems to be going wrong in the code. I've also tried variations using /home.html in both the app config and html to no avail. I could use some insight on how I missed up the configuration/inline template.
If this is exactly your code you have a missing " in id of template. See below for correction
<script type="text/ng-template" id="home.html">
Your code is working fine for me. To further test it I added the following to the html:
<a ui-sref='home'>Home</a>
<a ui-sref='about'>About</a>
....
<script type="text/ng-template" id="about.html">
<div class="page-header">
<h1>About</h1>
</div>
</script>
I then added the following route to the javascript:
.state('about', {
url: '/about',
templateUrl: 'about.html',
controller: 'MainCtrl'
});
This adds links to the top left allowing you to switch views. You can see the working code at http://codepen.io/amartin007/pen/rLOvqa
Related
I just started AngularJS. When I try to implemt following example, I am getting
404 Not Found
This is my main.html
<!DOCTYPE html>
<html ng-app="demoApp">
<script src="angular.min.js"></script>
<head>
<title>main page</title>
</head>
<body>
<div ng-view></div>
<script>
var demo = angular.module('demoApp',[]);
demo.config(function ($routeProvider){
$routeProvider
.when ('foo',{
controller : 'SimpleController',
templateUrl: 'first.html'
})
});
demo.controller('SimpleController',function($scope){
$scope.customers = [
{name: 'sac',city:'abcd'},
{name: 'mac',city:'efgh'},
{name: 'nalaka',city:'ijkl'}
];
});
</script>
</body>
</html>
My first.html
<ul>
<li ng-repeat="cus in customers ">{{ cus.name }}</li>
</ul>
When I visit localhost/foo I am getting 404 exception. I just started AngularJS. So any help/guide to solve this problem will be a great help for me.
Thanks in advance
You should refer angular-route.min.js file on page & then include ngRoute module in your application.
var demo = angular.module('demoApp',['ngRoute']);
You should correct your .when condition to below
.when('/foo',
As you did't enabled html5mode in your routing, you could access the page via localhost/#/foo URL.
var demo = angular.module('demoApp', ['ngRoute']);
demo.config(function($routeProvider) {
$routeProvider
.when('/foo', {
controller: 'SimpleController',
templateUrl: 'first.html'
})
// By default it will open foo
.otherwise({redirectTo: '/foo'})
});
demo.controller('SimpleController', function($scope) {
$scope.customers = [{
name: 'sac',
city: 'abcd'
},
{
name: 'mac',
city: 'efgh'
},
{
name: 'nalaka',
city: 'ijkl'
}
];
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script>
<div ng-app="demoApp">
<div ng-view></div>
<script type="text/ng-template" id="first.html">
Content of the template.
</script>
</div>
I'm teaching myself some AngularJS and have made some progress.
The routing on the following project doesn't seem to work but I don't know what I'm doing wrong. I use WebStorm.
I did an exercise (the adding names part) and now I'm trying to show what's within the views on the index page but this doesn't seem to work..
Index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular/angular.js"></script>
<script src="angular/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="myController as ctrl">
<h1>Lijst met namen</h1>
<input type="text" placeholder="voornaam..." ng-model="ctrl.voornaam">
<input type="text" placeholder="achternaam..." ng-model="ctrl.name">
<input type="button" value="Persoon toevoegen" ng-click="ctrl.addNaam()">
<ul>
<li ng-repeat="person in ctrl.personen">
{{person.name}} {{person.voornaam}}
</li>
</ul>
</div>
<div role="navigation">
<nav>
Home
About us
Contact us
</nav>
</div>
<div ng-view></div>
<script src="controller.js"></script>
<script src="aboutController.js"></script>
<script src="contactController.js"></script>
<script src="homeController.js"></script>
</body>
</html>
App.js:
angular.module('myApp',['ngRoute']).config(moduleConfig);
//Inject dependencies
moduleConfig.$inject = ['$routeProvider'];
//routes configureren
function moduleConfig($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'views/home.html',
controller: 'homeController',
controllerAs: 'homeCtrl'
})
.when('/home', {
templateUrl: 'views/home.html',
controller: 'homeController',
controllerAs: 'homeCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'aboutController',
controllerAs: 'aboutCtrl'
})
.when('/contact', {
templateUrl: 'views/contact.html',
controller: 'contactController',
controllerAs: 'contactCtrl'
})
.otherwise({
redirectTo: '/'
});
} })();
Controller.js:
angular.module('myApp', []).controller('myController', myController);
function myController(){
var vm = this;
vm.personen = [
{name: 'Schrooten', voornaam: 'Mathias'}
];
vm.addNaam = function(){
var newName = {
voornaam: this.voornaam,
name: this.name
};
this.personen.push(newName);
window.alert('Persoon toegevoegd!')
}
}
aboutController:
angular.module('myApp').controller('aboutController', aboutController);
function aboutController(){
this.msg = 'Hello';
}
2 other controllers look almost the same (contactController.js and homeController.js)
views:
about.html:
<div>
<p>About us: ....</p>
<input type="text">
</div>
Same for 2 other views.
this line angular.module('myApp', []) initializes a module.
So basically you have to initialize once.
then you can use it like this angular.module('myApp')
so this in you code:
angular.module('myApp', []).controller('myController', myController);
has to become like the line below because you already have myApp module defined:
angular.module('myApp').controller('myController', myController);
The angular.module('myApp') is a redundant code in your codebase. creating angular modules everywhere is the incorrect thing here. Create it once, store it in a variable, lets say 'app' and use it everywhere else.
Like as follows:
in app.js :
var app = angular.module('myApp', ['ngRoute']);
in route.js :
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'login.html'
})
.when('/home', {
templateUrl : 'main.html',
controller: 'myController'
})
.otherwise({
redirectTo: '/'
});
});
In Controller.js :
app.controller('myController', myController);
function myController(){
var vm = this;
vm.personen = [
{name: 'Schrooten', voornaam: 'Mathias'}
];
vm.addNaam = function(){
var newName = {
voornaam: this.voornaam,
name: this.name
};
this.personen.push(newName);
window.alert('Persoon toegevoegd!')
}
}
You can refer to one of my github repositories to understand a basic angular framework that uses template routing for a single page application here.
Try to do:
angular.module('myApp',['ngRoute']).config(['$routeprovider', moduleConfig]);
And then you should be able to get rid of the .$inject you call.
From your code as first I see this line looks to be wrong, when you register your 'myController' controller. There you are using angular.module('myApp', []) hovewer in App.js there is the 'myApp' module created. In 'Cotnroller.js' use angular.module('myApp').controller(...) without brackets. Currenlty in Controller.js you overwrite the 'myApp' module.
I am getting undefined for $routeParams. Here is my code:
var ngAddressBook = angular.module('ngAddressBook', ['ngRoute']);
ngAddressBook.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/list.html',
controller: 'ngAddressListController'
}).
when('/add', {
templateUrl: 'views/add.html',
controller: 'ngAddressListController'
}).
when('/details/:id', {
templateUrl: 'views/details.html',
controller: 'ngAddressDetailsController'
});
}]);
// add a controller to it
ngAddressBook.controller('ngAddressListController', ['$scope', function ($scope)
{
$scope.contacts = [
{id:1,first_name:'Jane', last_name:'Doe','Phone':'123-456789','Email':'jane#example.com'},
{id:2,first_name:'Jhon', last_name:'Doe','Phone':'123-456789','Email':'jhon#example.com'}
];
$scope.getTotalContacts = function () {
return $scope.contacts.length;
};
}]);
ngAddressBook.controller('ngAddressDetailsController', ['$scope', function ($scope,$routeParams)
{
alert($routeParams);
$scope.id = $routeParams.id;
}]);
index.html
<!doctype html>
<html ng-app="ngAddressBook">
<head>
<title>Ng Addressbook</title>
<link href="main.css" rel="stylesheet" media="screen" />
</head>
<body>
<div ng-controller="ngAddressListController">
<div id="container">
<h1>Ng Address Book</h1>
<div id="content" ng-view>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
<script src = "angular-route.min.js"></script>
<script src="main.js"> </script>
</body>
</html>
There is a problem in controller parameter injection. You have not added $routeParams in your array injection list.
ngAddressBook.controller('ngAddressDetailsController', ['$scope','$routeParams', function ($scope,$routeParams)
{
alert($routeParams);
$scope.id = $routeParams.id;
}]);
As I found this on top on google:
apart from the missing injection - asign the object $routeParams and not the Key $routeParams.id
I found the explination here (from Sander Elias)
ngAddressBook.controller('ngAddressDetailsController', ['$scope','$routeParams', function ($scope,$routeParams)
{
$scope.id = $routeParams
alert($routeParams);
}]);
I am trying to implement a navigation into a webpage using angularJS. The problem is that the route does not work at all. The browser console does not give any errors and the ng-view just does not show the templatesUrls.
route.js
var routeApp = angular.module('myApp', ['ngRoute']);
routeApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/task.html',
controller: 'TraineesController'
})
.when('/technology', {
templateUrl: 'partials/technology.html',
controller: 'TraineesController'
})
.otherwise({redirectTo:"/technology"});
});
Index.html
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/taskman.css"/>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
<script type="text/javascript" src="app/route.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body>
<a href="#/technology" class="btn btn-sm btn-danger nav-button-margin">
<i class="glyphicon glyphicon-user"></i> Account panel
</a>
<div class="col-sm-12">
<div ng-view></div>
</div><!-- Closing col-sm-12-->
</body>
</html>
app.js
var app = angular.module('myApp', []);
app.controller('TraineesController', function($scope, $http, $log) {
getTrainee(); // Load all available tasks
function getTrainee(){
$http.post("ajax/getTrainee.php").success(function(data){
$scope.trainees = data;
});
};
});
task.html
<div class="widget-box" id="recent-box" ng-controller="TraineesController">
Random text tables
</div>
remove the ; from here:
.when('/technology', {
templateUrl: 'partials/technology.html',
controller: 'TraineesController'
}) // <-----here you have a ; remove it and it will work.
.otherwise({redirectTo:"/technology"});
; broke the chaining and caused a syntax error there.
update:
you can remove this controller:
<body ng-controller="TraineesController">
and instead you can place the controller in the respective templates.
checkout this plunkr demo.
I've made two different plunkers, the first one is a plain app just to do an example of routes magic with angular...
First example, basic routes
var app = angular.module('plunker', ['ngRoute']);
app.controller('MainCtrl', function($scope) {
$scope.technology = 'this is the tech page';
$scope.task = 'this is the task';
});
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/technology', {
templateUrl: 'technology.html',
controller: 'MainCtrl'
})
.when('/task', {
templateUrl: 'task.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/technology'
});
}
]);
The second example is an myApp example based on your application, it's basicaly your application but slightly different...
Second example, your app
// I like to keep the app.js file "clean", what means that this file will only
// load the app modules and declare the DI of the app...
var app = angular.module('myApp', [
'ngRoute', // ngRoutes directive from angularjs
'myAppControllers', // controllers module, u can add how controllers wtv u need
'myAppRoutes', // routes module, you can keep the routes configs separated or in the same file
]);
// start the modules, other way to do this is to put this lines in every
// single controllers or route file, what is ugly
angular.module('myAppRoutes',[]);
angular.module('myAppControllers',[]);
I'm using bootstrap to display a modal and want it to be shown on click of a anchor tag as a route.
But i'm getting a module error & can't seem to figure out how to resolve it.
HTML
<div ng-view>
<div ng-controller="DetailPageCtrl">
Click here to open modal!
</div>
<script type="text/ng-template" id="modalContainer">
<div ng-controller="ProfileModalCtrl"></div>
</script>
</div>
JS
var app = angular.module('plunker', ['ui.bootstrap']);
app.config(function($routeProvider) {
$routeProvider
.when('/profile', {
templateUrl : 'modalContainer',
controller : 'ProfileModalCtrl'
});
})
app.controller('DetailPageCtrl', function($scope) {
console.log("detail page");
});
app.controller('ProfileModalCtrl', function($scope, $modal) {
$modal.open({templateUrl : 'modal.html'});
});
Code in plnkr :
http://plnkr.co/edit/VbvuWzLqkICFzBYI9sL5?p=preview
Demo is plagued with problems. You haven't included angular-route.js. You didn't provide a default path using otherwise and you placed html within ng-view
/* include script tag with `angular-route.js , then inject as dependency*/
var app = angular.module('plunker', ['ui.bootstrap', 'ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'default'
})
.when('/profile', {
templateUrl: 'modalContainer',
controller: 'ProfileModalCtrl'
}).otherwise({
redirectTo: '/'
})
});
<div ng-view><!-- leave empty --></div>
DEMO
You will also run into problems declaring same ng-controller in markup as in route config...pick one or the other
Your plunker is missing the ngRoute dependency. In newer versions of angular, ngRoute is a separate library that needs to included separately and declared as a module dependency to your app module:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<script src="http://code.angularjs.org/1.2.4/angular-route.js"></script>
var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']);
Also, your routes are not fully defined.
Also, your templates (<script type="text/ng-template">) are defined inside the <div ng-view> element. ng-view is a directive which will replace the content of host div element when route is resolved, so a better place for your templates is outside of ng-view element.
Fixed PLUNKER
var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']);
app.config(function($routeProvider) {
$routeProvider
.when('/profile', {
templateUrl : 'modalContainer',
controller : 'ProfileModalCtrl'
})
.when('/detail', {
templateUrl : 'detail.html',
controller : 'DetailPageCtrl'
})
.otherwise({redirectTo: '/detail'});
});
app.controller('DetailPageCtrl', function($scope) {
console.log("detail page");
});
app.controller('ProfileModalCtrl', function($scope, $modal) {
$modal.open({templateUrl : 'modal.html'});
});
<!doctype html>
<html ng-app="plunker">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<script src="http://code.angularjs.org/1.2.4/angular-route.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.7.0.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DetailPageCtrl">
Click here to open modal!
</div>
<script type="text/ng-template" id="modalContainer">
<div ng-controller="ProfileModalCtrl"></div>
</script>
<div ng-view></div>
</body>
<script src="script.js"></script>
</html>