appscript.js
var myApp=angular.module('myApp',['ngRoute']);
myApp.config([$routeProvider,function($routeProvider) {
$routeProvider
// route for the home page
.when('/home', {
templateUrl: 'home.html',
controller: 'homeController'
})
// route for the about page
.when('/services', {
templateUrl: 'services.html',
controller: 'servicesController'
})
// route for the contact page
.when('/contacts', {
templateUrl: 'contacts.html',
controller: 'contactsController'
})
.otherwise({ redirectTo: '/services' });
}
]);
index.html
<!doctype html>
<html ng-app="myApp">
<head >
<script src="appscript.js"></script>
<link href="Styles/Styles.css" rel="stylesheet">
<script src="homeController.js"></script>
<script src="servicesController.js"></script>
<script src="contactsController.js"></script>
<script src="aboutController.js"></script>
<script src="clientsController.js"></script>
<script src="angular-route.min.js"></script>
<script src="angular.min.js"></script>
</head>
<body >
<div class="header" > <h2 style="color:blue;">Training Institute</h2>
</div>
<div class="nav">
Home
About
Services
Clients
Contact
</div>
<div class="content" >
<ng-view> </ng-view>
</div>
<div class="footer">footer</div>
</body>
</html>
homeController.js
angular.module('myApp').controller('homeController',function($scope)
{
$scope.message="i am in home controller";
}
);
home.html
<div>i am in home partial template</div>
I have searched related questions and did many changes but still not able to load partial templates in the view.The url is changed but the veiw doesnt update.
I put all my code files in the same location where index.html is there,to make sure the issue is not because of incorrect paths.
I've created a plunkr to reproduce and fix your problem which you can find here: https://plnkr.co/edit/oTB6OMNNe8kF5Drl75Wn?p=preview (note: only home, services and contacts work, as those are the only routes configures in ur code so the rest falls back to the route specified in otherwise)
There are two issues with your code:
You're order of files is incorrect, it needs to be:
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="appscript.js"></script>
<script src="homeController.js"></script>
<script src="servicesController.js"></script>
<script src="contactsController.js"></script>
<script src="aboutController.js"></script>
<script src="clientsController.js"></script>
You're using AngularJS 1.6, in order to use routing ensure to read my answer here: Angular routing with ng-view is not working
Long story short: As of AngularJS 1.6, the default value for hashPrefix is !. As you're not making use of it, you either have to use it or reset it to '' using $locationProvider.hashPrefix(''). This change was introduced as of AngularJS 1.6 due this commit: https://github.com/angular/angular.js/commit/aa077e81129c740041438688dff2e8d20c3d7b52
Note: If this still doesn't help you, we might need more information as we have no idea what the content of all those js files are. Feel free to update my plunkr to reproduce your problem in that case.
Related
I have my files setup right now out of which one them is my index.html file and another is a app.javascript file. For some reason I keep getting error saying" Angular is not defined" which I unsure why as my script files look placed properly too. Below is how my index file and app.js file look like
index.html
<html>
<head>
<meta charset="utf-8">
<!Stylesheet>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!Javascript>
<!-- load angular, nganimate, and ui-router -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
<script src="app.js"></script>
</head>
<!MainAngularApp>
<body ng-app="OnboardingApp">
<div class="container">
<!Injecting all the views here>
<div ui-view></div>
</div>
</body>
</html>
app.js
//Creating our Angular App injecting ngAnimate, UIRouter
angular.module('OnboardingApp', ['ngAnimate', 'ui.router'])
//Configuring the routes
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
//Route followed to show our form
.state('form',{
url:'/form',
templateUrl: 'form.html',
controller: 'formController'
})
//Nested States where each will have their own view
//Nesting the sign up form
.state('form.signup',{
url:'/signup',
templateURL:'form-signup.html'
})
//Nesting the Question form
.state('form.questions',{
url:'/questions',
templateUrl:'form-questions.html'
})
//Nesting the Finish form
.state('form.finish',{
url:'/finish',
templateUrl:'form-finish.html'
});
$urlRouterProvider.otherwise('/form/signup');
})
.controller('formcontroller', function($scope){
//Storing all the form data into the form data object
$scope.formData= {};
//Function to process form data
$scope.processData = function(){
alert('Sign up is successful')
};
});
You need to define ng-app in your view so that angularjs app gets initiatied,
<div class="container" ng-app="OnboardingApp">
I'm learning Angularjs and this is my first code, but i can't find the bug, ng-view doesn't show data. I don't know how to debug mi code.
Please somebody can help me to show data using ng-view?.
This is my code:
Index.html
<!DOCTYPE html>
<html ng-app="FinalApp">
<head>
<title>AngularJS</title>
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.css">
<link rel="stylesheet" type="text/css" href="css/lumx.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>-->
<script src="https://code.angularjs.org/1.6.5/angular-route.min.js"></script>
<!--<script src="https://code.angularjs.org/1.4.0-beta.5/angular-route.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
<script src="https://code.angularjs.org/1.6.5/angular-parse-ext.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/lumx.js"></script>
</head>
<body>
<nav>
<div class="bgc-black-1 tc-white" flex-container="row" flex-align="center center">
<div flex-item="4">
<h1 class="fs-display-3 display-block">Posts App</h1>
</div>
<div flex-item="1">
Inicio
</div>
<div flex-item="1">
Crear Post
</div>
</div>
</nav>
<div flex-container="row" flex-aling="center">
<div ng-view flex-item="9"></div>
</div>
</body>
</html>
and the controller is
angular.module('FinalApp')
.controller('MainController',function($scope,$resource){
Post = $resource('https://jsonplaceholder.typicode.com/posts/:id',{id:'#id'});
$scope.posts = Post.query();//agrupamos los posts
});
Home.html
<lx-tabs>
<lx-tab heading='Posts'>
<div class='p+'>
<div class='card' ng-repeat='post in posts'>
<div class='p+'>
<strong class='fs-headline display-block tc-red-900'>
{{post.title}}
</strong>
<div class='paragrah fs-body-1 mt+'>
{{post.body}}
</div>
<div class='card_actions'>
<a href='#'>Leer mas</a>
</div>
</div>
</div>
</div>
</lx-tab>
<lx-tab heading='Users'>
<div class='p+'>
hello world users
</div>
</lx-tab>
</lx-tabs>
App.js
angular.module('FinalApp',['lumx','ngRoute'])
.config(function($routeProvider){
$routeProvider
.when('/',{
controller: 'MainController',
templateUrl: 'templates/home.html'
})
});
Finally i'm using LumX for make the front end of the application and the version of LumX is v1.5.31
First the working demo, you can find it in the below link!
JSFiddle Demo
I checked your code, there are only some minor corrections.
Instead of defining angular.module('FinalApp') differently in different files, try following a syntax like this.
var app = angular.module('FinalApp',['ngResource','lumx','ngRoute']);
app.config(function($routeProvider){
$routeProvider.when('/',{
controller: 'MainController',
templateUrl: 'home.html'
})
});
app.controller('MainController',function($scope, $resource){
var Post = $resource('https://jsonplaceholder.typicode.com/posts/:id',{id:'#id'});
console.log(Post.query());
$scope.posts = Post.query();//agrupamos los posts
});
So you define it only once and assign it to a variable, which can be used anywhere in the project, like shown in the above code. Thus the dependencies are always available to all the controllers!
In order to use $resource of angular, you need to include the file angular-resource.min.js and also, after including the file you need to add it to the module dependencies.
var app = angular.module('FinalApp',['ngResource','lumx','ngRoute']);
There is also one minor suggestion I would like to make. It's that the tabs don't have a label. you can define them like so.
<lx-tab heading='Users' lx-label="Users">
<div class='p+'>
hello world users
</div>
</lx-tab>
I am using templates in the script tag to create the different pages for the router, you can use the normal method itself, so you
need to ignore the changes I have made in config section, I mean the below part.
app.config(function($routeProvider){
$routeProvider.when('/',{
controller: 'MainController',
templateUrl: 'home.html'
})
});
Please let me know if it still shows errors, Happy Coding!
This my app.js,
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider.when('/',{
templateUrl: 'views/home.html',
controller: 'homeCtrl'
}).when('/detail',{
templateUrl: 'views/details.html',
controller: 'detailCtrl'
}).otherwise({
redirectTo: '/home'
});
});
myApp.controller('homeCtrl',function($scope){
$scope.message ="Welcome to your Home Page"
});
myApp.controller('detailCtrl',function($scope){
$scope.message ="Name: Manish"
});
This is index.html page,
<html >
<head>
<meta charset="ISO-8859-1">
<title>Try It Out</title>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body ng-app="myApp" ng-controller="homeCtrl" style="text-align: center;">
<span >{{message}}</span><br>
Home
Details
<br><br>
<div ng-view></div>
<h4>copyright 2017</h4>
</body>
</html>
this is my home.html
<h3>Home</h3><br>
{{message}}
same in details.html
<h3>Details</h3><br>
{{message}}
problem is when i run it on server its going to home page at first.but when i click on details..its not showing message of Details.html.
and main problem is with URL...clicking on Details link..
http://localhost:7675/AngularJSinglePage/#!/#%2Fdetail
As u can notice "!/#%2F" this comes in between..don't know from where,it should come like this
http://localhost:7675/AngularJSinglePage/#/detail
Any one faced same problem? Help me out, I am trying to learn SPA using AngularJS?
Answered # https://stackoverflow.com/a/41273403 :)
In addition you do not have a spaController in your app.js which is referenced in your
I'm trying to use the ngRoute in my angularJS page, but I'm not able to load my content within ng-view.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="CSS/index.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/app/index.js"></script>
</head>
<body ng-app="app">
<header>
<a ng-href="#/add-new">Add new</a>
</header>
<div ng-view></div>
<footer>
#Copyright 2017
</footer>
</body>
</html>
index.js:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/add-new', {
template: 'Some content'
})
}]);
Not sure what I'm missing here.
If I add otherwise condition on $routeProvider, it gets loaded. Please let me know what am I missing here so that the content within my $routeProvider.when gets loaded in my ng-view on markup. Thanks
Also not getting any console errors.
try this
JS:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "index.htm"
})
.when("/add-new", {
templateUrl : "add.htm"
})
});
HTML:
Red
Add this below line in your HTML page
<base href="/">
and change ng-href to href
EDIT :
$location in HTML5 mode requires a <base> tag to be present!
If you using ng-href, the you should pass $scope object
You don't have entry point for the app, so if you load your app and you are not going to specific url you will not see any results.
You can add otherwise({redirectTo:'/add-new'}) or go to #/add-new to see your page
I am trying to set up a SPA with angular, and with the current code it is not working, while run on a server. My index.html does not have a # after it, which I think it should for the SPA. I am curious why I am not getting a # in the url's. for example, navigating to the index i get something like localhost:4000/index.html/ instead of localhost:4000/index.html#/. When i try to navigate to localhost:4000/index.html/home i get a 404 error. Can anyone tell me why this is so, or if there are any other issues you can spot.
This is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ski</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
</head>
<body ng-app="Ski">
<ng-view></ng-view>
<script src="js/app.js"></script>
<script src="js/routes.js"></script>
</body>
</html>
angular routes :
angular.module('Ski').config(function($routeProvider) {
'use strict';
.when('/home', {
templateUrl: 'templates/home.html'
})
.when('/map', {
templateUrl: 'templates/map.html'
})
.otherwise({
redirectTo: '/'
});
});
app.js
angular.module('Ski', ['ngRoute']);
Templates:
this on is templates/maps
<div>
<h1> Hello World </h1>
</div>
this one is templates/home
<h1> Home </h1>