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.
Related
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>
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('');
update: Problem turns out to be accidental clear of all modules in the service.
This is the commit that works, repo. And this is the code that causes the problem, link. I still have no idea what's going wrong here.
After some trials, I think that it is because I use promise to fetch data. I also use d3Promise in the app, and get the same bug, the directive not loaded again (and this time, menu directive also fails).
A strange bug.
After I added menu directive, the map directive is not loaded into to the page. It was in the page before that.
no error, both in chrome console and grunt server.
I spent some time debugging. I found that the $routeProvider is not working. It only changes the url, but not loads the partials and binds controllers of partials.
Below is the code:
in index.html:
<body ng-app="SFM">
<!-- Add your site or application content here -->
<div class="container">
<div class="header">
<h3 class="text-muted">SF-Muni</h3>
<a ng-href="#/about" class="btn">about</a>
</div>
<div menu></div>
<div ng-view></div>
</div>
<!-- other vender files -->
<script src="scripts/app.js"></script>
<!-- utilities -->
<!-- services -->
<script src="scripts/services/d3service.js"></script>
<script src="scripts/services/muniService.js"></script>
<!-- controllers -->
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<!-- directives -->
<script src="scripts/directives/menu.js"></script>
<script src="scripts/directives/map.js"></script>
</body>
app.js:
'use strict';
angular
.module('SFM', [
'ngResource',
'ngRoute',
'd3'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
As far as I can tell you forgot to request the $routeProvider to be injected into the config function.
Try this:
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
Below is the html and cakephp code.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
// configure the routes
$routeProvider
.when('/', {
// route for the home page
templateUrl: 'home.html',
controller: 'homeController'
})
.when('/about', {
// route for the about page
templateUrl: 'about.html',
controller: 'aboutController'
})
.when('/contact/', {
// route for the contact page
templateUrl: 'contact.html',
controller: 'contactController'
})
.otherwise({
// when all else fails
templateUrl: 'routeNotFound.html',
controller: 'notFoundController'
});
});
</script>
</head>
<body ng-controller="homeController">
<header>
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<div id="main">
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</body>
</html>
Below codes are on default.ctp using cakephp3
<ul>
<li>About</li>
<li>Contact Us</li>
</ul>
Clicking on #about url "http://localhost/finalcake3/pages/about"
Clicking on #contact url "http://localhost/finalcake3/pages/contact-us"
But adding the script below will not work using angular js in cakephp.
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
// configure the routes
$routeProvider
.when('/about', {
// route for the about us page
templateUrl: 'http://localhost/finalcake3/pages/about',
controller: 'AboutCNTRL'
})
.when('/contact', {
// route for the contact us page
templateUrl: 'http://localhost/finalcake3/pages/contact-us',
controller: 'ContactCNTRL'
})
});
</script>
I want my existing cakephp website to use angular js. Is there any codes to include I need in-order this to function.
first question ? why do you use AngularJs like this ? You can do an APIrest with CakePhp and retrieve easily Json Datas with Angular when you call the url of your cakephp project which return Json data. Better to use Angular like this.
Then, you have just to create your html template with your {{datas}} and call the json datas via your cakephp urls.
API rest CakePhp2
http://book.cakephp.org/2.0/fr/development/rest.html
API rest CakePhp3
http://book.cakephp.org/3.0/fr/development/rest.html
templateURL: is expecting a path to your template partial files in the directory. Try changing the path to whatever the relative path should be. A url with "/" prefix is relative to the domain, without the "/" prefix it will be relative to your base url. The absolute paths you are pointing to are resolved via CakePHP so Angular doesn't know what to to with those paths as they don't point directly to a partial template file.
so...
templateUrl: '/finalcake3/pages/about.html',
or
templateUrl: 'finalcake3/pages/about.html',
I'm sure the answer is somewhere, but how do i link the same component (Navbar logo) to different pages depending on the URL. I would like to link /about when Url= /home and then /home when Url= /about.
app.js:
angular.module('myApp', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainCtrl'
})
.state('about', {
url: '/about',
templateUrl: 'app/about/about.html',
controller: 'AboutCtrl'
})
.state('work', {
url: '/work',
templateUrl: 'app/work/work.html',
controller: 'WorkCtrl'
});
$urlRouterProvider.otherwise('/');
});
home.html
<div class="page">
<div ng-include="'components/navbar/navbar.html'"></div>
</div>
navbar.html
<nav class="navbar" ng-controller="NavbarCtrl">
<h1>title</h1>
</nav>
about.html
<div class="page">
<div ng-include="'components/navbar/navbar.html'"></div>
</div>
NavbarCtrl
* not sure what to do here, add a directive use ui.router use $location ??*
Hope someone can help, I've been thinking about it all week.
Not sure if I understood you correctly, but wouldn't ng-show fit your needs? ng-show
You could check in it what is the location at the moment and show proper url depending on it.
You answered your own question I think. I would use ngRoute and $location and I would probably create a directive for it.