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) {
}
Related
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>
I have a problem when I try to use the $routeProvider.
It just doesn't work at all and I don't see any problems :
var app = angular.module('app', ['ngStorage','ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/index.html',
controller: 'authCtrl'
})
.when('/dashboard', {
templateUrl: '/tpl/dashboard.html',
controller: 'mainCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
Here is index.html :
<html>
<head>
<title>Authenticate | BulbThings</title>
<script src="angular/angular.min.js"></script>
<script src="angular/ngStorage.min.js"></script>
<script src="angular/angular-route.min.js"></script>
<script src="js/build/app.min.js"></script>
</head>
<body ng-app="app">
<div ng-show="authenticate">
<span ng-cloak ng-show="addr" id="address">{{address}}</span>
<input type="mail" ng-model="email" placeholder="Email"><br />
<input type="password" ng-model="password" placeholder="Password"><br />
<button ng-click="auth.connect(email, password)" ng-model="signin">Sign in</button><br/><br/>
</div>
<p>{{error}}</p>
</body>
</html>
I set $scope.authenticate = true in the controller, and when I load the page it doesn't show up.
When I try /dashboard it returns me Cannot GET /dashboard.
I can't see what is going wrong I hope you can help me !
Thank you.
2 things, first you need the ng-view to render the view
<div ng-view=""></div>
And second, if you are getting "Cannot GET /dashboard" is because in angular the routes are in the hash, example:
yourdomain.com/#/dashboard, and not yourdomain.com/dashboard. So here you have a link if you want to go to dashboard:
<a ng-href="#/dashboard">Dashboard</a>
You are missing tag with ng-view directive.
I had a similar issue, cost me days of searching. The href was incorrect, coudln't make it work with "#home" or "home"
Here is my working code :
<html ng-app="app">
<head>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<title>Testing</title>
</head>
<body>
home
about
<div ng-view="">
</div>
<script>
var app = angular.module('app', ['ngRoute'])
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'views/home.html'
})
.when('/about', {
templateUrl: 'views/about.html'
})
}]);
</script>
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!