I am new for AngularJS and I'm having issue with moving one page to another and I have to pass parameters from main page to details page, I followed below code but it's not working and I am getting error:
ReferenceError: $location is not defined at a.$scope.moveToOthers (showOrders.js:4)
app.js:
var sampleApp = angular.module('sampleApp', ["ngRoute"]);
sampleApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/AddNewOrder', {
templateUrl: 'templates/add_orders.html',
controller: 'AddOrderController'
}).
when('/ShowOrders', {
templateUrl: 'templates/show_orders.html',
controller: 'ShowOrdersController'
}).
when('/ExpandOrders', {
templateUrl: 'templates/expand_orders.html',
controller: 'ExpandOrderController'
}).
when('/OthersPage:id?', {
templateUrl: 'templates/others_page.html',
controller: 'OthersPageController'
}).
otherwise({
redirectTo: '/AddNewOrder'
});
}]);
show_orders.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="controllers/othersPage.js"></script>
<title>AngularJS Routing example</title>
</head>
<body>
<h1>Show orders</h1>
<button ng-click="moveToOthers()" type="button" class="btn btn-default" style="margin:10px 0px 10px 0px;">Others Page</button>
</body>
</html>
showOrders.js:
sampleApp.controller('ShowOrdersController', function ($scope, $location) {
$scope.msg = 'This is Show orders screen123';
$scope.moveToOthers = function () {
$location.path('/others_page/100')
}
});
I suggest this:
Correct your router: change '/OthersPage:id?' to '/OthersPage/:id'
On the <button> element don't use a function to change your path. Use instead an ng-href like this: <a ng-href="/OthersPage/100" type="button" class="btn btn-default" style="margin:10px 0px 10px 0px;">Others Page</a>
Related
The ng-view is not showing pages and routing doesn't seem to work but it is loading the angular-route.min.js in the browsers console/network.
The file structure is folders -> css, fonts, js, pages. there are 2 files in the root which are app.js and index.html and inside the pages folder are 2 more files which are the main.html and second.html which are supposed to be added to the ng-view parts but wont load.
When clicking on a link for the main.html content it comes back with http://127.0.0.1/main and completely ignores the /pages folder
**updated code, got the first page to load its content but the second one doesn't and there are no errors in the console so assumably I have the wrong href path?
Header Scripts
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="app.js"></script>
HTML
<div class="row">
Main Content
Second Content
</div>
<div class="row">
<div class="col-md-12">
<div ng-view></div>
</div>
</div>
<hr>
</div>
JS
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateURL: 'pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateURL: 'pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', function($scope) {
}]);
myApp.controller('secondController', ['$scope', '$log', function($scope, $log) {
}]);
Use templateUrl instead of templateURL.
In your html use #/main.
Don't use tow ng-views
JS code
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/main', {
templateUrl: 'main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', function($scope) {
$scope.name = "world"
}]);
myApp.controller('secondController', ['$scope', '$log', function($scope, $log) {
}]);
HTML code
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="//code.angularjs.org/1.4.0/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="mainController">
<p>Hello {{name}}!</p>
<div class="row">
Main Content
Second Content
</div>
<div class="row">
<div class="col-md-12">
<div ng-view></div>
</div>
</div>
<hr>
</body>
</html>
Here is working plunker
EDIT
Please note I have used angular version 1.4.0. If you want to use angular 1.6.1 they have changed default hash-prefix used for $location hash-bang URLs it is now ('!') instead of ('')
So you need to add this in your config phase.
myApp.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
now it will work with angular 1.6.1 as well
.when('/main', {
templateURL: 'pages/main.html',
controller: 'mainController'
})
or
use this url to access main page :
http://127.0.0.1/
It should work, as you have not set routing for main in config.
I am running my AngularJS code in VS 2015. The routing just doesn't work. I tried everything but I get the url like below in the address bar of the browser when I click on the hyperlink "Add" and nothing gets displayed and same issue with other hyperlinks also. Please advise.
"http://localhost:21530/Index.html#!#Add"
Here is the code:
HTML File:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/Main/Home.js"></script>
</head>`enter code here`
<body>
<div>
<ul>
<li>Homes</li>
<li>Add</li>
<li>Edit</li>
<li>Delete</li>
</ul>
<ng-view>
</ng-view>
</div>
</body>
</html>
Home.js:
/// <reference path="../angular.js" />
var MyApp = angular.module("MyApp", ["ngRoute"]);
MyApp.config(function($routeProvider) {
$routeProvider.
when("/Add", {
templateUrl: "Views/Add.html",
controller: "AddController"
})
.when("/Edit", {
templateUrl: "Views/Edit.html",
controller: "EditController"
})
.when("/Delete", {
templateUrl: "Views/Delete.html",
controller: "DeleteController"
})
.when("/Home", {
templateUrl: "Views/Home.html",
controller: "HomesController"
});
});
MyApp.controller("AddController", function($scope) {
$scope.message = "Add Screen";
});
MyApp.controller("EditController", function($scope) {
$scope.message = "Edit Screen";
});
MyApp.controller("DeleteController", function($scope) {
$scope.message = "Delete Screen";
});
MyApp.controller("HomeController", function($scope) {
$scope.message = "Home Screen";
});
change all your href as below :
<div>
<ul>
<li>Homes</li>
<li>Add</li>
<li>Edit</li>
<li>Delete</li>
</ul>
<ng-view>
</ng-view>
</div>
Try to activate the HTML5 mode ($locationProvider.html5Mode(true);) in MyApp.config.
See the official doc: https://docs.angularjs.org/api/ngRoute/service/$route#example
MyApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when("/Add", {
templateUrl: "Views/Add.html",
controller: "AddController"
})
.when("/Edit", {
templateUrl: "Views/Edit.html",
controller: "EditController"
})
.when("/Delete", {
templateUrl: "Views/Delete.html",
controller: "DeleteController"
})
.when("/Home", {
templateUrl: "Views/Home.html",
controller: "HomesController"
});
}]);
You have to inject $routeprovider first. The $routeprovider inside function() you have written is just the parameter name which can be anything.
Please see that you open and close the square brackets properly.. Try Running the application now. If it doesnt work, also try <a ng-href="#Add">Add</a> inside the nav li.
Hope it works for you :) .
I have the following code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/styles/bootstrap.min.css" rel="stylesheet" />
<link href="~/styles/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script>
</head>
<body ng-app="appName">
view1
view2
<div>
this is a dynamic message: {{message}}
</div>
<div ng-view>
</div>
<script type="text/javascript">
var app = angular.module('appName', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'pages/home.html',
controller: 'HomeController'
})
.when('/view1', {
templateUrl: 'pages/about.html',
controller: 'FirstController'
})
.when('/view2', {
templateUrl: 'pages/contact.html',
controller: 'SecondController'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('FirstController', function ($scope) {
$scope.message = 'first controller';
});
app.controller('SecondController', function ($scope) {
$scope.message = 'Second controller';
});
app.controller('HomeController', function ($scope) {
$scope.message = 'Home controller';
});
</script>
</body>
</html>
but when i click on the view1 or view2 anchor tag, nothing is happening and i get an error like this
resource not found error
I dont get any error in the console, can anyone help me to figure out what exactly is wrong.
In your html you miss
ngview directive add it.
<div ng-view></div>
For further help see this link
http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/
Use ng-view to display content and you missed # at anchor tag
<body ng-app="appName">
view1
view2
<div ng-view>
this is a dynamic message: {{message}}
</div>
<script>
<!-- script here -->
</script>
</body>
You don't have ng-view
add following in html to get the pages loaded
<div ng-view></div>
Try this for app config
app.config(function (locationProvider, $routeProvider) {
$locationProvider.hashPrefix('#');
$routeProvider.when('/', {
templateUrl: 'pages/home.html',
controller: 'HomeController'
})
.when('/view1', {
templateUrl: 'pages/about.html',
controller: 'FirstController'
})
.when('/view2', {
templateUrl: 'pages/contact.html',
controller: 'SecondController'
})
.otherwise({
redirectTo: '/'
});
});
I'm just building out a simple app to learn AngularJS and having trouble updating variables when switching views. Here's what I have so far:
function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'main'
})
.state('team', {
url: '/team',
templateUrl: 'app/main/team.html',
controller: 'MainController',
controllerAs: 'main'
})
$urlRouterProvider.otherwise('/');
}
Here's part of my controller:
function MainController($timeout, webDevTec, toastr, $resource, $scope) {
var vm = this;
var GetTeam = $resource('https://apisite.com/api_endpoint/:teamId', {teamId: '#id'});
vm.teamName = '';
function getTeamInfo(id) {
var teamObj = GetTeam.get({teamId: id});
$timeout(function(){
vm.teamName = teamObj["name"];
},100)
};
vm.getTeamInfo = getTeamInfo;
}
Then in my main.html I call getTeamInfo with a ng-click:
<ul class="list-group">
<li class="list-group-item" ng-repeat="team in main.teams" ng-click="main.getTeamInfo(team.id)">{{ team.name }}</li>
</ul>
Clicking on that link will take you to team.html:
<div class="row">
<div class="col-sm-12">
<h3>{{ main.teamName }}</h3>
<ul class="list-group">
. . .
</ul>
</div>
</div>
For some reason "main.teamName" is not updating. I've tried the $scope.$apply(function(){vm.teamName = teamObj["name"]} approach as well with no luck. I also did 'console.log(teamObj["name"])' before vm.teamName and 'console.log(vm.teamName)' after to see if I get the expected results and I do. I just have no idea now why it's not updating the new view.
Thank you for your insight, patience, and time!
UPDATE 1
I also tried using $scope on my variables ($scope.teamName) and using $scope.$apply(function(){$scope.teamName = teamObj["name"]}) with no luck.
UPDATE 2
I also tried called $scope.$apply(); after 'vm.teamName = teamObj["name"]' with no luck
It looks like teamObj is not populated yet at the point when you assign vm.teamName
You would make your life so much easier if you just reference teamObj rather than creating a new property.
I made a plunker based on a modified version of your code to show a possible implementation. I couldn't get it to work using the controllerAs syntax and I'm not entirely sure why (possibly because of some issues related to sharing a controller; not sure). Anyway, hopefully it will be of some help to you.
DEMO
app.js
var app = angular.module('plunker', ['ui.router', 'ngResource']);
app.controller('MainController', MainController);
app.config(routeConfig);
function MainController($timeout, $scope, $resource) {
// mock data
var GetTeam = $resource('http://demo7592070.mockable.io/teams/:teamId', {teamId: '#id'});
//var GetTeam = $resource('https://apisite.com/api_endpoint/:teamId', {teamId: '#id'});
$scope.teamName = 'undefined';
$scope.getTeamInfo = getTeamInfo;
function getTeamInfo(id) {
var teamObj = GetTeam.get({teamId: id});
$scope.teamName = teamObj.name;
$scope.teamObj = teamObj;
};
}
function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'main.html',
controller: 'MainController'
})
.state('team', {
url: '/team',
templateUrl: 'team.html',
controller: 'MainController'
});
console.log('ROUTECONFIG');
$urlRouterProvider.otherwise('/');
}
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<!-- JS (load angular, ui-router, and our custom js file) -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular-resource.js"></script>
<script src="app.js"></script>
</head>
<body>
<a ui-sref="home">home</a>
<a ui-sref="team">team</a>
<div ui-view=""></div>
</body>
</html>
main.html
<h1>Home</h1>
<pre>$scope.teamName => {{teamName}}</pre>
<pre>$scope.teamObj => {{teamObj}}</pre>
<pre>$scope.teamObj.name => {{teamObj.name}}</pre>
<button ng-click="getTeamInfo(1)">Get Team 1</button>
team.html
<h1>Team</h1>
<pre>$scope.teamName => {{teamName}}</pre>
<pre>$scope.teamObj => {{teamObj}}</pre>
<pre>$scope.teamObj.name => {{teamObj.name}}</pre>
<button ng-click="getTeamInfo(2)">Get Team 2</button>
I'm trying to implement the solution offered by ProLoser in link
in my Plunk. My problem is that whenever I press a link instead of opening in a sub-view below the links it overrides the entire view.
I need to understand how to solve this problem.
My flow is like that: index.html -> content.html (ng-view) -> link1/2/3.html (using ng-include).
My layout:
Index.html:
<!DOCTYPE html>
<html ng-app="webApp">
<head>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>This is header</Header>
<div class="content" ng-view>
</div>
</body>
</html>
content.html:
<div>
<h1>This is Content brought to you by ngView</h1>
<br>
link1
link 2
link 3
<ng-include src="'/sub/'+link + '.html' "></ng-include>
</div>
My code:
var webApp = angular.module('webApp', []);
//router logic
webApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'content.html',
controller: 'MainCtrl'
})
.when('/sub/:link', {
controller: 'LinkCtrl'
})
.otherwise({redirectTo: '/'});
}]);
//controllers
webApp.controller ('MainCtrl', function ($scope, $routeParams) {
$scope.link = $routeParams.link
});
You don't have a LinkCtrl to handle the links, it should work if you change:
.when('/sub/:link', {
controller: 'LinkCtrl'
})
to
.when('/sub/:link', {
templateUrl: 'content.html',
controller: 'MainCtrl'
})
And edit the line:
<ng-include src="'/sub/'+link + '.html' "></ng-include>
to:
<ng-include src="link + '.html'"></ng-include>