Basic UI-Routing Example but an error occurs

Basic UI-Routing Example but an error occurs - javascript

I try to learn AngularJS. At the moment I focus on ui-Routing.
My Code is very simple, but it doenst work and I don't know why.
Description of my problem:
http://de.tinypic.com?ref=kd22ow.jpg
The browser shows:
"Hello World ui-Routing!" (h1 in index.html)
If I try to enter index.html/home.
It says: Error File not found!
Here is my Code:
index.html
<html>
<head>
<title>My Angular App!</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="Test" ng-controller="MainCtrl">
<h1>Hello World ui-Routing!</h1>
<div ui-view>
</div>
</body>
</html>
app.js:
angular.module('Test', ['ui-router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterprovider)
{
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
.state('test', {
url: '/test',
templateUrl: '/test.html',
controller: 'TestCtrl'
});
$urlRouterProvider.otherwise('home');
}])
.controller('MainCtrl', ['$scope',
function($scope){
$scope.test = "Hello Jan!";
});
.controller('TestCtrl', ['$scope',
function($scope){
$scope.test = "Hello Redirect!";
});
test.html:
<h2>Hello Test! </h2>
home.html:
<h2>Hello Home! </h2>
Where is my problem?
Looking forward to your answers,
Jan

You need to include the ui-router script in your html page too it is a third party and not included in angular.

Related

How to solve angularjs Uncaught Error: [$injector:modulerr]?

I am developing a single page web application using AngularJS' ng-view and ng-template directives. But when I run it my browser show this type [1]: http://i.stack.imgur.com/TPuPo.png of error.
Here is my script block with main module and routing configuration.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS - Views</title>
<!--AngularJs Library-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
</head>
<body>
<h2 style="text-align: center;">Simple Application using AngularJS - Views</h2><hr><br>
<!--Start AngularJS App-->
<div ng-app="myApp">
<p>Add Student</p>
<p>View Students</p>
<div ng-view></div>
<!--Script for Add Student-->
<script type="text/ng-template" id="addStudent.htm">
<h2>This is the view of Add Student</h2>
{{message}}
</script>
<!--Script for View Students-->
<script type="text/ng-template" id="viewStudent.htm">
<h2>This is the view of all students</h2>
{{message}}
</script>
</div>
<!--End AngularJS App-->
<!--App Necessary Scripts-->
<script>
var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(['routeProvider',function ($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
}).
when('/viewStudent', {
templateUrl: 'viewStudent.htm',
controller: 'ViewStudentController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
myApp.controller('AddStudentController', function ($scope) {
$scope.message = "This page will be used to display add student form!!";
});
myApp.controller('ViewStudentController', function($scope){
$scope.message = "This page will be used to display all students!!";
});
</script>
</body>
</html>
what can I do to fix it?

Here's your working code. Also here's a CodePen example, I reorganize the code to make it more comfortable, please review it, study it and compare it for learning purpose. http://codepen.io/alex06/pen/rrzRbE?editors=1010
<html ng-app="mainApp">
<head>
<title>Angular JS Views</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div>
<p>Add Student</p>
<p>View Students</p>
<div ng-view></div>
</div>
<script type = "text/ng-template" id = "addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
<script type = "text/ng-template" id = "viewStudents.htm">
<h2> View Students </h2>
{{message}}
</script>
<script>
(function(){
'use strict'
angular
.module('mainApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
})
.when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
})
.otherwise({
redirectTo: '/addStudent'
});
}])
.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
})
.controller('ViewStudentsController', function($scope) {
$scope.message = "This page will be used to display all the students";
});
})();
</script>
</body>
</html>

