I'm new to angular trying to implement routing in my angularjs app. My app does the followings
user can login via facebook
then he/she can select a link to navigate
Following is my main angularjs file (with route and facebook connect, facebook connect is working :)), My problem is , routing doesnt work..
#app.js
var app = angular.module('myApp', ['facebook', 'ngRoute'])
.config([
'FacebookProvider',
function(FacebookProvider) {
var myAppId = '<FB app ID>';
FacebookProvider.init(myAppId);
}
],
function($routeProvider) {
$routeProvider
// route for the home page
.when('/add', {
templateUrl : '../pages/add_form.html',
controller : 'addCtrl'
})
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
});
}
)
and when I add a debug pointer to line .when('/add', {control flow is not coming to that line at all.
Following is my href
<li>Add & Edit Recipes</li>
I'm following this tutorial for routing , any help would be greatly appreciated
** UPDATE **
my html
<!DOCTYPE html>
<html class="gt-ie8 gt-ie9 not-ie" data-ng-app="myApp">
<head>
//stuff
<body class="theme-default no-main-menu main-navbar-fixed" data-ng-controller="MainController">
<script>var init = [];</script>
<div id="main-wrapper">
// some html
<ul class="nav navbar-nav">
<li class="dropdown">
Home <i class="navbar-icon fa fa-angle-down"></i>
<ul class="dropdown-menu" data-ng-show="logged">
<li>Add & Edit Recipes</li>
<li>Unpublished</li>
<li>Published</li>
<li class="divider"></li>
<li>Page 3</li>
</ul>
</li>
<li>Recipe</li>
</ul>
<div id="content-wrapper">
<div ng-view>
<%= yield %>
</div>
</div>
<div id="main-menu-bg"></div>
</div>
</body>
</html>
Related
I am using AngularJS to create an SPA. I have following code in my home.ejs file:
/* Initial Code */
<li class="nav-item dropdown" >
<a class="nav-link dropdown" data-toggle="dropdown" href="#"><i class="fa fa-user"></i> <%= sess.name.split(' ')[0] %></a>
<div class="dropdown-menu" style="margin-top:6px">
<a class="dropdown-item" href="profile">Profile</a>
<a class="dropdown-item" href="#">Settings</a>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</nav>
</header>
<div ng-view>
</div>
</body>
<script>
var app = angular.module("social", ["ngRoute"]);
app.config(function ($routeProvider,$locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/", {
templateUrl: "home.ejs"
})
.when("/profile", {
templateUrl : "/pages/profile.ejs"
})
.when("/settings", {
templateUrl : "settings.ejs"
});
});
/* Rest of the code */
But the problem is that this code prints the following error in the console.. :
I made sure that the file exists in the pages directory.. I am using node.js as the backend. Nothing works.. What should I do?
This is my root directory, here the profile.ejs is located inside the pages directory:
Remove the leading "/" from your path, i.e.
templateUrl : "pages/profile.ejs"
Also try hard-reloading your google chrome before testing after you make that change.
I have my index.html page in which an ng-view is implemented. The same applies to the sidebar, which also linkes to 3 pages (main.html, product.html and customer.html).
I need to change the class of sidebar.html for example when I'm in the customer.html page.
I tried to do it from the customerController but it had no result. As I understand it, because the sidebar.html is controlled by MyController
Can anyone guide me?
Thank you
Here are the relevant parts of the code:
index.html
<html ng-app="appDataBoard">
<body ng-controller="MyController" >
<!-- SIDEBAR-->
<div ng-include="'./template/sidebar.html'" ></div>
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
<div class="col-md-12 column sortable">
<div ng-view></div>
</div>
</div>
</body>
</html>
sidebar.html
<div class="page-sidebar-wrapper">
<ul >
<li class="nav-item start open">
</li>
<li class="nav-item ">
</li>
<li ng-class="nav-item">
</li>
</ul>
</div>
<!-- END SIDEBAR -->
routing.js
var dbApp = angular.module('appDataBoard', ['ngRoute','ngMaterial', 'ngMessages', 'material.svgAssetsCache']);
// configure our routes
dbApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/main', {
templateUrl : 'template/main.html',
controller : 'mainController'
})
// route for the about page
.when('/product', {
templateUrl : 'template/product.html',
controller : 'productController'
})
// route for the contact page
.when('/customer', {
templateUrl : 'template/customer.html',
controller : 'customerController'
});
});
Can anybody help me.
In index.html, I run ng-view, which code corresponds to Routing.js file. The menu calls two pages main.html and product.htm.
main.htm, has included another page called filterApp.html.
I need to hide a page element that is embedded main.html the filterApp.html. I have not succeeded.
If I take the include and put the code directly into main.html works. I read that ng-ng-hide and include not working properly. Is there anything I can do. I need to have it in separate files.
Here is the code of the pages.
Thank you so much
Index.html
<html ng-app="appDataBoard">
<body ng-controller="mainController" >
<ul >
<li class="nav-item start open">
</li>
<li class="nav-item ">
</li>
</ul>
<div class="col-md-12 column sortable">
<div ng-view></div>
</div>
</body>
</html>
Main.html
<div class="jumbotron text-center">
<h1>main Page</h1>
<p>{{ message }}</p>
</div>
<!-- INCLUDE FILTER APPS-->
<div ng-include="'./template/filterApp.html'" ></div>
Product.html
<div class="jumbotron text-center">
<h1>Product Page</h1>
<p>{{ message }}</p>
p ng-hide="hide1">este parrafo se debe borrar</p>
</div>
filterApp.html
<div ng-hide="hselect1" >
<select id="select-1" multiple="multiple" onchange="RecargaSelectBU()" >
</select>
</div>
Routing.js
// create the module and name it dbApp
var dbApp = angular.module('appDataBoard', ['ngRoute']);
// configure our routes
dbApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/main', {
templateUrl : 'template/main.html',
controller : 'mainController'
})
// route for the about page
.when('/product', {
templateUrl : 'template/product.html',
controller : 'productController'
})
});
// create the controller and inject Angular's $scope
dbApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Pagina principal';
$scope.hselect1 = true;
});
dbApp.controller('productController', function($scope) {
$scope.message = 'Pagina de producto.';
$scope.hide1 = true;
});
Check this plunker link. Its working fine for me.
https://embed.plnkr.co/RZDGdnFEq1SmT7F3ncZa/
After reading this I was able to fix the # problem in my URL. It works fine without the URL.
In index.html
<base href="/app-name/">
My URL :
http://localhost:7001/app-name
Before applying base URL I had
http://localhost:7001/app-name/#/home
1) When I type this in browser how does the URL change to http://localhost:7001/app-name/home?
I was able to change and navigate to diff levels of application when using #. But, after applying base in index.html I am unable to perform this and the browser throws a 404. Any suggestions on how to get this working?
Here is my navigation page
<div class='navbar-header'>
<a class='navbar-brand' href="home"><img alt='img' src="appName/images/logo.PNG" type="image/png" height="30"></a>
<div class="navbar-header">
<a class="navbar-brand" href="home"><b>App - Name</b></a>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li> <span class="glyphicon glyphicon-home"></span> Home</li>
<li> <span class="glyphicon glyphicon-list-alt"></span> YYYYYYYYY </li>
<li> <span class="glyphicon glyphicon-hand-up"></span> XXXXXXXX</li>
</ul>
</div>
Router looks like this.
'use strict';
appName.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl : 'appName/models/scheduler/home.html',
controller : 'mainController'
})
.when('/logs', {
templateUrl : 'appName/models/logs/logs.html',
controller : 'logsController'
})
.when('/info', {
templateUrl : 'appName/models/quick_info/info.html',
controller : 'yyyyController'
})
.otherwise({redirectTo:'/home'});
// $locationProvider.html5Mode(true);
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Thanks for taking time to look into this.
I am developing a web application using angular js & spring-mvc.
In the header of my application
header.jsp
<nav class="navbar navbar-default navbar-fixed-top" >
<div class="container">
<div class="navbar-header" >
<a class="navbar-brand"
href="<c:url value="/home"/>" >Pipeline Tracker
</a >
</div >
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li ui-sref-active="active">
<a ui-sref="empty">PIPELINE</a>
</li>
<li ui-sref-active="active">
<a ui-sref="employees">ADMIN</a>
</li>
</ul>
</div>
</div>
</nav>
app.js
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('empty', {
url: '/',
view: {
'main':{
templateUrl: 'views/templates/empty.html',
controller: 'EmptyController'
}
}
})
.state('employees',{
url: '/admin/employees',
view: {
'main':{
templateUrl: 'http://localhost:8070/PipelineClient/views/templates/employee.jsp',
controller: 'TestController'
}
}
});
$urlRouterProvider.otherwise('/');
});
I am unable to set the templateUrl property, so my app navigates perfectly. I can see url changing accordingly to '#/' and '#/admin/employees' but nothing is displayed. There is no error in the console also.
I tried to set templateUrl two ways. One with html and another with jsp using context url. None of them working.
I removed routing and checked the data loads pefectly. No issue with data loading.
for loading dependencies:
var app = angular.module('pipeline', [
'ngResource',
'infinite-scroll',
'angularSpinner',
'jcs-autoValidate',
'angular-ladda',
'mgcrea.ngStrap',
'toaster',
'ngAnimate',
'ui.router'
]);
index.jsp
<div class="container main-content">
<div ui-view="main"></div>
</div>
How to set this templateUrl property? I am relatively new to angular, so do let know if you need any more info on this.
I believe it's a syntax error, should be "views" and not "view".
.state('employees',{
url: '/admin/employees',
views: { <--- change view to views
'main':{
templateUrl: 'http://localhost:8070/PipelineClient/views/templates/employee.jsp',
controller: 'TestController'
}
}
});
I'm not familiar with the "view:" syntax you're using. does it work if you do:
.state("test", {
templateUrl: "views/templates/empty.html",
controller: 'EmptyController'
}
http://localhost:8070/#/test