Links not working with angular ui-router - javascript

So I've set up ui-router and I had it working a few minutes ago, sort of, it would display the template with content loaded from another html file, but none of the links would work. Now nothing is working: the template shows up but the content is not pulled in and none of the links work.
Ctrl.js
var site = angular.module('site', ['ui.router']);
site.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('page', {
url: '/page',
templateUrl: 'page.html',
})
.state('about', {
url: '/about',
templateUrl: 'about.html',
});
$urlRouterProvider.otherwise('/page');
})
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="scripts/ctrl.js"></script>
<link rel="stylesheet" href="style/main.css">
</head>
<body ng-app="site">
<nav class="navbar navbar-default navbar-fixed-top" id="navigate">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navSmall">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navSmall">
<ul class="nav navbar-nav navbar-right">
<li>about</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center container-fluid">
<div ui-view></div>
</div>
<footer class="footer">
<div id="note" class="container">
<div class="row">
<div class="col-sm-8">
-----Footer Content-----
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</footer>
</body>
</html>
About.html (should be loaded but it's not)
<div ui-view="about">
<div class="container-fluid bg-about">
<div class="container-content">
<div class="row">
</div>
</div>
</div>
</div>
Wow you all are fast! Thanks for the suggestions. So update: changing it to ahref="#/about" helped in that I can now go to the link but still no content displays. There is a console error:
Error: Access to restricted URI denied
fg/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:103:167
n#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:98:460
m/g<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:95:489
e/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:130:409
uf/this.$get</m.prototype.$eval#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:103
uf/this.$get</m.prototype.$digest#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:142:165
uf/this.$get</m.prototype.$apply#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:399
Ac/c/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:115
h/<.invoke#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:41:374
Ac/c#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:36
Ac#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:332
fe#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:20:156
#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:315:135
g/</j#https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29566
g/</k<#https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29882
angular.min.js:117:399

Your state URL is /about, not /about.html.
In any case, use the ui-sref directive, that's what it's for
<a ui-sref="about">about</a>
You simply pass in the state name (and any params, see the documentation) and it will create the right URL for you taking into account any $locationProvider.html5mode configuration.
If you are loading the app via file:///some/path/to/index.html, the AJAX requests to your templates (ie about.html) might not work. You should be using an HTTP server for your local development.
Have a look at (or even just clone as a base) the angular-seed project. It provides an excellent starting point for first-time Angular development.

You are mistake the state URL
your code <li>about</li>
You can access the state by URL from browser, but referencing other section of the app is a bad practice though it still works
<li>about</li>
Do this
<li><a ui-sref="about">about</a></li>

your state URL is mistake, is /about not /about.html
Try this
<li><a ui-sref="about">about</a></li>

For link to work you need to use
about
instead of
about.
Also for content to pull in like data binding you need to use controller.

Try this, just make sure test.html be there.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script>
var module = angular.module("sampleApp", ['ngRoute']);
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/route1', {
controller: 'myCtrl',
templateUrl: 'test.html'
}).
otherwise({
redirectTo: '/'
});
}]);
module.controller("MainController", function($scope) {
});
module.controller("myCtrl", function($scope) {
$scope.my = 10;
ab = function() {
alert($scope.my);
}
});
</script>
</head>
<body ng-app="sampleApp">
<div ng-controller="MainController">
Route
<ng-view>
</ng-view>
</div>
</body>
</html>

Related

My ui-view did not working?

I'm learning Angular JS and I'm got stuck when using ui-view.
I don't know ui-view or something else is trouble. But my navbar didn't appear.
Any help must be great!
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<!-- NAVIGATION -->
<div ui-view="navbar"></div>
<!-- MAIN CONTENT -->
<div class="container">
<div ui-view="content"></div>
</div>
</body>
</html>
app.js
(function() {
'use strict';
angular
.module('myApp', ['ui.router'])
.config(stateConfig);
stateConfig.$inject = ['$stateProvider'];
function stateConfig($stateProvider) {
$stateProvider.state('app', {
abstract: true,
views: {
'navbar#': {
templateUrl: 'navbar.html',
controller: 'NavbarController',
controllerAs: 'vm'
}
}
});
}
})();
navbar.html
<nav class="navbar navbar-inverse" role="navigation">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
Help, please!
As Claies pointed out you need to have descendants states, so that only your parent abstract state would be activated. Please check the answer here
In the run config you have to initialize/activate the root url by calling $state.go('your.state.name') or you have to use ng-route's otherwise api to activate the initial state. Here I have used unnamed view for content in index.html

