I am trying to learn AngularJS and this is the code I have written:
myApp.config(function($routeProvider){
console.log('--Inside config--');
$routeProvider
.when('/',{
templateUrl: 'index.html'
})
.when('/list', {
templateUrl: 'list.html'
})
.when('/detail', {
templateUrl: 'detail.html'
})
.otherwise({
redirectTo: '/'
});
});
When I view this in Chrome, the JS console shows that it has gone into infinite loop and freezes. As soon as I remove this function, it comes up fine. Any help?
Try this, in the HTML file:
<html ng-app="My_App">
<head>
<script data-require="angular.js#1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js" data-semver="1.0.7"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="<path to test.js>/test.js"></script>
</head>
<body ng-view>
</body>
</html>
test.js:
var app = angular.module('My_App', []);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/main',{
templateUrl: 'partials/main_navigation/main.html',
controller: 'main' // If you want to use controllers
)
.when('/menu',{
templateUrl: 'partials/main_navigation/menu.html',
controller: 'menu' // If you want to use controllers
).otherwise({redirectTo: '/main'});
Related
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']);
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>
Facing some strange with ui-router angularjs. I am configuring an single page application using these frameworks.
Here is my code
function initWmappConfig($stateProvider, $locationProvider, $compileProvider) {
$locationProvider.html5Mode(true);
$stateProvider.
state('login', { url: '/', templateUrl: '/Views/login', controller: 'login-controller', controllerAs: 'vm' })
.state('register', { url: '/register', templateUrl: '/Views/Register', controller: 'login-controller', controllerAs: 'vm' });
$stateProvider.state('otherwise', {url: '/'});
$compileProvider.debugInfoEnabled(false);
}
If i am using this above configuration i am facing this war
WARNING: Tried to load angular more than once
but on other hand if i simple change
$locationProvider.html5Mode(false);
then everything seems to work just fine...
Please let me know why this is happening.
Thanks
It's because you didn't mention the .html extension in the templateUrl
state('login', { url: '/', templateUrl: '/Views/login.html', controller: 'login-controller', controllerAs: 'vm' })
.state('register', { url: '/register', templateUrl: '/Views/Register.html', controller: 'login-controller', controllerAs: 'vm' });
Also for otherwise, you need to use $urlRouterProvider
$urlRouterProvider.otherwise('/');
I was getting this error.
The reason behind this is the use of jQuery.
<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="/public/vendor/angular/angular.js" type="text/javascript"></script>
<script src="/public/vendor/angular/angular-route.js" type="text/javascript"></script>
I removed the following and warning disappeared:
<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
I'm trying to put together a basic angularjs web page through django (but not really using django for this example). I tried to copy an example exactly, but it's not working. The partial and the controller are not loading. The url is updated, so I know the app is loading. But I don't see it hitting my web server at all for the partial or the data. Help would be appreciated.
Here is the simplest code I could put together.
test.html:
<!doctype html>
<html ng-app="ciqApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
</head>
<body>
TEST
<div ng-view>
</div>
</body>
</html>
js/app.js
var ciqApp = angular.module('ciqApp', [
'ngRoute',
'ciqControllers'
]);
ciqApp.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/questions', {
templateURL: '/static/partials/question-list.html',
controller: 'QuestionListCtrl'
}).
otherwise({
redirectTo: '/questions'
});
}]);
js/controllers.js
var ciqControllers = angular.module('ciqControllers', []);
ciqControllers.controller('QuestionListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('/get_questions').success(function(data) {
$scope.questions = data;
});
}]);
TemplateURL should be TemplateUrl. Also, you can try to remove the first slash from your templateUrl path and see if that makes a difference: So:
templateURL: '/static/partials/question-list.html',
becomes:
templateUrl: 'static/partials/question-list.html',
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'
});
});