started out playing with angular today. So totally noob with the issue. I've found tons of similar questions but nothing seems to help so I decided to try with my own question.
My problem is with routing. I have two views (or partials). My first view (default) loads nicely when I browse to my page. When clicking the link that should open my second view the URL changes but nothing happens. If I then hit browser refresh button the view loads.
Index page
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="js/angular_route.js"></script>
<script src="js/angular_animate.js"></script>
<script src="js/angular_cookies.js"></script>
<script src="js/app.js"></script>
</head>
<body style="padding:10px;" ng-app="rispa">
<div ng-view></div>
</body>
</html>
app.js
var rispa = angular.module("rispa", ['ngRoute', 'ngAnimate']);
rispa.config(function ($routeProvider) {
$routeProvider
.when('/welcome',
{
controller: 'rispaController',
templateUrl: 'partials/welcome.html'
})
.when('/accounts',
{
controller: 'rispaController',
templateUrl: 'partials/accounts.html'
})
.otherwise({ redirectTo: '/welcome' })
});
rispa.controller('rispaController', function($scope) {
$scope.title = "Home Page";
});
welcome view(default)
<div class="container">
<h1>Welcome!!!</h1>
get accounts
</div>
accounts view
<div class="container">
<h1>accounts</h1>
back to welcome
</div>
I've got a WAMP server on Windows 10 where I run the app. I also tried to publish to a azure webapp but the view did not refresh there either. I had to click the browser refresh button so it shouldn't be a web server issue...
Working Plunker: http://plnkr.co/edit/aCpOumYzy94ATMXiA5KR?p=preview
The routing has been set up correctly but you did not add the reference to the controller for the view. Also, you would need the dependency file for ngAnimate in the main view.
<div data-ng-view="" data-ng-controller="rispaController" ></div>
Related
Good Day,
I'm trying to create an SPA with Angular. Here is my index.html page:
<!DOCTYPE html>
<html lang="en" ng-app="onlineApp">
<head>
<meta charset="UTF-8">
<title>Online</title>
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/mystyle.css">
<base href="/Client/">
</head>
<body ng-controller="mainController">
<div class="container"> <!--- This is the box login -->
<div ng-view></div>
</div>
<script src="components/angular/angular.js"></script>
<script src="components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
</body>
</html>
and here is app.js:
var onlineApp = angular.module('onlineApp', ['ngRoute']);
onlineApp.controller('mainController', function($scope) {
$scope.message = 'Test Message';
});
onlineApp.controller('signupController', function($scope) {
$scope.message = 'Sign up Message';
});
onlineApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
.when('/signup', {
templateUrl: 'pages/signup.html',
controller: 'signupController'
})
.otherwise({
redirectTo: '/'
});
// use the HTML 5 History API
$locationProvider.html5Mode(true);
});
My problem is: Inside the contents of the ng-view (home.html), I have a button. When I click the button, I want to go to a signup page as defined in the route handler and it's not working. I think the problem is "inside" the ng-view.
EDIT:
Here's a snippet of pages/home.html:
<div class="pull-right col-md-4">
<label class="pull-right col-md-12 create-monthly">Create a Monthly Parker Account</label>
<a id="btn-create" class="btn btn-primary" href="#signup" >
Create Account
</a>
</div>
When I click on the button, I want the contents of pages/home.html to be replaced with the contents of pages/signup.html
END EDIT:
All of the examples I see of ng-view being used is when the links are outside of the ng-view.
Can I change the contents of ng-view while I'm inside the ng-view itself? Or is there some sort of project that would allow me to do that.
TIA,
coson
you just have to change the location of the browser to change the route. i do not really understand your problem, probably you will have to rephrase it or post a little bit more code (from inside your ng-view)
potentially either a link of the form
Click me to switch
or a manual location change with the $location service (inject it to your controller)
$location.path("/signup");
should do the job. im not sure what you mean by links inside and outside of ng-view.
The nice thing about using ui-router is that you can treat your view changes as simple page redirects. i.e. you can use an anchor tag to redirect the browser to the specified url and ui-router will catch that before the page refreshes and just update your ui-view without refreshing the page.
Click this link to go to signup.
could you please tell me why I am not able to navigate one page to another on button click .
I do like that
var loginCntrl=function($scope,$location){
$scope.testClick =function(){
alert('sss');
$location.path("/no");
}
$scope.name="naveen";
$scope.lastname="sharam";
$scope.fullname = function() {
return $scope.firstname + $scope.lastname;
};
}
here is plunker
http://plnkr.co/edit/gQcXe0Njvx6Iviu8Fjep?p=preview
I want to go on second page .
Thanks
When using ui-router you should be using $state to transfer from page to page. You should inject $state into your controller, then you can use $state.go('appaa') to transfer to that state.
See https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options for more information.
Not that much clear your question. Might you are try to make single page app using AngularJS.
We can create many HTML pages and call in single page without refreshing the page using AngularJS $routeProvider (https://docs.angularjs.org/api/ngRoute/provider/$routeProvider).
Find the below Example
1) Create three html pages home.html, about.html, services.html and save in 'pages' folder.
2) Create JS and add below script and save in 'js' folder (js/script.js).
var shanidkvApp = angular.module('shanidkvApp', ['ngRoute']);
// configure routes
spaApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html'
})
.when('/about', {
templateUrl : 'pages/about.html'
})
.when('/services', {
templateUrl : 'pages/services.html'
});
});
3) Create a index page and call angular.min.js, script.js
<!DOCTYPE HTML>
<html ng-app="spaApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<h1>AngularJS Routing</h1>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
<div class="contentwrap" ng-view>Loading...</div>
</body>
</html>
Download working example from Github
I want to be able to quickly build an AngularJS application using ui-router without having to set up a server. So that I can send this folder to anyone and the application will still work.
I have tried putting a # infront of the route as adviced here. I have also tried to follow other advice related to the ngroute, but nothing seems to work and since I want to use ui-router rather than ng-route I'm not sure whether the advice is even applicable to my situation.
I have also tried to create a manifest file to store the files offline according to this page.
In firefox it kind of works but for some reason it double up what is on the index.html page. But in chrome which is my preferred browser it doesn't work at all. I get an error about a failed ajax call; why don't the manifest file download all pages straight away?
How should I accomplish building an AngularJS app with ui-router without needing a server?
Here is simple snippet of my code:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app" manifest="mycache.manifest">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<a ui-sref="home.messages">Messages</a>
<div ui-view></div>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="js/routes.js"></script>
<script src="js/main.js"></script>
</body>
</html>
messages.html
<button ng-click="contextCtrl.getAllMessages()">Get Messages</button>
<div ng-repeat="message in contextCtrl.messages">
{{message}}
</div>
routes.js
'use strict';
angular.module('app', ['ui.router']);
//Setting up route
angular.module('app').config(['$stateProvider',
function($stateProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'index.html',
controller: 'ContextCtrl',
controllerAs:'contextCtrl'
})
.state('home.messages', {
url: '/messages',
templateUrl: 'messages.html',
controller: 'ContextCtrl',
controllerAs:'contextCtrl'
});
}
]);
main.js
'use strict';
/*jslint latedef:false*/
//Controller declaration
angular.module('app').controller('ContextCtrl', ContextCtrl);
function ContextCtrl() {
var vm = this;
vm.messages = [];
vm.getAllMessages = getAllMessages;
function getAllMessages(){
vm.messages = ['m1', 'm2', 'm3', 'm4'];
};
}
mycache.manifest
CACHE MANIFEST
js/main.js
js/routes.js
messages.html
bower_components/angular-ui-router/release/angular-ui-router.js
bower_components/angular/angular.js
I have
<!DOCTYPE html>
<html lang="en" data-ng-app="myCustomApp">
<body>
<div id="body">
<div ng-view></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script src="/Js/app.js"></script>
<script src="/Js/controllers/controllers.js"></script>
</body>
</html>
With the following
app.controller('SearchController', function ($scope) {
init();
function init() {
alert("called");
}
});
and the app declared like below:
var app = angular.module('myCustomApp', []);
app.config(function($routeProvider) {
$routeProvider
.when('/search',
{
controller: 'SearchController',
templateUrl: '/js/partials/Search.html'
})
.otherwise({ redirectTo: '/search' });
});
The problem is that the page when browsing to the following it keeps refreshing the page like it's in a loop. Any ideas?
/#/search
var app = angular.module('myCustomApp', ['ngRoute']);
Routing is not native in angular you need to add it in as a module.
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js
This is the CDN for the script for it. I'd really suggest having a look at ui-router works very similarly but uses state or states to manage either the view or sections of the view.
https://github.com/angular-ui/ui-router
The documentation is really good and there are some great examples around.
I'm trying to get into angularJS by writing the most basic app. However I'm unable to get even this small amount of code working - the controller doesn't seem to be displaying any of the views. This is almost a direct copy from a popular angularjs video I saw online. I have a feeling its not something big, and my guess is that I possibly have something wrong with the ng-view.
Any insight on what I'm doing wrong would be helpful.
index.html
<!doctype html>
<html ng-app="fastsql">
<head>
</head>
<body>
<div class="well">
<div ng-view></div>
</div>
<script src="angular.min.js"></script>
<script src="fastsql.js"></script>
</body>
</html>
fastsql.js
// setup fastsql as angular app "module"
var fastsql = angular.module("fastsql", []);
// set routeProvider rules in .config()
fastsql.config(function($routeProvider) {
// set what views are displayed for each change in the URL.
$routeProvider
.when("/", { controller: 'loginCntl', templateURL: 'test.html' })
.otherwise({ redirectTo: '/' });
});
// controllers
fastsql.controller("loginCntl", function($scope) { $scope.message = "hey"; });
templateURL should have been templateUrl.
you need to pass an array into the config function, the name of the services to injected, and then the function in to which they are injected.
fastsql.config(["$routeProvider", function($routeProvider) {
// do your thing
}]);