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('');
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.
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>
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 am currently converting an AngularJS HTML app to ASP.NET MVC and I have laid out pretty much everything and but when the page loads I see the controller(dashboard.js) but its not firing any function from the dashboard controller here is what I'm doing:
in my _layout.cshtml I have the following:
<html ng-app="app_angular" >
<head>
<script src="~/script/angular/angular.js"></script>
<script src="~/script/angular/angular-route.js"></script>
<script src="~/script/angular/angular-resource.js"></script>
<script src="~/script/angular/angular-animate.js"></script>
<script src="~/script/angular/angular-cookies.js"></script>
<script src="~/script/js/jquery.min.js"></script>
<script src="~/script/js/bootstrap.min.js"></script>
<script src="~/Scripts/myapp.js"></script>
<script src="~/Scripts/controllers/dashboard.js"></script>
<script src="~/Scripts/routes.js"></script>
</head>
<body>
<ng-view class="fx fx-slide page"></ng-view>
<div class="container">
<h3 class="row title">
<div class="col-xs-6">Dashboard</div>
<div class="col-xs-6 text-right text-gray">{{ today | date:'MMMM d, y' }}</div>
</h3>
</div>
<section ng-repeat="template in templates">
<ng-include src="template"></ng-include>
</section>
<div class="container" ng-init="init()">
<!-- Buttons -->
</body>
</html>
myapp.js
var app_angular = angular.module('app_angular', ['ngCookies', 'ngRoute', 'ngResource', 'ngAnimate']);
dashboard.js
'use strict';
app_angular
.controller('dashboard', function ($rootScope, $scope) {
debugger
$scope.today = new Date();
/* set template subviews */
$scope.templates = {
stream: "../../views/templates/firstqtr.html",
modal: "../../views/templates/secondqtr.html",
loan: "../../views/templates/thirdqtr.html"
};
});
routes.js(first approach: does not work)
app_angular
.config(function($routeProvider, $httpProvider) {
$routeProvider
/* dashboard */
.when('/', {
controller: 'dashboard',
templateUrl: '../../views/home/index'
})
.when('/home/about', {
controller: 'dashboard',
templateUrl: '../../views/home/about'
})
.otherwise({
redirectTo: '/'
});
});
routes.js(second approach: does not work)
app_angular
.config(['$routeProvider', function ($routeProvider)
{
$routeProvider
.when('/', { templateUrl: '/home/index', controller: 'dashboard' })
.when('/', { templateUrl: '/home/about', controller: 'dashboard' })
.otherwise({ redirectTo: '/home' });
}])
What else I should be doing any help?
Assuming that /home is the path of your MVC page
you should change your angular routing to use path's that are
relative to your page.
add a view templates that are loaded into your
page
the angular routing below would:
load your mvc page /home/index and inject the template dashboard.html into ng-view element
(MVC controller Home with Action Index is required)
load your mvc page /home/index and inject the template about.html into ng-view element
Routes:
app_angular
.config(function ($routeProvider, $httpProvider) {
$routeProvider
/* dashboard */
.when('/', {
controller: 'dashboard',
templateUrl: '../../views/templates/dashboard.html'
})
.when('/about', {
controller: 'dashboard',
templateUrl: '../../views/templates/about.html'
})
.otherwise({
redirectTo: '/'
});
});
Remark:
You should rethink your approach of mixing MVC and anjularjs that not a good approach.
Try renaming your _layout.cshtml into index.html and start with a plain (ASP.NET MVC free) SPA.
Files:
index.html
views\dashboard.html
views\about.html
Routes:
app_angular
.config(function ($routeProvider, $httpProvider) {
$routeProvider
/* dashboard */
.when('/', {
controller: 'dashboard',
templateUrl: 'views/dashboard.html'
})
.when('/about', {
controller: 'dashboard',
templateUrl: '/views/about.html'
})
.otherwise({
redirectTo: '/'
});
});
I have a function to include html files on click. The problem is that it doesn't work when under ng-view (using $routeProvider), while it works fine outside of ng-view. I suspect that moving the include function from controller to service might help, but I am unsure how to do that as I'm new to Angular.
HTML when it works:
<body ng-app="MyApp">
<ng-include src="'views/main.html'" ng-controller="mainCtrl"></ng-include>
</body>
HTML when it doesn't work:
<body ng-app="MyApp">
<div ng-view></div>
</body>
main.html:
<div ng-controller="mainCtrl">
<button ng-click="include('temp1.html')">Block 1</button><i ng-click="delete('temp1.html')">DEL 1</i>
<button ng-click="include('temp2.html')">Block 2</button><i ng-click="delete('temp2.html')">DEL 2</i>
<button ng-click="include('temp3.html')">Block 3</button><i ng-click="delete('temp3.html')">DEL 3</i>
<div ng-repeat="template in templates">
<div ng-include="template.url">Content from blocks goes here</div>
</div>
</div>
APP.js:
angular
.module('MyApp', [
'ngResource',
'ngRoute',
'ui.bootstrap'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'mainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
mainCtrl:
angular.module('MyApp').controller('mainCtrl', function ($scope) {
$scope.templates=[];
$scope.include = function(templateURI) {
var template={url:templateURI};
$scope.templates.push(template);
console.log($scope.templates);
}
$scope.delete= function(url){
removeEntity($scope.templates,url);
}
var removeEntity = function(elements,url){
elements.forEach(function(element,index){
if(element.url===url){
elements.splice(index,1);
}
})
}
The above "include" function does not work with $routeProvider. It works fine when used outside the ng-view, without $routeProvider. Would moving the 'include' function from mainCtrl to the serrvice would do the trick?
Any tips?
Thanks
your <ng-include src="'view/main.html'" > view/main.html...
and in ur route there is templateUrl: 'views/main.html'..
you should correct ur template url to view/main.html..
In main.html
<div ng-controller="MyController">
and in app.js
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'mainCtrl'
})
different controllers....