I'm trying to create a portfolio in angular, and can't seem to get the routing correct. I double checked with an app I had made previously, and can't seem to find anything. When I compile, there are no errors logged in the console. Could someone check if my code is properly laid out?
the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300' rel='stylesheet' type='text/css"> -->
</head>
<body np-app="myPort">
<div id="navigation-bar">
<ul>
<li>Home</li>
<li>My Projects</li>
<li>Contact</li>
</ul>
</div>
<div ui-view></div>
<!-- loading angular frameworks -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- app js stuff -->
<script src="app.js"></script>
</body>
</html>
the module
angular.module('myPort', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'partials/bio/index.html',
})
.state('projects', {
url: '/projects',
templateUrl: 'partials/projects/index.html',
})
.state('contact', {
url: '/contact',
templateUrl: 'partials/contact/index.html',
})
$urlRouterProvider.otherwise('/home');
}]);
//no controllers linked for troubleshooting
There is a spelling mistake while defining ng-app.
Change <body np-app="myPort>" to <body ng-app="myPort>"
Related
Im just staring AngularJS app for 1st time. Followed some steps from tutorials but at the end ui router is not showing anything. Firebug is not showing any JS errors or warnings
my app.js file:
var app = angular.module("CRI", ["ui.router"]);
app.config(function ($stateProvider) {
$stateProvider
.state("Login", {
url: "/",
controller: "LoginController",
templateUrl: "views/login.html"
})
})
index.html file:
<!DOCTYPE html >
<html ng-app="CRI">
<head>
<title>LOGIN</title>
<meta charset="UTF-8"></meta>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,800,700italic,800italic|Open+Sans+Condensed:300,700,300italic&subset=latin,latin-ext,cyrillic-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/korisnik.css" />
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/easypiechart.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="controllers/loginController.js"></script>
</head>
<body>
<div ui-view></div>
</body>
</html>
controller:
app.controller("LoginController", function($scope, $http){
})
template is saved in views/login.html
To use the root path, the state config url property should be an empty string, not '/'.
$stateProvider.state("Login", {
url: "",
controller: "LoginController",
templateUrl: "views/login.html"
});
http://plnkr.co/edit/Iypm5fXgpcrLS7Smlc62?p=preview
I seem to be having an issue with Angular routing. My current index.html file is only displaying the header div that is in the index.html file but not the ng-view aspect of the code which should display a new page located at views/login.html.
var app = angular.module('Bandit', ['ngRoute']);
app.config(['$routeProvider', 'locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
//login feedback page
.when('/feedback', {
templateUrl: 'views/loginfeedback.html',
controller: 'loginFeedbackController'
})
// home page
.when('/', {
templateUrl: 'views/login.html',
controller: 'loginController'
})
//Catch all
.otherwise({
redirectTo: '/'
});
}
]);
<!DOCTYPE html>
<html lang="ENG">
<head>
<title>Band-it</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Imported Style-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--Custome Stylesheets-->
<link rel="stylesheet" type="text/css" href="css/universal.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<!--Imported JS Libraries-->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--Custom-->
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/loginController.js"></script>
</head>
<body ng-app="Bandit">
<div class='header'>
<h1 id='symbol'>B</h1>
</div>
<!--Angular Dynamic View-->
<div ng-view></div>
</body>
</html>
The error message from the console that I am getting is:
angular.js:38 Uncaught Error: [$injector:modulerr] [http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=Bandit&p1=Error%3A%…Fbandit%2FBanditMask%2Fpublic%2Flibs%2Fangular%2Fangular.min.js%3A39%3A222]1
Any help would be much appreciated!
Use $locationProvider instead of using locationProvider in app.config. and not sure please share the link.
i am using routing in angular.js
my code is :
//controllers.js
var ar= angular.module('ar', []);
ar.controller('lc', ['$scope', '$http', function($scope, $http){
$http.get('login.json').success(function(data){
$scope.art=data;
})
}])
ar.controller("search", function(){
this.search='a';
this.getdata= function (searchquery) {
console.log(searchquery);
}
});
//main.js (app.js)
var myApp= angular.module('myApp',[
'ngRoute',
'ar'
]);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'inc/login.html',
controller: 'lc'
}).
otherwise({
redirectTo: '/login'
});
}]);
when i goto the Homepage its not redirect to the Login page and when i click on the login button its not working either.
<!DOCTYPE html>
<html class="no-js" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script src="js/main.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>Login</li>
</ul>
</div><!--/.navbar-collapse -->
in bottom:
i have include jquery and bootstrap's file.
this is a bootstrap application.
this is live example :
Live example
Routes are specified correctly. What you need is to define the ng-view in your template so that the templates mentioned in specific routes are loaded into the main template
Something like :
<div class="page-container">
<div ng-view></div>
</div>
ng-view will be the place where every template mentioned in the router will be loaded.
i think there might be issue with your path .. its mvc base and routes define your path :)
I'm new to Angular.js and i can't figure out why my partial templates are not bound to the ng-view div.The ng-view is just not there when i try to inspect it with firebug. Here is my code :
html header and body:
<html lang="en" ng-app="BPMNApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- External Libraries -->
<script src="js/external/jquery-1.10.2.min.js"></script>
<script src="js/external/modernizr-2.6.2.min.js"></script>
<script src="js/external/angular.js"></script>
<script src="js/external/angular-resource.js"></script>
<script src="js/external/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<!-- General Navigation Bar -->
<nav>Simple Bootstrap nav
</nav>
<div><h1>View Should be right under here</h1></div>
<div id='contentcontainer'>
<div class='container' ng-view></div>
</div>
App :
'use strict';
/* App Module */
var BPMNApp = angular.module('BPMNApp', [
'ngRoute',
'BPMNControllers',
'BPMNServices'
]);
BPMNApp.config(['$routeProvider','$resourceProvider','$locationProvider',
function($routeProvider,$resourceProvider,$locationProvider) {
$routeProvider.
when('/landing', {
templareUrl: 'partials/landing.html',
controller : 'LandingCtrl'
}).
when('/process-definitions', {
templateUrl: 'partials/process-definitions.html',
controller: 'ProcessDefinitonCtrl'
}).
when('/process-definitions/:definitionId', {
templateUrl: 'partials/definition-detail.html',
controller: 'DefinitionDetailCtrl'
}).
otherwise({
redirectTo: '/landing'
});
//$locationProvider.html5Mode(true);
}]);
Controllers :
var BPMNControllers = angular.module('BPMNControllers', []);
BPMNControllers.controller('LandingCtrl',['$scope',
function($scope){
$scope.welcome = 'BPMN - Rest Interface';
}])
BPMNControllers.controller('ProcessDefinitionCtrl', ['$scope', 'ProcessDefinitions',
function($scope, ProcessDefinitons) {
$scope.defs = ProcessDefintions.query();
}]);
BPMNControllers.controller('DefinitionDetailCtrl', ['$scope','$routeParams','ProcessDefinitions',
function($scope,$routeParams, ProcessDefinitions) {
$scope.def = ProcessDefinitions.get({id : $routeParams.definitionId})
}]);
and the templates:
process-definitions.html :
<div class="container-fluid">
<div class="row" ng-repeat="def in defs">
<div class="col-md-1">{{def.name}} </div>
<div class="col-md-1">{{def.id}} </div>
<div class="col-md-1">{{def.version}}</div>
</div>
landing.html :
<h1>{{welcome}}<h1>
Even the simple landing.html is not displayed correctly, and i can't figure out why. Thanks for your help.
<a href="/process-definitons/{{def.id}}">
you need a # before the url
<a href="#/process-definitons/{{def.id}}">
when('/landing', {
templareUrl: 'partials/landing.html',
controller : 'LandingCtrl'
})
I see a typo there. change templareUrl to templateUrl.
I'm new at javascript and angularJS and I have a little problem configuring my $routeProvider. It does not display anything at all.
Here is my code :
var route = angular.module('app', []);
route.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {templateUrl: 'partials/home.html'})
.when('/about', {templateUrl: 'partials/about.html'})
.otherwise({redirectTo: '/home'})
}]);
var ap = angular.module('app', ['snap']);
ap.controller('MainCtrl', function($scope) {
$scope.opts = {
disable: 'right'
};
});
and the HTML :
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/angular-snap.css" />
<script src="js/angular-1.2.4.min.js" type="text/javascript"></script>
<script src="js/snap.js" type="text/javascript"></script>
<script src="js/angular-snap.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body ng-controller="MainCtrl">
<nav snap-drawer class="nav">
Home
About us
</nav>
<snap-content snap-options="opts">
<header class="header">
<button snap-toggle>
<img src="img/icon-menu.png" width="60px" />
</button>
Test
</header>
<div ng-view>
</div>
</snap-content>
<script src="cordova.js" type="text/javascript"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
The snap element for the left panel is working just fine but when I want to add the routeProvider it does not display what I have in partial/home.html (which is just a paragraph at the moment).
Don't forget to inject the ngRoute module.
var route = angular.module('app', ['ngRoute']);
You need to include the ngRoute module (and the angular-route.js) in order for $routeProvider to work. This was split up a while ago:
AngularJS $routeProvider docs