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.
Related
I am currently studying AngularJS and as I am learning I am trying to implement.
Currently, I am studying the routeProvider aspect. I have tried to incude what I have learned but for some reason the route provider isnt loading the required templateUrl.
Please see below.
<body ng-app="myapp">
<ul>
<li>HOME</li>
<li>SECOND</li>
</ul>
<div ng-view></div>
<script type="text/javascript">
var myapp = angular.module("myapp", ['ngRoute']);
myapp.config(function ($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'main.html',
controller: 'maincontroller'
})
.when('/second', {
templateUrl: 'second.html',
controller: 'maincontroller'
})
});
myapp.controller("maincontroller", ["$scope", function($scope){
$scope.title1 = "main page";
$scope.title2 = "second page";
}])
</script>
When I click on the second li element to try and load the second page, nothing happens. Is anyone able to identify what I am doing wrong here?
I am following the course: "Learn & Understand AngularJS" on Udemy.
You can use routerLink="/second" routerLinkActive = "active"
Like this.
<li><a routerLink="/second" routerLinkActive = "active">SECOND</a></li>
You also need to have a routes defined in app.component.ts.
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('');
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 new to Angular and I'm trying to build a personal site using routes to change the views.
I've been able to get the nav to change class to active depending on what's clicked, but now the problem I'm having is that the main view doesn't load when the page loads (everything works on click though).
If anyone can help, I'd really appreciate it. If I've made any dumb errors, please let me know.
Also, I've got the view outside the controller div, should it be inside?
Thanks
HTML:
'use strict';
angular.module('myApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
var myApp = angular.module('myApp', []);
myApp.config(function($routeProvider) {
$routeProvider
.when('/main', {templateUrl:'views/main.html', controller:'WidgetsController'})
.when('/about', {templateUrl:'views/about.html', controller:'WidgetsController'})
.otherwise({
redirectTo: '/'
});
});
myApp.controller('WidgetsController', function($scope) {});
myApp.controller('MyCtrl', function($scope, $location) {
$scope.isActive = function(route) {
return route === $location.path();
}
});
<body ng-app="myApp" class="ng-scope">
<div ng-controller="MyCtrl" class="ng-scope">
<ul class="nav nav-pills pull-right">
<li ng-class="{active:isActive('/main')}">Main</li>
<li ng-class="{active:isActive('/about')}">About</li>
</ul> </div> </div> </div>
<div ng-view=""></div>
Please see below working example
you've got twice definition for myApp make sure as well that you've all reference to all angular modules in your 'home page'
'use strict';
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/main', {
templateUrl: 'views/main.html',
controller: 'WidgetsController'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'WidgetsController'
})
.otherwise({
redirectTo: '/main'
});
});
myApp.controller('WidgetsController', function($scope) {});
myApp.controller('MyCtrl', function($scope, $location) {
$scope.isActive = function(route) {
return route === $location.path();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.min.js"></script>
<body ng-app="myApp" class="ng-scope">
<div ng-controller="MyCtrl" class="ng-scope">
<ul class="nav nav-pills pull-right">
<li ng-class="{active:isActive('/main')}">Main
</li>
<li ng-class="{active:isActive('/about')}">About
</li>
</ul>
</div>
<div ng-view=""></div>
<script type="text/ng-template" id="views/main.html">
<h1>Main View</h1>
</script>
<script type="text/ng-template" id="views/about.html">
<h1>About View</h1>
</script>