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
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">
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.
At my angular app after I reload the page I get the empty shell html page not my home page as my expectation even when the url point to the home route http://localhost:8444/home.
Please point out what is wrong with my code ?
or what should i do to fix this behavior ?
the app at server side contain one cshtml page with ng-include tag
<!DOCTYPE html>
<html ng-app="app">
<head>
#Scripts.Render("~/bundles/scripts")
<base href="/">
<script type="text/javascript">
(function () {
'use strict';
var app = angular.module('app', ['ui.router']);
app.config(['$stateProvider', '$locationProvider', configurRoutes]);
function configurRoutes($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state(
'home', {
url: '/home',
template: '<div>At Home Page</div>'
});
}
})();
</script>
</head>
<body>
<div>
<div ng-include="'/app/layout/shell.html'"></div>
</div>
</body>
</html>
shell.html
<div>
In the shell
<hr/>
<a ui-sref="home"> home </a>
<div ui-view></div>
here is the problem at first load I get the empty shell page, Notice that url pointing to home page
after click on go home it is working as expected
Update
after I moved the content of the shell.html to the cshtml it worked as expected but without ng-include
Try adding an otherwise('home') clause to your stateProvider
I am trying to creae an application in angular using ng-route but i cannot get it to work.
I did search the issue and tried suggestions like to move my ng-app to but nothing seems to work.
I have added a plunker link below
http://plnkr.co/edit/a8VIRzloIMqANK4f8YXb?p=preview
Can someone help
adding the code here too
index html
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script type="text/javascript" src="dist/ng-table.min.js"></script>
<link rel="stylesheet" href="dist/ng-table.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
<link href="main.css" rel="stylesheet" />
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="DemoCtrl.js"></script>
</head>
<body ng-controller="DemoCtrl" ng-app="stockApp">
<header>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<h1 class="stockHeader">Stock App</h1>
<a class="blog-nav-item pull-right" href="#/">Login</a>
<a class="blog-nav-item pull-right" href="#/stock">Stock</a>
<a class="blog-nav-item active pull-right" href="#/addTools">Add Tools</a>
</nav>
</div>
</div>
</header>
<div ng-view></div>
</body>
</html>
app.js
var sampleApp = angular.module('stockApp', ['ngRoute']);
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'login.html',
controller: 'DemoCtrl'
}).
when('/stock', {
templateUrl: 'stockStatus.html',
controller: 'DemoCtrl'
}).
when('/addTools', {
templateUrl: 'addTools.html',
controller: 'DemoCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
DemoCtrl.js
var app = angular.module('stockApp', ['ngTable']).
controller('DemoCtrl', function($scope) {
$scope.stock="In Stock!"
})
other than these have 3 partials.
See this fork of your original plunker where the code segments below have been updated: http://plnkr.co/edit/91XYMEC85Shgu6kQSrty?p=preview
// DemoCtrl.js
var app = angular.module('controllers', []).
controller('DemoCtrl', function($scope) {
$scope.stock="In Stock!"
})
// app.js
var sampleApp = angular.module('stockApp', ['ngRoute', 'controllers']);
First, your controller code was re-initializing the stockApp module by passing in dependencies. If you need separate depedencies for your controllers, create them as a separate module and make your app dependent on that module.
Second, I updated the versions of angular and angular JS. Conflicting versions can cause issues as per this prior answer: Failed to instantiate module [$injector:unpr] Unknown provider: $routeProvider.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
One additional thing to check on... make sure you're loading your angular js files (controllers, services, factories, etc) in the correct order. For example, if a controller uses a service, the service needs to be loaded into the DOM before the controller.
Additionally, make sure that none of your services or factories are re-initializing the app. Your code should NOT look like this:
angular.module('app', [])
.service('TrxnService', function () {
//code here
})
But instead, it should look like this (without the brackets)...
angular.module('app')
.service('TrxnService', function () {
//code here
})
NOTE FOR NEWBIES: replace 'app' with whatever you named your app in your top level module declaration.
I am new to AngularJS. I have created a basic website where I have added 2 links and I want to create route for the same.
Below is my index.html file:
<!DOCTYPE html>
<html ng-app="test">
<head>
<title>My Angular App!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div id="links">
<a ui-sref="login">Login</a>
<a ui-sref="register">Register</a>
</div>
<div ui-view></div>
</body>
</html>
But when I run my code, both tags above are not coming as links.
The problem is simply that you don't have any routes registered with ui-router. When you register your routes, the ui-sref directive will add the href tags and the default hyperlink styling will be applied. Read more about hyperlinks and anchor tags here.
Example: Live Demo
.config([
'$stateProvider',
function($stateProvider) {
$stateProvider
.state('myState', {
url: '/my/path',
controller: 'MyStateController',
templateUrl: 'my-state.html'
});
}
]);
HTML:
<a ui-sref="myState">My State</a>
The ui-sref directive will then render this:
My State <!-- HTML5 Mode -->
My State <!-- hashbang mode -->