I'm starting to configure my application with Angularjs, I am following a route guide but I can not make the project run
i dont know how to register my controllers and services for load
dynamically when i change pages... :/ y created mi appConfig file for configure my routes.
My directory.
my app config:
angular.module('library.crud', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/views/home.html'
})
.when('/book', {
templateUrl: 'app/views/book.html',
controller: 'bookController',
controllerAs: 'vm'
})
.when('/books', {
templateUrl: '../app/views/books.html',
controller: 'booksController',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/'
});
});
example controller:
(function () {
'use stritct';
angular
.module('library.crud')
.controller('booksController', booksController);
booksController.inject = ['$rootScope', '$scope', 'bookService'];
function booksController($rootScope, $scope, bookService) {
var vm = this;
}
})();
example service:
(function () {
'use strict';
angular
.module('library.crud', [])
.factory('bookService', bookService);
bookService.$inject = ['$http', '$q'];
function bookService($http, $q) {
var service = {
};
return service;
}
})();
indexHTML:
<html>
<head>
<!--script imports, angular, jquery, bootstrap etc... -->
<script src="app/appConfig.js"></script>
</head>
<body ng-app="library.crud">
<li class="active">Home</li>
<li>Home</li>
<li>Books</li>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
at what time do my HTML pages know which controller to invoke and where is it located? how register my services ?
When i enter a books options from menu, the console show the next error:
The controller with the name 'booksController' is not registered.
UPDATED INDEX.HTML:
<html>
<head>
<link rel ="stylesheet" href="resources/bootstrap/css/bootstrap.min.css"/>
<script src="resources/jquery/jquery.min.js"></script>
<script src="resources/bootstrap/js/bootstrap.min.js"></script>
<script src="resources/angular/angular.min.js"></script>
<script src="resources/angular/angular-route/angular-route.min.js"></script>
<script src="app/appConfig.js"></script>
<script src="app/services/book.service.js"></script>
<script src="app/views/controllers/books.controller.js"></script>
<script src="app/views/controllers/book.controller.js"></script>
</head>
<body ng-app="library.crud">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Home</li>
<li>Books</li>
</ul>
</div>
</nav>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
There are two things in your code,
(i) You dont have to add dependencies in your code.
angular.module('library.crud').factory('bookService', bookService);
(ii) Add reference for your controller and service in your index.html.
<script src="app/appConfig.js"></script>
<script src="app/service.js"></script>
<script src="app/controller.js"></script>
The main reason this error occurs when everything else looks ok is because you did not include your js files in your index.html. Based on your screenshot, it looks like you have your controllers and services in separate files. Make sure you put them after your appConfig.js file in index.html.
Another issue I see is in your service file.
angular
.module('library.crud', [])
.factory('bookService', bookService);
should be
angular
.module('library.crud')
.factory('bookService', bookService);
If you include square brackets as a second parameter in the .module line, angular will think you are creating a new app instead of trying to register your service/controller to your existing app.
Also, it is highly recommend to use ui-router instead of NgRoute in any Angular1.x applications: https://github.com/angular-ui/ui-router
Related
I have tried this several different way and I will all the different ways I have attempting to redirect to a different page but getting a 404 error for all of them.
index.html
This page is fine and the root is rendering:
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
<script src="controllers/app.controller.js"></script>
<script src="app.config.js"></script>
</body>
</html>
app.config
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/',{
templateUrl: 'views/templates/home.tpl.html', //page is rendering
controller: 'HomeController'
})
.when('/userForm',{
templateUrl: 'views/templates/userForm.html', //NOT rendering
controller: 'FormController'
})
.otherwise({redirectTo: '/'});
}]);
app.controller.js
app.controller('HomeController',['$scope', 'ROOT', function($scope, ROOT){
$scope.Root = ROOT;
console.log("Inside the home controller");
$scope.menu = {
items:[
{
link: ROOT+'/userForm',
name: 'Contact Form'
}
]
}
}]);
app.controller('FormController',['$scope', function($scope){
console.log("You are inside the form controller");
}]);
Attempting to redirect to userForm.html with a button, a href and a link from the controller. All giving me a 404 error.
<div>
<a class="navbar-brand" ng-href="{{ Root }}">Menu</a>
<button type="button" onclick="window.location.href='/userForm.html'">Next page</button>
<a ng-href="/userForm.html">Click here to go to the next page...</a>
<ul class="nav navbar-nav navbar-right">
<li ng-repeat="item in menu.items" class="dropdown" dropdown on-toggle="toggled(open)">
<a ng-href="{{ item.link }}">{{ item.name }}</a>
</li>
</ul>
</div>
app.js
// Declare app level module which depends on views, and components
var app = angular.module('myApp', [
'ngRoute',
'myApp.version'
]);
app.constant('ROOT','/RedirectedControllerDemo/app/views/templates');
File structure:
The problem is that you have to redirect to a url, not to the html.Try href="#/userForm"
I'll move my comment to an answer (which was the first response here), but due to routing in AngluarJS, the routing component does not need the URL to contain name of the file: userFomr.html, but the route instead www.url.com/userForm
Your href should look like this:
<a href="#/userForm">
But if you wish to remove the #, you can set your app up to use HTML5 mode:
https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag
I am trying to inject custom factory into controller but i am getting "Unknown provider: ngResourceProvider <- ngResource <- UserService" error message.
When i trying to inject custom filter into config i get below error message `Failed to instantiate module mainApp due to:
Error: [$injector:unpr] http://errors.angularjs.org/1.5.0-rc.2/$injector/unpr?p0=...
at Error (native)
at http://localhost:8080/angulartest/scripts/js/angular.min.js:6:421
at http://localhost:8080/angulartest/scripts/js/angular.min.js:43:7
at d (http://localhost:8080/angulartest/scripts/js/angular.min.js:40:270)
at e (http://localhost:8080/angulartest/scripts/js/angular.min.js:41:1)
at Object.invoke (http://localhost:8080/angulartest/scripts/js/angular.min.js:41:86)
at d (http://localhost:8080/angulartest/scripts/js/angular.min.js:39:234)
at http://localhost:8080/angulartest/scripts/js/angular.min.js:39:358
at n (http://localhost:8080/angulartest/scripts/js/angular.min.js:7:366)
at g (http://localhost:8080/angulartest/scripts/js/angular.min.js:39:135
I have gone through all sorts of blogs/video i am unable to resolve issue can anybody help me this.
Html
<html >
<head>
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link rel="stylesheet" href="./css/custom.css"/>
<script src="./scripts/js/angular.min.js"></script>
<script src="./scripts/js/angular-local-storage.min.js"></script>
<script src="./scripts/js/angular-route.min.js"></script>
<script src="./scripts/js/jquery.scrollbar.js"></script>
<script src="./scripts/js/script.js"></script>
</head>
<body >
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><a href="#contact"><i class="fa fa-comment"></i>
Contact</a></li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main" ng-app="myApp" ng-controller="mainController">
<div ng-view></div>
</div>
</body>
</html>
java script code for injecting service into controller
var myApp = angular
.module('myApp', [ 'ngRoute'])
myApp.factory('UserService',['ngResource', function($resource) {
return $resource('/login', {}, {
login : {
method : 'POST',
params : {
'action' : 'authenticate'
},
headers : {
'Content-Type' : 'application/x-www-form-urlencoded'
}
},
});
}]);
myApp.config([ '$routeProvider', '$locationProvider', '$httpProvider','$provide',
function($routeProvider, $locationProvider, $httpProvider,$provide) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/login.html',
controller : 'mainController'
})
// route for the about page
.when('/dashbaord', {
templateUrl : 'pages/dashboard.html',
controller : 'dashbaordController'
})
$locationProvider.hashPrefix('!');
} ]);
myApp.controller('mainController',['UserService',function($scope,UserService) {
function login() {
alert("hi");
}
$scope.login = login;
}]);
myApp.controller('dashbaordController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
javascript code for injecting in config , it is same code below i have copied the only changed code
myApp.config([ '$routeProvider', '$locationProvider', '$httpProvider','$provide','UserService',
function($routeProvider, $locationProvider, $httpProvider,$provide,UserService) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/login.html',
controller : 'mainController'
})
// route for the about page
.when('/dashbaord', {
templateUrl : 'pages/dashboard.html',
controller : 'dashbaordController'
})
$locationProvider.hashPrefix('!');
} ]);
Please include the "angular-resource.js" if you are using ngResource. You can find the cdn in the following link, Angular ngResource api doc
You can only inject provider in .config. Try to transform you UserService into a provider instead of a factory
UserSerivce is a service so you can not inject it like a provider. You did not need to inject service into app.config. you can simply use it by injecting in controller.
There are couple of things went wrong.
You are passing factory service to your module configuration like provider which is wrong.
ngResource DI must be used to your module and not to the factory.
$resource DI must be used to factory
Here is the plunker with right code.
When I navigate to the home/index page via the "Home" link, the page in SPA-style correctly switches the content initially, but then half-a-second later the page refreshes. This does not happen when I navigate to my "Second" page via the same navbar, only when navigating from my Second page to home.
I'm new to Angular so my apologies if I'm missing something blatantly obvious. I've also included my local server code as I'm wondering if that may be the source of the problem...
index.html
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>Intro to Angular</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.0/angular-route.min.js"></script>
<script src="app.js"></script>
<style>
html, body, input, select, textarea
{
font-size: 1.05em !important;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">jQuery</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i></i> Home</li>
<li><i></i> Second</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view>
</div>
</div>
</body>
</html>
main.html
<h1>This is main.</h1>
<h3>Scope value: {{ name }}</h3>
second.html
<h1>This is second.</h1>
<h3>Scope route value (on second page): {{ num }}</h3>
app.js
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'pages/main.html',
controller: 'mainController'
})
.when('/second/', {
templateUrl: 'pages/second.html',
controller: 'secondController'
})
.when('/second/:num', {
templateUrl: 'pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {
$scope.name = "Main";
}]);
myApp.controller('secondController', ['$scope', '$log', '$routeParams', function($scope, $log, $routeParams) {
$scope.num = $routeParams.num || 1;
}]);
server.js
var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(8080, function(){
console.log('Server running on 8080...');
});
Your home link is a standard link to /index.html. Links using angular-route should start with a hash (#) to prevent the browser from navigating away from the page. The solution in this case is to use #/ instead of /index.html
I'm learning angular and i'm having an issue with displaying my partial.
It's probably something trivial that i forgot but i can't seem to find it.
index.html
<!DOCTYPE html>
<html ng-app="myTool">
<head>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="tool-controller.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img alt="myTool" src="/templogo.png"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a ng-href="#/dashboard">DashBoard</a></li>
<li><a ng-href="#/new">New</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a ng-href="#">Logout </a> </li>
</ul>
</div>
</div>
</nav>
<div ng-view>
</div>
</div>
</body>
</html>
app.js
angular.module('myTool',['ngRoute'])
.config(function($routeProvider){
$routeProvider.when('/new', {
templateUrl: '/tool-new.html',
controller:'ToolController',
controllerAs: "tool"
})
.when('/dashboard', {
templateUrl: '/empty.html'
})
.when('/', {
templateUrl: '/index.html'
})
.otherwise({ redirectTo: '/' });
});
tool-controller.js
angular.module('myTool', [])
.controller('ToolController',['$scope', function($scope) {
$scope.list = [];
$scope.tool = {};
$scope.submit = function() {
$scope.list.push(this.tool);
$scope.succes = 'sent';
};
$scope.search = function() {
};
}]);
and my partial are in tool-new.html and empty.html.
I don't really see what i'm missing :
-index.html as layout with ng-view as placeholder for my partial
basic routes + fall back
my controller linked to my template
html files as my templates with random stuff inside.
im running everything on a local webserv
I've tried adding the controller as a dependency as written in the angulardoc , i've also tried specifically calling the templates in script tags in between my ng-show tags.
Thanks for the suggestions.
Try adding your views like this(just remove '/' at the beginning of the view name):
angular.module('myTool',['ngRoute'])
.config(function($routeProvider){
$routeProvider.when('/new', {
templateUrl: 'tool-new.html',
controller:'ToolController',
controllerAs: "tool"
})
.when('/dashboard', {
templateUrl: 'empty.html'
})
.when('/', {
templateUrl: 'index.html'
})
.otherwise({ redirectTo: '/' });
});
And also remove [] from tool-controller.js
angular.module('myTool')
.controller('ToolController',['$scope', function($scope) {
$scope.list = [];
$scope.tool = {};
$scope.submit = function() {
$scope.list.push(this.tool);
$scope.succes = 'sent';
};
$scope.search = function() {
};
}]);
You are missing the name of the controller in the html i.e. toolController also switch to javascript naming convention of your files it will become easier for you to code.Your actual code in the html should have ng-controller="toolController" which should be placed on your div tag in order to load the controller.
I have just gotten started with AngularJS (coming from jQuery) and it seems worthwhile to replace a majority of my jQuery.
I decided that the easiest place to start was all the simple show / hide tabbed content I have. Currently, I have all the applicable html within the page that loads. However, it seems like I'd be better off loading the entirety of these tabbed sections using Angular routes. Am I correct in that assumption? Or should I use some hybrid approach (the content within these sections is dynamic)?
Anyway, with the Angular solution, I cannot seem to get the script to work for routes. I am in very new territory with this and am clueless as to where I am going wrong. Any help is grea
My currently HTML (simplified):
<!DOCTYPE html>
<html data-ng-app='mainApp'>
<head>
<script src='js/jquery.min.js'></script>
<script src='js/angular.min.js'></script>
</head>
<body>
<div class='toggleButtons'>
<a href='#/info'>
<div></div>
</a>
<a href='#/comment'>
<div></div>
</a>
<a href='#/feedback'>
<div></div>
</a>
</div>
<div class='container'>
<div data-ng-view=''></div>
</div>
<script src='app/main.app.js'></script>
</body>
</html>
Angular:
/// <reference path="../js/angular.min.js" />
var mainApp = angular.module('mainApp', []);
mainApp.config(function ($routeProvider) {
$routeProvider
.when('/info',
{
controller: 'mainInfoController',
templateUrl: '/app/partials/info.html'
})
.when('/comment',
{
controller: 'mainCommentController',
templateUrl: '/app/partials/comment.html'
})
.when('/feedback',
{
controller: 'mainFeedbackController',
templateUrl: '/app/partials/feedback.html'
})
.otherwise({ redirectTo: '/app/partials/info.html' });
});
Just to note: the controllers above are just placeholders really. I have not created them yet. However, I don't care if they work or not now. I am just concerned with getting the partial view routes to show up. They aren't though. Clicking the links does properly show page.html#/info (or comment or feedback... etc.). But nothing happens.
Also file path is as follows:
main folder = html
js = scripts
app = angular files (app.js / module files here)
views
partials
controllers
services
What am I doing wrong?
<!DOCTYPE html>
<html ng-app='mainApp'>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js'></script>
<script>
var mainApp = angular.module('mainApp', []);
mainApp.config(function($routeProvider) {
$routeProvider
.when('/info', {
controller: 'mainInfoController',
templateUrl: 'app/partials/info.html'
})
.when('/comment', {
controller: 'mainCommentController',
templateUrl: 'app/partials/comment.html'
})
.when('/feedback', {
controller: 'mainFeedbackController',
templateUrl: 'app/partials/feedback.html'
})
.otherwise({
redirectTo: '/info'
});
function mainInfoController($scope) {}
function mainCommentController($scope) {}
function mainFeedbackController($scope) {}
});
</script>
</head>
<body>
<div class='toggleButtons'>
<a href='#/info'>
<div>Info</div>
</a>
<a href='#/comment'>
<div>Comment</div>
</a>
<a href='#/feedback'>
<div>Feedback</div>
</a>
</div>
<div ng-view></div>
</body>
</html>