I'm fairly new to AngularJS, and I'm attempting to set up routing on my basic app.
My app.js:
var app = angular.module("StarWarsApp", ['ngRoute', 'ne.swapi']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.otherwise({
redirectTo: '/'
});
});
My index.html:
<head>
<script type="text/javascript" src="js/vendor/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="StarWarsApp" \>
<div class="container">
<div ng-view></div>
</div>
<!-- Modules -->
<script type="text/javascript" src="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/HomeController.js"></script>
<!-- Services -->
<script type="text/javascript" src="js/services/charactersList.js"></script>
<script type="text/javascript" src="node_modules/ne-swapi/dist/ne-swapi.min.js"></script>
</body>
</html>
When I load home.html directly, I see the contents of it properly, but it won't appear in my ng-view and I can't figure out why. I'm sure I missed something very basic, but I've no idea. Any ideas?
What you posted works correctly without your controller, service, and ne.swapi, so the error is likely there. However the code for your controller & service was not posted here.
One idea I have from referencing the ne.swapi documentation-check that you are loading 'swapi' after $scope in the controller if you are using ne.swapi. Again, since your controller was not posted I am not sure if this is causing the issue.
app.controller("Test", function($scope, swapi){
$scope.test = "Hey";
});
I have a working plunker here, I hope referencing it will help you find the error. https://plnkr.co/edit/9hD490m7nZxSTQPDTN0J?p=preview
Issues Found:
There is an unexpected character in the body tag. Remove that first.
Also, you have added the 'ne.swapi' dependency in app.js. So, its script should be added before inserting app.js.
<script type="text/javascript" src="js/vendor/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<script type="text/javascript" src="node_modules/ne-swapi/dist/ne-swapi.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
Also, it would be good to add scripts in the bottom of the body tag. Otherwise. it might affect the page rendering speed. This is a suggestion. This won't cause the issue you have now.
Related
Hi I'm learning angular js. I'm using angular 1.5.6 version. Here is my code
<!DOCTYPE HTML>
<html ng-app="NoteWrangler">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src='/NoteWrangler/javascript/vendor/angular.min.js'></script>
<script type="text/javascript" src='/NoteWrangler/javascript/vendor/angular-route.js'></script>
<script type="text/javascript" src='/NoteWrangler/javascript/route.js'></script>
Genere
Instruments
<div ng-view></div>
</body>
</html>
My javascript file
angular.module('NoteWrangler',['ngRoute']).config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
$routeProvider.when('/genere',{
templateUrl: '/template/genere/index.html'
})
.when('/instruments',{
templateUrl: '/template/instruments/index.html'
}).otherwise({
redirectTo: '/template/genere/index.html'
});
}]);
I'm doing same as they teach in a tutorial, but I'm not able to re route to templateUrl. What i'm doing wrong here? I didn't find any errors in console. I search in every tutorial they do the same. I don't know what i'm doing wrong here. Can some one help me to solve this please?
remove first slash in your templateUrl eg: /template/genere/index.html to template/genere/index.html
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.
I am creating one small demo for getting user list and also login using angularjs with web api.and I am using datatable for showing user list.then I am include datatable in module file then first time run the project getting like this error.and then remove 'datatable' from the module working very well.so i can not understand where is my mistke.
this is my app.js code:
var app = angular.module("Demo", ['ngRoute','datatables']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/dashboard', {
templateUrl: 'home/dashboard',
controller: 'dashboardcontroller'
}).
otherwise({
redirectTo: '/home/login'
});}]);
this is my included datatable module. i am remove here datatable it's working fine but again add datatable getting error from the module.
this is my script ordering :
<script src="~/assets/js/jquery.js"></script>
<script src="~/assets/angular.min.js"></script>
<script src="~/assets/js/angular-datatables.js"></script>
<script src="~/assets/angular-route.min.js"></script>
<script src="~/assets/js/jquery.datatables.js"></script>
<script src="~/assets/js/angular.js"></script>
<script src="~/assets/app.js"></script>
<script src="~/assets/services.js"></script>
<script src="~/assets/controller.js"></script>
this is error is getting:
so this is my code any one know where is mistake then please let me know.
You need angular-datatable plugin also for inject datatable service in controller
see angular-datatable
Please remove the duplicated import of angular and add the jQuery before the angular's files. Like this:
<script src="~/assets/js/jquery.js"></script>
<script src="~/assets/js/jquery.datatables.js"></script>
<script src="~/assets/js/angular.js"></script>
<script src="~/assets/angular-route.min.js"></script>
<script src="~/assets/js/angular-datatables.js"></script>
<script src="~/assets/app.js"></script>
<script src="~/assets/services.js"></script>
<script src="~/assets/controller.js"></script>
The angular-datatables provides a datatables directive you can add to your <table>
Like this <table datatable="">...</table>
You can have more information here: http://l-lin.github.io/angular-datatables/archives/#!/gettingStarted
<script src="~/assets/js/jquery.js"></script>
<script src="~/assets/js/jquery.datatables.js"></script>
<script src="~/assets/js/angular.js"></script>
<script src="~/assets/angular-route.min.js"></script>
<script src="~/assets/js/angular-datatables.js"></script>
<script src="~/assets/app.js"></script>
<script src="~/assets/services.js"></script>
<script src="~/assets/controller.js"></script>
Try with this
Newbie with AngularJS here.
I have an index.html file below, which references an Javascript file named app.js. The index.html file is as below:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#*" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="controller1.js"></script>
</head>
<body>
<h1>Github Viewers</h1>
<div ng-view></div>
</body>
</html>
In my app.js file, I have the following codes:
(function(){
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "controller1"
})
.otherwise({redirectTo: "/main"});
});
}());
I've set breakpoints (in Chrome Dev Tools) on the line:
templateUrl: "main.html",
But I am unable to get into this line.
Console Window shows no errors, so I am a little stumped.
Appreciate any insight on where to look further on this.
You are using the wrong app name.
Change <html ng-app="myApp"> to <html ng-app="githubViewer">
Edit
You cannot put a breakpoint in that line (templateUrl: "main.html"). Note that's an Object definition and not a function:
{
templateUrl: "main.html",
controller: "controller1"
}
And like all Objects, they are defined in an atomic operation. It's like if all its properties were created at once, meaning that you cannot "break" the execution for a specific property.
I've tested with Chrome dev tools and it doesn't even allow me to set a breakpoint in that line. Not sure how you did it...
If you want to check if the "main.html" template is being loaded, watch the network tab of the Chrome dev tools.
I think your dependency injection is missing controller1 module..
if you managing controllers in different module you have to inject it in your app.js
//controller1.js
angular.module('controllers',[])
.controller('controller1',function(....)
//app.js
var app = angular.module("myApp", ["controllers","ngRoute"]);
...
//index.html
...
<script src="controller1.js"></script>
<script src="app.js"></script>
...
I am just starting study Angular and trying example from book, but my simple routing doesn't work.
I have updated code as was recommended in the answers
Here is index.html:
<html ng-app="airline">
<head>
<title>Demo</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/app.js"></script>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1>AngulAir</h1>
<div ng-view></div>
</div>
</body>
</html>
Here is app.js:
angular.module('airline', ['ngRoute'])
.config(airlineRouter);
function airlineRouter ($routeProvider) {
info('1');
$routeProvider
.when('/', {template: '<h3>test</h3>'})
};
When I refresh the page I don't have 'test' in the browser and don't have alert message. Why ? What I am missing ?
Update
Here is a full code example: https://github.com/demas/ang_test
Latest angular library use external router so you need to inject ngRoute and pass it as:
angular.module('airline', ['ngRoute'])
You are missing ngRoute directive. Download ng-route.js file and reference it in your HTML like;
<script type="text/javascript" src="js/lib/angular-route.js"></script>
And change your app.js like
angular.module('airline', ['ngRoute'])
.config(airlineRouter);
function airlineRouter ($routeProvider) {
info('1');
$routeProvider
.when('/', {template: '<h3>test</h3>'})
};