I'm new in Angular. I have a simple application for routing pages in angular. I have two pages which I want angular to change the URL pages:
// item1.html:
<section>{{name}}</section>
// item2.html:
<section>{{details}}</section>
and this is my HTML home page:
<body ng-app="myApp">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</nav>
<div class="container" ng-view>
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</body>
// routeApp.js:
var myApp = angular.module('myApp', [
"ngRoute",
'personController'
]);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/',{
templateUrl:'partial/item1.html',
controller:'ListController'
}).when('/item2',{
templateUrl:'partial/item2.html',
controller:'DetailsController'
}).otherwise({
redirect:'/'
});
}]);
// routeController.js:
var personController = angular.module("personController",[]);
personController.controller("ListController", function($scope){
$scope.name="Ali Qadomy";
});
personController.controller("DetailsController", function($scope){
$scope.details="Angular Developers";
});
I've spent more than two days looking at the problem but I can't find it.
any help ?
Related
I want to add some animation to my angular webpage which uses routing. I am looking for fadein/fadeout effect just like when you click Next in this page: https://app.enhancv.com/ . So that when I click on any of the list item in header, another page floats in with the same effect. How can I do that using angular routing? You can find the required files below.
Index.html
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="myApp">
<head>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<script src="http://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 src="script.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact
</li>
</ul>
</div>
</nav>
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</body>
</html>
Pages are:
About.html
<div class="jumbotron text-center">
<h1>About Page</h1>
<p>{{ message }}</p>
`</div>
Contact.html
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>
home.html
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>
Script.js
// create the module and name it myApp
var myApp = angular.module('myApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
myApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
myApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
myApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
I wrap my content in a container that is displayed only when the data is loaded:
<div ng-show="yourpage.dataLoaded" class="fade-element">
...
</div>
CSS
.fade-element{
transition: all linear 0.1s;
opacity: 1;
}
.fade-element.ng-hide {
opacity: 0;
}
.fade-element.ng-hide can be used in an element that fades out, for example a preloader:
<div ng-hide="yourpage.dataLoaded" class="preloader fade-element"></div>
I am new to Angular JS, and I'm learning ui-router. In this basic example I'm not able to configure the routing.
The HTML:
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a clss="navbar-brand" ui-sref="#">Angular Ui router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">home</a></li>
<li><a ui-sref="about">about</a></li>
</ul>
</nav>
<div class="container">
<div ui-view></div>
</div>
<script type="text/ng-template" id="home.html">
<div class="jumbotron text-center">
<h1>Welcome</h1>
<p>This is the homepage</p>
</div>
</script>
<script type="text/ng-template" id="about.html">
<div class="jumbotron text-center">
<h1>Welcome</h1>
<p>This is the about</p>
</div>
</script>
And the JavaScript:
var routerApp = angular.module('routerApp',['ui.router']);
routerApp.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html'
})
.state('about',{
url:'/about',
templateUrl:'about.html'
});
}]);
Here is a JSFiddle:
https://jsfiddle.net/shrideep/w6n93mqc/10/
I've fixed up your code, you can see the full code here: https://jsfiddle.net/w6n93mqc/11/
Basically, you needed to have your angular application inside a root element with the ng-app directive so that your JS knows where to hook up to inside your DOM. You also had to link to your templates correctly - I'm not sure how it works with templateUrl for jsFiddle sites, but it needs to be a path to a file which contains your template.
Here is the fixed code just in case your link expires:
Template
<div ng-app="routerApp">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a clss="navbar-brand" ui-sref="#">Angular Ui router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">home</a></li>
<li><a ui-sref="about">about</a></li>
</ul>
</nav>
<div class="container">
<div ui-view></div>
</div>
</div>
JS
var routerApp = angular.module('routerApp',['ui.router']);
routerApp.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html'
})
.state('about',{
url:'/about',
templateUrl:'about.html'
});
}]);
Hope that helps!
Your templateUrl in your state should be a path to a file, not an id in a script tag.
I want to convert my angular pages, I am using ng-includes but my pages has .html extensions, I would like have just /mypage
sample:
www.mypage.com/projects.html
I want archive this:
www.mypage.com/projects
html
<!-- header -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="index.html">logo</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Projects</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- header -->
<div>
<div ng-include="'app/pages/projects.html'"></div>
</div>
<footer class="footer">
<div class="container text-center">
footer
</div>
</footer>
js:
var App = angular.module('App', []);
App.controller('ProjectCtrl', function($scope, $http) {
$http.get('app/projects.json')
.then(function(res){
$scope.projects = res.data;
});
});
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/projects', {
templateUrl : 'projects.html',
controller : mainController
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
js fiddle: https://jsfiddle.net/3ww49zq7/
how can make it?
thanks.
At the first you will need to use ngRoute and declare it as a dependency in your module
var App = angular.module('App', ['ngRoute']);
Then you can use routeProvider
Second :
You should use the ng-view directive to tell the angular that this div will be used to load the views.
<div ng-view></div>
Third :
You should change your links to the same in the routeprovieder
<li class="active">Home</li>
<li>Projects</li>
should be
<li class="active">Home</li>
<li>Projects</li>
and you should make sure that these links match the case in the routeProvider Object.
You should declare the controller you are using in the routeProvider
here is a plunker to demonstrate :.http://plnkr.co/edit/DrPG9WtLg8abpLQpVj0W?p=preview
I am new to Angular JS and trying to implement routing in a Django App.
My Html code is:-
<body>
<nav class="navbar navbar-inverse" ng-app="QuizRouting">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div ng-view></div>
</body>
My JS code is :-
var app = angular.module('QuizRouting',['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when("quiz/page1", {
templateUrl: "/quiz/templates/quiz/page1.html"
});
});
I have included all the prerequisites for Angular and angular routing. But on clicking on the page 1 link the required template is not rendered.
this is the page1.html:-
<div>
<h1>Its Working!</h1>
</div>
You had incorrect href on Page 1 anchor. You should correct it to below.
<li>Page 1</li>
And in .when also
.when('/page1', ....)
You send a get request for /quiz/templates/quiz/page1.html, but django doesn't recognize this path.
Try putting your pages in quiz/static/quiz/pages and change
templateUrl: "/quiz/templates/quiz/page1.html"
to
templateUrl: "/quiz/static/quiz/pages/page1.html"
I'd like to have a different header in my index.html (loggedout) and my home page (loggedin). I've tried many solution but my header never refresh. I always need to reload the page to make it work.
index.html
<div id="header" ng-controller="HeaderCtrl as head">
<div ng-show="head.loggedIn" class="header">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li><a ng-href="#/about">About</a></li>
<li><a ng-click="head.logout()">Logout</a></li>
</ul>
</div>
<div ng-show="head.loggedOut" class="header">
<ul class="nav navbar-nav">
<li><a ng-click="head.login()">Home</a></li>
<li><a ng-href="#/register">Sign in</a></li>
</ul>
</div>
</div>
<div class="container">
<div ng-view=""></div>
</div>
<div class="footer">
<div class="container"></div>
</div>
app.js
var app = angular.module('plunker', []);
app.controller('HeaderCtrl', function($scope) {
var head = this;
head.logout = logout;
head.loggedIn = 'false';
head.loggedOut = !head.loggedIn;
function logout(){
head.loggedIn ="false";
head.loggedOut = 'true';
}
function logint(){
head.loggedIn ="false";
head.loggedOut = 'true';
}
});
Here is my simply code on Plunker
http://plnkr.co/edit/byNHePeJskAdQbPvFWLp?p=preview
Any solution to manage different header/footer with a loggedIn var ?
Use without ""
try to use as boolean instead of string
like this
head.loggedIn =false;
PLUNKR