Already done research and looked up doc. How can I use AngularJS to go from page1 to page2
Module (I'm not sure am I suppose to put in Index.cshtml)
var myApp = angular.module('app', ['ngRoute', 'Anj.FormController'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.
when("/home",
{ templateUrl: "/Index.cshtml" }).
when("/form",
{ templateUrl: "/Form" }).
otherwise({ redirectTo: "/Form.csthml" });
});
Index.cshtml
<div class="container" ng-app="app" ng-controller="FormCtrl"> Go to Form.</div>
Form.cshtml
<div class="container" ng-app="app" ng-controller="FormCtrl">Go to Home.</div>
I don't think put anything in the controller, if yes please tell me or show me the code. thanks.
Try to change your templateUrl to "/[ControllerName]/Index"
Where [ControllerName] is controller that you going to call
var myApp = angular.module('app', ['ngRoute', 'Anj.FormController'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.
when("/home",
{ templateUrl: "/Home/Index" }).
when("/form",
{ templateUrl: "/Form" }).
otherwise({ redirectTo: "/Home/Form" });
});
Related
I have a problem with the function $ locationProvider.html5Mode (true), this is the setting:
var app = angular.module("app", [
"ngRoute",
"ngAnimate"
]);
// ROUTE CONFIG
app.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){
$routeProvider.
when("/archive", {
templateUrl: "archive.php",
controller: "archiveCtrl",
animate: "slide-left"
}).
when("/single", {
templateUrl: "single.php",
controller: "singleCtrl",
animate: "slide-left"
}).
otherwise({
redirectTo: "/archive"
});
$locationProvider.html5Mode(true);
});
In the head tag:
<head>
<base href="/">
</head>
The root of the site is
site.com/main.php
Where main.php contains the div ng-view
Any idea why it does not work?
here is a working example I created on JSFiddle, I removed the templateUrl and use template instead, but it shouldn't matter in this case(you are asking how does html5mode and base work)
html
<div ng-controller="mainCtrl">
single
archive
<div ng-view></div>
</div>
Javascript
var app = angular.module("myApp", [
"ngRoute"
])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when("/archive", {
template: "<p>archive</p>"
})
.when("/single", {
template: "<p>single</p>"
})
.otherwise({
redirectTo: "/archive"
});
$locationProvider.html5Mode(true);
}])
.controller("mainCtrl", function mainCtrl($scope, $location) {
$scope.$location = $location;
});
JSFiddle
I am trying to figure out how to build a SPA with angularjs. My routes are working and each partial page is loading in ng-view properly. I'm trying to load external json data. I had it working onnce but I can't figure out what I'm doing wrong. The goal is to list products and have a details page for each product. Any help would be greatly appreciated. Here's my code:
app.js
var myApp = angular.module('app', ['ngRoute']);
myApp.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {
$routeProvider.
when('/home',{
templateUrl: 'partials/home.html',
controller: "storeCtrl"
}).
when('/about',{
templateUrl: 'partials/about.html',
controller: "storeCtrl"
}).
when('/computers',{
templateUrl: 'partials/computers.html',
controller: "storeCtrl"
}).
when('/smartphones',{
templateUrl: 'partials/smartphones.html',
controller: "storeCtrl"
}).
when('/tablets',{
templateUrl: 'partials/tablets.html',
controller: "storeCtrl"
}).
otherwise({
redirectTo: '/home'
});
}]);
myApp.controller('storeCtrl', ['$scope', '$http', function($scope, $http) {
$scope.homeHeading = 'Home';
$scope.aboutHeading = 'About Us';
$scope.computersHeading = 'Computers';
$scope.smartphonesHeading = 'Smartphones';
$scope.tabletsHeading = 'Tablets';
$http.get('products.json').success(function(data) {
$scope.products = data;
});
console.log($scope.products);
}]);
computers.html
<div ng-controller="storeCtrl">
<h1>{{computersHeading}}</h1>
<div ng-repeat="item in products">
<p>{{ item.name }}</p>
</div>
</div>
You should try this
$http.get('products.json').then(function(result) {
$scope.products = result.data;
});
And remove ng-controller from the view as you have already defined it in myApp.config()
Try to use $http.get service which returns a promise object.
I'm using cordova angularjs together. I will use the routeprovider.
index.js:
var appGenerator = angular.module('appGenerator', ['ngRoute', 'ngResource']);
appGenerator.config(function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
appGenerator.config(['$routeProvider' function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: "partials/tablePage.html",
controller: "MainCtrl"
})
.when('/contacts', {
templateUrl: "partials/contacts.html",
controller: "ContactsCtrl"
}).otherwise({
redirectTo: '/'
}); }]);
html:
{{table.tablename}}
But I get an net::ERR_FILE_NOT_FOUND(file:///contacts) error
What I'm doing wrong?
I configured my routes in the module and it's working pretty good, but I'm also trying to add a loading indicator,which will intercept any http request and put a loading image but it's not working. Here's my module:
var myApp = angular.module('myApp', ['ngRoute', 'angular-loading-bar', 'ngAnimate', 'ui.bootstrap']);
myApp.config(["$routeProvider", "$locationProvider",
function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: "/pages/home.html"
})
.when("/currency", {
templateUrl: "/app/series/currencySearch.html",
controller: "currencyController"
})
.when("/others", {
templateUrl: "/app/series/genericSearch.html",
controller: "genericController"
})
.otherwise({
redirectTo: "/"
});
$locationProvider.html5Mode(false);
}]);
myApp.config(['cfpLoadingBarProvider', function (cfpLoadingBarProvider) {
cfpLoadingBarProvider.spinnerTemplate = '<div style="margin:20% 0 0 50%;"><span class="fa fa-spinner fa-pulse fa-3x"></div>';
}]);
It's possible to use two config functions this way?
Many thanks!
I don't see why not. It will just run them one after another.
That way, if you want to, you could write a separate config method for each $provider object.
The question is, why does it have to have two configs? It should work fine as one config method.
myApp.config(["$routeProvider", "$locationProvider", "cfpLoadingBarProvider",
function ($routeProvider, $locationProvider, cfpLoadingBarProvider) {
$routeProvider
.when("/", {
templateUrl: "/pages/home.html"
})
.when("/currency", {
templateUrl: "/app/series/currencySearch.html",
controller: "currencyController"
})
.when("/others", {
templateUrl: "/app/series/genericSearch.html",
controller: "genericController"
})
.otherwise({
redirectTo: "/"
});
$locationProvider.html5Mode(false);
cfpLoadingBarProvider.spinnerTemplate = '<div style="margin:20% 0 0 50%;"><span class="fa fa-spinner fa-pulse fa-3x"></div>';
}]);
this is my app.js
var cricketapp = angular.module('cricketapp', ['ngCookies']).
config(['$routeProvider', function($routeProvider, $httpProvider, $cookies){
$routeProvider.
when('/', {
templateUrl: '/partials/games-pending-entry.html',
controller: HomeCtrl
}).
when('game/:gameId',{
templateUrl: 'partials/shortlist.html',
controller: ShortlistCtrl
}).
otherwise({redirectTo: '/'});
//$httpProvider.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
}]);
and controllers.js
function HomeCtrl($scope, $http){
$http.get('/api/games-pending-entry').success(function(data){
$scope.games_pending_entry = data;
});
}
function ShortlistCtrl($scope, $http, $routeParams){
$scope.gameId = $routeParams.gameId;
$http.get('api/get-players').success(function(data){
$scope.players = data;
})
}
and in my html, i am calling the link as
<a class='btn btn-warning' href='#/game/{{ game.id }}'>Enter Shortlist</a>
when i click on this link, i am redirected back to /#/
where am i going wrong?
Your $routeProvider rules are wrong:
when('game/:gameId',{
should become
when('/game/:gameId',{
As the route isn't recognized, it redirects to '/'. Changing that will most likely solve the problem.
Also, you may find ngHref useful, to avoid having links broken, before the {{model}} bindings resolved: http://docs.angularjs.org/api/ng.directive:ngHref