i make a crud with route in ionic. but the routing doesnt work. when i run this project, it doesnt show anything like . when i look the console, there is a warning :
WARNING: Tried to load angular more than once.
can anyone help me please?
index :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
</head>
<body ng-app="myAPP">
<ion-pane>
<ion-header-bar class="bar-stable">
<div class="bar bar-header bar-calm">
<h1 class="title" align="center">CRUD</h1>
</div>
<div class="tabs-striped tabs-top">
<div class="tabs">
<a class="tab-item" href="#/">List</a>
<a class="tab-item" href="#/addData">Add Data</a>
<a class="tab-item" href="#/editData">Edit Data</a>
</div>
</ion-header-bar>
<ion-content>
<div>
<div ng-view></div>
</div>
</ion-content>
</ion-pane>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/route.js"></script>
<script src="controller/controller.js"></script>
<script src="controller/edit.js"></script>
</body>
</html>
app. js :
var app = angular.module('myAPP', ['ionic','ngRoute'])
route.js :
app.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/',{
templateUrl : '../pages/list.html',
controller : 'controller'
})
.when('/addData',{
templateUrl : '../pages/addData.html',
controller : 'controller'
})
.when('/editData/:id',{
templateUrl : '../pages/update.html',
controller : 'controllerEdit'
})
.otherwise({
redirectTo : '/'
});
}])
list.html :
<div class="container">
<h2>{{title}}</h2>
</br>
</br>
<table class="table table-striped" ng-init="getData()">
<tr>
<th>NO</th>
<th>Nama</th>
<th>Alamat</th>
<th>Action</th>
</tr>
<tr ng-repeat="x in dataList track by $index">
<td>{{$index+1}}</td>
<td>{{x.nama}}</td>
<td>{{x.alamat}}</td>
<td>
<button type="button" class="btn btn-info" ng-click="edit(x.id)">Edit</button>
<button type="button" class="btn btn-danger" ng-click="delete(x.id)">Delete</button>
</td>
</tr>
</table>
</div>
ionic.bundle.js is a concatenation of:
ionic.js,
angular.js,
angular-animate.js
angular-sanitize.js,
angular-ui-router.js
ionic-angular.js
and your app.js should be
var app = angular.module('ionicApp', [ 'ionic' ])
app.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url : "/tab",
abstract : true,
templateUrl : "templates/tabs.html",
controller : 'dashboardCtrl'
})
// Each tab has its own nav history stack:
.state('tab.overview', {
url : '/overview',
views : {
'tab-overview' : {
templateUrl : 'templates/tab-overview.html',
//controller : 'overviewCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/overview');
})
Related
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'm trying to set up AngularJS routing for a website inside a folder of another website. However every time I click on a link the URL displays the characters #!/ before the page name. So for example if the link for the home page is #/, when clicked on the URL redirects to #!/#%2F and encodes the forward slash. Here is the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head>
<title>Appening - Photo Sharing App</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="icon" type="image/png" href="/Appening/Images/favicon.png"/>
<link rel="apple-touch-icon" type="image/png" href="/Appening/Images/applefav.png"/>
<link rel="stylesheet" type="text/css" href="/Appening/Styles/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/Appening/Styles/styles.css"/>
<base href="/Appening"/>
</head>
<body>
<div data-ng-controller="collapseMenuCtrl">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-ng-click="isNavCollapsed = !isNavCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<div data-ng-view></div>
<script src="/Appening/Scripts/angular.min.js"></script>
<script src="/Appening/Scripts/angular-route.min.js"></script>
<script src="/Appening/Scripts/angular-animate.min.js"></script>
<script src="/Appening/Scripts/ui-bootstrap-tpls-2.3.1.min.js"></script>
<script src="/Appening/Scripts/script.js"></script>
And here is the script.js file:
var app = angular.module("app", ["ngRoute", "ngAnimate", "ui.bootstrap"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "main.html"
})
.when("/About", {
templateUrl: "about.html"
})
.when("/Contact", {
templateUrl: "contact.html"
});
});
I set the base line in the head to the containing subfolder but still no good. This is my first time setting up Angular routing for a subdirectory, am I missing something? How do I remove the characters and successfully route to these pages without the URL redirecting?
Any help would be much appreciated.
configure $locationProvider and set html5Mode to true.
Here is a code snippet-
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: "main.html"
})
.when("/About", {
templateUrl: "about.html"
})
.when("/Contact", {
templateUrl: "contact.html"
});
$locationProvider.html5Mode(true);
});
I want to make a form login. But when i want to see the result in browser, nothing happen. when i open console, the error is :
Uncaught SyntaxError: Unexpected token . services.js:3
I dont know whats wrong with the code. Anyone can help me please? I'm new in ionic
index :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/constant.js"></script>
</head>
<body ng-app="starter" ng-controller="AppCtrl">
<ui-view></ui-view>
</body>
</html>
controller :
angular.module('starter')
.controller('AppCtrl', function($scope, $state, $ionicPopup, AuthService, AUTH_EVENTS){
});
services :
angular.module('starter');
.service('AuthService', function($q, $http, API_ENDPOINT) {
return {
};
})
.factory('AuthInterceptor', function($rootScope, $q, AUTH_EVENTS){
return {
};
})
.config(function ($httpProvider){
$httpProvider.interceptors.push('AuthInterceptor');
});
app.js :
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('outside',{
url : '/outside',
abstract : true,
templateUrl : 'templates/outside.html'
})
.state('outside.login',{
url : '/login',
templateUrl : 'templates/login.html',
controller : 'LoginCtrl'
})
$urlRouterProvider.otherwise('/outside/login')
})
form login :
<ion-view view-title="Please Sign in">
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Name" ng-model="user.name">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="user.password">
</label>
</div>
<button class="button button-full button-balanced" ng-click="login()">Login</button>
<button class="button button-full button-clear button-positive" ui-sref="outside.register">Register Now!</button>
</ion-content>
</ion-view>
In your services remove the ; in the first line.
angular.module('starter'); <--- This one
I am new to angular and trying to create new login app, i want to maintain separate controller but when separate the controllers from controllers.js I am getting function got undefined error.
here is My code:
app.js
<!-- begin snippet: js hide: false -->
// MainCtrl.js
angular.module('myapp.controllers', [])
.controller('MainCtrl',
function($scope, $state) {
console.info("inside main ctrl");
});
//
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers/LoginCtrl.js"></script>
<script src="js/controllers/MainCtrl.js"></script>
<!-- <script src="js/controllers.js"></script> -->
</head>
<body ng-app="starter" ng-controller = "MainCtrl">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
login.html
<ion-view view-title="Login" name="login-view">
<ion-content class="padding">
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Username" ng-model="data.username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="data.password">
</label>
</div>
<button class="button button-block button-calm" ng-click="login()">Login</button>
</ion-content>
</ion-view>
got this error:
ionic.bundle.js:26771 Error: [ng:areq] Argument 'LoginCtrl' is not a function, got undefined
http://errors.angularjs.org/1.5.3/ng/areq?p0=LoginCtrl&p1=not%20a%20function%2C%20got%20undefined
at ionic.bundle.js:13415
at assertArg (ionic.bundle.js:15191)
at assertArgFn (ionic.bundle.js:15201)
at $controller (ionic.bundle.js:23350)
at self.appendViewElement (ionic.bundle.js:59763)
at Object.switcher.render (ionic.bundle.js:57874)
at Object.switcher.init (ionic.bundle.js:57794)
at self.render (ionic.bundle.js:59623)
at self.register (ionic.bundle.js:59581)
at updateView (ionic.bundle.js:65261)
The code works as expected if I replace the myapp.controller with starter.controller in LoginCtrl.js and adding starter.controller along with myapp.controller in app.js.
angular.module('starter', ['ionic', 'myapp.controllers', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
cache:false,
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
// LoginCtrl.js
angular.module('starter.controllers',[])
.controller('LoginCtrl', function($scope, $state){
$scope.login = function() {
console.log("LOGIN user");
// $state.go('app.home')
}
});
I'm new to Angular.js and i can't figure out why my partial templates are not bound to the ng-view div.The ng-view is just not there when i try to inspect it with firebug. Here is my code :
html header and body:
<html lang="en" ng-app="BPMNApp">
<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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- External Libraries -->
<script src="js/external/jquery-1.10.2.min.js"></script>
<script src="js/external/modernizr-2.6.2.min.js"></script>
<script src="js/external/angular.js"></script>
<script src="js/external/angular-resource.js"></script>
<script src="js/external/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<!-- General Navigation Bar -->
<nav>Simple Bootstrap nav
</nav>
<div><h1>View Should be right under here</h1></div>
<div id='contentcontainer'>
<div class='container' ng-view></div>
</div>
App :
'use strict';
/* App Module */
var BPMNApp = angular.module('BPMNApp', [
'ngRoute',
'BPMNControllers',
'BPMNServices'
]);
BPMNApp.config(['$routeProvider','$resourceProvider','$locationProvider',
function($routeProvider,$resourceProvider,$locationProvider) {
$routeProvider.
when('/landing', {
templareUrl: 'partials/landing.html',
controller : 'LandingCtrl'
}).
when('/process-definitions', {
templateUrl: 'partials/process-definitions.html',
controller: 'ProcessDefinitonCtrl'
}).
when('/process-definitions/:definitionId', {
templateUrl: 'partials/definition-detail.html',
controller: 'DefinitionDetailCtrl'
}).
otherwise({
redirectTo: '/landing'
});
//$locationProvider.html5Mode(true);
}]);
Controllers :
var BPMNControllers = angular.module('BPMNControllers', []);
BPMNControllers.controller('LandingCtrl',['$scope',
function($scope){
$scope.welcome = 'BPMN - Rest Interface';
}])
BPMNControllers.controller('ProcessDefinitionCtrl', ['$scope', 'ProcessDefinitions',
function($scope, ProcessDefinitons) {
$scope.defs = ProcessDefintions.query();
}]);
BPMNControllers.controller('DefinitionDetailCtrl', ['$scope','$routeParams','ProcessDefinitions',
function($scope,$routeParams, ProcessDefinitions) {
$scope.def = ProcessDefinitions.get({id : $routeParams.definitionId})
}]);
and the templates:
process-definitions.html :
<div class="container-fluid">
<div class="row" ng-repeat="def in defs">
<div class="col-md-1">{{def.name}} </div>
<div class="col-md-1">{{def.id}} </div>
<div class="col-md-1">{{def.version}}</div>
</div>
landing.html :
<h1>{{welcome}}<h1>
Even the simple landing.html is not displayed correctly, and i can't figure out why. Thanks for your help.
<a href="/process-definitons/{{def.id}}">
you need a # before the url
<a href="#/process-definitons/{{def.id}}">
when('/landing', {
templareUrl: 'partials/landing.html',
controller : 'LandingCtrl'
})
I see a typo there. change templareUrl to templateUrl.