I'm developing Spring + Angular JS web application. Project has following structure:
app.state.js
(function() {
'use strict';
angular
.module('ftnApp')
.config(stateConfig);
stateConfig.$inject = ['$stateProvider'];
function stateConfig($stateProvider) {
$stateProvider.state('app', {
abstract: true,
views: {
'navbar#': {
templateUrl: 'app/layouts/navbar/navbar.html',
controller: 'NavbarController',
controllerAs: 'vm'
}
}
});
}})();
app.module.js
(function() {
'use strict';
angular
.module('ftnApp', [
'ngStorage',
'ngResource',
'ngCookies',
'ngAria',
'ngCacheBuster',
'ngFileUpload',
'ui.bootstrap',
'ui.bootstrap.datetimepicker',
'ui.router',
'infinite-scroll',
'angular-loading-bar'
]);})();
home.state.js
(function() {
'use strict';
angular
.module('ftnApp')
.config(stateConfig);
stateConfig.$inject = ['$stateProvider'];
function stateConfig($stateProvider) {
$stateProvider.state('home', {
parent: 'app',
url: '/',
data: {
authorities: []
},
views: {
'content#': {
templateUrl: 'app/home/home.html',
controller: 'HomeController',
controllerAs: 'vm'
}
}
});
}
})();
index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>FTN</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- build:css content/css/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css">
<!-- endinject -->
<!-- endbuild -->
<!-- build:css content/css/main.css -->
<link rel="stylesheet" href="content/css/main.css">
<!-- endbuild -->
</head>
<body ng-app="ftnApp" ng-strict-di>
<page-ribbon></page-ribbon>
<div ui-view="navbar" ng-cloak></div>
<div class="container">
<div class="well" ui-view="content">
<!-- Angular views -->
</div>
<div class="footer" ng-cloak>
<p data-translate="footer">This is your footer</p>
</div>
</div>
<!-- build:js app/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/messageformat/messageformat.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-cache-buster/angular-cache-buster.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/ngstorage/ngStorage.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/bootstrap-ui-datetime-picker/dist/datetime-picker.js"></script>
<script src="bower_components/ng-file-upload/ng-file-upload.js"></script>
<script src="bower_components/ngInfiniteScroll/build/ng-infinite-scroll.js"></script>
<!-- endinject -->
<!-- endbuild -->
<!-- build:js app/app.js -->
<!-- inject:js -->
<script src="app/app.module.js"></script>
<script src="app/app.state.js"></script>
<script src="app/services/auth/register.service.js"></script>
<script src="app/services/auth/principal.service.js"></script>
<script src="app/services/auth/auth.session.service.js"></script>
<script src="app/services/auth/auth.service.js"></script>
<script src="app/services/auth/account.service.js"></script>
<script src="app/layouts/navbar/navbar.controller.js"></script>
<script src="app/home/home.state.js"></script>
<script src="app/home/home.controller.js"></script>
<script src="app/components/login/login.service.js"></script>
<script src="app/components/login/login.controller.js"></script>
<!-- endinject -->
<!-- endbuild -->
</body>
</html>
Problem is that states aren't recognized .When I go to http://localhost:8080/ nothing happens('This is your footer' only shows up). As far as I know, it should load navbar.html into ui-view navbar and home.html into ui-view content?
The problem is with your URL:
function stateConfig($stateProvider) {
$stateProvider.state('home', {
parent: 'app',
url: '/', //Change to ''
data: {
authorities: []
},
views: {
'content#': {
templateUrl: 'app/home/home.html',
controller: 'HomeController',
controllerAs: 'vm'
}
}
});
If the URL = '/' then you should access by http://localhost:8080/#/
Or see here how to make a default URL
If you specify a default page then there should be no problem.
function config($urlRouterProvider) {
// If user goes to a path that doesn't exist, redirect to '/'
$urlRouterProvider.otherwise('/');
}
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>
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 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
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