I'm trying to create a simple website using angular as front-end.
Is there a way to create partial views and routing without having a webserver?
I've been trying to do so, but I keep getting this error:
Uncaught Error: [$injector:modulerr]
Here's my code: index.html
<!DOCTYPE html>
<html lang="en" ng-app="cerrajero">
<head>
<meta charset="UTF-8">
<title>Cerrajero</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body ng-controller="MainCtrl">
<div ng-view></div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script type="text/ng-template" id="partials/contact.html" src="partials/contact.html"></script>
<script type="text/ng-template" id="partials/services.html" src="partials/services.html"></script>
<script type="text/ng-template" id="partials/home.html" src="partials/home.html"></script>
</body>
</html>
and the app.js:
var app = angular.module('cerrajero', []);
app.config([function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/services', {
template: 'partials/services.html'
}).
when('/contact', {
template: 'partials/contact.html'
}).
when('/home', {
template: 'partials/home.html'
}).
otherwise({
redirectTo: '/home',
template: 'partials/home.html'
});
}]);
function MainCtrl ($scope) {
};
What am I doing wrong?
edit
I've added the ngRoute but I still get the same error when I open the index.html file in the browser.
var app = angular.module('cerrajero', ['ngRoute']);
app.config([function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/services', {
template: 'partials/services.html'
}).
when('/contact', {
template: 'partials/contact.html'
}).
when('/home', {
template: 'partials/home.html'
}).
otherwise({
redirectTo: '/home',
template: 'partials/home.html'
});
}]);
function MainCtrl ($scope) {
};
edit 2
Here's the files on github:
https://github.com/jsantana90/cerrajero
and here's the website when it loads:
http://jsantana90.github.io/cerrajero/
edit 3
I've manage to get rid of the error by having the following code:
var app = angular.module('cerrajero', ['ngRoute']);
app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(false);
$routeProvider.
when('/services', {
template: 'partials/services.html'
}).
when('/contact', {
template: 'partials/contact.html'
}).
when('/home', {
template: 'partials/home.html'
}).
otherwise({
redirectTo: '/home',
template: 'partials/home.html'
});
}]);
app.controller('MainCtrl', function ($scope) {
});
I added this app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
But now my page is blank. It doesn't redirects or anything.
Have I placed everything how it's suppose to go?
edit 4
I forgot to change ui-view to ng-view. Now it works but it's showing in the view: partials/home.html instead of the actual view.
edit 5
Ok so, after having this final code:
var app = angular.module('cerrajero', ['ngRoute']);
app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$routeProvider.
when('/services', {
templateUrl: './partials/services.html'
}).
when('/contact', {
templateUrl: './partials/contact.html'
}).
when('/home', {
templateUrl: './partials/home.html'
}).
otherwise({
redirectTo: '/home'
});
}]);
app.controller('MainCtrl', function ($scope) {
});
I get this error:
XMLHttpRequest cannot load file:///partials/home.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Now I'm guessing this is because I don't have a webserver running. How do I get it to work without a webserver?
solution
When I uploaded the files to github it seems to work there, but not locally.
Looks like you are using ngRoute and forgot to include it!
First load angular-route.js after loading angular.js. The inject ngRoute as a module:
var app = angular.module('cerrajero', ['ngRoute']);
Try removing the array syntax brackets from inside your config function. I believe there are two different ways of invoking these functions, either with a standalone function or with an array for any minification processes.
You should either one of the following:
app.config(function ($locationProvider, $routeProvider) {
// your code here
});
Or define the variable names with the array syntax for use in minifiers
app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
// your code here
}]);
When you pass in an array to the config function, I believe Angular is expecting the first parameters to be a string value.
You should use ui-router instead of ng-route. It will allow you to nest views. Most current Angular projects use ui-router. ui-router scotch.io
Also, for your controller try app.controller('MainCtrl', function($scope){...});
Replace
var app = angular.module('cerrajero', []);
with
var app = angular.module('cerrajero', ['ngRoute']);
Related
Hey could someone answer this for me as it is really wrecking my head.
I am getting an error stating that the controller is not a function and got defined. Now I understand this but I really can't see why.
<!DOCTYPE html>
<html ng-app="kachicode">
<head lang="en">
<meta charset="UTF-8">
<title>AngularJs Gmail</title>
<script src="node_modules/angular/angular.js"></script>
<script src="routeCtrl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="app/config/route.js"></script>
</head>
<body id="backImg">
<div ui-view></div>
</body>
</html>
So this is my page and the routing is working fine. Basically my problem is in the routeCtrl.js file saying the function is not defined:
var app = angular.module('kachicode', []);
app.controller('indexCtrl', function indexCtrl($scope){
$scope.greeting ="hey seam";
$scope.goTo = function() {
console.log("clicking");
}
});
This my home file that is being loaded in the uiview
<div ng-controller="indexCtrl as ctrl">
{{ctrl.greeting}}
</div>
angular.module('kachicode', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider){
'use strict';
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
})
.state('about', {
url: '/about',
templateUrl: 'kachicode/about.html'
})
.state('contact', {
url: '/contact',
templateUrl: 'kachicode/contact.html'
});
});
this is my route file
Ok no now. I've checked to see am I loading the file correctly and made sure that it is attaching to kachicode which is defined in ng-app = "kachicode". These are the common reasons for this problem as per the stackoverflow forums but mine still isn't working. Could someone help me and I'll know forever more how to fix it?
Thanks very much
You are defining your app twice, once in your routeCtrl.js:
var app = angular.module('kachicode', []);
And again in your route.js:
angular.module('kachicode', ['ui.router'])
Either remove the second parameter from your route.js (and add the dependency to your routeCtrl.js's app), or change your setup
The solution, based on the order of loading of your scripts (first routeCtrl.js, then route.js) do this in your routeCtrl.js:
var app = angular.module('kachicode', ["ui.router]);
And this in your route.js:
angular.module('kachicode')
Though make sure that you load in the angular-ui-router before your routeCtrl.js
Below is the recommended way to define a controller.
var app = angular.module('kachicode', ['ui.router']);
//no need to write function indexCtrl() -- see below
//also use the an array to inject you dependencies in the controller -> this syntax is good if you plan on minifying your code
app.controller('indexCtrl', ['$scope', function($scope){
$scope.greeting ="hey seam";
$scope.goTo = function() {
console.log("clicking");
}
}]);
You also seem to be creating you app twice. In route.js, I would remove this line:
angular.module('kachicode', ['ui.router'])
and simply do:
app.config(function ($stateProvider, $urlRouterProvider){
'use strict';
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
})
.state('about', {
url: '/about',
templateUrl: 'kachicode/about.html'
})
.state('contact', {
url: '/contact',
templateUrl: 'kachicode/contact.html'
});
});
I hope that helps fix your problem
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/success', {
templateUrl: 'success.html',
controller: 'sucCtrl'
}).
otherwise({
redirectTo: '/index'
})
}])
app.controller('validateCtrl', function($scope, $http, $location) {
$scope.submit = function(user,password) {
//for local storage validation
$http.get('credentials.json').then(function(response) {
$scope.credentials = response.data;
if((user === $scope.credentials.username) && (password === $scope.credentials.password)){
alert("ok");
$location.path('/success');
}
else{
alert("nit "); }
});
};
})
app.controller('sucCtrl',['$scope', function($scope) {
alert("succs");
}]);
This might be well a beginner question. I am trying to validate my login form and redirect to success.html on success. But I am unable to navigate to next page. I tried using $location.path('/success').
here is the working sample in plunker..
http://plnkr.co/edit/0v7njznHdtwgpaG2NfwA?p=preview
You missed to write ng-view directive to get route changes to displayed on the view. Also you are messed up with the structuring of your page html. Refer below comments that will help you to make it working and improve it.
You should put that ng-view directive in body so that all the view will get loaded on basis of route changes.
Also you should load your form html from the route only, I'd suggest you to add one more route to your config that will say on /login show the form.html(login form)
Config
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/success', {
templateUrl: 'success.html',
controller: 'sucCtrl'
})
.when('/login', {
templateUrl: 'form.html',
controller: 'validateCtrl'
}).
otherwise({
redirectTo: '/login'
})
}])
Markup
<body>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script src="login.controller.js"></script>
</body>
Your success.html should be partial, it shouldn't have the script references again to it they have been loaded from the index page only
success.html
<div>
Success Message
</div>
Working Demo
I am working with AngularJS and using the ngRoute for routing.
I was wondering if this is normal behavior for Angular when it routes to the "otherwise" part and activates all controllers?
var angularApp = angular.module('AngularApp', ['ngRoute']);
angularApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/ExpenseOverview', {
controller: 'ExpenseOverviewController',
templateUrl: 'Angular/Views/ExpenseOverview.vbhtml'
})
.when('/AddExpense',
{
controller: 'AddExpenseController',
templateUrl: 'Angular/Views/AddExpense.vbhtml'
})
.otherwise({ redirectTo: '/ExpenseOverview' });
}]);
I have put an alert at the very top in each controller, even my factory. And on startup, all alerts are shown. Instead of going to "ExpenseOverview" at first, it checks both my controllers and not just the one that is bound to "/ExpenseOverview".
What could be the cause of this?
EDIT: Knowing it's normal for Angular to access all controllers on startup, the main problem isn't fixed yet. This is explained in another thread on StackOverflow. I thought this had something to do with it, because I had no idea that it was normal behavior for Angular to do this.
I could say that this thread is closed, because I have an answer to my question now.
Angular does not access every controller on start up, however, ngRoute does. Any initialization code in a controller that has a corresponding route entry in $routeProvider, will run at initialization.
Here's an example of this at play: http://plnkr.co/edit/WsvbKhcR74yoX80bskdb?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script data-require="ng-route#*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0-rc.3/angular-route.js"></script>
</head>
<body ng-controller="main">
<h1>Hello {{test}}!</h1>
<div ng-view="">Hello?</div>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/route1', {
controller: 'con1',
templateUrl: 'view1'
})
.when('/route2',
{
controller: 'con2',
templateUrl: 'view2'
})
.otherwise({ redirectTo: '/route1' });
});
app.controller('main', function($scope){
alert('1');
$scope.test = 'Yo.';
});
app.controller('con1', function($scope){
alert('2');
$scope.value = 'value1';
});
app.controller('con2', function($scope){
$scope.value = 'value2'
});
</script>
<script type="text/ng-template" id="view1">
View 1 {{value}}
</script>
<script type="text/ng-template" id="view2">
View 2 {{value}}
</script>
</body>
</html>
I have been researching and trying to figure out this error for 2days now and Still no luck.
To begin I new to angular, and I have following this tutorial : http://jphoward.wordpress.com/2013/01/04/end-to-end-web-app-in-under-an-hour/
Every was going well until my grid was not filling with data. So I decided to make minor changes to code and now I have ran into this error.
in my js file:
var MyApp = angular.module("Myapp", ["ngResource", "ngRoute"]).
config([function ($routeProvider) {
$routeProvider.when('/', {templateUrl: 'list.html', controller: 'ListCtrl' }).
otherwise({ redirectTo: '/' });
}]);
MyApp.factory('Myapp', function ($resource) {
return $resource('/Myapp/:id', { id: '#id' }, { update: {
method: 'PUT' } });
});
MyApp.controller('ListCtrl', ['$scope', 'ds72', function ($scope, Myapp) {
$scope.todos = Myapp.query();
}]);
can some one please explain to me what i am doing wrong?
PS: These are all my Scripts
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-resource.min.js"> </script>
<script src="/Scripts/angular-route.min.js"></script>
try something like that
var MyApp = angular.module("Myapp", ["ngResource", "ngRoute"]).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {templateUrl: 'list.html', controller: 'ListCtrl' }).
otherwise({ redirectTo: '/' });
}]);
you must add the name of the provider to inject when you use the array declaration
.config(['$routeProvider'/*must be the exact name*/, function(route/*get the $routeProvider value*/) {}])
//equivalent as
.config(function($routeProvider) {})
i am having a problem and a question
my cliend side uses:
<div ng-view></div>
and the following scripts:
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
<script src="js/filters.js"></script>
my routProvider was:
angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
which worked fine.
i can't figure out why this implemention doesn't work, i saw it used many times before:
var myApp = angular.module('myApp', []);
myApp.config(function($routeProvider) {
$routeProvider.
when('/view1', {
controller: 'MyCtrl1',
templateUrl: 'partials/partial1.html'
}).
when('/view2', {
controller: 'MyCtrl2',
templateUrl: 'partials/partial2.html'
}).
otherwise( {redirecTo: '/view1'});
});
another question is:
why in the first example there is '$routeProvider' injection before the function?
as i understand the function($routProvider) should do this job.
thanks.
Your code works just fine (plnkr), but you misspelled redirectTo so the initial redirect to /view1 didn't work.
With regard to explicitly injecting $routeProvider: using the explicit version of injection prevents issues with variable renaming when you minify your JS code for production use. For instance, without being explicit, your code might be minified into something like this:
a.config(function(b) { b.when('/view1', ...) });
Since Angular depends the name of the argument to inject the correct provider, you can explicitly name it as a string (which won't get minified):
a.config([ '$routeProvider', function(b) { ... } ]);
That way, Angular knows the first argument should be $routeProvider.
You are super close. You do need to include the $routeprovider. This should work for you.
angular.module('myApp', [])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
when('/view1', {
controller: 'MyCtrl1',
templateUrl: 'partials/partial1.html'
}).
when('/view2', {
controller: 'MyCtrl2',
templateUrl: 'partials/partial2.html'
}).
otherwise({
redirectTo: '/view1'
});
}]);
This should work!
angular.module('myApp', [])
.config(function($routeProvider) {
$routeProvider.when('/view1', {
controller: 'MyCtrl1',
templateUrl: 'partials/partial1.html'
});
$routeProvider.when('/view2', {
controller: 'MyCtrl2',
templateUrl: 'partials/partial2.html'
});
$routeProvider.otherwise({
redirectTo: '/view1'
});
});