I wanted to animate my application so I injected ngAnimate but now none of my views are displaying:
var spApp = angular.module('spApp', ['ngRoute','ui.bootstrap', 'ngAnimate'])
.config(function($routeProvider, $locationProvider){
var rootUrl = '/Style%20Library/projects/spDash/app/partials/';
$routeProvider
.when('/home',
{
templateUrl: rootUrl+'home.html'
})
.when('/userView',
{
templateUrl: rootUrl+'userView.html',
controller: 'userCtrl'
})
.when('/groupView',
{
templateUrl: rootUrl+'groupsView.html',
controller: 'groupCtrl'
})
.when('/sitesView',
{
templateUrl: rootUrl+'sitesview.html',
controller: 'sitesCtrl'
})
.otherwise({redirectTo:'/home'});
//$locationProvider.html5Mode(true);
});
Is this incorrect?
Your application demo in the plunker is missing the app declaration like this for example:
<body ng-app="spApp">
There is controller or main controller defined.
<div ng-controller="mainCtrl">
<ng-view></ng-view>
</div>
More over I am not sure about your script declaration.
Here is a plunker configured:
http://plnkr.co/edit/tjDnzBu2PVSADKtbEFrL?p=preview
Here's a plunker with a few HTML files. In the original, you had "home.js" instead of "home.html", but when the partials are saved as HTML they seem to work fine.
http://plnkr.co/edit/aa6fKoBljxRHe4zVPYBl?p=preview
The version between angular and animate weren't the same. Angular was 1.2.4 while animate was 1.2.10.
Upgrading angular solved the issue.
Thanks for trying.
Related
https://codepen.io/a_shokn/pen/yEJpww?editors=1010
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'main.html'
})
.when('/second',{
templateUrl:'second.html'
})
});
Here is the Link to my Code Snippet , My Question is Were Must we keep our files (in my case main.html and second.html) when using routing in anjular js
As per my understanding, codepen doesn't support adding multiple files. You may try moving your code to plunker instead. Alternatively, you can try to use inline templates in the HTML. For example, to have main.html resolved, you may write this snippet in the HTML:
<script type="text/ng-template" id="main.html">
// contents of main.html
</script>
This will make AngularJS resolve the template using this script tag. You can find a working demo of your code here.
i'm trying to set up the first example linked here:
https://www.w3schools.com/angular/angular_routing.asp the example that contains the colors.
<p>Main</p>
Red
Green
Blue
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
</body>
If i used template and put HTML in, it works completely fine but when ever I use templateUrl(i do have all of the .htm files set up) it can never find the .htm pages.
My directory is setup as
C:\Users{User}\Documents\ng-Route and all of the .htm files are children of the ng-route folder.
Whenever I click a link, the url goes from:
...ng-Route/index.html#!
to
ng-Route/index.html#!/green
but the partial view doesn't get displayed.
Any help would be dearly appreciated.
I am having trouble with my Angular JS ui-router and every question I have found on here shows a solutions I have already tried.
In my ui-view-tag my actual template is not displayed.
<body ng-app="myApp">
<div class="row">
<div class="col-md-6 col-md-offset-2">
<ui-view></ui-view>
</div>
</div>
</body>
This is my app.js
angular.module('myApp', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'MainCtrl'
})
$urlRouterProvider.otherwise('home');
}])
Thank you very much everybody, I would really appreciate a short feedback on that.
The $urlRouterProvider otherwise() accepts the url path you want to redirect to. Therefore, you need to change:
$urlRouterProvider.otherwise('home');
To:
$urlRouterProvider.otherwise('/');
I'm new to angular and am having a hard time getting ngRoute to pick up my template file.
Here is my index.html:
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="app.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<nav>
<div>
<ul>
<li>home</li>
</ul>
</div>
</nav>
<body>
<div ng-view>
</div>
</body>
</html>
Here is my app.js:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('MainCtrl', function($scope) {
$scope.message = 'Hello World';
});
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'pages/home.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/home'
});
}]);
Here is my pages/home.html:
<div ng-controller="MainCtrl">
<p>Test</p>
<p>{{ message }}</p>
</div>
I can see that it is appending #/ to the root url so perhaps this is partially working; however, it doesn't seem to be rendering the template at "pages/home.html".
I've checked the cdn url's to make sure there wasn't any version inconsistencies, and what not, but that doesn't seem the be the case.
This is pretty much my first Angular project, and I've just been going off of the docs, but there must be something I'm not seeing. Coming from other server side projects, the lack of stack trace is killing me haha.
Is there something I'm missing in the above code, that is preventing my template from being rendered in '/'?
Thanks!
This is my code and it is working fine, you cam take help from it.
var EventList = angular.module("EventList", ['ngRoute' ,'infinite-scroll']);
EventList.config(function($routeProvider) {
//$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: 'views/business/business_home_events.html',
controller: 'EventListController'
});
});
EventList.controller('EventListController', ['$scope', '$http', '$route', function($scope, $http, $route){
// Do your work
}]);
the problem is with your when ('/'). Since your url has #/home - it looks in the .when to find that route.
change it to
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/home', { // <-
templateUrl: 'pages/home.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
This was an annoying one, but I think I figured it out.
I was encountering this issue while testing locally (no nodejs) on Chrome; however, sure enough when I popped it open in Safari it was working. It seems that ngRoute chokes on local files in Chrome.
I found a reference to the issue here, which is closed, so I'm guessing if I update to a newer version I shouldn't have this issue.
https://github.com/angular/angular.js/issues/4680
Setting up a web server should resolve this problem.
Why AngularJS routes are not working in local?
I have executed you code and is working fine on mozilla.
However, there is an issue in chrome of cross origin request if we run the file without putting in server.
But it is working fine on chrome also if you will put it on server (may be xampp/wampp) and run the file. The angular library you are using have http request to another server.
In asp web api i have an index.html with angularjs framework.
In angularjs i have the following route:
gestionale.config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'View/people.html',
controller: 'mainController'
}).
when('/ruoli', {
templateUrl: 'View/ruoli.html',
controller: 'ruoliController'
});
});
When i start the project with visual studio, it opens the index.html at the following url:
http://localhost:49375/index.html#/
and the view "View/people.html" is correctly showed.
1)How can i put, in the index.html, a static link to the ruoli.html page? I have tried
<a href="/ruoli">
but doesn't work because it load the page
http://localhost:49375/ruoli
instead of
http://localhost:49375/index.html#/ruoli
You need to put the hashbang before the slash.
So you setup your href attribute like this :
<a href="#/ruoli">
that will properly navigate to:
http://localhost:49375/index.html#/ruoli
Check this hashbang routing article/cookbook:
http://fdietz.github.io/recipes-with-angular-js/urls-routing-and-partials/client-side-routing-with-hashbang-urls.html