I just started with angularjs on a Express Framework and I am trying to load html pages as includes. Now I've setup my routing in angular and works fine, but when I try to use ng-include in my html pages, it kinda loops and gives the following error:
Uncaught Error: [$rootScope:infdig] http://errors.angularjs.org/1.6.3/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22ms…Be()%3Breturn%20d(a)%7D%22%2C%22newVal%22%3A%22nav-mobile.html%22%7D%5D%5D
at angular.js:38
at m.$digest (angular.js:18048)
at angular.js:18211
at e (angular.js:6274)
at angular.js:6554
Now I am trying to make an inlcude of the nav-bar-mobile.html to inject it into the page, but I do not get this working. Someone have an idea?
My routing looks like this:
var app = angular.module("myApp", ["ngRoute", "ngAnimate"]);
/* ROUTING */
app.config(function($routeProvider,$locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/home.html',
controller: 'homeController'
})
.when('/wie', {
templateUrl: 'partials/wie.html',
controller: 'aboutController'
})
.when('/portfolio', {
templateUrl: 'partials/portfolio.html',
controller: 'portfolioController'
})
.when('/channel', {
templateUrl: 'partials/channel.html',
controller: 'channelController'
})
.when('/contact', {
templateUrl: 'partials/contact.html',
controller: 'contactController'
});
$locationProvider.html5Mode(true);
});
/* CONTROLLERS */
app.controller('homeController', function($scope) {
$scope.pageClass = 'home';
});
app.controller('aboutController', function($scope) {
$scope.pageClass = 'wie';
});
app.controller('portfolioController', function($scope) {
$scope.pageClass = 'portfolio';
});
app.controller('channelController', function($scope) {
$scope.pageClass = 'channel';
});
app.controller('contactController', function($scope) {
$scope.pageClass = 'contact';
});
And my index.html page looks like this:
<!DOCTYPE html>
<html ng-app="myApp" ng-init="CompanyName='MyApp'">
<head>
<title>My App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<!-- load bootstrap & font awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel='stylesheet' href='/stylesheets/style.css'>
<link rel='stylesheet' href='/stylesheets/mobile.css'>
<link rel='stylesheet' href='/stylesheets/font-awesome.css'>
<!-- JS -->
<!-- load angular, ngRoute, ngAnimate -->
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-animate.js"></script>
<script src='/javascripts/app.js'></script>
<base href="/">
</head>
<body>
<div class="container">
<div class="logo">
<div class="wrap">
<img src="/images/my-logo.png" alt="my-logo" />
</div>
</div>
<div ng-include="'nav-bar-mobile.html'"></div>
<div class="box panels tinted">
<div class="page {{ pageClass }}" ng-view></div>
</div>
<div class="nav-bar desktop">
<div class="inner">
<ul>
<li>Home</li>
<li>Wie zijn wij?</li>
<li>Portfolio</li>
<li>My Channel</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>
You need to provide the full path of the HTML page if it is not in same folder.
Related
I'm using angularjs 1.6 to create a simple app just to display a list of groups and to display all users for each group ...
my problem is I can't display the list of users using ng-view
this is my index.html :
<!DOCTYPE html>
<html lang="en" ng-app="application">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My application</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/bootstrap-3/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/app.css">
</head>
<body>
<div ng-controller="groupctrl">
<div class="well">
<ul ng-repeat="grp in group">
<li class="link" ng-click="displayusers(grp.uuid)">{{ grp.name }}</li>
<li class="link" ng-click="displayusers(grp.uuid)">{{ grp.name }}</li>
</ul>
</div>
</div>
<div ng-view>
</div>
</body>
<script src="assets/angular.min.js"></script>
<script src="assets/angular-route.min.js"></script>
<script src="controllers/app.js"></script>
<script src="controllers/route.js"></script>
<script src="controllers/service.js"></script>
<script src="controllers/mainctrl.js"></script>
</html>
app.js
var app = angular.module('application', ['ngRoute']);
route.js and mainctrl.js
app.config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
templateUrl: 'index.html'
})
// .when('/group', {
// templateUrl: 'group.html',
// controller: 'groupctrl'
// })
.when('/users', {
templateUrl: 'users.html',
controller: 'usersctrl'
})
.otherwise({redirectTo: '/'});
}]);
app
.controller('groupctrl', function($scope, $timeout, $location, apiService) {
$scope.hello = "hello 123";
apiService.getgroup().then(function(data){
$scope.group = data;
});
$scope.displayusers = function(idgroup){
apiService.getusers(idgroup);
$location.path('/users');
};
})
.controller('usersctrl', function($scope, $timeout, apiService) {
apiService.getusers().then(function(data){
$scope.users = data;
});
});
users.html
<div ng-controller="usersctrl">
<div ng-repeat="user in users">
<div class="well text-center">
<h2>{{ user.name }}</h2>
<h5>{{ user.index }}</h5>
<button class="btn btn-success" ng-click="edit(user.index)">EDIT</button>
<button class="btn btn-danger" ng-click="delete(user.index)">DELETE</button>
</div>
</div>
</div>
thank's for helping !
Referring to comments provided by the question's author, the problem is with accessing to the users.html file as prompted in error:
XMLHttpRequest cannot load file:///home/folder-test/Documents/application/users.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https
This problem is resolved in other SO questions such as this and more specifically for AngularJS here.
So I am using ngroute to like redirect to other html pages. I got this off from a tutorial online but when I try to run, it does not show the message or it doesn't go the desired page. For example, if I want to click on the homepage on the nav bar, it should redirect to the homepage. If I want to redirect to login page, it should go to login page. I am not sure what is wrong. enter code hereThis is what I have:
index.html
<!DOCTYPE html>
<html ng-app="homepageApp">
<head>
<meta charset="UTF-8">
<title>Quiz HomePage</title>
<link rel="stylesheet" href="cs/homepage.css">
<script src="lib/angular.js"></script>
<script src="js/home.js"></script>
<!-- NG ROUTE -->
<script type="text/javascript" src="i"></script>
</head>
<body ng-controller="mainController">
<h1>Welcome To The Online Quiz Management</h1>
<div id="navigationBar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li style="float: right">Login</li>
</ul>
</div>
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</body>
</html>
home.js
// creating the module
var app = angular.module("homepageApp", ["ngRoute"]);
// configure our routes
app.config(function($routeProvider) {
$routeProvider
// route for the homepage
.when("/homepage", {
templateUrl: "homepage.html",
controller: "mainController"
})
// route for login
.when("/login", {
templateUrl: "login.html",
})
// route for about
.when("/about", {
templateUrl: "about.html",
controller: "aboutController"
})
// route for contact
.when("/contact", {
templateUrl: "contact.html",
controller: "contactController"
});
});
// create the controller and inject Angular's $scope
app.controller("mainController", function($scope) {
$scope.message = 'Everyone come our homepage';
});
app.controller("loginController", function($scope) {
});
about.html
<!DOCTYPE html>
<html ng-app="homepageApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<h1>About Page</h1>
<p>{{ message }}</p>
</body>
</html>
As #Barclick said, you have to import angular-route correctly.
Since you are using angularjs from your local, not sure which version you are using. There have been some changes to the library from version 1.6+ . Please look at the detailed answer here :
https://stackoverflow.com/a/41655831/6347317
I have created a plunker with angular 1.6+ . Please see below:
http://plnkr.co/edit/xDOSh3OSdKcBFTPJN6qj?p=preview
Note: Please see the way the route is referenced in HTML "#!route".
HTML:
<!DOCTYPE html>
<html ng-app="homepageApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="mainController">
<h1>Welcome To The Online Quiz Management</h1>
<div id="navigationBar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li style="float: right">Login</li>
</ul>
</div>
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</body>
</html>
JS:
// creating the module
var app = angular.module("homepageApp", ['ngRoute']);
// configure our routes
app.config(function($routeProvider) {
$routeProvider
// route for the homepage
.when('/', {
templateUrl: 'homepage.html',
controller: 'mainController'
})
// route for login
.when('/login', {
templateUrl: 'login.html',
})
// route for about
.when('/about', {
templateUrl: 'about.html',
controller: 'aboutController'
})
// route for contact
.when('/contact', {
templateUrl: 'contact.html',
// controller: 'contactController'
});
});
// create the controller and inject Angular's $scope
app.controller("mainController", function($scope) {
$scope.message = 'Everyone come our homepage';
});
app.controller("aboutController", function($scope) {
$scope.message = 'Everyone come our about page';
});
I have created a custom directive to display data retrieved from the controller. The element is displaying in the HTML script however, no data is being presented in the custom directive. My question is how to get my custom directive to display the incoming data from the controller.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dashful</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles/main.css" media="screen" title="no title">
<link rel="stylesheet" href="styles/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.6.1/angular-resource.min.js"></script>
<!-- <script src="scripts/angular.min.js"></script> -->
<!-- <script src="scripts/angular-ui-router.min.js"></script> -->
<!-- <script src="scripts/angular-resource.min.js"></script> -->
<script src="app.js"></script>
<script src="config/config.js"></script>
<script src="controllers/index.js"></script>
<script type="text/ng-template" src="directives/news.js"></script>
<base href="/" target="_blank" />
</head>
<body ng-app='app'>
<header>
<nav class="nav-bar">
<h1 id="brand">dashful</h1>
<i id="settings-icon" class="fa fa-cog" aria-hidden="true"></i>
</nav>
</header>
<main class="dashboard">
<section class="dashboard" ui-view></section>
</main>
<footer class="footer dashboard-footer">Copyright © 739688, MMXVII</footer>
</body>
</html>
app.js
angular.module('app', ['ui.router']);
controllers/index.js
angular.module('app')
.controller('IndexCtrl', function($scope, $http){
$http.get('/widgets')
.then(function(widgets){
console.log(widgets);
$scope.widgets = widgets.data;
return widgets.data;
})
});
config/config.js
angular.module('app')
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider){
$stateProvider
.state('dashboard', {
url : '/',
templateUrl : 'views/index.html',
controller : 'IndexCtrl'
});
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
}]);
directives/news.js
angular.module('app', [])
.directive('newsWidget', [function () {
return {
restrict : 'E',
templateUrl : 'partials/news.html',
controller : 'IndexCtrl',
scope : {
widget : '='
}
}
}]);
views/index.html
<section class="widgets">
<article class="widget" ng-repeat="widget in widgets">
<news-widget widget="widget"></news-widget>
</article>
</section>
partials/news.html
<span>{{widget}}</span>
In your newsWidget directive you are again setting app module so replace
angular.module('app',[]) with
angular.module('app')
angular.module('app')
.directive('newsWidget', [function() {
return {
restrict: 'E',
templateUrl: 'partials/news.html',
controller: 'IndexCtrl',
scope: {
widget: '='
}
}
}]);
jsfiddle
Below is my code for index.html. I'm not able to load login.html whenever I'm clicking on login button.
<!doctype html>
<html ng-app="instagram">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compitable" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Instagram</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/paper/bootstrap.min.css">
<link rel="stylesheet" href="//code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css">
<link rel="stylesheet" href="CSS/styles.css">
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<i class="ion-images"></i> instagram
<li>Home</li>
<li>Log in</li>
<li>Sign up</li>
<li><a ng-click="logout()" href="">Logout</a></li>
</ul>
</div>
</div>
<div ng-view=""></div>
<script src="Vendor/angular.js"></script>
<script src="Vendor/angular-route.js"></script>
<script src="Vendor/angular-messages.js"></script>
<script src="Vendor/satellizer.js"></script>
<script src="app.js"></script>
<script src="Controllers/home.js"></script>
<script src="Controllers/login.js"></script>
<script src="Controllers/signup.js"></script>
<script src="Controllers/detail.js"></script>
<script src="Controllers/navbar.js"></script>
</body>
</html>
Below is my code for app.js. I got this issue for home page also it got resolved using ng-view.
angular.module('instagram', ['ngRoute', 'ngMessages','satellizer']).
config(function($routeProvider, $authProvider) {
$routeProvider
.when('/', {
templateUrl: 'Views/home.html',
controller: 'HomeCtrl'
})
.when('/login', {
templateUrl: 'Views/login.html',
controller: 'LoginCtrl'
})
.when('/signup', {
templateUrl: 'Views/signup.html',
controller: 'SignupCtrl'
})
.when('/photo/:id', {
templateUrl: 'Views/detail.html',
controller: 'DetailCtrl'
})
.otherwise('/');
$authProvider.loginUrl = 'http://localhost:3000/auth/login';
$authProvider.signupUrl = 'http://localhost:3000/auth/signup';
$authProvider.oauth2({
name: 'instagram',
url: 'http://localhost:3000/auth/instagram',
redirectUri: 'http://localhost:8000',
clientid: '48c078d56c5d4f4e9962e06443b4f156',
requiredUrlParams:['scope'],
scope: ['likes'],
scopeDelimiter: '+',
authorizationEndpoint: 'https://api.instagram.com/oauth/authorize'
});
});
The code looks alright to me.Please let me know what mistake I'm making.
Check here i have made a working sample without injecting ngMessages and satellizer
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="nav">
Login</a>
Signup
<a ng-click="logout()" href=""></a>
</div>
</div>
</div>
</div>
<div class="container">
<div ng-view=""></div>
</div>
DEMO
So I started from scratch and rebuilt it as follows. Freshly downloaded angularJS (1.5.8) and I've simply deposited both angular.js and angular-route.js in the library folder. Set up like this: https://gyazo.com/311679bf07249109671d621bc89d2d52
index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>TITLE</title>
<link rel="stylesheet" type="text/css" href="css/main.css" charset="utf-8">
</head>
<body ng-controller="MainController">
<div class="header">
<h1>Alice Birt Photography</h1>
</div>
<div class="navbar">
<ul>
<li>About Me</li>
<li>My Photography</li>
<li>My Blog</li>
</ul>
</div>
<div ng-view></div>
<div class="footer">
<ul>
<li>Facebook</li>
</ul>
</div>
<!-- JS-Library -->
<script type="text/javascript" src="library/angular.js"></script>
<script type="text/javascript" src="library/angular-route.js"></script>
<!-- JavaScript -->
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/app.js"></script>
app.js
var app = angular.module("myApp", ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/blog', {
controller: 'BlogController',
templateUrl: 'page/blog.html'
})
.when('/photo', {
controller: 'PhotoController',
templateUrl: 'page/photography.html'
})
.when('/about', {
controller: 'AboutmeController',
templateUrl: 'page/aboutme.html'
})
});
app.controller('MainController', function($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
})
app.controller('BlogController', function($scope, $routeParams) {
$scope.name = 'BlogController';
$scope.params = $routeParams;
})
app.controller('PhotoController', function($scope, $routeParams) {
$scope.name = 'PhotoController';
$scope.params = $routeParams;
})
app.controller('AboutmeController', function($scope, $routeParams) {
$scope.name = 'AboutmeController';
$scope.params = $routeParams;
})
What's the error you are getting, you need to give more details about it. Though you can try,
$routerProvider.otherwise(redirectTo: '/blog');
It automatically redirects to blog when no other route is loaded. and also I couldn't find ng-app directive in your html part, you should look into that.