I am having an issue using templateURL.
I have the following code
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<title>Angular Demo</title>
</head>
<body>
<div class="container">
<ul class="nav nav-pills">
<li>Home</li>
<li>About</li>
</ul>
</div>
<div ng-view>
</div>
<script src="scripts/libraries/angular.min.js"></script>
<script src="scripts/libraries/angular-route.min.js"></script>
<script type="text/javascript">
var testApp = angular.module("testApp", ['ngRoute']);
testApp.config(function($routeProvider)
{
$routeProvider
.when('/',
{
controller: 'TestController',
template: '<h1>HOME</h1>'
})
.when('/about',
{
controller: 'TestController',
templateURL: 'partials/about.html'
})
.otherwise ({redirectTo: '/'});
});
var controllers = {};
controllers.TestController = function($scope)
{
$scope.list =
[
{fname: "John", sname: "Doe"},
{fname: "John", sname: "Doe"}
];
};
testApp.controller(controllers);
</script>
</body>
</html>
about.html is in partials folder
template: "HOME" works fine, but templateURL doesn't bind the content of about.html to ng-view.
Let me know if you think I'm missing anything.
Thanks
Use
templateUrl: 'partials/about.html'
Not
templateURL: 'partials/about.html'
http://plnkr.co/LzYn0IxRtkV1xoKpcg5z
Related
I want to use routeProvider in ngRoute in angularjs to view my home.html or delete.html or add.html
app.js
var app = angular.module('MyApp', ['ngRoute']);
MyApp.config([
'$routeProvider',
function($routeProvider) {
$routeProvider
.when('/Add', {
templateUrl: 'html/add.html',
controller: 'AddController'
})
.when('/Edit', {
templateUrl: 'html/edit.html',
controller: 'EditController'
})
.when('/Delete', {
templateUrl: 'html/delete.html',
controller: 'DeleteController'
})
.when('/Home', {
templateUrl: 'html/home.html',
controller: 'HomeController'
})
.otherwise({
redirectTo: '/Home'
});
}
]);
MyApp.controller('AddController', function($scope) {
$scope.message = "In add view"
});
MyApp.controller('DeleteController', function ($scope) {
$scope.message = "In delete view"
});
MyApp.controller('EditController', function ($scope) {
$scope.message = "In edit view"
});
MyApp.controller('HomeController', function ($scope) {
$scope.message = "In home view"
});
index.html
<!DOCTYPE html>
<html ng-app="MyApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- bootstrap css -->
<link href="Content/bootstrap.min.css" rel="stylesheet"/>
<!-- Jquery js -->
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/internal/app.js"></script>
</head>
<body>
<div class="container">
<nav role="navigation" class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">Add</li>
<li class="">Edit</li>
<li class="">Delete</li>
</ul>
</nav>
<div ng-view>
</div>
<!-- Footer -->
<h3 style="margin-top: 40px;" class="text-center text-info">Single Page App</h3>
</div>
</body>
</html>
When I run my application, and click on any of the links, it gives me this url: http://localhost:51285/html/#!Edit
And in the body is this...
HTTP Error 403.14 - Forbidden
The Web server is configured to not list the contents of this directory.
In the sample that I am following, it doesn't have that error it just changes to the message.
you have some mistake in your code :
in your html:using Add
2.in your app.js:instead of MyApp.config or MyApp.controller use app.config and app.controller.MyApp is name of your app but you must use variable that your app stored on it.
follwing will working:
your html:
<!DOCTYPE html>
<html ng-app="MyApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- bootstrap css -->
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<!-- Jquery js -->
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="internal/app.js"></script>
</head>
<body>
<div class="container">
<nav role="navigation" class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">Add</li>
<li class="">Edit</li>
<li class="">Delete</li>
</ul>
</nav>
<div ng-view></div>
<!-- Footer -->
<h3 style="margin-top: 40px;" class="text-center text-info">Single Page App</h3>
</div>
</body>
</html>
your app:
var app = angular.module('MyApp', ['ngRoute']);
app.config([
'$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/Add', {
templateUrl: 'html/add.html',
controller: 'AddController'
})
.when('/Edit', {
templateUrl: 'html/edit.html',
controller: 'EditController'
})
.when('/Delete', {
templateUrl: 'html/delete.html',
controller: 'DeleteController'
})
.when('/Home', {
templateUrl: 'html/home.html',
controller: 'HomeController'
})
.otherwise({
redirectTo: '/Home'
});
}
]);
app.controller('AddController', function ($scope) {
$scope.message = "In add view";
});
app.controller('DeleteController', function ($scope) {
$scope.message = "In delete view";
});
app.controller('EditController', function ($scope) {
$scope.message = "In edit view";
});
app.controller('HomeController', function ($scope) {
$scope.message = "In home view";
});
I hope it could be ralted with configuration. Please check the link below! Angular force an undesired exclamation mark in url
Here, I want to print 'Nerve Center Dashboard' when route is '/' ,'Consumption Dashboard' for '/consumption' and same for every route in <p> tag. Please help
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="assets/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="assets/bootstrap-3.3.7/js/bootstrap-3.3.7.min.js" type="text/javascript"></script>
</head>
<body ng-app="myapp">
<p></p> /------------*text to be printed*-------------/
<ul class="nav nav-tabs">
<li onclick="dashboardTitle('Nerve Center Dashboard')" id="nerve">Nerve Center
</li>
<li onclick="dashboardTitle('Consumption Dashboard')" id="consumptionn">Consumption Analysis
</li>
<li onclick="dashboardTitle('Fulfillment Dashboard')" id="fulfillmentt">Fulfillment Analysis
</li>
<li onclick="dashboardTitle('Inventory Dashboard')" id="inventoryy">Inventory Analysis
</li>
</ul>
<div class='col-xs-12 rmpm' style='height:auto;'>
<div ng-view></div>
</div>
<script>
var myApp = angular.module('myApp', ['ngRoute']);
//routing for tabs
myApp.config(['$routeProvider',
function($routeProvider) {
// $locationProvider.html5Mode(true);
$routeProvider.
when('/', {
templateUrl: 'nervecenter.html',
controller: 'nervecenterController'
}).
when('/fulfillment', {
templateUrl: 'fulfillment.html',
controller: 'fulfillmentController'
}).
when('/consumption', {
templateUrl: 'consumption.html',
controller: 'consumptionController'
}).
when('/inventory', {
templateUrl: 'inventory.html',
controller: 'inventoryController'
}).otherwise({
templateUrl: 'nervecenter.html'
});
}
]);
</script>
</body>
</html>
You just have to create a global variable in angular's scope to initialize the <p> tag based on URL. Initialise the variable in each of the controllers with the desired value. You also have to create a main controller that will be in the scope of <p> tag, so that any initialization on $rootScope will reflect under this main controller.
Main Controller:
var myApp = angular.module('myApp', []);
myApp.controller('mainController', ['$scope','$rootScope' function ($scope,$rootScope) {
});
}]);
First Controller:
myApp.controller('nervecenterController', ['$scope','$rootScope' function ($scope,$rootScope) {
$rootScope.title="Nerve Center Dashboard"
});
}]);
Second Controller:
myApp.controller('consumptionController', ['$scope','$rootScope' function ($scope,$rootScope) {
$rootScope.title="Consumption Dashboard"
});
}]);
HTML:
<body ng-app="myapp" ng-controller="mainController">
<p>{{title}}</p>
Working Plunker: https://plnkr.co/edit/xmLZvHK57GpaIFsHzvvV?p=preview
Im not able to solve this issue, help me! I tried lot of thing but didn't get the proper solution. I tried to debug but i really don't know how to debug angularjs application. is it loading issue or what i dont know?
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config("$routeProvider", function($routeProvider){
$routeProvider.
when("/services",{
templateUrl: "services.html",
controller: "servicesController"
}).
when("/aboutMe",{
templateUrl: "aboutMe.html",
controller: "aboutMeController"
}).
when("/products",{
templateUrl: "products.html",
controller: "productsController"
}).
otherwise({
redirectTo: "/products"
});
});
mainApp.controller("productsController", ["$scope", function($scope){
$scope.msg = "Product scope...";
}]);
mainApp.controller("aboutMeController", ["$scope", function($scope){
$scope.msg = "About Me scope...";
}]);
mainApp.controller("servicesController", ["$scope", function($scope){
$scope.msg = "Services scope...";
}]);
<html>
<head>
<title>Angular JS Example</title>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
</head>
<body>
<div ng-app='mainApp'>
<h2>Select the page:</h2>
<ul>
<li><a href='#products.html'>Products</a></li>
<li><a href='#services.html'>Services</a></li>
<li><a href='#aboutMe.html'>About Me</a></li>
</ul>
<div ng-view></div>
<script type = "text/ng-template" id = 'products.html'>
<h1>Welocme to : {{msg}}</h1>
</script>
<script type = "text/ng-template" id = 'services.html'>
<h1>Welocme to : {{msg}}</h1>
</script>
<script type = "text/ng-template" id = 'aboutMe.html'>
<h1>Welocme to : {{msg}}</h1>
</script>
</div>
<script src = "js/mainApp.js"></script>
<script src = "js/studentController.js"></script>
</body>
</html>
Your forgot the brackets here:
mainApp.config(["$routeProvider", function($routeProvider){
$routeProvider.
when("/services",{
templateUrl: "services.html",
controller: "servicesController"
}).
when("/aboutMe",{
templateUrl: "aboutMe.html",
controller: "aboutMeController"
}).
when("/products",{
templateUrl: "products.html",
controller: "productsController"
}).
otherwise({
redirectTo: "/products"
});
}]);
Also I found a problem with links. This is the right way:
<ul>
<li><a href='#/products'>Products</a></li>
<li><a href='#/services'>Services</a></li>
<li><a href='#/aboutMe'>About Me</a></li>
</ul>
https://plnkr.co/edit/tlVxSy1U4pTzvobQJby6?p=preview
I think you forgot to add the scripts of your controllers in the html body :
<script src = "js/servicesController.js"></script>
<script src = "js/aboutMeController.js"></script>
<script src = "js/productsController.js"></script>
Today i spent a whole day figuring out what was going wrong. For some reason when i click on app.main.foo and using version 0.2.13 of UI-Router this example works. But the exact same thing with version 0.2.15 i have to double click before my header and sidebar are loaded. I could simply use version 0.2.13 as this would fix my problem but is this a know issue or has somethings change since the latest version. This is my demo application :
index.html
<!DOCTYPE html>
<html ng-app="app" ng-strict-di>
<head>
<!--#version v1.4.7-->
<script src="angular.js"></script>
<!--#version v0.2.15
Header and side bar shows only after double clicking app.main.foo
<script src="angular-ui-router.js"></script>
-->
<!--Best version for this example -->
<script
src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="route.js"></script>
</head>
<body>
<ul>
<li><a ui-sref="app.login">app.login</a>
<li><a ui-sref="app.main">app.main</a>
<li><a ui-sref="app.main.foo">app.main.foo</a>
</ul>
<div ui-view=""></div>
<script type="text/ng-template" id="views/login.html">
<div>
Login view
</div>
</script>
<script type="text/ng-template" id="partials/sidebar.html">
<div>
<h3>SideBar View1</h3>
<div ui-view="sidebar"></div>
</div>
</script>
<script type="text/ng-template" id="partials/main.html">
<h3>Main View</h3>
</script>
<script type="text/ng-template" id="partials/header.html">
<h3>Header View</h3>
</script>
<script type="text/ng-template" id="views/layout.html">
<h2>Layout View</h2>
<div ui-view="header"></div>
<div ui-view="sidebar"></div>
<div ui-view="main"></div>
</script>
</body>
</html>
app.js
(function() {
'use strict';
angular
.module('app', ['ui.router'])
}());
route.js
(function() {
'use strict';
angular
.module('app')
.config(routesConfig);
routesConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
function routesConfig( $stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('app', {
abstract: true,
url: '/',
template: '<ui-view/>'
})
.state('app.login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl',
controllerAs: 'login',
url: ''
})
.state('app.main', {
url: 'room',
templateUrl: 'views/layout.html'
})
.state('app.main.foo', {
url: '',
views: {
'header': {
templateUrl: 'partials/header.html'
},
'sidebar': {
templateUrl: 'partials/sidebar.html'
},
'main': {
templateUrl: 'partials/main.html'
}
}
});
}
})();
I'm trying to implement the solution offered by ProLoser in link
in my Plunk. My problem is that whenever I press a link instead of opening in a sub-view below the links it overrides the entire view.
I need to understand how to solve this problem.
My flow is like that: index.html -> content.html (ng-view) -> link1/2/3.html (using ng-include).
My layout:
Index.html:
<!DOCTYPE html>
<html ng-app="webApp">
<head>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>This is header</Header>
<div class="content" ng-view>
</div>
</body>
</html>
content.html:
<div>
<h1>This is Content brought to you by ngView</h1>
<br>
link1
link 2
link 3
<ng-include src="'/sub/'+link + '.html' "></ng-include>
</div>
My code:
var webApp = angular.module('webApp', []);
//router logic
webApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'content.html',
controller: 'MainCtrl'
})
.when('/sub/:link', {
controller: 'LinkCtrl'
})
.otherwise({redirectTo: '/'});
}]);
//controllers
webApp.controller ('MainCtrl', function ($scope, $routeParams) {
$scope.link = $routeParams.link
});
You don't have a LinkCtrl to handle the links, it should work if you change:
.when('/sub/:link', {
controller: 'LinkCtrl'
})
to
.when('/sub/:link', {
templateUrl: 'content.html',
controller: 'MainCtrl'
})
And edit the line:
<ng-include src="'/sub/'+link + '.html' "></ng-include>
to:
<ng-include src="link + '.html'"></ng-include>