ui-router nested routes not working

Hello guys i am trying to use angular ui-router for nested routing in my website but i don't know where i am going wrong
this is my code
app.js
var faqApp = angular.module('faqApp', ['ui.router']);
faqApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',{
url: '/home',
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
})
.state('home.contactform', {
templateUrl: 'templates/contactform.html',
})
});
home.html
<div class="faq_head clearfix">
<img src="images/backbtn.png">
<h1>Help</h1>
</div>
<div ui-view></div>
<div class="faq_inner">
<h2 class="faq_heading">FAQs</h2>
<ul>
<li ng-repeat="option in faqoptions">
<a href="{{option.url}}" class="clearfix">
<span class="icon">
<img ng-src="{{option.image}}">
</span>
<span class="faq_name">{{option.name}}</span>
<span class="arrow">
<img src="images/right_arrow.png">
</span>
</a>
</li>
</ul>
</div>
<div class="bottom_btn_box">
Terms & Conditions
Credits
</div>
index.html
<!doctype html>
<html>
<head>
<title>Frequently ask questions</title>
<link rel="stylesheet" type="text/css" href="css/libs/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div ng-app="faqApp">
<div ui-view></div>
</div>
<script src="js/libs/jquery-1.12.3.min.js"></script>
<script src="js/libs/angular.js"></script>
<script src="js/libs/angular-ui-router.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controller/homeCtrl.js"></script>
</body>
</html>
In the above code i am calling 'home.html' in index.html through ui-view and then calling contactform.html in home.html but contactform.html is not loaded.
You need to define the url too,
.state('home.contactform', {
url: "/contactform",
templateUrl: 'templates/contactform.html',
})
DEMO

Need help getting my Angular Module to load: Uncaught Error: [$injector:modulerr]

I'm trying to start up an angular module, but I cannot seem to understand why it's not working. All the controllers, modules, and directives seem okay to me. I feel as if the problem is with how everything is loaded in the index.html page. Anyone have an idea what might be the problem? I've checked similar questions but no luck thus far.
index.html
<!doctype html>
<html lang="en" ng-app="application">
<head>
<meta charset="utf-8">
<title>My Portfolio</title>
<link rel="stylesheet" href="styles/main.css"/>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-loader/angular-loader.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="scripts/module.js"></script>
<script src="scripts/controllers/mainHeroController.js"></script>
<script src="scripts/directives/mainHero.directive.js"></script>
</head>
<body ng-app="webApp">
<nav id="main-navbar" class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Portfolio</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 id="main-jumbotron" class="jumbotron container-fluid">
<div class="row">
<div class="col-md-4">
<img id="profile-pic" src="images/ProfilePic.jpg"/>
</div>
<div class="col-md-8">
<h1 class="display-3">Hello world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="m-y-2">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</div>
</div>
<div id="container1">
<mainHero></mainHero>
</div>
<div id="container2">
Container 2
</div>
</body>
</html>
module.js
(function()
{
'use strict'
angular
.module('webApp', [])
})();
mainHero.js
(function mainHeroDirective()
{
'use strict'
angular
.module('webApp')
.directive('mainHero', mainHero);
mainHero.$inject = [];
function mainHero()
{
var directive =
{
restrict: 'E',
controller: 'MainHeroController',
//controllerAs: 'mainHero',
scope: {},
template: 'Directive works!'
}
}
})();
mainHeroController.js
(function mainHeroController()
{
'use strict'
angular
.module('webApp')
.controller('MainHeroController', MainHeroController);
mainHeroController.$inject = [];
function MainHeroController()
{
alert('works!');
}
})()
The error is actually caused by the "ng-app" that is left at the top of your document:
<html lang="en" ng-app="application">
You can tell (kind of) from the URL in the error:
http://errors.angularjs.org/1.5.8/$injector/nomod?p0=application
There was another problem with the way your directive is defined though, because the function is not returning anything, and also a typo in your controller, because the case is not consistent.
I copied it to codepen and corrected those errors:
http://codepen.io/anon/pen/ZpbZRJ
Hope it helps!

