I'm learning AngularJS for a project but I got stuck in rendering a partial view. I've made the main page with three partial templates that need to be loaded in the main page. Also created a javascript files to define the module and create the controller. After all this still the partial templates are not loading in the main index page. Also there is no errors in the google chrome console. My Folder structure is as follows :
- scripts
-- angular.min.js
-- angular-route.min.js
-- app.js
templates
-- home.html
-- courses.html
-- students.html
index.html
My index.html is :
<!DOCTYPE html>
<html lang="en" ng-app="myModule">
<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>Title Page</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route-min.js"></script>
<script src="scripts/script.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Courses</li>
<li>Students</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Home</li>
<li>Courses</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<div class="container">
<ng-view></ng-view>
</div>
</body>
</html>
My app.js is :
var app = angular.module("myModule", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "templates/home.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "templates/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "templates/students.html",
controller: "studentsController"
})
})
.controller("homeController", function ($scope) {
$scope.message = "Home Page";
})
.controller("coursesController", function ($scope) {
$scope.courses = ["C#", "VB.NET", "ASP.NET", "SQL Server", "AngularJS", "JavaScript"];
})
.controller("studentsController", function($scope, $http) {
$http.get("http://localhost:8000/api/students").then(function(response) {
$scope.students = response.data;
});
});
I've also tried the followings :
"<ng-view></ng-view>", "<div ng-view></div>", "<div ng-view=""></div>"
But nothing seems to be working.
Related
The pages aren't loading in my ng-view. All the clicked links come up as just blank. What am I doing wrong? I think I have all my routes put correctly. Thanks in advance.
index.html
<!DOCTYPE html>
<html ng-app="soolApp">
<head>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="mainController">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Hi. I'm Dan Karlin.</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-folder-open"></i> Example 1</li>
<li><i class="fa fa-folder-open"></i> Example 2</li>
</ul>
</div>
</nav>
</header>
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
script.js
var soolApp = angular.module('soolApp', ['ngRoute']);
soolApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
.when('/promo', {
templateUrl : 'pages/promo.html',
controller : 'promoController'
})
.when('/rain', {
templateUrl : 'pages/rain.html',
controller : 'rainController'
});
});
soolApp.controller('mainController', function($scope) {
});
soolApp.controller('promoController', function($scope) {
});
soolApp.controller('rainController', function($scope) {
});
So, I'm at a loss. I have a job interview on Monday and was putting together this angular app for that purpose.
I think you should check your console of browser. You have done everything right. Here is the plunkr I created from your example. Its working. Only thing you should look into is the location of html files which might be giving 404 error.
And, Best of luck for the interview ;)
This question already has an answer here:
Angular - UI Router Routes - HTML5 Mode
(1 answer)
Closed 5 years ago.
I have already tried $locationProvider and base href tag in my head of my index.html file. But was getting 404 error while rendering my views. I think it is something with my app.use method of Express in app.js file.
This is my folder structure of this project. https://i.stack.imgur.com/PFPlk.png
This is my app.js file.
var express = require('express');
var app = express();
app.use(express.static(__dirname+'/public'));
app.listen(3000);
console.log('Running on port 3000...');
This is my script.js file.
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl : 'views/home.html',
controller : 'homeController'
})
.state('posts', {
url: '/posts',
templateUrl : 'views/posts.html',
controller : 'postsController'
})
.state('radio', {
url: '/radio',
templateUrl : 'views/radio.html',
controller : 'radioController'
});
$urlRouterProvider.otherwise('/');
});
myApp.controller('homeController', function($scope) {
$scope.title = 'Hello.';
});
myApp.controller('radioController', function($scope) {
$scope.message = 'Look! I am an radio page.';
});
This is my index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>WISS</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="styles/styles.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a ui-sref="home">HOME</a></li>
<li><a ui-sref="posts">POSTS</a></li>
<li><a ui-sref="radio">RADIO</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div id="main">
<div ui-view></div>
</div>
</div>
</body>
</html>
In Angular place $locationProvider.html5Mode(true); in your myApp.config block.
Then for express add this before app.listen(3000)
app.all('/*', function(req, res) {
res.sendfile('public/index.html');
});
I am trying to use the routing feature of angularJS, but so far it will not include my html templates (user.html and overview.html, which are in the same folder as index.html).
For information only: the expression {{test}} is working.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PARA Liste</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
</head>
<body>
<div ng-app="angularJsApplication" ng-controller="angularJsController">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Para Liste</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>overview</li>
<li>user1</li>
<li>user2 - {{test}}</li>
</ul>
</div>
</div>
</nav>
<div class="ng-view"></div>
</div>
<script src="js/angularJsApplication.js"></script>
<script src="js/angularJsApplicationController.js"></script>
</body>
</html>
angularJsApplication.js:
var app = angular.module("angularJsApplication", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/#", {
templateURL : "overview.html"
})
.when("/overview", {
templateURL : "overview.html"
})
.when("/user1", {
templateURL : "user.html"
})
.when("/user2", {
templateURL : "user.html"
})
});
angularJsApplicationController.js:
app.controller("angularJsController", function($scope){
$scope.test = "testTestTEST";
});
user.html:
<h1>user</h1>
Its typo mistake :
not templateURL It''s templateUrl
So,it should be.
templateUrl: "overview.html"
This is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="xploresoftware.css">
</head>
<body ng-app="myapp">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="Images/Drawing.png">
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="subject">
<li>Electrical Engineering</li>
<li> Computer Science</li>
<li> Mechanical Engineering</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" style="margin-top:55px" >
<div ng-view=""> </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="angularview.js"></script>
</body>
</html>
This is my angularview.js file
(function(){
var app=angular.module('myapp',['ngRoute']);
app.config([function($routeProvider){
$routeProvider.when('/',{
templateUrl:'home.html'
})
.when('/ece',{
templateUrl:"ece.html"
})
.when('/cs',{
templateUrl:"cs.html"
})
.when('/mech',{
templateUrl:"mech.html"
})
.otherwise({
redirectTo:"/"
});
}]);
})();
The error caught:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=myapp&p1=Error%3A%2…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A19%3A463
This error appears to caused by a missing dependency. I see that you need to include de ngRoute dependency in your app module.
Change your first line to:
var app=angular.module('myapp',['ngRoute']);
Try changing this line too
app.config(['$routeProvide', function($routeProvider){ ... }])
EDIT:
Take a look at this JSFiddle
https://jsfiddle.net/relferreira/dzx8w38t/2/
HTML:
<div data-ng-app="app">
<div data-ng-controller="MainController as main">
{{main.test}}
</div>
<ul class="nav navbar-nav" id="subject">
<li>Electrical Engineering</li>
<li> Computer Science</li>
<li> Mechanical Engineering</li>
</ul>
<div ng-view> </div>
</div>
JS:
angular.module('app', ['ngRoute']);
angular.module('app')
.config(config)
.controller('MainController', mainController);
config.$inject = ['$routeProvider'];
function config($routeProvider){
$routeProvider.when('/',{
template:'<h1>home</h1>'
})
.when('/ece',{
template:"<h1>ece</h1>"
})
.when('/cs',{
template:"<h1>cs</h1>"
})
.when('/mech',{
template:"<h1>mech</h1>"
})
.otherwise({
redirectTo:"/"
});
}
mainController.$inject = ['$scope'];
function mainController($scope){
var vm = this;
vm.test = 'test'
}
Everything loads fine in the inspector and I do not see console errors. But I am expecting info.html partial to load. It is not using any data at this point from the scope. But the code form the infoController never gets executed. You cna see I have put in a debugger line in there and it never gets there.
My question is why is not the InfoController getting called?
Main shell page
<!DOCTYPE html>
<html lang="en" ng-app="adminUI">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link type="text/css" rel="stylesheet" media="all" href="/admin/css/bootstrap/core/bootstrap.min.css">
<link type="text/css" rel="stylesheet" media="all" href="/admin/css/attivio-global.css">
</head>
<body>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<img class="atv-image atv-margin-top-10 atv-navbar-logo" src="/img/attivio-navbar-logo.png">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" data-ng-controller="NavbarController">
<li class="dropdown">System <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li role="presentation" class="dropdown-header">System Management</li>
<li>Connectors</li>
<li>Indexes</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Workflows</li>
<li>Ingest</li>
<li>Query</li>
<li>Response</li>
<li>Palette</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">System Information</li>
<li data-ng-class="{'active':getClass('/info')}">General(System)</li>
<li>Configuration</li>
<li data-ng-class="{'active':getClass('/properties')}">Properties</li>
<li>Environment</li>
</ul></li>
<li class="dropdown">Tools <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>General(System)</li>
<li>Configuration</li>
<li>Properties</li>
<li>Environment</li>
</ul></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control input-sm" placeholder="Search">
</div>
<button type="submit" class="btn btn-default btn-sm">Go</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</div>
<script type="application/javascript" src="/js/jquery/jquery-1.10.2.min.js"></script>
<script type="application/javascript" src="/js/jquery/jquery-ui-1.10.3.custom.min.js"></script>
<script type="application/javascript" src="/admin/js/bootstrap/bootstrap.min.js"></script>
<script type="application/javascript" src="resources/js/angular.min.js"></script>
<script type="application/javascript" src="resources/js/angular-route.js"></script>
<script src="app.js"></script>
<script src="info/controllers/controllers.js"></script>
<script src="info/services/infoService.js"></script>
<script src="properties/controllers/controllers.js"></script>
<script src="properties/services/propertiesService.js"></script>
</body>
</html>
appjs
var app = angular.module('adminUI', ['ngRoute']);
//This configures the routes and associates each route with a view and a controller
app.config(function ($routeProvider) {
$routeProvider
.when('/info',
{
controller: 'InfoController',
templateUrl: '/info/partials/info.html'
})
.when('/properties',
{
controller: 'PropertiesController',
templateUrl: '/properties/partials/properties.html'
})
.otherwise({ redirectTo: '/info' });
});
app.controller('NavbarController', function ($scope, $location) {
$scope.getClass = function (path) {
if ($location.path().substr(0, path.length) == path) {
return true
} else {
return false;
}
}
});
info controller
app.controller('InfoController', function ($scope, infoService) {
$scope.sysInfo = [];
init();
function init() {
debugger;
$scope.sysInfo = infoService.getInfo();
}
});
properties controller
app.controller('PropertiesController', function($scope, propertiesService) {
$scope.properties = [];
init();
function init() {
$scope.properties = propertiesService.getProperties();
}
});
services
app.service('propertiesService', function () {
this.getProperties = function () {
return properties; //ajax call
};
var properties = ["a","b"];
});
app.service('infoService', function () {
this.getInfo = function () {
return info; //ajax call
};
var info = ["a","b"];
});
info.html template
<div class="info view">
<p> info test </p>
</div>
properties template
<div class="properties view">
<p> properties test </p>
</div>
this is my directory structure
http://postimg.org/image/5qgn25b5n/