Just change the following line:
myApp.config(['routeProvider',function ($routeProvider) {
To
myApp.config(['$routeProvider',function ($routeProvider) {
I think this is what you missed.

Define config as this:--
myApp.config(function ($routeProvider) { $routeProvider
Rather than:-- myApp.config(['routeProvider',function ($routeProvider) {
$routeProvider.

Angular.js basic routing

I have been following the tutorial:
https://thinkster.io/angular-rails#angular-routing
I have not done any rails integration yet, the question is specifically to angular.
When I do the hello worlds from the MainCtrl without using the router, everything works. When I use the router, I cannot get the inline angular template to display in my html page. Where is the error here?
app.js:
angular.module('flapperNews', ['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}])
angular.module('flapperNews', [])
.controller('MainCtrl', [
'$scope',
function($scope){
$scope.test = 'Hello world';
}]);
index.html:
<html>
<head>
<title>My Angular App</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view> <!-- this is supposed to display the template below but it shows nothing -->
</div>
</div>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
</script>
</body>
</html>

Your controller is recreating the module instead of referencing it. Change it like so:
angular.module('flapperNews')
.controller('MainCtrl', [
'$scope',
function($scope){
$scope.test = 'Hello world';
}]);

You're defining the 'flapperNews' module twice. Remove the second angular.module('flapperNews', []).

Angularjs ng-view does not respond

I am playing with angularjs, and I cannot find the reason why ng-view does not work. What am I doing wrong?
var app = angular.module('Demo', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when('#/about', {
templateUrl: 'about.html',
controller: 'homeController'
});
$routeProvider.when('#/contacts', {
template: 'contacts.html',
controller: 'contactsController'
});
});
app.controller('homeController', function ($scope) {
alert('homeController');
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src=""//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js""></script>
<body ng-app>
<div class="menu">
<ul>
<li>About</li>
<li>Contacts</li>
</ul>
</div>
<div class="MainContent">
<div ng-view></div>
</div>
<template id="about.html">
about
</template>
<template id="contacts.html">
contacts
</template>
</body>

There were a few issues here:
Your script source for angular-route was incorrect in the HTML portion.
Your $routeProvider.when lines do not need '#', so I removed them.
One of your templates used templateUrl, which was not correct. It should only be template: as you are not calling a URL.
Here is a working plunker:
https://plnkr.co/edit/GSoJ4sAxM8joH6zmrxjf?p=preview
var app = angular.module('demo', ['ngRoute'])
// URLs should not have # in them
.config(function ($routeProvider) {
$routeProvider.when('/about', {
template: 'about.html',
controller: 'homeController'
});
$routeProvider.when('/contacts', {
template: 'contacts.html',
controller: 'contactsController'
});
});
app.controller('homeController', function ($scope) {
alert('homeController');
});
app.controller('contactsController', function ($scope) {
alert('contactsController');
});

Cant seem to get Angular Routing working on some occasions?

I have been attempting to get angular routing working and everytime I create a new project and It does not work. I have had it working in some projects but I can never see why my newly created project does not work.
Its probably something obvious, thanks for any help in advance.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/Styles.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
</head>
<body>
<a href="#/">
<button class="btn btn-danger">Homepage</button></a>
<a href="#/about">
<button class="btn btn-success">About</button></a>
<a href="#/date">
<button class="btn btn-warning">Date</button></a>
<div class="row">
<div ng-view>
</div>
</div>
<script src="SinglePageApp/app.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
</html>
app.js file
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
//default page
.when('/', {
templateUrl: "pages/homepage.html",
controller: 'HomeCtrl'
})
//about page
.when('/about', {
templateUrl: "pages/about.html",
controller: 'AboutCtrl'
})
//date page
.when('/date', {
templateUrl: "pages/date.html",
controller: 'DateCtrl'
});
});
app.controller('HomeCtrl', ['$scope', function ($scope) {
$scope.homepage = "Homepage";
}]);
app.controller('AboutCtrl', ['$scope', function ($scope) {
$scope.about = "Lorem ipsum............";
}]);
app.controller('DateCtrl', ['$scope', function ($scope) {
$scope.dateNow = new Date();
}]);

Try this plunker:
http://embed.plnkr.co/L6E4GCe3O0Jh1vqKyGFD/
I've used the example at the angularJS documentation to create your usecase.
You should change the template filepaths, with your own. I also haven't included bootstrap.
If you want to use buttons, then you can use this example in plunkr based on this answer by Josh David Miller(upvote him if you use his directive). Directives are a way to customize html, and here we're using one as an html attribute (you can also use them as standalone elements) to create a hyperlink button.

Here's fiddle for you that works as expected
Not sure why your code is not working, angular has pretty bad debugging tool.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>
<div>
<a href="#/">
<button class="btn btn-danger">Homepage</button>
</a>
<a href="#/about">
<button class="btn btn-success">About</button>
</a>
<a href="#/date">
<button class="btn btn-warning">Date</button>
</a>
<div class="row">
<div ng-view></div>
</div>
</div>
<script type="text/ng-template" id="pages/homepage.html">
{{homepage}}
</script>
<script type="text/ng-template" id="pages/about.html">
{{about}}
</script>
<script type="text/ng-template" id="pages/date.html">
{{dateNow}}
</script>
Script file looks like this
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
//default page
.when('/', {
templateUrl: "pages/homepage.html",
controller: 'HomeCtrl'
})
//about page
.when('/about', {
templateUrl: "pages/about.html",
controller: 'AboutCtrl'
})
//date page
.when('/date', {
templateUrl: "pages/date.html",
controller: 'DateCtrl'
})
.otherwise({redirectTo:'/'});
});
app.controller('HomeCtrl', ['$scope', function ($scope) {
$scope.homepage = "Homepage";
}]);
app.controller('AboutCtrl', ['$scope', function ($scope) {
$scope.about = "Lorem ipsum............";
}]);
app.controller('DateCtrl', ['$scope', function ($scope) {
$scope.dateNow = new Date();
}]);
angular.bootstrap(document.body, ['app']);

Why is the scope in my angularJS app empty?

I'm new to angular and am trying to tweek the tutorial to my app. I'm trying to add routes to my app and it doesn't seem to be reading my templates or reading the controller correctly. I installed the angularJS extension for Chrome (pretty awesome by the way) and it shows my scope as empty, no models.
Here's my html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="bioSatApp">
<head>
<title>Map Test</title>
<script src="../lib/angular/angular.js"></script>
<script src="../lib/angular/angular-route.js"></script>
<script src="../resources/app.js"></script>
<script src="../resources/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
Here's my app module (app.js):
var bioSatApp = angular.module('bioSatApp', [
'ngRoute',
'biosatAppControllers'
]);
bioSatApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/maptypes', {
templateURL: 'partials/mapType-list.html',
controller: 'MapListCtrl'
}).
when('/maptypes/:type', {
templateURL: 'partials/mapType-detail.html',
controller: 'MapTypeCtrl'
}).
otherwise({
redirectTo: '/maptypes'
});
}]);
Here's my controllers module (controllers.js):
var biosatAppControllers = angular.module('biosatAppControllers', []);
biosatAppControllers.controller('MapListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('../resources/maptypes.json').success(function (data) {
$scope.mapTypes = data;
});
}]);
biosatAppControllers.controller('MapTypeCtrl', ['$scope', '$routeParams',
function ($scope, $routeParams) {
$scope.type = $routeParams.type
}]);
Here's mapType-list.html:
<select onchange="location = this.options[this.selectedIndex].value;">
<option ng-repeat="map in mapTypes" value="#/maptypes/{{map.type}}">
{{map.caption}}
</option>
</select>
Here's mapType-detail.html:
<div>
{{type}}
<div id="legendContainer" style="width: 300px; height: 800px; overflow-y: auto; float: left;">Legend Div</div>
<div id="mapDiv" style="height:800px;">Map Div</div>
</div>
The maptypes.json is valid json and it loaded successfully before I tried to ngRoute.
When I run the code it successfully navigates the app to /maptypes (the otherwise statement in $routeProvider). But it doesn't bring up the mapType-list html, which should be a simple drop down list. I get no errors in my console or anywhere else that says something isn't loading correctly or something's not found. Also, when I run it the ng-view div element:
<div ng-view></div>
get's replaced with a comment:
<!-- ngView: -->
I'm sure it's something very simple that I'm missing or got wrong, but I've looked through the code over and over and I can't look at it anymore.

Try changing your app config to
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
//Your routing here...
Also add <base href="/"> to head of your HTML file.

Here the example I did using the same code
sample1.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="bioSatApp">
<head>
<title>Test</title>
</head>
<body>
<div ng-view></div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="app1.js"></script>
<script src="controllers.js"></script>
</body>
</html>
With app1.js I did different of you because I deleted 2 lines from here:
var bioSatApp = angular.module('bioSatApp', [
'ngRoute',
'biosatAppControllers'
]);
'ngRoute'
'biosatAppControllers'
and also I changed templateURL for templateUrl
This is the result without the 2 lines:
var bioSatApp = angular.module('bioSatApp', []);
bioSatApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/maptypes', {
templateUrl: 'templates/mapType-list.html'
}).
when('/maptypes/:type', {
templateUrl: 'templates/mapType-detail.html',
controller: 'MapTypeCtrl'
}).
otherwise({
redirectTo: '/maptypes'
});
}]);
All the others files are the same

Develop Reference

JavaScript is the programming language of the Web.

Basic UI-Routing Example but an error occurs - javascript

You need to include the ui-router script in your html page too it is a third party and not included in angular.

Related

How to solve angularjs Uncaught Error: [$injector:modulerr]?

Angular.js basic routing

Angularjs ng-view does not respond

Cant seem to get Angular Routing working on some occasions?

Why is the scope in my angularJS app empty?

Categories

Resources