Unable to load the templates AngularJS

I am trying to load templates in angular but get an error:
Failed to load resource: net::ERR_FILE_NOT_FOUND angular.js:102 Error:
[$compile:tpload]
http://errors.angularjs.org/1.3.15/$compile/tpload?p0=pages%2Fhome.html
at Error (native)
at file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:6:417
at file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:137:25
at file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:112:113
at n.$eval (file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:126:15)
at n.$digest (file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:123:106)
at n.$apply (file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:126:293)
at l (file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:81:240)
at M (file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:85:342)
at XMLHttpRequest.e (file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:86:418)
Here's my index.html
<!DOCTYPE html>
<html lang="en-us" ng-app="weatherApp">
<head>
<title>AngularJS Weather Forecast SPA</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
html, body, input, select, textarea
{
font-size: 1.05em !important;
}
</style>
<!-- load angular via CDN -->
<script src="http://code.angularjs.org/1.3.0-rc.2/angular.min.js"></script>
<script src="http://code.angularjs.org/1.3.0-rc.2/angular-route.min.js"></script>
<script src="http://code.angularjs.org/1.3.0-rc.2/angular-resource.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS Weather</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
// MODULE
var weatherApp = angular.module('weatherApp', ['ngRoute', 'ngResource']);
// ROUTES
weatherApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.htm',
controller: 'homeController'
})
.when('/forecast', {
templateUrl: 'pages/forecast.htm',
controller: 'forecastController'
})
});
// CONTROLLERS
weatherApp.controller('homeController', ['$scope', function($scope) {
}]);
weatherApp.controller('forecastController', ['$scope', function($scope) {
}]);
I tried to use WAMP server to load the pages from, but still get the same error.
Currently your template protocol contains file:// which would not accessible through your browser.
You need to host your code on some server(like IIS, WAMP, etc.) & paste your whole code directory on the server, in order to work your code. Other wise your code looks fine.
So the URL should be either http:// or https:// then your template will fetch from server directly.
Use https or http in URL .Example:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

AngularJS ng-view not working

So I followed this guide: http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/
But when I try to change the view nothing happens, anybody a idea what I do wrong?
This is the code I got.
Home.php:
<!DOCTYPE html>
<html ng-app="lax">
<head>
<meta name="author" content="Koen Desmedt" />
<meta name="description" content="CMS Belgium Lacrosse" />
<meta name="keywords" content='Lacrosse, BLF, Belgium' />
<meta name="googlebot" content="noarchive" />
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="lax.js"></script>
<link href="css/style.css" rel="stylesheet">
<title>CMS Belgium Lacrosse</title>
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#/home">
<span class="glyphicon glyphicon-home"></span> BLF
</a>
</li>
<li>
Players
</li>
<li>
Club
</li>
<li>
Games
</li>
</ul>
</nav>
</div>
</header>
<div id='contentcontainer'>
<div class='container' ng-view></div>
</div>
</body>
</html>
lax.js:
var lax = angular.module('lax', []);
lax.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'views/news.php',
controller: 'NewsController'
}).
when('/players', {
templateUrl: 'views/players.php',
controller: 'PlayersController'
}).
otherwise({
redirectTo: '/home'
});
}]);
lax.controller('NewsController', function($scope) {
$scope.message = 'This is Add new order screen';
});
lax.controller('PlayersController', function($scope) {
$scope.message = 'This is Show orders screen';
});
From angular 1.2.0, ngRoute has been moved to its own module. You have to load it separately and declare the dependency.
Update your html:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
And Js:
var lax = angular.module('lax', ['ngRoute']);
For more information: http://docs.angularjs.org/guide/migration
Angular routes require the route module to be included as well. Here is the documentation that covers this.
So, I think you may be missing the:
<script src="angular-route.js"></script>
In the <head> of the page.
*Note: this module used to be part of Angular, but was moved out recently (1.2?). So, some tutorials are still assuming that $route is built-in.
Adding this would work :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
but it will not work without internet access when running for a first time ,Therefore you should ng-route dependency to your project and refer that in your html file
How to add ng-route dependency

Categories