I have a very simple Angular application that works as expected in Firefox and Chrome, but does not work in IE.
index.html is like this:
<!DOCTYPE html>
<html ng-app="angularFormsApp">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="app/AngularFormsApp.js"></script>
<script src="app/EmployeeForm/efController.js"></script>
<script src="app/EmployeeForm/efDirective.js"></script>
<script src="app/EmployeeForm/efService.js"></script>
</head>
<body ng-controller="efController" class="container">
<h1>Start Page</h1>
<div ng-view>
</div>
</body>
</html>
my AngularFormsApp.js is defined like this:
var angularFormsApp = angular.module('angularFormsApp', ["ngRoute"]);
angularFormsApp.config(function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "app/Home.html",
controller: "HomeController"
})
.when("/newEmployeeForm", {
templateUrl: "app/EmployeeForm/efTemplate.html",
controller: "efController"
})
.otherwise({
redirectTo: "/home"
});
});
angularFormsApp.controller("HomeController",
function ($scope, $location) {
$scope.addNewEmployee = function () {
$location.path('/newEmployeeForm');
};
});
my Home.html only contains a button:
<input type="button" class="btn btn-primary" value="Add New Employee" ng-click="addNewEmployee()" />
Upon starting the application up, index.html should redirect to
http://localhost:65294/index.html#/home
and I should see the "Add New Employee" button which I see in Chrome and Firefox, but not in IE. When I start the application in IE, the URL displayed is
http://localhost:65294/index.html
and I do not see the button. So it seams as though the redirect does not work, but only in IE. Even if I type the correct URL in the browser's address bar, I still don't see the button.
So what's different for IE?
Related
I have been trying to make a angularjs application where I want to route to a different html page on a button click. But is not working for some unknown reasons.
My html code
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="Controller">
<h1>Plunkr Example</h1>
<button ng-click="changeview()">ClickMe</button>
<h1>MainPage</h1>
</body>
</html>
My Code
var app = angular.module("app", ['ngRoute'])
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/Details', {
templateUrl: 'details.html'
}).
when('/Main', {
templateUrl: 'main.html'
}).
otherwise({
redirectTo: '/Main'
});
}]);
app.controller("Controller", function($scope,$routeParams,$location){
//$scope.ProductId = $routeParams.id;
$scope.changeview = function () {
console.log('in function changeview');
$location.path('/Details');
}
})
Here is my plunkr
Please help.
You have missed to add the ng-view directive. It needs to be included for the routing to be able to rendered the templates
<div ng-view></div>
Working plunker
You need to have ng-view directive in index.html
<div class="viewWrapper">
<div ng-view></div>
</div>
WORKING DEMO
So I have a frustrating problem.. yesterday I created a simple skeleton page for starting an angularJS app. It loads several common items (header, sidebar) using ui-router. It was working beautifully yesterday, and today, I attempt to load the page and keep working on my project and nothing. Total blank page. All the content for the project is being loaded locally.
I've tried two different browsers, FF and chrome, and in neither browser do I get any errors in the console.
Here's my code for review.
HTML
<!DOCTYPE html>
<html ng-app="ngSearchApp">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="assets/css/styles.css" />
</head>
<body>
<div id="contentWrapper">
<div class="col-xs-12">
<div data-ui-view="header"></div>
</div>
<div class="col-xs-8">
<div data-ui-view="main"></div>
</div>
<div class="col-xs-4">
<div data-ui-view="sideBar"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.controllers.js"></script>
</body>
</html>
partial-header.html & partial-sidebar.html
<img src="/path/to/image" />
app.module.js
'use strict';
var ngSearchApp = angular.module('ngSearchApp', ['ui.router']);
ngSearchApp.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('index', {
url: '/',
template: '',
views: {
'header': {
//controller: 'headerCtrl',
templateUrl: 'app/shared/header/partial-header.html'
},
'main': {
//controller: 'mainCtrl',
templateUrl: 'app/components/search/partial-main.html'
},
'sideBar': {
//controller: 'sidebarCtrl',
templateUrl: 'app/shared/sidebar/partial-sidebar.html'
},
}
});
}]);
controller.js
//Controllers
ngSearchApp.controller('searchBtnCtrl', ['$scope', function ($scope) {
}]);
ngSearchApp.controller('resultsCtrl', ['$scope', function ($scope) {
}]);
At the moment, the header and sidebar html files just have placeholder images.
So this is baffling to me why this would work just fine yesterday when I use the view in firefox function out of visual studio, but today, absolutely nothing. I've also cleared my cache multiple times but still no joy.
It feels like it's just skipping over the stateProvider and not bothering to load any of the views.. but that's just a guess. I'd appreciate any more educated suggestions.
Thanks!
While i am trying to click on first and second page its not showing any thing, i have wasted lot of time on this but no output is coming, Files script.js index.html first.html and second.html
script.js
angular.module('RoutingApp', ['ngRoute'])
.config( ['$routeProvider', function($routeProvider) {
$routeProvider
.when('/first', {
templateUrl: 'first.html'
})
.when('/second', {
templateUrl: 'second.html'
})
.otherwise({
redirectTo: '/'
});
}]);
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="RoutingApp">
<h2>AngularJS Routing Example</h2>
<p>Jump to the first or second page</p>
<div ng-view>
</div>
</body>
</html>
first.html
<h2>This is the first page.</h2>
second.html
<h2>This is the second page.</h2>
Anchor(a) tag needs to be changed to match them with route URL. Those should have / in them.
first
or
second page
My dir's structure is like:
---/public
|
---index.html
---shop.html
|
---/js
|
---index.js
---index_controller.js
---/lib
---/css
---/plugins
|
---...
my index.html:
<!doctype html>
<html class="signin no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="Flat, Clean, Responsive, application admin template built with bootstrap 3">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>Index</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/themify-icons.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/skins/palette.css">
<link rel="stylesheet" href="css/fonts/font.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/lib/angular/angular.js"></script>
<script src="js/lib/angular/angular.min.js"></script>
<script src="js/lib/angular/angular-route.js"></script>
<script src="js/lib/angular/angular-route.min.js"></script>
<script src="js/index_controller.js"></script>
<script src="js/index.js"></script>
<script src="plugins/modernizr.js"></script>
</head>
<body class="bg-primary" ng-app="myApp.index">
<div class="cover" style="background-image: url(img/cover3.jpg)"></div>
<div class="overlay bg-primary"></div>
<div class="center-wrapper">
<div class="center-content">
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<section class="panel bg-white no-b">
<ul class="switcher-dash-action">
<li class="active">Index</li>
</ul>
<div class="p15" ng-controller="IndexCtrl">
<form role="form" >
<div >
<button class="btn btn-primary btn-lg btn-block" ng-click='testRoute()'>
TestRoute
</button>
</div>
</form>
</div>
</section>
<p class="text-center">
Copyright ©
<span id="year" class="mr5"></span>
</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var el = document.getElementById("year"),
year = (new Date().getFullYear());
el.innerHTML = year;
</script>
</body>
</html>
And shop.html renders the following: (only for test use):
SHOP
And index_controller.js is :
function IndexCtrl($scope, $http, $location, $route, $window) {
$scope.testRoute = function() {
console.log(">>>TestRoute>>>");
$location.url('/shop');
}
}
function ShopCtrl() {
console.log("ShopCtrl");
}
And index.js:
'use strict';
//Angular-js
var module = angular.module('myApp.index', ['ngRoute']);
module.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/shop', {templateUrl: 'shop.html', controller: ShopCtrl
});
}]);
/*My Controllers*/
module.
controller('IndexCtrl', ['$scope', '$http', '$location', '$route', '$window', IndexCtrl]);
module.
run([
'$rootScope', '$location',
function($rootScope, $location) {
$rootScope.$on('$routeChangeStart', function(event, next, current) {
var nextTemplate = next.templateUrl;
var nextController = next.controller;
console.log("location.path:" + $location.path());
console.log('Template Starting to leave %s to go to %s\n', "", nextTemplate);
console.log('Controller Starting to leave %s to go to %s\n', "", nextController);
});
}
]);
And when I type "http://localhost:6001/index.html" in Chrome's address bar, it renders:
After clicking Test Route button, it changes to:
Only the url address changes, and it seems strange:
"http://localhost:6001/index.html#/shop"
Whereas I need
"http://localhost:6001/shop"
Chrome's console shows:
My problem is: how to render shop.html and how to navigate to /guoguo path properly, using code like:
$routeProvider.when('/shop', {templateUrl: 'shop.html', controller: ShopCtrl
});
I am pretty new to Angular. Maybe I am not thinking in the angularjs approach. Thanks for your points.
It is a mix of issues for your .html# being shown. Try this.
1: Add in the first line of head tags
<head><base href="/">
...
</head>`
2: Use this $locationProvider.html5Mode(true);
app.config(function($routeProvider,$locationProvider){
$routeProvider
.when('/',{
templateUrl: 'views/home.html',
controller:'homeCtrl'
})
.when('/about',{
templateUrl: 'views/about.html',
controller:'aboutCtrl'
})
.otherwise({
redirectTo: '/home'
});
$locationProvider.html5Mode(true);
});
This should remove the # from the page. But in your server make index.html as the default file serving for the path http://localhost:6001/ then it will load http://localhost:6001/index.html as http://localhost:6001/
I finaly get to know that AngularJS is a SPA(Single Page App) based framwork. If I simply jump to another html, the page will load another ng-app, which has no relation to origin app(the bootstrap has been restarted).
What solution I take is to use ng-view inside the index html. It allows to load different ng-view(which is in '<div></div>' from other html file), and config the routeProvider by declaring template url and controller.
I will paste the complete code later, thanks for you all !!!
I have shown a simplified version of my problem below:
The directive 'name' is not understood when it is in the view 'loginView.html', however it works fine when It's in the main page 'index.html'
loginView.html
<p>Welcome : {{name}}</p>
<input type="text" data-ng-model="name"><br>
<button type="submit" data-ng-click="loginUser()">Login</button>
index.html
<!doctype html>
<html data-ng-app="vla">
<head>
<title>Video Learning application</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class = "navBar">
<div class = "leftButton"></div>
<div class = "title">VLA</div>
<div class = "rightButton"></div>
</div>
<div data-ng-view=""></div>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="controllers/controllers.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
var app = angular.module('vla', ['ngRoute']);
app.config(function ($routeProvider){
$routeProvider
.when('/view1',
{
controller: 'controllers/controllers.js',
templateUrl: 'partials/loginView.html'
})
.otherwise({ redirectTo: '/view1' });
});
controller.js
app.controller('loginController', function ($scope)
{
$scope.loginUser = function () {
alert("test");
}
});
The {{name}} just prints itself out when in the view 'loginView', but works fine and prints he contents of the input field when placed into index.html.
I'm very new at this and would appreciate any help.
Thanks in advance
You should write controller name but not path in controller option of routeProvider:
$routeProvider
.when('/view1',
{
controller: 'loginController',
templateUrl: 'partials/loginView.html'
})
.otherwise({ redirectTo: '/view1' });
And attach file with controller (controllers/controllers.js) with tag <script>.
Just realised the problem was the ordering of the script declarations in the index.php page
The app reference should come before the controller:
<script src="app.js"></script>
<script src="controllers/controllers.js"></script>