I'm developing a web app with angularjs and have run into some problems with ng-view. I have configured the routes in app.js, but when I load the main page, the partials do not show up in the view.
Here is my index.html:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="headerwrap" ng-controller="headerCtrl">
<span class="logo pull-left">{{appDetails.title}}</span>
<span class="tagline-pull">{{ appDetails.tagline}}</span>
<div class="nav-wrap pull left">
<ul class="nav nav-pills">
<li class="active">Books</li>
<li>Kart</li>
</ul>
</div>
</div>
<div ng-view></div>
</body>
</html>
Here is my app.js:
var myApp = angular.module("myApp", ["ngRoute"]);
myApp.config(function($routeProvider){
$routeProvider
.when("/books", {
templateURL: 'book-list.html',
controller: "BookListCtrl",
})
.when("/kart", {
templateURL: 'kart-list.html',
})
.otherwise({
redirectTo: '/books'
})
});
myApp.controller("headerCtrl", function($scope){
$scope.appDetails = {};
$scope.appDetails.title="Book Store";
$scope.appDetails.tagline="Browse our books";
});
myApp.controller("BookListCtrl", function($scope){
$scope.books = [
{
title:"Hunger Games",
price:205,
rating:5,
col:"red"
},
{
title:"Harry Potter",
price:255,
rating:4,
col:"blue"
}
];
});
Here is my first partial, book-list.html:
<div id="booklistwrapper">
<form role="form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
<div>
<ul class="list-unstyled">
<li class="book" style="background: {{book.col}}" ng-repeat="book in books">
<div class="book-details clearfix">
<h3>{{book.title}}</h3>
<p>{{book.price}}</p>
<ul>
<li>{{'Rating: ' + book.rating}}</li>
</ul>
</div>
</li>
</ul>
</div>
Here is my second partial, kart-list.html:
<div>
This is the Kart
</div>
Neither partial will load. Does anyone know what this might be due to?
Thats because you have a typo, its
templateUrl
not
templateURL
http://plnkr.co/edit/3CPLZssLAAoxhLRV1NAZ?p=preview
Related
I have tried many different approaches getting my Angular routing to work, however, I cannot get the links to route correctly. Any help will be greatly appreciated.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SIE Special Projects</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="sp_app">
<div ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">{{ message }}</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> Projects</li>
</ul>
</div>
</nav>
<div id="main">
<div ng-view></div>
</div>
</div>
</body>
</html>
Here is a plunk of my routing code
http://embed.plnkr.co/FVVdbuKddGNFQgjkuSxv/
Routing Code:
var app = angular.module('sp_app', ['ngRoute']);
// configure our routes
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'mainController'
})
.when('/projects', {
templateUrl: 'allprojects.html',
controller: 'projectsController'
});
});
app.controller('mainController', function ($scope) {
$scope.message = 'Welcome to the Special Projects web page';
});
app.controller('projectsController', function ($scope) {
$scope.message = 'Here are the projects';
});
I have a little problem with my views in angular. I try to use ui.router to config my routes but it doesn't work. I try to use the console but it's clear. I don't know what i can do fix this problem.
(function(){
'use strict';
const app = angular.module('myApp', ['common.services', 'common.servicesMock', 'ui.router']);
app.config(function($stateProvider, $locationProvider) {
$locationProvider.hashPrefix("");
$stateProvider
.state('newList', {
template: 'views/newsListView.html',
url: '/news',
controller: 'newsCtrl as vm',
});
//Delete the # in the routes
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
}())
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wiki</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="styles/bootstrap.min.css">
<link rel="stylesheet" href="styles/app.css">
</head>
<body ng-app="myApp">
<div class="container">
<div ui-view>
</div>
</div>
<!-- Libraries & Framweorks -->
<script src="scripts/js/angular.min.js"></script>
<script src="scripts/js/angular-mocks.js"></script>
<script src="scripts/js/angular-resource.min.js"></script>
<script src="scripts/js/angular-ui-router.min.js"></script>
<script src="scripts/js/jquery-3.1.1.min.js"></script>
<script src="scripts/js/bootstrap.min.js"></script>
<!-- App Scripts -->
<script src="scripts/app.js"></script>
<!-- Controllers -->
<script src="scripts/controllers/newsCtrl.js"></script>
<script src="scripts/controllers/categoriesCtrl.js"></script>
<!-- Services -->
<script src="scripts/common/services/common.services.js"></script>
<script src="scripts/common/services/categories/categoriesService.js"></script>
<script src="scripts/common/services/common.servicesMock.js"></script>
<script src="scripts/common/services/news/newsResource.js"></script>
</body>
</html>
This is the view i want to show in the browser.
<div class="row center" ng-controller="categoriesCtrl as vm">
<button type="button" class="btn btn-default" ng-click="vm.toggleCategories()">{{vm.showCategories ? "Hide" : "Show"}} Categories</button>
<br>
<div ng-show="vm.showCategories" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active" ng-repeat="cate in vm.categories">
<input type="radio" name="options" id="{{cate}}" autocomplete="off">{{cate}}
</label>
</div>
</div>
<div class="row">
<div class="row">
<fieldset>
<legend class="title">Outstanding</legend>
</fieldset>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" ng-repeat="newsItem in vm.news | filter:{important: true} | orderBy: '-date'">
<div class="thumbnail">
<img ng-src='{{newsItem.banner}}' class="banner">
<div class="caption">
<span class="date">{{newsItem.date | date}}</span>
<h3>{{newsItem.newsTitle}}</h3>
<p>
{{newsItem.newsDesciption.substring(0,200) + "..."}}
</p>
<p>
Read More
Edit
</p>
</div>
</div>
</div>
</div>
<div class="row">
<fieldset>
<legend class="title">Last News</legend>
</fieldset>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 thumbnail-xs" ng-repeat="newsItem in vm.news | filter:{important: false} | orderBy: '-date'">
<div class="thumbnail">
<img ng-src='{{newsItem.banner}}' class="banner">
<div class="caption">
<span class="date">{{newsItem.date | date}}</span>
<h3>{{newsItem.newsTitle}}</h3>
<p>
{{newsItem.newsDesciption.substring(0,200) + "..."}}
</p>
<p>
Read More
Edit
</p>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks for your time.
Although you declared the states, you need to actually "enter" the state when you first launch it. Assuming the newList state is the state that you want to go to, you can do it in two ways:
using $urlRouterProvider to route to /news at root:
app.config(function($stateProvider, $locationProvider, $urlRouterProvider) {
$locationProvider.hashPrefix("");
$urlRouterProvider.when('/','/news');
$stateProvider
.state('newList', {
template: 'views/newsListView.html',
url: '/news',
controller: 'newsCtrl as vm',
});
//Delete the # in the routes
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
via .run method in angular
app.run(['$state',function($state){
$state.go('newList');
}])
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 have this website routing my pages with 4 html files and it works fine, but when I am trying to add or remove a new one, it just shows blank screen with my navigation bar only.
The error I caught is :
Error: $injector:modulerr
Module Error
Being a noobie in Angular I saw various solutions that have to do with the ngRoute, but in vain.
I want to add more html files for the rest of the projects but I can't.
I use 1.2.15 version and call the files locally. Below is the Angular script I am using, there's also some code added to browse through the projects.
var app = angular.module('myapp', ['ngRoute','ngAnimate']);
app.controller('MainCtrl', function($scope, NextBackBasicService, $location) {
$scope.message = $location.path();
});
app.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'home.html',
controller: 'MainCtrl'
}).
when('/example1', {
templateUrl: 'example.html',
controller: 'MainCtrl'
}).
when('/example2', {
templateUrl: 'example2.html',
controller: 'MainCtrl'
}).
when('/example3', {
templateUrl: 'example3.html',
controller: 'MainCtrl'
}).
when('/example4', {
templateUrl: 'example4.html',
controller: 'MainCtrl'
});
$routeProvider.otherwise({
redirectTo: '/route'
});
});
app.run(function($rootScope, NextBackBasicService){
$rootScope.goNext = function() {
NextBackBasicService.goNext();
};
$rootScope.goBack = function() {
NextBackBasicService.goBack();
};
});
app.factory('NextBackBasicService', function($route, $location) {
//array for keeping defined routes
var routes = [];
angular.forEach($route.routes, function(config, route) {
//not to add same route twice
if (angular.isUndefined(config.redirectTo)) {
routes.push(route);
}
});
return {
goNext: function() {
var nextIndex = routes.indexOf($location.path()) + 1;
if (nextIndex === routes.length) {
$location.path(routes[0]);
} else {
$location.path(routes[nextIndex]);
}
},
goBack: function() {
//window.history.back();
var backIndex = routes.indexOf($location.path()) - 1;
if (backIndex === -1) {
$location.path(routes[routes.length - 1]);
} else {
$location.path(routes[backIndex]);
}
}
};
});
And here is my index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8" />
<title>My Title</title>
<!--<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
<script src="https://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>-->
<!--<script data-require="ng-route#*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0-rc.3/angular-route.js"></script>-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700&subset=latin,greek,greek-ext' rel='stylesheet' type='text/css'>
<!--Loads Angular
<script src="https://code.angularjs.org/1.2.15/angular.min.js" data-semver="1.2.15"></script>
<script src="https://code.angularjs.org/1.2.15/angular-route.min.js" data-semver="1.2.15"></script>
<script src="https://code.angularjs.org/1.2.15/angular-animate.min.js"></script>-->
<script src="js/angular.min.js" data-semver="1.2.15"></script>
<script src="js/angular-route.min.js" data-semver="1.2.15"></script>
<script src="js/angular-animate.min.js"></script>
<script src="app.js"></script>
<!--jQuery-->
<script src="js/jquery.js" type="text/javascript">
<!--Bootstrap-->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script>
$( document ).ready(function() {
$(".burger").click(function(){
$(this).toggleClass("active");
});
});
</script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container mynavigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!--<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>-->
<button type="button" class="burger navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span>
</button>
<a class="pull-left" href="#">
<img class="logodimensions" src="images/svg/logo.svg" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a class="animlinks" href="#">WORK</a>
</li>
<li>
<a class="animlinks" href="#">CONTACT / ABOUT</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="grids">
<div ng-controller="MainCtrl">
<ng-view></ng-view>
</div>
</div>
</body>
</html>
And bellow is the home where the routing takes place between the projects.
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example1">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example2">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example3">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example4">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
</div>
</div>
According to the posted error, the last reference to $routeProvider is undefined. There seems to be something odd going on, because that shouldn't be possible. To side-step this issue though, you can remove the last reference to $routeProvider and just chain the .otherwise() call onto the previous .when() call, like so:
.when('/example4', { templateUrl: 'example4.html', controller: 'MainCtrl' }).otherwise({ redirectTo: '/route' });
I created this AngularJS routing app which allows me to have all pages not in separate .htm files but all on one page with the individual page content in ng-template script elements.
Although this works, the problem is that NetBeans and PHPStorm don't recognize HTML within a script tag and so do not format it properly.
How can I change this so that I can edit this one file nicely in an editor?
<html ng-app="mainApp">
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet" />
<style type="text/css">
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
a:focus {
outline: none;
}
</style>
</head>
<body ng-cloak ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">AngularJS Routing</div>
</div>
<div>
<ul class="nav navbar-nav">
<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>
</div>
</nav>
<div class="col-lg-12">
<div ng-view></div>
</div>
<script type="text/ng-template" id="/home.htm">
<div class="jumbotron">
<h1>Home</h1>
<p>{{subtitle}}</p>
</div>
</script>
<script type="text/ng-template" id="/about.htm">
<div class="jumbotron">
<h1>About</h1>
<p>{{subtitle}}</p>
</div>
</script>
<script type="text/ng-template" id="/contact.htm">
<div class="jumbotron">
<h1>Contact</h1>
<p>{{subtitle}}</p>
</div>
</script>
<script>
var mainApp = angular.module('mainApp', ['ngRoute']);
mainApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/home.htm',
controller: 'mainController'
})
.when('/about', {
templateUrl: '/about.htm',
controller: 'aboutController'
})
.when('/contact', {
templateUrl: '/contact.htm',
controller: 'contactController'
})
.otherwise({
redirectTo: '/'
});
});
mainApp.controller('mainController', function ($scope) {
$scope.subtitle = 'the home page';
$scope.message = '';
$scope.$on("$destroy", function () {
myData.message = $scope.message;
});
});
mainApp.controller('aboutController', function ($scope) {
$scope.subtitle = 'the about page';
});
mainApp.controller('contactController', function ($scope) {
$scope.subtitle = 'the contact page';
});
</script>
</body>
</html>
With PHPStorm I belive the feature is called "language injection".
You can read about how to set it up here.
I'm not sure about netbeans, it may not have the feature.