I'm practicing routing in angularJS and facing a problem. I looked online and tried many ways but that doesn't solve my problem. Can you help me?
I'm having problem with the $state.go function. It changes the url, but the html file is not loaded. I looked at the console but no error appears
app.js
(function(){
var app = angular.module('myTrello',
['date-directives', 'ngRoute', 'ui.router']);
app.controller("mainCtrl", ['$scope', '$http', '$state', '$route', function($scope, $http, $state, $route){
$scope.title = "Welcome to my trello";
$http.get("http://quotes.rest/qod.json")
.then(function(response) {
let quoteInfo = response.data.contents.quotes[0];
$scope.quote = quoteInfo.quote;
$scope.author = quoteInfo.author;
});
$scope.go = function(path) {
$state.go(path, {});
};
}]);
app.controller("boardCtrl", function(){
});
// app.controller("routeCtrl", function($scope, $routeParams) {
// $scope.param = $routeParams.param;
// });
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'index.html',
controller: 'mainCtrl'
})
.state('boards', {
url: '/boards',
templateUrl: 'boards/board.html',
controller: 'boardCtrl'
})
// .state('/boards/:param', {
// url: '/boards/:param',
// templateUrl: 'index.html',
// //controller: 'boardCtrl'
// })
}]);
})();
index.html (important parts)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="bower-angular-route/angular-route.js"></script>
<script src="https://unpkg.com/angular-ui-router#1.0.3/release/angular-ui-router.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="date.js"></script>
<body ng-controller="mainCtrl">
<div class="container">
<div class="jumbotron">
<div class="title">
<h2 class="text-center">{{title}}</h2>
</div>
</div>
<div class="bg-1 text-white text-center">
<h3>Today's quote</h3>
<h4>{{quote}}</h4>
<h5>By: {{author}}</h5>
</div>
</div>
<button class="btn btn-info btn-lg boards" ng-click="go('boards')">My boards</button>
<div ng-view></div>
</body>
board.html
<html>
<h1>Boards</h1>
</html>
As you are using ui-router, You need to use ui-view directive instead of ng-view, so change the code as
<div ui-view></div>
instead of
<div ng-view></div>
Related
I am trying to do routing in angular js and Server is running fine. But angular routing is not working properly, only main.html page is coming in ng-view, second.html is not coming. when clicked on the first and second in html same mainController is working not the secondController.
HTML
<!Doctype html>
<html ng-app="myApp">
<meta charset=utf-8" />
<head>
<script src="http://code.angularjs.org/snapshot/angular.min.js"></script>
<script src="http://code.angularjs.org/snapshot/angular-route.min.js">
</script>
<script type="text/javascript"src="app.js"></script>
<body>
<header>
<li><i></i>first</li>
<li><i></i>Second</li>
</header>
<div class = "container">
<div ng-view>
</div>
</body>
main.html
<h1> this is main </h1>
second.html
<h1> this is second </h1>
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','$location',function($scope,$log,$location){
$log.info($location.path());
console.log("first");
}]);
myApp.controller('secondController',
['$scope','$log','$location',function($scope,$log,$location){
$log.info($location.path());
console.log("second");
}]);
Problem is your scripts, they are not working use the one from googleapis.
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
template: '<h1>Main Page</h1>',
controller: 'mainController',
})
.when('/second', {
template: '<h1>{{ test }}</h1>',
controller: 'secondController',
})
});
myApp.controller('mainController',
['$scope', '$log', '$location', function ($scope, $log, $location) {
$log.info($location.path());
console.log("first");
}])
.controller('secondController', ['$scope', function ($scope) {
$scope.test = 'Testing angular routes';
}]);
<script src="https://code.angularjs.org/1.6.4/angular.js"></script>
<script src="https://code.angularjs.org/1.6.4/angular-route.min.js"></script>
<body ng-app="myApp">
<header>
<li><i></i>first</li>
<li><i></i>Second</li>
</header>
<div class="container">
<div ng-view>
</div>
</div>
</body>
I learning angular and I have problem. When I put script directly to code it works but when I am move js controllers to controllers.js it nothing to show. here is my code:
INDEX.html
<!DOCTYPE html>
<html ng-app="pivoApp">
<head>
<title>Pivovara Medvedgrad Kupci</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="js/libs/angular-cookies.min.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/libs/angular-resource.min.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<h1>Početna</h1>
<nav>
<ul>
<li>Početak</li>
<li>Registracija</li>
</ul>
</nav>
<div ng-view>
</div>
</body>
templates/registracija.html
<div>
<h2>Registracija</h2>
<form >
Ime:<input type="text" ng-model="ime"/><br/>
Prezime:<input type="text" ng-model="prezime"/><br/>
Korisničko ime:<input type="text" ng-model="username"/><br/>
<input type="button" value="submit" ng-click="insertdata()"/></br>
</form>
templates/main.html
<div>{{message}}</div>
Controllers.js
'use strict';
// Controllers
var pivoAppControllers = angular.module('pivoAppControllers', []);
pivoAppControllers.controller('MainCtrl', ['$scope', '$location', '$http',
function MainCtrl($scope, $location, $http) {
$scope.message = "Dobro došli u sustav za kontrolu skladišta u pivovari Medvedgrad.";
}])
pivoAppControllers.controller('regCtrl', function($scope,$http){
$scope.insertdata = function(){
$http.post("insert.php", {'ime':$scope.ime, 'prezime':$scope.prezime, 'username':$scope.username })
.success(function(data,status,headers,config){
console.log("Podaci uspiješno spremljeni");
alert("Podaci za novog korisnika su uspiješno spremljeni. Novi korisnik se sada može prijaviti u aplikaciju sa navedenim podacima.");
});
}
});
app.js
'use strict';
// App Module
var pivoApp = angular.module('pivoApp', [
'ngRoute',
'pivoAppControllers'
]);
pivoApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'templates/main.html',
controller: 'MainCtrl'
})
when('/registracija', {
templateUrl: 'templates/registracija.html',
controller: 'regCtrl'
})
;
$locationProvider.html5Mode(false).hashPrefix('!');
}
]);
http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=pivoApp&p1=ReferenceError%3A%20when%20is%20not%20defined%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fjs%2Fapp.js%3A17%3A2%0A%20%20%20%20at%20Object.invoke%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A41%3A376)%0A%20%20%20%20at%20d%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A39%3A321)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A39%3A445%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A7%3A355)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A39%3A222)%0A%20%20%20%20at%20db%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A43%3A246)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A20%3A359)%0A%20%20%20%20at%20Bc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A21%3A163)%0A%20%20%20%20at%20ge%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A19%3A484
You missed a period before one of your whens change your app.js to:
'use strict';
// App Module
var pivoApp = angular.module('pivoApp', [
'ngRoute',
'pivoAppControllers'
]);
pivoApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'main.html',
controller: 'MainCtrl'
})
.when('templates/registracija', {
templateUrl: 'registracija.html',
controller: 'regCtrl'
})
;
and it should work.
plunkr:https://plnkr.co/edit/6lUYQdVVClZVsW2wQ1SA?p=preview
I'm New to Angular, and learning through the tutorials on Thinkster. I'm at the Angular Routing -> Adding a New State step.
I am trying to use ui-router to render an inline template, but the template is not appearing. Here is my index.html (abridged) :
<html>
<head>
<!-- My js files are loaded here -->
</head>
<body ng-app='flapperNews'>
<div class ='row'>
<div class="col-md-6 col-md-offset-3">
<div ui-view></div>
</div>
</div>
<script type="text/ng-template" id="home.html">
<!-- My template written as plain html>
</script>
</body>
</html>
And this is how my routing is currently handled in app.js :
angular.module('flapperNews',['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
return;
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
It is my understanding that ui-router should parse the url and render the appropriate template within the div ui-view tags. (Thinkster says the tag should be 'ui-view' but the ui-router docs seemed to indicate otherwise; I have tried both ).
My page renders blank, and there are no errors logged to the console. For what its worth, I am doing the tutorial with just local files, and since I've added the routing code my url has a # appended to it i.e file://blah/blah/FlapperNews/index.html# and I'm unsure why.
Just tries the following code and seem to work. It is based on the link you provided.
What I fixed from your code:
id="home.html" to id="/home.html"
comment is not closed: <!-- My template written as plain html>
delete return; from config function
removed controller since there wasn't any code for it
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body ng-app='flapperNews'>
<div class ='row'>
<div class="col-md-6 col-md-offset-3">
<div ui-view></div>
</div>
</div>
<script type="text/ng-template" id="/home.html">
test content
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
angular.module('flapperNews', ['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html'
// controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}])
</script>
</body>
</html>
Delete the return in your configuration function.
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 Js submit doesn't seem to be working
It loads and it doesn't give me any errors, but the posts are not being added to the "posts" collection.
I'm using chrome and web server extension for chrome.
angular.module('littleTweet', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'MainController'
})
.state('posts', {
url: '/posts/{id}',
templateUrl: 'posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}])
.factory('posts', [function() {
var o = { posts: []};
return o;
}])
.controller('MainController', ['$scope', 'posts', function($scope, posts){
$scope.posts = posts.posts;
$scope.current_user = 'me';
$scope.addPost = function() {
//if(!$scope.message || $scope.message === '') { return; }
$scope.posts.push({
user: $scope.current_user,
message: $scope.message,
time: new Date()
});
$scope.message = '';
};
}])
.controller('PostsCtrl', ['$scope', '$stateParams', 'posts', function($scope, $stateParams, posts) {
$scope.post = posts.posts[$stateParams.id];
}]);
<html>
<head>
<title>Little Tweet</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="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="app.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="littleTweet">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
<div class="page-header">
<h1>Little Tweet</h1>
</div>
<div ng-repeat="post in posts">
<span style="font-size:20px; margin-left:10px;">
{{post.user}}: {{post.message}} at {{post.time}}
</span>
</div>
<form ng-submit="addPost()"
style="margin-top:30px;">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Message"
ng-model="message"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</div>
</div>
<script type="text/ng-template" id="home.html">
<div class="page-header">
<h1>Little tweet</h1>
</div>
<!-- rest of template -->
</script>
</body>
</html>
i trying to use angular js routing method to the web app i am building, bt i was not able to route through the directory, i am getting a 404 error, below is my codes.
<!doctype html>
<html ng-app="AngularStore">
<head>
<link rel="stylesheet" type="text/css" href="src/bootstrap/cerulean.css">
<script type="text/javascript" src="src/jquery/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="src/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="src/angular/angular.min.js"></script>
<script type="text/javascript" src="src/angular/angular-route.js"></script>
<script src="product.js" type="text/javascript"></script>
<script src="store.js" type="text/javascript"></script>
<script src="shoppingCart.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="controller.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span10 offset1">
<h1 class="well" >
<a href="default.html">
<img src="img/logo.png" height="60" width="60" alt="logo"/>
</a>
Angular Store
</h1>
<div ng-view></div>
</div>
</div>
</div>
</body>
</html>
here is my app.js file
var storeApp = angular.module('AngularStore', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/store', {
templateUrl: '/partials/store.html',
controller: 'storeController' }).
when('/products/:productSku', {
templateUrl: '/partials/product.html',
controller: 'storeController' }).
when('/cart', {
templateUrl: '/partials/shoppingCart.html',
controller: 'storeController' }).
otherwise({
redirectTo: '/store' });
}]);
Your code is definitely needs 'ngRoute'
var storeApp = angular.module('AngularStore', ['ngRoute']).
here is a plnkr http://plnkr.co/edit/X9gyEPm6v126kobj0lTa
Other thing you could be doing wrong is providing template paths relative to root
templateUrl: 'partials/store.html',
instead of
templateUrl: '/' + 'partials/store.html',
You should load ngRoute along with your app module declaration.
var storeApp = angular.module('AngularStore', ['ngRoute']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/store', {
templateUrl: 'partials/store.html',
controller: 'storeController' }).
when('/products/:productSku', {
templateUrl: 'partials/product.html',
controller: 'storeController' }).
when('/cart', {
templateUrl: 'partials/shoppingCart.html',
controller: 'storeController' }).
otherwise({
redirectTo: '/store' });
}]);
Make sure that you load ngRoute along with your app module declaration.
var app = angular.module("app", ['ngRoute']);
It's not enough that you load the script file. For you it should be:
var storeApp = angular.module('AngularStore', ['ngRoute']);