I've just started learning angular & creating the first app. Help me please with routing.
Folder Structure
spa/
index.html
controllers/
controllers.js
images/
javascript/
app.js
resources/
angular-route.js
angular.js
views/
cars.html
home.html
login.html
profile.html
The pages from "/views" are not displayed.
Here's my code.
index.html
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="UTF-8">
<title>5 Angular</title>
<script src="resources/angular.js"></script>
<script src="controllers/controller.js"></script>
<script src="javascript/app.js"></script>
<script src="resources/angular-route.js"></script>
</head>
<body ng-controller="mainCtrl">
<nav>
<ul class="navbar">
<li>
Home
</li>
<li>
Login
</li>
<li>
Profile
</li>
<li>
Cars
</li>
</ul>
</nav>
<ng-view></ng-view>
</body>
</html>
cars.html
<h1>Cars Page</h1>
home.html
<h1>Home Page</h1>
login.html
<h1>Login Page</h1>
profile.html
<h1>Profile Page</h1>
app.js
angular.module('app', ['ngRoute'])
.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl: 'views/home.html'
})
.when('login', {
templateUrl: 'views/login.html'
})
.when('cars', {
templateUrl: 'views/cars.html'
})
.when('profile', {
templateUrl: 'views/profile.html'
})
otherwise('/');
});
Controller
angular.module('app', ['ngRoute'])
.controller("mainCtrl",function($scope){
})
Once you create app module in app.js like angular.module('app', ['ngRoute'])
You shouldn't recreate the app module in controller.js again which will flush all the initial registered component like here you did .config block for router settings.
It should be
angular.module('app')
instead of
angular.module('app', ['ngRoute'])
Additionally login anchor should be #/login instead of #Login because $routerProvider has condition on login.
Also notice there should be a slash after the hash in the href.
Login
Related
I learn angularjs after a tutorial and I saw that you can remove # from the link. I did that but then my partials(from templateUrl) did't come in the page anymore.
Can someone please tell me where I'm wrong?
angular.module('myApp', ['ngRoute'])
.controller('mainController', ['$scope', '$location', '$log', function($scope, $location, $log) {
$log.info($location.path());
}])
.controller('secondController', ['$scope', '$location', '$log', function($scope, $location, $log) {
$log.info($location.path());
}])
.config(function($routeProvider, $locationProvider) {
// $routeProvider lets us specify routes
$routeProvider
.when('/', {
templateUrl: 'pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'pages/second.html',
controller: 'secondController'
});
$locationProvider.html5Mode(true);
});
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>Learn and Understand AngularJS</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<base href="/">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<style>
html, body, input, select, textarea
{
font-size: 1.05em;
}
</style>
<!-- load angular via CDN -->
<script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
<script src="angularjs-learn-understand/ch05/app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i></i> Second</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
main.html:
<h1>This is Main.</h1>
second.html
<h1>This is second.</h1>
So in my browser I don't get main.html and second.html when I click on Home and Second. Why?
The UI Router github docs mentions:
When you have html5Mode enabled, the # character will no longer be used in your urls. The # symbol is useful because it requires no server side configuration. Without #, the url looks much nicer, but it also requires server side rewrites.
When you are trying to access your app in html5Mode (routes without any hash) then first of all you would need to remove the "#" from each one of your links (in this case the links are: Home, Second).
So...
"#" would just be "/"
"#/second" would be "/second"
After this, you would also need to enable server side URL Rewrites. Please checkout this link and configure your server as per the server that you are using.
Try to establish a .otherwise() at the end of $routerProvider that specifies a default route.
The templates main.html and second.html are defined correctly? The location is correct?
I'm just starting learning the angularjs and I want to use it for creating a ui template. I want to make a static HEADER and FOOTER and the only thing that will be dynamic is the CONTENT. My issue is that my It returns me a blank web page.
Thanks in advance guys.
index.html
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<meta charset="utf-8">
<title>UI-Router</title>
<link rel="stylesheet" href="">
<!-- START LOAD VENDORS -->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-ui-router.min.js"></script>
<!-- END LOAD VENDORS -->
<!-- START LOAD SOURCE CODE -->
<script src="js/app.js"></script>
<!-- END LOAD SOURCE CODE -->
</head>
<body ui-view>
</body>
</html>
app.js
var app = angular.module('app', ['ui.router'])
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index',{
abstract: true,
url: '/index',
templateUrl: 'view/app.html'
})
}])
view/header.html
<ul>
<li>US</li>
<li>626.205.3838</li>
<li>cert#abkrescue.com</li>
<li>Search</li>
</ul>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>LinkedIn</li>
</ul>
view/footer.html
<div>
<span>name here</span>
<span>partner</span>
<span>subscribe</span>
<ul>
<h3>get to know us</h3>
<li>blog</li>
<li>stories</li>
<li>staff</li>
</ul>
<ul>
<h3>connect</h3>
<li>contact</li>
<li>help</li>
<li>request</li>
</ul>
<ul>
<h3>resource</h3>
<li>download</li>
<li>financial</li>
<li>donors</li>
</ul>
<ul>
<h3>get involved</h3>
<li>volunteer</li>
<li>partnership</li>
<li>donate</li>
</ul>
</div>
view/app.html
<div data-ng-include=" 'view/header.html' "></div>
<div data-ng-include=" 'view/footer.html' "></div>
You cannot transition to an abstract state
i've created a working plnkr here: https://plnkr.co/edit/yRazozMjTM99tCKFFmIl?p=preview
$stateProvider
.state('index',{
url: '/',
templateUrl: 'view/app.html'
})
Try using the ui-view element directive. And make sure you are referring the template correctly
<body>
<ui-view></ui-view>
</body>
The correct way to do this is to have separate ui-view directives for your header, content and the footer.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>UI-Router</title>
<link rel="stylesheet" href="">
<!-- START LOAD VENDORS -->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-ui-router.min.js"></script>
<!-- END LOAD VENDORS -->
<!-- START LOAD SOURCE CODE -->
<script src="js/app.js"></script>
<!-- END LOAD SOURCE CODE -->
</head>
<body>
<div ui-view="header">
<div ui-view="content">
<div ui-view="footer">
</body>
</html>
Define the template for each ui-view in the state config function and remove the abstract: true option. More on it here: what is the purpose of use abstract state?
app.js
var app = angular.module('app', ['ui.router'])
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index',{
url: '/index',
views: {
'header': {
templateUrl: 'view/header.html'
},
'content': {
templateUrl: 'view/app.html'
},
'footer': {
templateUrl: 'view/footer.html'
}
}
})
}])
Also wrap your header.html code in a div tag.
header.html
<div>
<ul>
<li>US</li>
<li>626.205.3838</li>
<li>cert#abkrescue.com</li>
<li>Search</li>
</ul>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>LinkedIn</li>
</ul>
</div>
Now the header and footer will remain fixed and you can change your content based on states by adding other state like this:
.state('index.two',{
url: '/index/two',
views: {
'content#': {
templateUrl: 'view/two.html'
}
}
})
I can't get my angular app to route without changing the web page. I'm trying to get the page to change without refreshing and appear in the ng-view, but instead the console is throwing errors. See pastebin for errors http://pastebin.com/kTYwviSv
app.js
var myApp = angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('/page1.html', {
templateUrl: 'page1.html'
})
.when('/page2.html', {
templateUrl: 'page2.html'
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
}]);
index.html
<!DOCTYPE html>
<head>
<title>Testing Angular On My Own</title>
</head>
<body ng-app="myApp">
{{"Hello"}}
<br>
<br>
<a ng-href="page1.html">Page 1</a>
<a ng-href="page2.html">Page 2</a>
<div ng-view></div>
<script src="bower_components/bower-angularjs/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
page1.html
This is Page 1
page2.html
This is Page 2
I'm trying to get the templates to change without refreshing the page. I'm not sure what's wrong with the code since the console is blank until I click Page 1 or Page 2 Link
then I get this error in console. http://pastebin.com/J3Y5NauN
It should just view the template in div ng-view without refreshing.
app.js, index.html, page1.html, and page2.html are all in the same directory also.
Any ideas?
index.html
<!DOCTYPE html>
<head>
<title>Angular Test</title>
</head>
<body ng-app="myApp">
{{"Hello"}}
<br>
<br>
<a ng-href="page1.html">Page 1</a>
<a ng-href="page2.html">Page 2</a>
<div ng-view></div>
<script src="bower_components/bower-angularjs/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
var myApp = angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('page1.html', {
templateUrl: 'newtest/page1.html'
})
.when('page2.html', {
templateUrl: 'page2.html'
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
}]);
page1.html
This is Page 1
page2.html
This is Page 2
Im not sure where to place the partials folder holding the html views! I have placed it at the app root folder, in views and in public. Also tried removing the first trailing slash of the templateUrl but nothing. I also have tried(as view loading container):
<div ng-view></div>
<ng-view></ng-view>
<div data-ng-view></div>
<div ng-view=""></div>
<div ng-view="demoApp"></div>
This is just a learning example holding a module with 2 controllers and 2 views.
Here is the SPA(this page renders as rout '/' of a dancer(perl) project):
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title><% title %></title>
<link rel="stylesheet" href="/customised_bootstrap/css/bootstrap.css">
<script src="/bower_components/underscore/underscore.js"></script>
<script src="/bower_components/backbone/backbone.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-resource/angular-resource.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="/bower_components/ng-tasty/ng-tasty-tpls.js"></script>
<script>
//define a module
var demoApp = angular.module('demoApp', ['ngRoute']);
//define routes for our module(each route will have its set of views and controllers)
demoApp.config =(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'simpleController1',
templateUrl: '/partials/testAlexView1.html'
})
.when('/testAlexView1',
{
controller: 'simpleController2',
templateUrl: '/partials/testAlexView1.html'
})
.when('/testAlexView2',
{
controller: 'simpleController2',
templateUrl: '/partials/testAlexView2.html'
})
.otherwise({redirectTo: '/partials/testAlexView1.html'});
});
//define a controller within our module 'demoApp'
demoApp.controller('simpleController1', function ($scope) {
$scope.customers = [
{name:'Boris', age:'18'},
{name:'Claudia', age:'28'},
{name:'Carlos', age:'39'},
{name:'Ben', age:'25'}
];
//var stuff ={};
});
demoApp.controller('simpleController2', function ($scope) {
$scope.customers = [
{name:'Alex', age:'18'},
{name:'Albert', age:'28'},
{name:'Anthony', age:'39'},
{name:'Loren', age:'25'}
];
});
</script>
</head>
<body>
<div>
<p>Main page of SPA test</p>
<div ng-view></div>
</div>
</body>
</html>
Here are the two identical views:
testAlexView1.html(testAlexView2.html is the same):
<div>
<input type="text" data-ng-model="name" /> {{ name }}
<br />
<ul>
<li data-ng-repeat="customer in customers | filter:name | orderBy:'age'">
{{customer.name}} - {{customer.age}}
</li>
</ul>
</div>
In the browser inspector, within the div where the view should load, all that appears is(both at root or root#/view.html):
<!-- ngView: -->
Batarang dosn't detect scopes nor modules neither. Thanks for any help!
There appears to be a typo in your config here:
demoApp.config =(function ($routeProvider) {
Instead try:
demoApp.config(function ($routeProvider) {