I'm trying to create the following simple navigation:
html:
<html ng-app="myapp">
<body>
<ul>
<li>sub1</li>
<li>sub2</li>
</ul>
<div ng-view></div>
<script src="myscript.js"></script>
</body>
</html>
js:
var app = angular.module('myapp', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider.when("/pages/sub1", {
templateUrl : "templates/sub1.html",
controller : "sub1Controller"
}).when("/pages/sub2", {
templateUrl : "templates/sub2.html",
controller : "sub2Controller"
}).otherwise({
templateUrl : "templates/error.html"
});
$locationProvider.html5Mode(true);
});
Result: the URL path is changed to localhost/pages/sub1 when clicking on a link, as expected. But the ng-view is not updated and remains blank! Why?
I think you have to add # before the url in href field of anchor tag.
Replace your code with this :
<li>sub1</li>
<li>sub2</li>
Refer this jsFiddle
I have made 2 adjustments:
1. Added / to link:
<li>sub1</li>
2. Added requireBase: false to config:
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
I have also putted templates inside HTML just to make it work inside snippet. Full examplae:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Routing</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.js"></script>
</head>
<body ng-app="myapp">
<ul>
<li>sub1</li>
<li>sub2</li>
</ul>
<div ng-view></div>
<script>
var app = angular.module('myapp', ['ngRoute']);
angular.module('myapp').controller('sub1Controller', function () {
});
angular.module('myapp').controller('sub2Controller', function () {
});
app.config(function($routeProvider, $locationProvider) {
$routeProvider.when("/pages/sub1", {
templateUrl: "/templates/sub1.html",
controller: "sub1Controller"
}).when("/pages/sub2", {
templateUrl: "/templates/sub2.html",
controller: "sub2Controller"
}).otherwise({
templateUrl: "/templates/error.html"
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
</script>
<script type="text/ng-template" id="/templates/sub1.html">
First View
</script>
<script type="text/ng-template" id="/templates/sub2.html">
Second View
</script>
<script type="text/ng-template" id="/templates/error.html">
404
</script>
</body>
</html>
Related
I am using angular-ui-router tutorial.
It does not work when i want to load home.html page.
I defined 3 states for each page and define their template url,but no navigation is working at all.
http://localhost:8080/index.html#/home.
this is index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>catalogue</title>
<link rel="stylesheet" type="text/css"
href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
href="css/myStyle.css" />
</head>
<body ng-app="MyApp" >
<div ui-view >
</div>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
this is app.js :
var app=angular.module("MyApp",['ui.router']);
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider.state('home',{
url:'/home',
templateUrl: 'views/home.html',
controller: 'HomeController'
});
$stateProvider.state('chercher',{
url:'/chercher',
templateUrl: 'views/chercher.html',
controller: 'MyController'
});
$stateProvider.state('newProduct',{
url:'/newProduct',
templateUrl: 'views/newProduct.html',
controller: 'NewProductController'
});
});
app.controller('HomeController', function() {
});
app.controller('NewProduitController', function() {
});
home.html:
<div>
<h1>home</h1>
</div>
Set default URL state.
var app=angular.module("MyApp",['ui.router']);
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider.state('home',{
url:'/home',
templateUrl: 'views/home.html',
controller: 'HomeController'
});
$stateProvider.state('chercher',{
url:'/chercher',
templateUrl: 'views/chercher.html',
controller: 'MyController'
});
$stateProvider.state('newProduct',{
url:'/newProduct',
templateUrl: 'views/newProduct.html',
controller: 'NewProductController'
});
// add this code
$urlRouterProvider.otherwise('/home');
});
app.controller('HomeController', function() {
});
app.controller('NewProduitController', function() {
});
open this link in browser http://localhost:8080/
i solved the problem.
I used ui-sref instead of writing directly in the URL browser.
<button ui-sref="home" >Home</button>
I am just trying to get a partial page to load.
HTML:
<!DOCTYPE html>
<html ng-pp='app' lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Friends</title>
<script src='angular/angular.js'></script>
<script src='angular-route/angular-route.js'></script>
<script src='app.js'></script>
</head>
<body>
<p>
<a href='#!/list'>All Your Frinds</a> | <a href='#!/new'>Add a Friend</a>
</p>
<div ng-view=''>
</div>
</body>
</html>
Routing:
var app = angular.module('app', ['ngRoute']).config(function ($routeProvider)
{
$routeProvider
.when('/list',
{
templateUrl: 'partials/list.html'
})
.when('/new',
{
templateUrl: 'partials/create.html'
})
.when('/show/:id',
{
templateUrl: 'partials/show.html'
})
.when('/edit/:id',
{
templateUrl: 'partials/edit.html'
})
.otherwise(
{
redirectTo: '/'
})
});
Although, I have a controller, there is nothing in it. I just want to be all to see the a partial page is loading and it is not. I need the ng-controller directive in my partial page for it to load?
It doesn't do anything in this example
Most likely your nodejs is serving your static angularjs content from a folder, if you are using expressjs it will be because of
app.use(express.static('public'))
However, the angularjs router is handling your partials
Make sure you set
$locationProvider.html5Mode(false);
It can also help by looking into the developer console to see what url your router is pointing too.
Also
is fine by itself without the ""
I tried your code after removing exclamation mark from href and it's working as expected. Also add base href in HTML. Try below code
<!DOCTYPE html>
<html ng-pp='app' lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="/"></base>
<meta charset="utf-8" />
<title>Friends</title>
<script src='angular/angular.js'></script>
<script src='angular-route/angular-route.js'></script>
<script src='app.js'></script>
</head>
<body>
<p>
<a href='#/list'>All Your Frinds</a> | <a href='#/new'>Add a Friend</a>
</p>
<div ng-view=''>
</div>
</body>
</html>
JS
var app = angular.module('app', ['ngRoute']).config(function ($routeProvider,$locationProvider)
{
$locationProvider.html5Mode(false);
$routeProvider
.when('/list',
{
templateUrl: 'partials/list.html'
})
.when('/new',
{
templateUrl: 'partials/create.html'
})
.when('/show/:id',
{
templateUrl: 'partials/show.html'
})
.when('/edit/:id',
{
templateUrl: 'partials/edit.html'
})
.otherwise(
{
redirectTo: '/'
})
});
The directive was misspelled... Should be:
ng-app
I am developing a single page web application using AngularJS' ng-view and ng-template directives. But when I run it my browser show this type [1]: http://i.stack.imgur.com/TPuPo.png of error.
Here is my script block with main module and routing configuration.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS - Views</title>
<!--AngularJs Library-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
</head>
<body>
<h2 style="text-align: center;">Simple Application using AngularJS - Views</h2><hr><br>
<!--Start AngularJS App-->
<div ng-app="myApp">
<p>Add Student</p>
<p>View Students</p>
<div ng-view></div>
<!--Script for Add Student-->
<script type="text/ng-template" id="addStudent.htm">
<h2>This is the view of Add Student</h2>
{{message}}
</script>
<!--Script for View Students-->
<script type="text/ng-template" id="viewStudent.htm">
<h2>This is the view of all students</h2>
{{message}}
</script>
</div>
<!--End AngularJS App-->
<!--App Necessary Scripts-->
<script>
var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(['routeProvider',function ($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
}).
when('/viewStudent', {
templateUrl: 'viewStudent.htm',
controller: 'ViewStudentController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
myApp.controller('AddStudentController', function ($scope) {
$scope.message = "This page will be used to display add student form!!";
});
myApp.controller('ViewStudentController', function($scope){
$scope.message = "This page will be used to display all students!!";
});
</script>
</body>
</html>
what can I do to fix it?
Here's your working code. Also here's a CodePen example, I reorganize the code to make it more comfortable, please review it, study it and compare it for learning purpose. http://codepen.io/alex06/pen/rrzRbE?editors=1010
<html ng-app="mainApp">
<head>
<title>Angular JS Views</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div>
<p>Add Student</p>
<p>View Students</p>
<div ng-view></div>
</div>
<script type = "text/ng-template" id = "addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
<script type = "text/ng-template" id = "viewStudents.htm">
<h2> View Students </h2>
{{message}}
</script>
<script>
(function(){
'use strict'
angular
.module('mainApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
})
.when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
})
.otherwise({
redirectTo: '/addStudent'
});
}])
.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
})
.controller('ViewStudentsController', function($scope) {
$scope.message = "This page will be used to display all the students";
});
})();
</script>
</body>
</html>
Just change the following line:
myApp.config(['routeProvider',function ($routeProvider) {
To
myApp.config(['$routeProvider',function ($routeProvider) {
I think this is what you missed.
Define config as this:--
myApp.config(function ($routeProvider) { $routeProvider
Rather than:-- myApp.config(['routeProvider',function ($routeProvider) {
$routeProvider.
So, today I added angular-ui-router to my webapp. However, it's showing some really weird behaviour. It used to display the current page in the ui-view. So a page in a page.
Now, it's working correct, but it doesn't show subpages and I can't seem to figure out why.
Main page
<!doctype html>
<html lang="en" ng-app="ExampleApp">
<head>
<meta charset="UTF-8">
<title>Example App</title>
</head>
<body>
<div>
<div ui-view></div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<!-- Main app file -->
<script src="/js/main.js"></script>
</body>
</html>
main.js
var ExampleApp = angular.module('ExampleApp', ['ui.router']);
ExampleApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /home
$urlRouterProvider.otherwise("/home");
//
// Now set up the states
$stateProvider
.state('home', {
url: "/home",
templateUrl: "views/home.html",
controller: "MainController"
})
.state('settings', {
url: "/settings",
templateUrl: "views/settings.html",
controller: "SettingsController"
})
.state('settings.account', {
url: "/account",
templateUrl: "views/settings.account.html",
controller: "AccountSettingsController"
});
});
ExampleApp.config(["$locationProvider", function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
Try this
url:"settings/account",
I don't know why my template is not being rendered anymore. I get a blank page. It worked before then after some tweaks it stopped working. I've reversed most of the code and i still don't get why is not working . There is no kind of error in the console. How am I supposed to debug this kind of behavior ?
Here is the controller
'use strict';
/* Controllers */
var crmControllers = angular.module('crmControllers', []);
crmControllers.controller('TimelineCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
var emailsId
emailsId = $routeParams.emailsId;
$http.get('http://local.sf.com:8080/timeline/API?emailsId=' + emailsId,
{withCredentials: true}).success(function(timelines){
angular.forEach(timelines, function(timeline) {
var inboxIfr
inboxIfr = 'http://local.sf.com:8080/messages/inbox?email='+
timeline.Email+'&toEmail='+timeline.ToEmail+'&subject='+timeline.Subject
timeline.inboxIfr = inboxIfr
$scope.inboxIfr = inboxIfr
console.log(inboxIfr);
});
});
}]);
inboxIfr shows up in the console log which means that the loop is happening but it's just not rendered.
Html
<body>
<ul ng-repeat="timeline in timelines">
<p>hello <p/>
<iframe class="container well well-small span6"
style="height: 400px;"
ng-src="{{timeline.inboxIfr}}"></iframe>
</ul>
app.js
'use strict';
/* App Module */
var crmApp = angular.module('crmApp', [
'ngRoute',
'crmControllers',
]);
crmApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/timeline/:emailsId', {
templateUrl: 'partials/time.html',
controller: 'TimelineCtrl'
}).
otherwise({
redirectTo: '/timeline:emailsId'
});
}]);
index.html
<!doctype html>
<html lang="en" ng-app="crmApp">
<head>
<meta charset="utf-8">
<title>SF</title>
<!--<<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">-->
<!--<link rel="stylesheet" href="css/app.css">-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/controllers.js"></script>
<!--<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>-->
<!--<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>-->
<script src="js/app.js"></script>
<html>
</head>
<body>
<div ng-view></div>
</body>
</html>
Edit : I've added some dummy text above ng-repeat="timeline in timelines"> and it's being rendered so the real issue is that nothing is rendered inside the ng-repeat loop .
Edit: I've reduced time.html to this and it's still not being rendered . Only the first paragraph is being rendered ("I can see this")
<p>I can see this</p>
<li ng-repeat="timeline in timelines">
<p>I can't see this <p/>
</li>
The default route isn't pointing to a valid route:
app.js:
.otherwise({
redirectTo: '/timeline:emailsId'
});
shoud be:
.otherwise({
redirectTo: '/timeline/:emailsId'
});
EDIT: More HTML/Angular mistakes:
Remove body tags in Angular templates.
Don't use ng-repeat with <ul> tags. Rather use it with <li> or other block-elements like <div>
You use ng-repeat with the scope variable timelines, but you never set $scope.timelines