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.
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 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 am trying to learn angular with a book and some examples, and I have some difficult times trying to understand how the ng-view knows the view to display based on the routing system.
So here is an example:
<!DOCTYPE html>
<html ng-app="maintenance">
<head>
<title>Dive Sites</title>
<link href="./lib/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="./site.css" rel="stylesheet" />
</head>
<body ng-controller="adminCtrl">
<!-- Navigation header -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#adminMenu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
Younderwater Admin
</a>
<div class="collapse navbar-collapse" id="adminMenu">
<ul class="nav navbar-nav">
<li ng-class="{active: isActive('Locations')}">
Locations
</li>
<li ng-class="{active: isActive('Sites')}">
<a href="#/sites">
Dive Sites
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Optional title bar -->
<div class="current-spot">
<div class="container-fluid" >
<div class="container">
<div ng-show="view=='locations'">
<h3>Manage the list of diving locations</h3>
</div>
<div ng-show="view=='diveSites'">
<h3>Manage the list of dive sites</h3>
</div>
</div>
</div>
</div>
<!-- View content -->
<div class="main-content">
<div class="container-fluid">
<div class="container">
<div ng-view></div>
</div>
</div>
</div>
<script src="./lib/jquery/jquery.min.js"></script>
<script src="./lib/bootstrap/bootstrap.min.js"></script>
<script src="./lib/angular/angular.min.js"></script>
<script src="./lib/angular/angular-route.min.js"></script>
<script src="maintenance.js"></script>
</body>
</html>
SCRIPT
angular.module('maintenance', ['ngRoute'])
.controller('adminCtrl', AdminCtrl)
.config(function ($routeProvider) {
$routeProvider.when('/locations', {
templateUrl: 'views/locations.html'
});
$routeProvider.when('/sites', {
templateUrl: 'views/sites.html'
});
$routeProvider.otherwise({
templateUrl: 'views/main.html'
});
});
function AdminCtrl($scope) {
}
I need to know if I have the correct way of thinking, watching this example, I would say that the '#' says to use the routing system, in the script we set the routes and the views the app should load based on the url, when I press the because of the # it search based on the routing system and passes the view to the ng-view, I don't know if the processing is correctly thats why I need to understand better how it works, sorry if I don't explained very well :/
Ps: sorry for my bad english
First and foremost, and angular.module('maintenance', ....) must match. I'm referring to the identifier 'maintenance'. Without this, your JS file won't find your HTML file.
From the JS file, you have angular.module('maintenance', ['ngRoute']), ngRoute is an angular directive for routing.
https://docs.angularjs.org/api/ngRoute
The $routeProvider says what page to go to.
http://www.w3schools.com/angular/angular_routing.asp
And templateUrl shows the URL for the page.
https://docs.angularjs.org/guide/directive
http://techfunda.com/howto/505/function-with-templateurl
I'm very sure you have the following html files in your project.
locations.html
sites.html
main.html
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