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"
Related
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 ?
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
Without adding too much code or documentation to my question, I'm having a resolving issue with the [routerLink] code for our Angular 2 Demo:
Versioning
Node.js - v4.4.7
#angular - 2.0.0-rc.1
app/app.component.ts
#RouteConfig([
{
path: '',
name: 'TasksComponent',
component: TasksComponent
},
{
path: 'tasks/editor',
name: 'TaskEditorComponent',
component: TaskEditorComponent
},
{
path: 'timer',
name: 'TimerComponent',
component: TimerComponent
}
])
app/app.component.html
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<strong class="navbar-brand">My Pomodoro App</strong>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a [routerLink]="['TasksComponent']">Tasks</a></li>
<li><a [routerLink]="['TimerComponent']">Timer</a></li>
<li><a [routerLink]="['TaskEditorComponent']">Publish Task</a></li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
Rendered HTML (in browser)
<body>
<script id="__bs_script__">
//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.2.14.0.js'><\/script>".replace("HOST", location.hostname));
//]]>
</script>
<script async="" src="/browser-sync/browser-sync-client.2.14.0.js"></script>
<pomodoro-app>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<strong class="navbar-brand">My Pomodoro App</strong>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a></a></li></ul>
</div>
</nav>
</pomodoro-app>
</body>
If I remove the [routerLink]="['TasksComponent'] from the anchor tags, the anchor tags show up with no issues. Somehow the rendering of the [routerLink] is causing an issue. It seems that the scope of the issue is not in my import commands or any other Angular 2 related information, so I have reduced the scope of my code to the versions, the typescript file and the html file in question.
I am running this using Lite Server. Any assistance would be appreciated.
I've got an angularjs app with a nav bar inside my index.html page like that :
<div class="navbar navbar-inverse navbar-fixed-top" ng-controller="NavCtrl">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>
Home
</li>
<li>
Add a contact
</li>
<li>
Users
</li>
<li>
Agencies
</li>
<li>
<a ng-click="intro()">Help</a>
</li>
</ul>
</div>
</div>
</div>
This div use a controller, and when i click on the help link it calls the intro method of my controller. But this method is called twice each time !!
This is my controller :
'use strict';
angular.module('myApp')
.controller('NavCtrl', function ($scope, $location) {
$scope.intro = function(){
if($location.path() != '/'){
toastr.warning("Warning.");
}else{
introJs().start();
}
}
});
Any idea ?..
This is the complete html :
<div class="navbar navbar-inverse navbar-fixed-top" ng-controller="NavCtrl">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li ng-class="navClass('')">
Home
</li>
<li ng-class="navClass('add')">
Add a contact
</li>
<li ng-class="navClass('users')">
Users
</li>
<li ng-class="navClass('agencies')">
Agencies
</li>
<li>
<a ng-click="intro()">Help</a>
</li>
</ul>
</div>
</div>
</div>
<div class="show-grid"></div>
<div class="container">
<div class="row" ng-view></div>
</div>
Resolved :
Someone (on my project) has added an angular.min script file ... We' have already the angular file for develoment ...
Two angular core library no conflict just methods called twice of course ...
Really my bad sorry guys thx for ur replies