What am I doing wrong? I've followed countless tutorials on Youtube/Google and yet it doesn't seem to be working.
I want to load games and when you click on one of them, it should give a detail view. This all worked fine in Angular only, but I wanted to try in Ionic for the animation.
Note: Following code is to display the list of games.
Index.html
<body ng-app="myApp">
<script id="list.html" type="text/ng-template">
<ion-nav-view></ion-nav-view>
</script>
</body>
Controller
var ctrl = angular.module('Controllers', []);
ctrl.controller('MainController', ['$scope', '$http', '$location', 'games', function($scope, $http, $location, games){
$scope.games = [];
$scope.games = games.all();
}]);
You can assume I get data in code above.
App config
app.config(['$stateProvider',function($stateProvider) {
$stateProvider
.state('list', {
url: "/",
templateUrl: 'templates/list.html',
controller: 'MainController'
})
}])
List.html
<ion-view view-title="Games">
<ion-refresher pulling-text="Refresh..." on-refresh="refresh()"></ion-refresher>
<ion-content>
<div class="game" ng-repeat="game in games.results" ng-click="checkDetail(game, $index)">
<!--<img ng-src="{{ game.image.screen_url }}" alt="{{ game.aliases }}" />-->
<h3>{{ game.name }}</h3>
</div>
</ion-content>
</ion-view>
Codepen
Here's a codepen I based it on
http://codepen.io/darrenahunter/pen/oDKid
You have to declare a ui-view to inject template from state.
Edit your index.html like that :
<body ng-app="myApp">
<div ui-view>
</div>
</body>
or
<body ng-app="myApp">
<ion-nav-view name="content"></ion-nav-view>
</body>
and edit your state like that
.state('statename', {
url: "/",
views: {
'content': {
templateUrl: 'yourTemplate.html',
controller: "yourCtrl"
}
}
}
that way you force to inject your view in that ion-nav-view.
The same way you can create
<div ui-view="content"></div>
Related
I would like to use one controller defined in views, but the $scope does not define anything. Is there a way to do this? Please share a simple example in order to understand.
I have this index.html
<body ng-app="ehc">
<h1>{{home}}+{{a}}+{{b}}</h1>
<ion-side-menus enable-menu-with-back-views="false" delegate-handle="left">
<!-- Left menu -->
<ion-side-menu side="left" is-enabled="true">
<ion-header-bar class="bar-stable">AAA</ion-header-bar>
<ion-content>
<div class="list">
<div class="item item-divider">
Candy Bars
</div>
</div>
</ion-content>
</ion-side-menu>
<ion-side-menu-content edge-drag-threshold="true" drag-content="true">
<!-- Main content, usually <ion-nav-view> -->
<ion-nav-bar class="bar-positive" >
<ion-nav-title>
<h2>hello world title *{{home}}*</h2>
</ion-nav-title>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-view>
<ion-content class="has-header">
<div class="row">
<div class="col-50">
<div ui-view="a"></div>
</div>
<div class="col-50">
<div ui-view="b"></div>
</div>
</div>
</ion-content>
</ion-view>
</ion-side-menu-content>
<script type="text/ng-template" id="templates/a.html">
<ion-view>
<ion-content class="has-header">
**{{a}}**
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="templates/b.html">
<ion-view>
<ion-content class="has-header">
**{{b}}**
</ion-content>
</ion-view>
</script>
</body>
<script src="js/app.js"></script>
And this is my model definition app.js
var app = angular.module("ehc", ["ionic"])
.config(function ($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('Home', {
url: '/',
controller: "HomeCtrl",
//template:"<ion-header-bar></ion-header-bar><ion-content><h1>hello dal AngularJs</h1></ion-content>",
views: {
"a": {
templateUrl: 'templates/a.html'
},
"b": {
templateUrl: 'templates/b.html'
}
}
});
}).controller("HomeCtrl", ["$scope", "$ionicSideMenuDelegate",
"$routeParams", "config", "$q", "$http"], function ($scope, $ionicSideMenuDelegate, $routeParams, config, $q, $http) {
$scope.toggleLeft = function () {
$ionicSideMenuDelegate.toggleLeft();
};
//carico le lingue e il menu
console.log("AAAAAAAAAAAA");
$scope.home = "Pippo";
$scope.a="XAX";
$scope.b="XBX";
})
console is empty and also the scope in html template. Please if you have the solution, use very simple example.
I've read here and I thought it worked Rakrap Jaknap answered on 2015-04-17 08:01
Very similar issue: Why controller does not work in UI-router of angularjs?
The point here is:
Controller always belongs to View, never to state.
Other words, to use same type of controller (but two instances for each view), we have to do that kind of declaration:
$stateProvider.state('Home', {
url: '/',
// instead of this
//controller: "HomeCtrl",
views: {
"a": {
templateUrl: 'templates/a.html',
controller: "HomeCtrl", // we need this
},
"b": {
templateUrl: 'templates/b.html',
controller: "HomeCtrl", // and also this
}
}
});
In case, we want to share some stuff among many views, we need different technique than "same controller". See:
How do I share $scope data between states in angularjs ui-router?
Another insight, could be covered here:
scope and controller instantiation with ui router
And including typescript, there is a detailed description and example how all views/states could target some common RootModel
Angular Digest cycle being ran but ng-bind value not updating
This is probably simple but I can't get an answer in Angular docs. Consider the example about routing in the Angular Routing docs. Here is the main html template.
<body>
<div ng-view></div>
</body>
</html>
Every view has its own controller, as per:
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
Everything fine so far, but:
QUESTION: how can I set up a controller for the main template?
Say, for example, that I want to have something like:
<html>
<body>
<a ng-click="someFunction()">Function</a>
<div ng-view></div>
</body>
</html>
How and where do I define someFunction()?
Many thanks for the help.
Use ng-controller as attribute in your html element, in this case body.
<html>
<body ng-controller= "myController">
<a ng-click="someFunction()">Function</a>
<div ng-view></div>
</body>
</html>
Write your function in myController
app.controller("myController",function($scope){
$scope.someFunction=function(){
//your code
}
});
use ngController directive:
<html>
<body ng-controller="mainController">
<a ng-click="someFunction()">Function</a>
<div ng-view></div>
</body>
</html>
so for particular partial if you want a controller without mentioning in app.js in that case you can use ng-controller.
i have two html pages which are named main.html and detail.html. When click the link button in main,i wanna open detail page for details.
Main.html:
<body ng-app="MyApp" ng-controller="mainController">
<div data-role="page" data-theme="b">
<a ng-href="detail.html"></a>
</div>
</body>
detail.html:
<div data-role="page" data-theme="b" ng-controller="DetailContoller">
<button>{{a}}</button></div>
Contoller:
MyApp.controller("mainController", function ($scope, $http, OranService, $location) {
$scope.a = 5;
$scope.items = [];});
MyApp.controller('DetailController', function ($scope, OranService) {
$scope.a = 1;});
When Click the link button in the main page, i see only a button which text {{a}}, and my url:'localhost/Main.html'. I dont want use target=_self vs. if i use ,when return click button press, main page will reload.
Do you have any suggestion?
Thanks!
Looks like you're mixing jQuery Mobile and Angular notation.
To implement navigation in Angular you can use the core Angular service $routeProvider. You have to include the ng-route module for this.
Here's an example of how to config this on your module:
angular.module('app', ['ngRoute'])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/page1', {
templateUrl: 'page1.html',
controller: 'Page1Ctrl'
})
.when('/page2', {
templateUrl: 'page2.html',
controller: 'Page2Ctrl'
})
.otherwise({
redirectTo: '/page1'
});
}]);
Now in your html, use the directive ng-view to specify the tag that should contain the template.
<body ng-app="app">
<div ng-view>
</div>
</body>
I am new to Angular. div ng-view never works for me. Here is my code, this is copied and pasted from on of online demos. Thanks for help.
<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
<title></title>
<script src="Scripts/angular-1.2.22/angular.js"></script>
<script src="Scripts/angular-1.2.22/angular-route.js"></script>
<script src="Scripts/AngularController.js"></script>
</head>
<body >
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> Add New Order </li>
<li> Show Order </li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
</body>
</html>
---Script AngularController.js----
'use strict';
var sampleApp = angular.module('sampleApp', ['ngRoute']);
sampleApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/addOrder', {
templateUrl: 'templates/routeOne.html',
controller: 'AddOrderController'
}).
when('/showOrders', {
templateUrl: 'templates/routeTwo.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/routeThree.html'
});
}]);
//--- Add Order Controller ----
sampleApp.controller('AddOrderController', function ($scope) {
});
//--- Show Orders Controller ----
sampleApp.controller('ShowOrdersController', function ($scope) {
});
There are 2 issues regarding your code. The first and most important is that your links are incorrect, they are missing a slash.
<li> Add New Order </li>
<li> Show Order </li>
The second issue you are currently having is that on your route definition your otherwise is trying yo redirect to a file, where it actually should try to redirect to an angular defined route. An example of this could be something like this:
$routeProvider
.when('/', {
templateUrl: 'templates/routeThree.html'
})
.when('/addOrder', {
templateUrl: 'templates/routeOne.html',
controller: 'AddOrderController'
})
.when('/showOrders', {
templateUrl: 'templates/routeTwo.html',
controller: 'ShowOrdersController'
})
.otherwise({
redirectTo: '/'
});
Cheers!
Hi What wrong am i doing. I am new to angular js and i am using ng-template for routing withing the views.
myApp.config(['$routeProvider','$locationProvider',function($routeProvider,$locationPro vider) {
$routeProvider.
when('/', {
templateUrl: 'add.html',
controller: 'myAppCtrl'
}).
when('/edit',{
templateUrl:'edit.html',
controller:'myAppCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
}])
But its not working. Please help me .
below is my part of html
<body ng-controller="myAppCtrl">
<div ng-view>
<script type="text/ng-template" id="add.html">
<div>
<input type="text" ng-model="$storage.myname"/>
<input type="text" ng-model="$storage.myid"/>
<input type="number" ng-model="$storage.mynumber"/>
<button ng-click="submit();"> submit </button>
</div>
</script>
</div>
You are confusing a couple of things:
The controller that you defined in your body (ng-controller="my AppController") is also defined as controller for the route. I suspect you want one or the other but not both.
Your script tag containing the template is inside the div that it will replace (<div ng-view>). The ng-view div should be empty (<div ng-view></div>)and the template defined outside of it, possibly in the header.
I looked through your code, got solution for your routing here is working fiddle
Fiddle
Here is code
//html
<div ng-app="app">
<div ng-controller="MainCntl">
Choose:
add |
Edit |
<div ng-view></div>
<hr />
<pre>$location.path() = {{$location.path()}}</pre>
</div>
<script type="text/ng-template" id="add.html">
Add
</script>
<script type="text/ng-template" id="edit.html">
Edit
</script>
</div>
//app.js
var myApp = angular.module('app', [], function($routeProvider, $locationProvider) {
$routeProvider
.when('/add', {
templateUrl: 'add.html',
controller: MainCntl
})
.when('/edit', {
templateUrl: 'edit.html',
controller: MainCntl,
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
function MainCntl($scope, $route, $routeParams, $location) {
}