Am completely new to AngularJS. So am trying the flow of sample application before I start the development of a new app in my project. Below is what I have tried.
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.js"></script>
<script type="text/javascript" src = "js/app.js"></script>
</head>
<body>
<h1>Student Registration!</h1>
<div ng-view></div>
</body>
</html>
registerStudent.html
<table>
<tr>
<td><input type="button" value="Save" ng-click="save()"></td>
<td>{{message}}</td>
</tr>
</table>
app.js
var app = angular.module("app", ['ngRoute', 'app.services', 'app.controllers']);
/**routing*/
app.config(['$routeProvider', function($routeProvider){
$routeProvider.when('/editStudent', {
templateUrl:'html/editStudent.html',
controller:'studentReg'
});
$routeProvider.when('/viewStudent', {
templateUrl:'html/viewStudent.html',
controller:'studentReg'
});
$routeProvider.when('/registerStudent', {
templateUrl:'html/registerStudent.html',
controller:'studentReg'
});
$routeProvider.otherwise({
redirectTo: '/registerStudent'
});
}]);
services.js
var app = angular.module('app.services', []);
app.service('restService', function(){
this.save=function(){
return 'saved';
};
});
controller.js
var app = angular.module('app.controllers', []);
app.controller('studentReg', function($scope, restService){
$scope.result=restService.save();
$scope.save=function(){
console.log($scope.result);
$scope.message=$scope.result;
};
});
When I tried to run the application, I got the below error.
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0-rc.1/$injector/modulerr?p0=app&p1=Error%3…2Flocalhost%3A8080%2FEnhancedStudentform%2Flib%2Fangular.min.js%3A20%3A421)
You forget to load your controller.js and services.js, that's my guess. Try this after you include you app.js in index.html:
<script type="text/javascript" src = "js/controller.js"></script>
<script type="text/javascript" src = "js/services.js"></script>
Try to Include all js files in you index html like:
<script type="text/javascript" src = "js/app.js"></script>
<script type="text/javascript" src = "js/controller.js"></script>
<script type="text/javascript" src = "js/services.js"></script>
Related
My problem is with template Url in angularjs.
So when i put this code in my editor and run it it works perfectly:
HTML:
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8" />
<title>Angular Js</title>
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src = "https://rawgit.com/nirus/Angular-Route-Injector/master/dist/routeInjector.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-app = "app">
<div ng-view></div>
</body>
</html>
Js:
var app = angular.module('app', [])
app.config(function($routeProvider){
$routeProvider.when('/', {
template: 'page',
})
.when('/helloUser', {
template: "ds"
})
.otherwise({
redirectTo: '/'
})
})
That worked fine but as soon as i try to put a templateUrl It goes of here is my example code for that:
index.html
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8" />
<title>Angular Js</title>
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src = "https://rawgit.com/nirus/Angular-Route-Injector/master/dist/routeInjector.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-app = "app">
<div ng-view></div>
</body>
</html>
page.html:
Hello World
main.js:
var app = angular.module('app', [])
app.config(function($routeProvider){
$routeProvider.when('/', {
templateUrl: 'page.html'
})
.when('/helloUser', {
template: "ds"
})
.otherwise({
redirectTo: '/'
})
})
EDIT:
1
down vote
accept
You must inject the ngRoute module:
var app = angular.module('app', ['ngRoute'])
Not work:
You must inject the ngRoute module:
<script src="angular-route.js">
var app = angular.module('app', ['ngRoute'])
I want to get some data to app.js from the config.js file. But I have some problems.It give me an uncaught reference error.
config.js
var configData={
'cfg':{
'MyData':'Datatasdasdasd',
}};
app.js
var app=angular.module('myapp', ['appConfig'])
app.controller('AppController', function ($scope,cfg) {
$scope.yazdir=cfg.MyData;
});
var config_module = angular.module('appConfig', []);
angular.forEach(configData, function(key, value) {
config_module.constant(value, key);
});
index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="app.js"></script>
<script src="config.js"></script>
</head>
<body ng-controller="AppController">
<div>
{yazdir}
</div>
</body>
</html>
Thank you.
Your scripts are in the wrong order:
<script src="config.js"></script>
<script src="app.js"></script>
I have this index.html page:
<html>
<head ng-app="myApp">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test App/title>
<link rel="stylesheet" href="app.css">
</head>
<body ng-controller="mainController">
index2
<div ng-view></div>
<script src="vendor/angular/angular.js"></script>
<script src="vendor/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
And this is my app.js script:
'use strict';
var myApp = angular.module('myApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/index2', {
templateUrl: 'views/index2.html'
})
.otherwise({redirectTo: '/views/index2.html'});
});
myApp.controller('mainController', function ($scope) {
});
And my views/index2.html is contains only single 123 element.
When I'm clicking link on my index.html, nothing happens, no routing.
What I'm doung wrong?
upd: I run it from IntelliJ IDEA so it's nothing about webserver is missing ,I think.
You have ng-app directive applied to your head tag:
<head ng-app="myApp">
This means that ng-app will apply to head tag only. Instead you need to move it to your html tag:
<html ng-app="myApp">
I am new in Angular.js, I am watching pluralsight Angular tutorial, I did what the teacher told on that videos:
<!Doctype>
<html lang="en" ng-app>
<head>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script href="angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
</html>
The h1 should be Hello World! but it is {{helloMessage}}
I am using Latest version of Firefox on windows8 with latest version of Angular
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!Doctype>
<html lang="en" ng-app>
<head>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script href="angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
</html>
Above code works without any issue so it is clear whatever problem is with your version issue. Use nuget to resolve the issue in case you are using Visual studio.
The syntax has changed, you have to add ng-app to the body part, and change the script src, the following code works.
<body ng-app>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
You should a module in your script.
Hope the following code helps you.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.12/angular.js" data-semver="1.3.12"> </script>
<script src="app.js"></script>
</head>
<body>
<h1 ng-controller="MainCtrl">Hello {{name}}!</h1>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
</script>
</body>
</html>
Here is the code Plunker:-
<!DOCTYPE html>
<html data-ng-app="one">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script type="text/javascript">
var app=angular.module("one",[]);
app.controller("helloWorldCtrl",function ($scope) {
$scope.helloMessage = "Hello World!";
});
</script>
</body>
</html>
I assume there is version problem if you are using new version of angular above 1.2.0 it is not allowed to use global controller in that version Source
I'm getting into Angular JS, and am having a bit of a an issue with routes not displaying. Here's the index file:
<!doctype html>
<html lang="en" ng-app="backupApp">
<head>
<meta charset="UTF-8">
<base href="some/subdiretory/">
<script src="//code.angularjs.org/1.2.10/angular.min.js"></script>
<script src="//code.angularjs.org/1.2.10/angular-animate.min.js"></script>
<script src="//code.angularjs.org/1.2.10/angular-resource.min.js"></script>
<script src="//code.angularjs.org/1.2.10/angular-route.min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/controllers.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js">
<link rel="stylesheet" href="//code.ionicframework.com/ionicons/1.4.1/css/ionicons.min.css">
</head>
<body ng-app="backupApp">
<div ng-view class="view-frame">
</div>
</body>
</html>
And here's my app.js. In one file, as I was debugging:
var backupApp = angular.module('backupApp', [
'ngRoute',
'backupControllers'
]);
backupApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/', {
controller: 'IndexCtrl'
});
}
]);
backupApp.controller('IndexCtrl', ['$location', '$window',
function($location, $window) {
console.log('hi');
debugger;
if ($window.sessionStorage.loggedin) {
$location.path('/backups');
} else {
$location.path('/login');
}
}
]);
The issue is, no redirection occurs. Not errors are throw. The console.log never displays. I can't figure out what's wrong. Any ideas?