I'm trying to use the multiple views of AngularJS using ng-view and routeProvider but it's not working. Could you please help? Below is the link to my whole Plunk project:
multiple views project
Below is the index.html page:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Routing</title>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<ul class="menu">
<li>
view1
</li>
<li>
view2
</li>
</ul>
<div>Below you should see the partial view :) ... </div>
<div ng-view>
<p>ng-view should be loading data from view1.html and view2.html right here but it's not working</p>
</div>
<script src="app.js"></script>
<script src="controllers.js"></script>
</body>
</html>
remove the .html from href="#/view1.html" and `href="#/view2.html"
Modify:
.when('/index', {
template: ''
})
.otherwise({
redirectTo: '/index'
});
Related
It doesn't display anything on view nor any error on console log. Have checked with case sensitives too still couldn't solve the problem. Saw other posts too still couldn't find where am making mistake. Is it necessary to use ng-resource for UI-Router?
<!DOCTYPE html>
<html>
<head>
<title>Fad Street Den</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.4/angular-ui-router.js"></script>
<body cz-shortcut-listen="true">
<div>
{{name}}
<div ui-view="header"></div>
<div ui-view="content"></div>
</div>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controller.js"></script>
<script type="text/javascript" src="services.js"></script>
</body>
</html>
App.js file
var app=angular.module('myApp', ['ui.router']);
.config(function($stateProvider,$urlRouterProvider)
{
$stateProvider
.state('home',
{
url:'/',
views:
{
'header':
{
templateUrl:"header.html"
},
'content':
{
templateUrl:"body.html",
controller:"productscontroller"
}
}
})
$urlRouterProvider.otherwise('/');
})
Controller.js File
var app=angular.module('myApp');
app.controller('productscontroller',
['$scope','productservice',function($scope,productservice)
{
$scope.name="kannan";
productservice.productlists().then(function(response)
{
$scope.ans=response.data;
console.log($scope.ans);
},function(response)
{
console.log(response.status);
return response.status;
});
}]);
Header.html
<body ng-app="myApp" ng-controller="productscontroller">
<ul class="nav navbar-nav">
<li class="active"><a ui-sref="home">Home</a></li>
<li><a ui-sref="home">Home</a></li>
</ul>
</body>
Body.html
<body ng-app="myApp" ng-controller="productscontroller">
<div>
<div style="height: 200px;" ng-repeat="x in ans">
<img style="width: 100px;height: 100px;float: left;" class="img-responsive"
ng-src="{{x.imageURL1}}">
<h1>{{x.color}}</h1>
<p>{{x.brand}}</p>
<p>{{x.gender}}</p>
</div>
</div>
</body>
We have to provide ng-app="myApp" at the most root level possible. Mostly on the index.html
<body ng-app="myApp" ...
or even on the <html> (e.g. to be able to adjust <title> which is part of <head>)
<html ng-app="myApp" ...
the header.html and body.html (as shown above) would not work, because that would not trigger the application at all
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>"
i need to keep my controller page in separate folder.But it is showing me the below error.
Error: [ng:areq] http://errors.angularjs.org/1.4.6/ng/areq?p0=homecontroller&p1=not%20aNaNunction%2C%20got%20undefined
at Error (native)
I am explaining my code below.
app.js:
var GoFastoApp=angular.module('GofastoHome',['ngRoute']);
GoFastoApp.config(function($routeProvider) {
$routeProvider
.when('/',{
templateUrl : 'view/home.html',
controller : 'homecontroller'
})
.when('/deptinfo',{
templateUrl : 'view/info.html',
controller : 'infocontroller'
})
.when('/TimeTable',{
templateUrl : 'view/time.html',
controller : 'timecontroller'
})
.when('/course',{
templateUrl : 'view/course.html',
controller : 'coursecontroller'
})
.when('/subject',{
templateUrl : 'view/subject.html',
controller : 'subjectcontroller'
})
.when('/hod',{
templateUrl : 'view/hod.html',
controller : 'hodcontroller'
})
.when('/faculty',{
templateUrl : 'view/faculty.html',
controller : 'facultycontroller'
})
})
In the above code i have declared different controller for different template.All the partial template will add into below index page.
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="GofastoHome">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>...:::WELCOME TO Channabasavashwara Institude of Technology:::...</title>
<!-- PACE LOAD BAR PLUGIN - This creates the subtle load bar effect at the top of the page. -->
<script src="js/angularjs.js" type="text/javascript"></script>
<script src="js/angularroute.js" type="text/javascript"></script>
<script src="controller/app.js" type="text/javascript"></script>
<!-- GLOBAL STYLES - Include these on every page. -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style22.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" style="margin-top:50px">
<div class="container" style="width:1270px;">
<div class="navbar-header navbar-brand">
Computer Science & Engineering
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Dept. info</li>
<li>Time Table</li>
<li class="dropdown">
Edit <span class="caret"></span>
<ul class="dropdown-menu">
<li>Course</li>
<li>Subject</li>
<li>HOD</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Faculty</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!--main_heading_div-->
<!--middle_content_details_data-->
<div class="row" style="padding-top:90px;" ng-view>
</div>
<!--end_middle_content_details_data-->
</div>
<!-- /.page-content -->
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.popupoverlay.js"></script>
<!--<script src="controller/HomeController.js" type="text/javascript"></script>-->
</body>
</html>
Here i need suppose for home.html partial template i will create new homecontroller file in separate folder and include this file in master page.Here i created one file(i.e-HomeController.js) which is given below.
HomeController.js:
var homeapp=angular.module('GofastoHome',[]);
homeapp.controller('homecontroller',function($scope){
})
When i include this file i did not get any partial template and when i removed this file link from master page(i.e-index.html) the above error is coming.Please help me to resolve this issue. I am using angular.js version 1.4.6.
To get a reference to an existing module you must not declare a dependency list!
Remove the brackets and it should work.
var homeapp=angular.module('GofastoHome');
Always include Angular Plugin file first, then include application app.js, configuration files if any and at the end include all angular modules dependencies created like services, directives, factories and at last controllers.
app.js
// Angular Module initialization
var goFastoApp=angular.module('GofastoHome',['ngRoute']);
// Config Block
GoFastoApp.config(function($routeProvider) {
$routeProvider
.when('/',{
templateUrl : 'view/home.html',
controller : 'homecontroller'
})
});
home.controller.js
// Consider this code you have added in separate file for controller
goFastoApp.controller('homecontroller',function($scope){
$scope.username = "Satya";
})
index.html
<!DOCTYPE html>
<html lang="en" ng-app="GofastoHome">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>...:::WELCOME TO Channabasavashwara Institude of Technology:::...</title>
<!-- PACE LOAD BAR PLUGIN - This creates the subtle load bar effect at the top of the page. -->
<!-- GLOBAL STYLES - Include these on every page. -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style22.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Page Content -->
<!-- Plugin Files -->
<script src="js/angularjs.js" type="text/javascript"></script>
<script src="js/angularroute.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.popupoverlay.js"></script>
<!-- End Plugin Files -->
<!-- JS Files -->
<script src="controller/app.js" type="text/javascript"></script>
<script src="controller/HomeController.js" type="text/javascript"></script>
<!-- End JS Files -->
</body>
</html>
I am trying to use html5Mode for removing # from the url in SPAs. I got error while use $locationProvider in angularjs v 1.3.14.
I don't know why it's happening.i have mention below with code and my console error.
Front End:
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-cookies.min.js"></script>
<script src="app/controller.js"></script>
</head>
<body ng-controller="sample-controller" class="container">
<div ng-view></div>
</body>
</html>
My Controller:
var app=angular.module('app',['ngRoute','ngCookies']);
app.config(['$routeProvider','$locationProvider','$httpProvider',function($routeProvider, $locationProvider, $httpProvider){
$routeProvider
.when('/', {
templateUrl : "/angular-practice/route/family.html",
controller : "sample-controller"
})
.when('/login', {
templateUrl : "/angular-practice/route/login.html",
controller : "sample-controller"
})
.when('/oops', {
templateUrl : "/angular-practice/route/oops.html",
controller : "sample-controller"
})
.otherwise({ redirectTo: '/oops',controller : "sample-controller" });
//$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
$httpProvider.defaults.timeout = 5000;
$locationProvider.html5Mode(true);
}]);
Console Error
Error: [$location:nobase] http://errors.angularjs.org/1.3.14/$location/nobase
M/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:6:417
Me/this.$get<#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:98:414
You need ta add:
<base href="/">
in the head section of your main html file. This is because Angular requires you to specify the url base when setting "$locationProvider.html5Mode(true);". You can read about it in the documentation here: https://docs.angularjs.org/guide/$location.
Your html file should look like this to work:
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<base href="/">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-cookies.min.js"></script>
<script src="app/controller.js"></script>
</head>
<body ng-controller="sample-controller" class="container">
<div ng-view></div>
</body>
</html>
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 :)