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.
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.
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
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
i am using routing in angular.js
my code is :
//controllers.js
var ar= angular.module('ar', []);
ar.controller('lc', ['$scope', '$http', function($scope, $http){
$http.get('login.json').success(function(data){
$scope.art=data;
})
}])
ar.controller("search", function(){
this.search='a';
this.getdata= function (searchquery) {
console.log(searchquery);
}
});
//main.js (app.js)
var myApp= angular.module('myApp',[
'ngRoute',
'ar'
]);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'inc/login.html',
controller: 'lc'
}).
otherwise({
redirectTo: '/login'
});
}]);
when i goto the Homepage its not redirect to the Login page and when i click on the login button its not working either.
<!DOCTYPE html>
<html class="no-js" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script src="js/main.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>Login</li>
</ul>
</div><!--/.navbar-collapse -->
in bottom:
i have include jquery and bootstrap's file.
this is a bootstrap application.
this is live example :
Live example
Routes are specified correctly. What you need is to define the ng-view in your template so that the templates mentioned in specific routes are loaded into the main template
Something like :
<div class="page-container">
<div ng-view></div>
</div>
ng-view will be the place where every template mentioned in the router will be loaded.
i think there might be issue with your path .. its mvc base and routes define your path :)