I am practicing AngularJS and have one problem:
ng-route doesn't work even though I added angular-route.js.
Here is my app.js file:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/intro.html'
})
.when('game', {
templateUrl: 'views/game.html',
controller: 'TableController'
})
.when('about', {
templateUrl: 'views/about.html'
})
.otherwise({
redirectTo: '/'
});
}]);
and here is my index.html
<!DOCTYPE html>
<html>
<head>
<title>Color Picking</title>
<meta name="author" content="pexea12">
<meta charset="utf-8">
<meta name="viewport" content="device=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- Script -->
<script src="js/bootstrap/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
</head>
<body ng-app="app">
<header>
<br>
<h2>Color Picking</h2>
<br>
</header>
<div id="main">
<div ng-view></div>
</div> <!-- main -->
<!-- AngularJS -->
<script src="js/vendor/angular.min.js"></script>
<script src="js/vendor/angular-route.js"></script>
<script src="js/app.js"></script>
<!-- Services -->
<script src="js/services/ColorService.js"></script>
<!-- Factories -->
<script src="js/factories/RandomFactory.js"></script>
<!-- Controllers -->
<script src="js/controllers/TableController.js"></script>
</body>
</html>
My folder tree is:
css (css files, Bootstraps)
js (app.js, controllers, services, factories, ...)
views
My website works with http://localhost:8080/ but doesn't work with localhost:8080/about or localhost:8080/game.
I am really stuck at this point and can't find the solution.
I think your're having a problem after your .when, should be :
$routeProvider
.when('/', {
templateUrl: 'views/intro.html'
})
.when('/game', {
templateUrl: 'views/game.html',
controller: 'TableController'
})
.when('/about', {
templateUrl: 'views/about.html'
})
.otherwise({
redirectTo: '/'
});
You're missing the / in your routes
Related
I'm newbie in AngularJS. My Angular-Route is not working. Here are all the files.
var myApp = angular.module('myModule', ['ngRoute']);
var myCtrl = function($scope) {
$scope.title = 'Learning Angular';
$scope.subTitle = 'Practice 8 (angular route)';
$scope.dhaka = 'Hello Dhaka';
$scope.chittagong = 'Hello Chittagong';
$scope.rajshahi = 'Hello Rajshahi';
$scope.khulna = 'Hello Khulna';
$scope.rangpur = 'Hello Rangpur';
$scope.mymensingh = 'Hello Mymensingh';
$scope.sylhet = 'Hello Sylhet';
$scope.barishal = 'Hello Barishal';
};
myApp.controller('myCtrl', myCtrl);
myApp.config(function($routeProvider) {
$routeProvider
.when('/dhaka', {
templateUrl: 'pg/dhaka.html',
controller: 'myCtrl'
})
.when('/chittagong', {
templateUrl: 'pg/chittagong.html',
controller: 'myCtrl'
})
.when('/rajshahi', {
templateUrl: 'pg/rajshahi.html',
controller: 'myCtrl'
})
.when('/rangpur', {
templateUrl: 'pg/rangpur.html',
controller: 'myCtrl'
})
.when('/mymensingh', {
templateUrl: 'pg/mymensingh.html',
controller: 'myCtrl'
})
.when('/sylhet', {
templateUrl: 'pg/sylhet.html',
controller: 'myCtrl'
})
.when('/khulna', {
templateUrl: 'pg/khulna.html',
controller: 'myCtrl'
})
.when('/barishal', {
templateUrl: 'pg/barishal.html',
controller: 'myCtrl'
});
});
<!doctype html>
<html lang="en" ng-app="myModule">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Practice</title>
<link rel="icon" href="https://angularjs.org/favicon.ico">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container" ng-controller="myCtrl">
<h1 class="text-center">{{title}}</h1>
<h2 class="text-center">{{subTitle}}</h2>
<hr>
<div class="row">
<div class="col-3">
<ul>
<li>dhaka</li>
<li>chittagong</li>
<li>rangpur</li>
<li>khulna</li>
<li>khulna</li>
<li>sylhet</li>
<li>barishal</li>
<li>mymensingh</li>
</ul>
</div>
<div class="col-9">
<div class="" ng-view></div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-route.min.js"></script>
<script src="./script.js"></script>
<script src="./app.js"></script>
</body>
</html>
In the following url, the view is:
http://localhost/angularjs-practice/practice8/
Please follow the url when I hove on a link, the link is shown:
http://localhost/angularjs-practice/practice8/#/mymensingh
here is the picture
but, after clicking on the link request goes to different link:
http://localhost/angularjs-practice/practice8/#!#%2Fmymensingh
here is the picture
NO ERROR IN THE CONSOLE,
but,
still Rout is not working!
here is the github repo
I forgot to put a '!' after '#' on the href.
dhaka
...
...
mymensingh
now it's working
<div class="col-3">
<ul>
<li>dhaka</li>
<li>chittagong</li>
<li>rangpur</li>
<li>khulna</li>
<li>khulna</li>
<li>sylhet</li>
<li>barishal</li>
<li>mymensingh</li>
</ul>
</div>
the problem is the way you're mentioning your routes in the href tag , have a look at this https://www.w3schools.com/angular/angular_routing.asp
I'm trying to do an Angular JS app but I'va some questions.
This is my index.html code
<body ng-app="StockApp">
<div id="wrapper" class="flex-column">
<div ng-hide="hideNavBar" id="navbarundsub">
</div>
<div ng-show="hideStockInformation" id="stockInformation">
</div>
<div id="main" class="flex-row">
<div ng-hide="hideSideMenu" id="sidemenu">
</div>
<div ng-hide="hideSideMenuUser" id="sidemenuUser">
</div>
<!--CONTENIDO-->
<ng-view></ng-view>
</div>
</div>
</body>
My question is that my first page is a login so I don't want to show the login.html inside the divs where de ng-view is, so I don't know how can I change the ng-view or how can I pass grom the login to the other page... I don't know.
Hope someone can help me.
ng-view is one of the important directives of Angular1.
Documentation
We need to inject ngRoute in dependancy injection.
Here we need to maintain routes like this
Routing Example
Please maintain routes like this
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'login.htm',
controller: 'LoginController'
}).
when('/employee', {
templateUrl: 'employee.htm',
controller: 'EmployeeController'
}).
otherwise({
redirectTo: '/login'
});
}]);
You need to create 2 angular template one for login and another for dashboard.
login template not contains any menu and header where
dashboard template contains both menu and header.
you have to change your route from one template page to another template page.
for that you need to use ui-router angular module.using ng-route you can't change route from one template page to another template page.
ui-router module:
https://github.com/angular-ui/ui-router/wiki
app.js
angular
.module('myapp', [
'ui.router',
])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/dashboard/Home');
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'views/dashboard/main.html',
})
.state('home', {
parent:'dashboard',
url: '/Home',
controller: 'MainCtrl',
templateUrl: 'views/pages/blank.html',
}
})
.state('login', {
templateUrl: 'views/pages/login.html',
url: '/login'
})
}
]);
index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/libs/bootstrap.min.css" />
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/sb-admin-2.css">
<link rel="stylesheet" href="styles/timeline.css">
<link rel="stylesheet" href="styles/libs/metisMenu.min.css">
<link rel="stylesheet" href="styles/libs/loading-bar.min.css">
<link rel="stylesheet" href="styles/libs/font-awesome.min.css"
type="text/css">
<!-- endbuild -->
<!-- bower:js -->
<script src="js/libs/jquery.min.js"></script>
<script src="js/libs/bootstrap.min.js"></script>
<script src="js/libs/metisMenu.min.js"></script>
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-ui-router.min.js"></script>
<script src="js/libs/ocLazyLoad.min.js"></script>
<script src="js/libs/loading-bar.min.js"></script>
<script src="js/libs/ui-bootstrap-tpls.min.js"></script>
<!-- endbower -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<!-- endbuild -->
</head>
<body>
<div ng-app="ApsilonApp">
<div ui-view></div>
</div>
</body>
</html>
I have some unexpected problem with my controller, which occured during building 1st angular project, just like in here: https://www.youtube.com/watch?v=8-ZQHv70BCw&t=2119s
The problem is my link to home page does not load, it has no effect whatsoever, even when console shows the message and does not return any errors. I test this on plunkr.
index.html:
<!DOCTYPE HTML>
<html lang="en" ng-app="computer">
<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>Computer Solutions</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- The justified navigation menu is meant for single line per list item.
Multiple lines will require custom code not provided by Bootstrap. -->
<div class="masthead">
<h3 class="text-muted">Computer solutions</h3>
<nav>
<ul class="nav nav-justified">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div ng-controller='MainCtrl'>
<div ng-view></div>
</div>
<!-- Site footer -->
<footer class="footer">
<p>© 2016 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js
var app = angular.module("computer",['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/main', {
templateUrl: 'main.html',
controller: 'MainCtrl'
});
}])
.controller('MainCtrl', [function(){
console.log('this is mainctrl');
}]);
and main.html
this is main.
Thanks in advance, Michał
Changed your imports to version 1.4.8. The version you had included seems to have problems on $route definition without a otherwise :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
I've also added the other states, and should all be working.
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/main', {
templateUrl: 'main.html',
controller: 'MainCtrl'
}).
when('/about', {
templateUrl: 'about.html',
}).
when('/services', {
templateUrl: 'services.html',
}).
when('/contact', {
templateUrl: 'contact.html',
})
}])
See working version : https://plnkr.co/edit/ebB3GAnoDSunsHK4bpme
I guess u have mentioned Controller(MainCtrl) in html and in routeProvider as well. Try removing one of the places.
check https://stackoverflow.com/a/27314659/3821223
Here is my app.js code:
var app = angular.module('myApp', ['ui.router', 'firebase']);
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('site', {
url: '/site',
templateUrl: 'partials/site.html'
})
.state('site.home', {
url: '/home',
templateUrl: 'partials/home.html'
})
.state('site.about', {
url: '/about',
templateUrl: 'partials/about.html'
})
.state('site.projects', {
url: '/projects',
templateUrl: 'partials/projects.html'
})
.state('site.blog', {
url: '/blog',
templateUrl: 'partials/blog.html'
controller: 'BlogCtrl'
})
.state('site.login', {
url: '/login',
templateUrl: 'partials/login.html'
controller: 'LoginCtrl'
})
.state('site.newpost', {
url: '/newpost',
templateUrl: 'partials/newpost.html',
controller: 'NewPostCtrl'
})
.state('site', {
url: '/contact',
templateUrl: 'partials/contact.html'
});
$urlRouterProvider.otherwsie('/site/home');
})
This is the index.html code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.min.js"></script>
<!-- Angular UI Router -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>
<!-- Angular Animate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-animate.min.js"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.1/angularfire.min.js"></script>
<!-- Controllers -->
<script src="js/controllers/BlogCtrl.js"></script>
<script src="js/controllers/LoginCtrl.js"></script>
<script src="js/controllers/NewPostCtrl.js"></script>
<!-- App -->
<script src="js/app.js"></script>
<!-- Styling -->
<link rel="stylsheet" type="text/css" href="css/styles.css">
<link rel="stylsheet" type="text/css" href="css/animate.css">
</head>
<body ng-app="myApp">
<div ui-view></div>
</body>
</html>
When I try and test the code locally using "http-server -a localhost -p 3000", it just shows a blank page that is my index.html page. I think it is some routing error but I can't see the bug, any ideas for fixes?
It also states that app is not defined in this js file:
'use strict'
app.controller('BlogCtrl', function($scope, $firebase, $firebaseArray, FireRef, $state){
var data = $firebaseArray(FireRef);
$scope.posts = data;
$scope.$watch('posts', function(newValue, oldValue){
$scope.posts = $sce.trustAsHtml(data);
})
$scope.login = function() {
$state.go('site.login');
}
$scope.newPost = function(){
$state.go('site.newPost');
}
});
In your controller, you have 'use strict,' so it doesn't know what 'app' is. You need to add the line var app = angular.module('myApp'); before you can use app.controller syntax.
I have an app running on express and angular. I wanted to switch to ui-router to take advantage of multiple views but it does not seem to be working.
app.js
app.use(express.static(path.join(__dirname, 'public')));
app.get('/',routes.index);
app.get('/partials/:name', routes.partials);
app.get('/partials/about/:name', aboutRoutes.partials);
app.get('/about', aboutRoutes.us);
app.get('/about/:name', aboutRoutes.main);
//authentication
//app.get('/app', ensureAuthenticated ,appRoutes.app);
app.get('/app',appRoutes.app);
app.get('/app/:name',appRoutes.main);
app.get('/partials/app/:name', appRoutes.partials);
app.use('*',routes.index)
template.hjs
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="/stylesheets/bootstrap.css" />
<link rel="stylesheet" href="/stylesheets/bootstrapValidator.min.css" />
<link rel="stylesheet" href="/fonts/font-awesome-4.0.3/css/font-awesome.min.css" />
<link rel="stylesheet" href="/stylesheets/screen.css" />
<!-- Style for Newsticker Begin-->
<link rel="stylesheet" href="/stylesheets/newsticker.css" />
<link rel="stylesheet" href="/stylesheets/prism.css" />
<link rel="stylesheet" href="/stylesheets/teamBio.css" />
<!-- Style for Newsticker End-->
</head>
<body>
<div >
{{> header}}
<div ui-view>{{> maincontent}}</div>
{{> footer}}
<script src="/js/jquery.min.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/js/front.js"></script>
<script src="/js/controllers.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootstrapValidator.js"></script>
<script src="/js/signup-init.js"></script>
<!-- Scripts for NEWSTICKER Begin -->
<script src="/js/prism.js"></script>
<script src="/js/jquery.newsTicker.js"></script>
<script src="/js/init_newsticker.js"></script>
<!-- Scripts for NEWSTICKER End -->
{{> signupModal}}
</div>
</body>
</html>
front.js
var myApp = angular.module('myApp', [
'myApp.controllers',
'ui.router'
])
myApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise({
redirectTo: '/'
});
$stateProvider.
state('', {
url: '/',
templateUrl: '/partials/homepage',
controller: 'MyCtrl1'
}).
state('about.detail', {
url: '/about/:id',
templateUrl: function(params){
return '/partials/about/'+params.id
},
controller: 'MyCtrl1'
}).
state('funnel', {
url: '/funnel',
templateUrl: '/partials/funnel',
controller: 'MyCtrl2'
});
});
This worked fine with ngRoute but I switched so I could assign views after i got the base working again. What am I doing wrong?
I also have a link on my home page that
<div class="col-lg-3 text-center">
<a ui-sref="funnel" class="btn btn-warning">TestView</a>
</div>
does nothing
It looks like the problem might be at $urlRouterProvider.otherwise({redirectTo: '/'});. Try changing it to $urlRouterProvider.otherwise('/'); as seen in docs https://github.com/angular-ui/ui-router/wiki/URL-Routing#otherwise-for-invalid-routes