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.
Related
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 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.
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
I'm developing Admin panel and user panel. Admin panel was working fine and the code was written in ExpressJs. Now i wanted to design my User panel in AngularJs. i created HTML pages and app.js page.
use strict;
angular.module('myApp', ['ngRoute']).config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'home.html',
controller: 'homeCtrl'
});
$routeProvider.when('/profile/:userId', {
templateUrl: 'profile.html',
controller: 'profileController'
});
$routeProvider.otherwise({redirectTo: '/home'});
}])
.controller('profileController', function($scope, $http, $routeParams) {
$scope.params = $routeParams;
$http.get('json_files/record_'+$scope.params.userId+'.json').success(function(response) {
$scope.details = response;
});
})
.controller('homeController', function() {
});
This is my app.js file.
Below is my profile.html
<html lang="en" ng-app="myApp" class="no-js">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="http://localhost:8000/">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="profileController">
<table>
<thead>
<tr>
<td>CategoryID</td>
<td>CategoryName</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="category in categories">
<td>{{category.CategoryID}}</td>
<td>{{category.CategoryName}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I'm getting the error as below whenever i'm trying to access the page as http://localhost:8000/profile/1
Not Found
The requested URL /profile was not found on this server.
Don't know whats going wrong... or where I did mistake...
Kindly suggest anything.
You are missing ng-view in your index page. All your routes will be replaced by this tag.
refer this link : https://docs.angularjs.org/api/ngRoute/directive/ngView
index.html
<html lang="en" ng-app="myApp" class="no-js">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
home.html
<div> Home page
<a href="#/profile/1" >Go to Profile page</a>
</div>
profile.html
<div> Profile page
<a href="#/home" >Go to Home page</a>
<div>
app.js
(function() {
"use strict";
angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'home.html',
controller: 'homeCtrl'
});
$routeProvider.when('/profile/:userId', {
templateUrl: 'profile.html',
controller: 'profileController'
});
$routeProvider.otherwise({
redirectTo: '/home'
});
}])
.controller('profileController', function($scope, $http, $routeParams) {
$scope.params = $routeParams;
/*$http.get('json_files/record_' + $scope.params.userId + '.json').success(function(response) {
$scope.details = response;
});*/
})
.controller('homeCtrl', function() {})
.controller('profileController', function() {})
})();
You have to put your project root path first, then '#' and than the route.
Check https://docs.angularjs.org/tutorial/step_09 for more details.
I have the below angular application.
// app.js
var rippleApp = angular.module('rippleApp', ['ngRoute', 'ngAnimate', 'ngAria', 'ngMaterial']);
// configure our routes
rippleApp.config(function ($routeProvider, $compileProvider) {
$routeProvider
// route for the home page
.when('/home', {
templateUrl: '../pages/home.html',
controller: 'mainController'
})
// route for the about page
.when('/about', {
templateUrl: '../pages/about.html',
controller: 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl: '../pages/contact.html',
controller: 'contactController'
});
});
// create the controller and inject Angular's $scope
rippleApp.controller('sideNavController', function ($scope, $mdSidenav) {
$scope.openLeftMenu = function () {
$mdSidenav('left').toggle();
};
$scope.openRightMenu = function () {
$mdSidenav('right').toggle();
};
});
rippleApp.controller('mainController', function ($scope, $mdSidenav) {
// create a message to display in our view
$scope.pageClass = 'page-home';
$scope.message = 'Everyone come and see how good I look!';
$scope.openLeftMenu = function () {
$mdSidenav('left').toggle();
};
$scope.openRightMenu = function () {
$mdSidenav('right').toggle();
};
});
rippleApp.controller('notificationsController', function ($scope, $mdToast, $document) {
$scope.showToast1 = function () {
$mdToast.show(
$mdToast.simple()
.textContent('Hello World!')
.hideDelay(3000)
);
};
$scope.showToast2 = function () {
var toast = $mdToast.simple()
.textContent('Hello World!')
.action('OK')
.highlightAction(false);
$mdToast.show(toast).then(function (response) {
if (response == 'ok') {
alert('You clicked \'OK\'.');
}
});
}
});
rippleApp.controller('aboutController', function ($scope) {
$scope.pageClass = 'page-about';
$scope.message = 'Look! I am an about page.';
});
rippleApp.controller('contactController', function ($scope) {
$scope.pageClass = 'page-contact';
$scope.message = 'Contact us! JK. This is just a demo.';
});
and the below index file
<!DOCTYPE html>
<html>
<head>
<!--
Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
For details, see http://go.microsoft.com/fwlink/?LinkID=617521
-->
<!--
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
-->
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!--Scripts-->
<!--Stylesheets-->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link rel="stylesheet" href="css/bundle.css" />
<link rel="stylesheet" href="css/index.css">
<title>RippleAlpha</title>
</head>
<body ng-app="rippleApp" ng-controller="mainController">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<div id="sideNavContainer" layout="row" ng-cloak>
<md-sidenav md-component-id="left" class="md-sidenav-left">Test case</md-sidenav>
<md-content>
<md-button class="navbar-brand" ng-click="openLeftMenu()">SM</md-button>
</md-content>
</div>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a ng-href="#home"><i class="fa fa-home"></i> Home</a></li>
<li><a ng-href="#about"><i class="fa fa-shield"></i> About</a></li>
<li><a ng-href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
</ul>
</div>
</nav>
<div id="toastContainer" ng-controller="notificationsController as ctrl" layout="row" ng-cloak>
<md-button ng-click="showToast1()">notification</md-button>
<md-button ng-click="showToast2()">notification - callback</md-button>
</div>
</header>
<div id="main">
<div class="page {{ pageClass }}" ng-view></div>
</div>
<script src="scripts/bundle.js"></script>
<script src="scripts/app.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</body>
</html>
I'm able to get routes and such working in browser / ripple emulator but when debugging on device, I am unable to use the routing and navigating does nothing.
This is angular 1.5.X
I figured out my problem.
For further reference from anyone looking for a solution to this issue.
My problame was that I was suing the url '../pages*'
Since this is not an http url and rather a fail:/// i just had to change it to start at 'pages/' a relative url.
Problem solved and working now.