I am really new with development. I am learning AngularJS.
I am having an issue with yo angular. It's generating the app, grunt serve is running locally. But when i click the about button it does not go to about page
Here is some code (these are generated by angular generator).
index.html
div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li><a ng-href="#/about">About</a></li>
<li><a ng-href="#/">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
app.js ( from scripts folder )
'use strict';
angular
.module('coolAppApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about'
})
.otherwise({
redirectTo: '/'
});
});
Found the solution
it works with putting ! before /
which means <li><a ng-href="#!/about">About</a></li>
Related
Trying to use ngRoute to route between two pages, main.html and second.html. Using angular version 1.7. The index.html default to the correct main.html but will not route to second.html when clicking the link titled Second. This is the page I'm trying to do this on.
This is the code in the app.js file.
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',
function($scope, $log) {
}]);
myApp.controller('secondController', ['$scope', '$log',
function($scope, $log) {
}]);
The html has these divs.
<div class="container">
<div ng-view></div>
</div>
I was able to fix the issue changing the href to ng-href inside the header tag and by using a value of #! instead of #. Below is my new nav links inside my header.
<ul class="nav navbar-nav navbar-right">
<li><a ng-href="#!"><i class="fa fa-home"></i> Home</a></li>
<li><a ng-href="#!/second"><i></i> Second</a></li>
</ul>
I simply replicated what I saw done here.
This question has been answered before but potentially for an earlier version of Angular. I'm working in Angular 1.6.1. The HTML5 isn't adding the #! to the URL but my partials aren't loading.
HTML:
<head>
...
<base href="localhost/test/angular/Jan102017">
...
<head>
<body>
...
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i></i> Second</li>
</ul>
...
JavaScript:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
.when('#/', {
templateUrl: 'pages/main.html',
controller: 'mainController'
})
.when('#/second', {
templateUrl: 'pages/second.html',
controller: 'secondController'
})
.when('#/second/:num', {
templateUrl: 'pages/second.html',
controller: 'secondController'
})
$locationProvider.html5Mode(true);
}]);
change all of these when('#/' ... to when('/' ... Since you use html5Mode true
And In angular 1.6 version $locationProvider.hashPrefix('!'); is the default so change it like below
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('');
I am trying to implement page routing in Angular JS but its not working here.
Here is code:
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
debugger;
$routeProvider
.when('/home', {
templateUrl: 'EmployeeHome.aspx',
controller: 'EmpCtrl'
})
.when('/about', {
templateUrl: 'ContactUs.html',
controller: 'EmpCtrl'
})
.when('/contact', {
templateUrl: 'About.html',
controller: 'EmpCtrl'
})
.otherwise({
redirectTo: '/home'
});
});
app.controller('EmpCtrl', function ($scope, $http)
{
$scope.message = "Welcome friends.";
}
Here is my UI page
EmployeeHome.aspx-
<head runat="server">
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/jquery-1.8.3.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="script.js"></script>
</head>
<header>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-shield"></i>About Us</li>
<li><i class="fa fa-comment"></i>Contact Us</li>
</ul>
</header>
I think you forgot a '/' in all your href. So something like this should work :
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-shield"></i>About Us</li>
<li><i class="fa fa-comment"></i>Contact Us</li>
Hard to tell without runnable example, I don't remember if it's required now but I pass the '$routeProvider' and function in like this:
angular.module('staffApp').config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'EmployeeHome.aspx',
controller: 'EmpCtrl'
}).
...
i was implementing NgRoute, but somewhere in angularjs tutorials they introduce ui-route, i watch some video tutorials about this ui-route, i find it cool and more fluent than the mg-route, so i went to ui-route github page where i've downloaded the js file, i have add it in scripts references, and start following there guide, but i haven't successfully get it to work, and without any console errors, when i go to site web it shows just the index.html !!
App.js
var app = angular.module("KhbyraApp", ['ui.router', 'ngCookies']);
app.config(function ($stateProvider, $urlRouteProvider, $httpProvider) {
$httpProvider.interceptors.push('httpInterceptor');
$urlRouteProvider.otherwise("/login");
$stateProvider
.state('login', {
url: "/login",
templateUrl: "app/views/login.html",
controller: "LoginController"
})
.state('register', {
url: "/register",
templateUrl: "app/views/register.html",
controller: "RegisterController"
})
.state('articles', {
url: "/articles",
templateUrl: "app/views/articles.html",
controller: "RegisterController"
});
index.html
//<html>...
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a ui-sref="articles">Home</a></li>
<li><a ui-sref="login">Login</a></li>
<li><a ui-sref="register">Register</a></li>
<li ng-if="isAuth" ng-click="LogOut()">LogOut</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div ui-view></div>
//script....
</body>
There is a working (simplified) plunk, showing that this setting is working.
The only (but essential) change is the name of the '$urlRouteProvider' which should be $urlRouterProvider (the router instead of route)
function( $stateProvider , $urlRouterProvider) {
$urlRouterProvider.otherwise("/login");
I just start to learn angularJs, and was trying to configure the partial page with angular route service.
It worked with the hash format, however，when I tried to get rid of hash, the routeProvider stopped working.
JS
app.config(function($routeProvider,$locationProvider){
$locationProvider.html5Mode(true);
$routeProvider.when("/", { templateUrl: "/index.html" }).
when("/about", { templateUrl: "/partials/about.html" }).
when("/contact", { templateUrl: "/partials/contact.html" }).
otherwise({ redirectTo: '/' });
});
HTML
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Contact</li>
</ul
Can someone enlighten me?
Try to change
$locationProvider.html5Mode(true);
to
$locationProvider.html5Mode(true).hashPrefix('!');
And add
<base href="/">
in a document "head" section.