Use the following code I am not able to display any HTML. I do not receive any error in the console any error. Any idea what am I doing wrong?
index.html
<!DOCTYPE html>
<html ng-app="KanbanBoard" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/boards/boardsController.js"></script>
</body>
</html>
app.js
'use strict';
var app = angular.module('KanbanBoard', ['ngRoute']);
(function () {
app.config(function ($routeProvider) {
$routeProvider.when("/boards", {
controller: "BoardsController",
templateUrl: "/app/boards/boardsView.html"
});
$routeProvider.otherwise({ redirectTo: "/boards" });
});
})();
controller.js
'use strict';
(function () {
app.controller('BoardsController', ['$scope', function ($scope) {
$scope.users;
this.users = [
{
id: 0,
email: 'a#a.com',
name: 'A',
surname: 'B',
initials: 'AB',
boards: [
{
id: 0,
title: 'Welcome Board',
description: 'Board sample',
isArchived: false,
},
{
id: 1,
title: 'Project X',
description: 'Project X description',
isArchived: false,
}
]
}
];
$scope = this.users;
}]);
})();
boardView.html
<div ng-controller="BoardsController as boardsCtrl">
<div ng-repeat="user in boardsCtrl.users">
{{user.name + " " + user.surname}}
<ul>
<li></li>
</ul>
</div>
</div>
In the body of your webpage it seems that you are missing ng-view:
<!DOCTYPE html>
<html ng-app="KanbanBoard" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div ng-view></div> <!--this is required.-->
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/boards/boardsController.js"></script>
</body>
</html>
From the documentation:
ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.
You missed adding the Boardview.html with controller on your index.html
It could be done inline or by using ng-include:
<div ng-include="boardView.html"></div>
Related
I have a simple web project that has a phone list and each element in that list contains a phone detail information. If I clicked on a phone id, it should bring me to a page for that phone only, however, nothing happened after a phone id was clicked.
When the app was loaded, it went to the index page with a url:
http://localhost:8080/angular-route-multiple-views/index.html#!/phones
After I clicked on the first phone id, the url was changed to the following but it didn't go to that page at all:
http://localhost:8080/angular-route-multiple-views/index.html#!/phones#%2Fphones%2Fnexus
Can someone please help and let me know why it didn't go to the phone detail page ? Thanks.
index.html
<!DOCTYPE html>
<html ng-app="mainModule">
<head>
<meta charset="ISO-8859-1">
<title>AngularJS Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.js"></script>
<script src="js/main-module.js"></script>
<script src="js/phonelist-module.js"></script>
<script src="js/phonelist-component.js"></script>
<script src="js/config.js"></script>
<script src="js/phonedetail-module.js"></script>
<script src="js/phonedetail-component.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
main-module.js:
angular.module('mainModule', ['ngRoute', 'phoneList', 'phoneDetail']);
config.js:
angular.module('mainModule').
config(['$locationProvider', '$routeProvider',
function config($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.
when('/phones', {
template: '<phone-list></phone-list>'
}).
when('/phones/:phoneId', {
template: '<phone-detail></phone-detail>'
}).
otherwise('/phones');
}
]);
phonelist-module.js:
angular.module('phoneList', ['ngRoute']);
phonelist-component.js:
angular.module('phoneList').component('phoneList', {
templateUrl: 'js/phone-list.template.html',
controller: function PhoneListController() {
this.phones = [
{
id: 'nexus',
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.',
},
{
id: 'motorola-xoom',
name: 'MOTOROLA XOOM™',
snippet: 'The Next, Next Generation tablet.',
}
];
}
});
phonedetail-module.js:
angular.module('phoneDetail', ['ngRoute']);
phonedetail-component.js:
angular.module('phoneDetail').
component('phoneDetail', {
template: 'TBD: Detail view for <span>{{$ctrl.phoneId}}</span>',
controller: ['$routeParams',
function PhoneDetailController($routeParams) {
this.phoneId = $routeParams.phoneId;
}
]
});
phone-list.template.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Phone List</title>
</head>
<body>
<li ng-repeat="phone in $ctrl.phones" >
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
</html>
Your forgot to add ! in the href attribute.
<ul>
<li ng-repeat="phone in $ctrl.phones">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
I have written a demo code for ui-router but getting error
like: unknown attribute 'ui-sref
I go through from the source: (How to get angular ui-router's ui-sref to work, when inside a directive's template?).
But, still I did not correct it.
my code is:
index.html
<!DOCTYPE html>
<script <script src="lib/angular-ui-router.js"></script>
<script src="lib/angular.min.js"></script>
<script src="helloworld.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body ng-app="helloworld">
<a ui-sref="hello" ui-sref-active="active">Hello</a<a ui-sref="about" ui-sref-active="active">About</a>
<ui-view></ui-view>
</body>
</html>
helloworld.js
var myApp = angular.module('helloworld', ['ui.router']);
myApp.config(function($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
template: '<h3>hello world!</h3>'
}
var aboutState = {
name: 'about',
url: '/about',
template: '<h3>Its the UI-Router hello world app!</h3>'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
});
Any help is appreciated.
I try simple Universal windows 8.1 project.
My default.html page:
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="utf-8" />
<!-- WinJS references -->
<script src="scripts/services/winstore-jscompat.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/winjs/js/base.min.js"></script>
<script src="node_modules/winjs/js/ui.min.js"></script>
<!-- angular -->
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/angular-winjs/js/angular-winjs.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/EventsController.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
Project has one simple view and simple controller. When I use "win-list-view" in my view, (even empty win-list-view without bounding) I got error which i do not understand.
HTML1300: Navigation occurred.
default.html
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
default.html
Error: [$compile:noslot] http://errors.angularjs.org/1.5.3/$compile/noslot? p0=true&p1=%3Cdiv%20class%3D%22ng-isolate-scope%22%20item-data- source%3D%22manufacturers%22%20ng-transclude%3D%22true%22%3E
...
My page is open, but data on screen are in json format. Whole data binding array is shown on screen.
View:
<div>
<win-list-view item-data-source="manufacturers">
<win-item-template>
<div>
<h4>{{item.data.title}}</h4>
<h6>{{item.data.text}}</h6>
</div>
</win-item-template>
<win-list-layout></win-list-layout>
</win-list-view>
</div>
Controller:
(function () {
angular.module("mainApp")
.controller("EventsController", function ($scope) {
$scope.manufacturers = [
{ title: "marvelous mint", text: "gelato" },
{ title: "succulent strawberry", text: "sorbet" },
];
})
}());
My app:
(function() {
angular.module("mainApp", ["ngRoute", "winjs"]);
angular.module("mainApp")
.config(function ($routeProvider) {
$routeProvider
.when("/events", {
templateUrl: "views/events.html",
controller: "EventsController"
})
.otherwise({ redirectTo: "/events" });
});
}());
Why "win-list-view" tag on view caused that error?
Work on windows 8 with VS2015, maybe it has influence.
I want to dynamically add menu JavaScript file and html to content.html, but it can't do.
I created simple example
demo
I try move "<script src="menu.js"></script>" to menu.html
Your code moves away from the whole idea of writing single page app with angular. I have updated it to give you basic idea of how you would do the routes and share templates and use controller.
Check out the plunkr
html
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="menu.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script data-require="ui-router#*" data-semver="0.2.15" src="https://cdn.rawgit.com/angular-ui/ui-router/805e69bae319e922e4d3265b7ef565058aaff850/release/angular-ui-router.js"></script>
<script src="menu.js"></script>
<script src="index.js"></script>
</head>
<body>
<div id="menu" ng-include="'menu.html'"></div>
<div ui-view></div>
</body>
</html>
js
angular.element(document).ready(function() {
angular.bootstrap(document, ["app"]);
});
angular.module('app',['moduleContent', 'moduleMenu', 'ui.router']);
var app = angular.module('app');
app.config(function($stateProvider) {
$stateProvider
.state('index', {
url: "",
templateUrl: "first.html",
controller: 'firstCtrl'
})
.state('second', {
url: "/second",
templateUrl: "second.html"
})
});
app.controller('firstCtrl', ['$scope', function($scope) {
$scope.page = "first";
}]);
//Conttent module
angular.module('moduleContent',[])
.controller('contentCtrl', contentCtrl);
function contentCtrl(shareData)
{
shareData.currentPage = 0;
}
While i am trying to click on show its not showing any thing, i have wasted lot of time on this, but no luck can some one help.
Files....
app.js
controller.js
index.html
show.html
index.html
<html ng-app='Java4sApp'>
<head>
<title>Angular Js Tutorials _ Java4s</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers.js"></script>
</head>
<body>
<div ng-controller='Java4sController'>
Settings :
Add Details | Show Details
<div ng-view></div>
</div>
</body>
</html>
show.html
<html ng-app='Java4sApp'>
<head>
<title>Angular Js Tutorials _ Java4s</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers.js"></script>
</head>
<body>
<div ng-controller='Java4sController'>
<input type="text" ng-model="myModel" />
<ul>
<li ng-repeat='person in people | filter:myModel'>{{person.name}}</li>
</ul>
</div>
</body>
</html>
controller.js
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/add', {
controller: 'Java4sController',
templateUrl: '/add.html'
}).
when('/show', {
controller: 'Java4sController',
templateUrl: '/show.html'
}).
otherwise({
redirectTo: '/index.html'
});
}]);
app.controller("Java4sController",function($scope){
$scope.people = [
{name: 'Siva', city: 'Cary'},
{name: 'Teja', city: 'Raleigh'},
{name: 'Reddy', city: 'Durham'},
{name: 'Venky', city: 'Denver'},
{name: 'Arun', city: 'Texas'}
];
});
app.js
var app = angular.module("Java4sApp",[]);
Thank you.
You need to inject the 'ngRoute' dependency when you are creating your module.
var app= angular.module('Java4sApp', [
'ngRoute'
]);
Also make sure you obtain Angular routing js and add a reference to it, in your index.html
<script src="scripts/angular-route.js"></script>
A good example can be found here
Please let me know if this doesn't fix your problem
UPDATE
This is a simple plunker that shows AngularJS Routing