**Unable to Route**
<!DOCTYPE html>
<html lang="en" ng-app="mymodule">
<head>
<meta charset="UTF-8">
<title>Index</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
<script src="angular-resource.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script></head>
<body>
<h1>Routing</h1>
Course
Students
<div ng-view></div>
</body>
ANGULARJS
var myapp = angular.module("mymodule",["ngRoute"]).config(function($routeprovider){$routeprovider
.when("/Students",{
templateUrl:"Students.html",
controller:"studentcontroller"
})
.when("/Course",{
templateUrl:"Course.html",
controller:"CourseController"
})});
myapp.controller("studentcontroller",["$scope",function($scope){
$scope.message="Hello Welcome to students page";}]);
myapp.controller("CourseController",["$scope",function($scope){
$scope.alert="Welcome to course page";}])
https://i.stack.imgur.com/nG9rK.png
*Iam new to angular and when i trying to route iam unable to do that it throws me an error.Please if any one can fix this problem i would really appriciate that.Thanks *
Change both instances of $routeprovider into $routeProvider. e.g.
var myapp = angular.module("mymodule",["ngRoute"])
.config(function($routeProvider){
$routeProvider
.when("/Students",{
templateUrl:"Students.html",
controller:"studentcontroller"
})
.when("/Course",{
templateUrl:"Course.html",
controller:"CourseController"
})
})
Rename $routeprovider to $routeProvider.
Remember, when working in angular, the argument names should be exactly the same as your instructor tells you (I see it is w3schools).
Related
I have newly started learning AngularJS. When I am running the application it is not showing the data to the view.
Here is my html page.
index.html:
<!DOCTYPE html>
<html ng-app="tutorialApp">
<head>
<meta charset="utf-8">
<title>Angular Tutorial</title>
<script src="lib/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/tutorialCtrl.js"></script>
</head>
<body ng-controller="TutorialCtrl">
<h1>{{tutorialObject.title}}</h1>
<h2>{{tutorialObject.subTitle}}</h2>
<hr/>Number: {{2+2}}
<p>{{tutorialObject.bindOutput}}</p>
</body>
</html>
app.js:
var app = angular.module('tutorialApp', ['tutorialCtrlModule']);
tutorialCtrl.js:
angular.module('tutorialCtrlModule', [])
.controller('ToturialCtrl', ['$scope', function($scope){
//Code
$scope.tutorialObject = {};
$scope.tutorialObject.title = "Angular Tutorial";
$scope.tutorialObject.subTitle = "Basic";
$scope.tutorialObject.bindOutput = 2;
}]);
I could not even understand what could be the wrong thing i have done.
I am attaching the screenshot below:
You need to change the order of controller as tutorialAppp is dependent on tutorialCtrlModule
<script src="js/controllers/tutorialCtrl.js"></script>
<script src="js/app.js"></script>
EDIT:
You have made another typo mistake in the html, controller name as "TutorialCtrl" whereas it should be ToturialCtrl
Here is the working DEMO
Below is my very simple example where I am trying to implement controller.
{{8/2}} is giving correct output i.e. 4 but {{message}} remains same.
It should be replaced by some value e.g. First Controller
I downloaded the angular js from https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js
HTML
<!DOCTYPE html>
<html ng-app>
<head>
<script src="angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>{{8/2}}</h1>
<div ng-controller="HomeController">
{{message}}
</div>
</body>
</html>
Script.js
var HomeController = function($scope) {
$scope.message = "First Controller";
};
I downloaded the angular js from
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js
Well angularjs version 1.4x does not support raw functions controllers to be used as controllers. change the angularjs version to 1.2.x OR use angular.module('someName').controller() syntax to make it work.
Here's the same plunkr you shared(with angularjs 1.2.8)
Here's the plnkr with angular.module() syntax
Update your html from
<html ng-app>
to
<html ng-app="myApp">
Update your script.js to
angular.module("myApp", []).controller("HomeController", function($scope){
$scope.message = "First Controller";
});
replace your Script.js with this
var ng_app = angular.module('ng_app',[]);
ng_app.controller('HomeController', ['$scope', function($scope) {
$scope.message = "First Controller";
}]);
edit ng-app in your html to ng-app='ng_app'
There was a problem with your angular version If you will use a older version then it works fine
<html>
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
</head>
<body ng-app>
{{8/7}}
<div ng-controller="HomeController">
{{message}}
</body>
</html>
<script >
// Code goes here
var HomeController = function($scope) {
$scope.message = "First Controller";
};
</script>
You are using old syntax that is no longer supported.Instead of defining controller as var. Add ng-app="app", then create a module
var myApp = angular.module('app',[]);
Now define your controller -
myApp.controller("HomeController",function($scope){
$scope.message = "Hello";
});
I started learning AngularJS so I created two html pages:
index.html
<!DOCTYPE html>
<html ng-app="TodoApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/app.js"></script>
<title>Angular Tutorial</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
and list.html
<input type="text" ng-model="test">
<h1>Hello: {{test}}</h1>
The app.js looks like this
var TodoApp = angular.module("TodoApp", ["ngResource"]).
config(function ($routeProvider) {
$routeProvider.
when('/', { controller: ListCtrl, templateUrl: "list.html" }).
otherwise({ redirectTo: '/' });
});
var ListCtrl = function ($scope, $location)
{
$scope.test = "testing";
};
Unfortunately, when I open the index.html page it is blank. What can be the cause of the problem?
As you mentioned the error:-
1) Add angular-route.js file in main page.
2) Add 'ngRoute' dependency in angular main app.
Doc:-https://docs.angularjs.org/tutorial/step_07
also you need to mention the controller in your HTML with ng-controller="ListCtrl" to initialize it.
And do not declare your controller that way, you must do
todoApp.controller('ListCtrl', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {
$scope.test = "testing";
}]);
It seems that you are missing the controller's definition:
TodoApp.controller('ListCtrl', ListCtrl);
This should fix your issue
You can also take a look at yeoman. It will help you to start with angularjs in zero time.
http://yeoman.io/codelab.html
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
<script src="app.js"></script>
<title>TESTS</title>
</head>
<body ng-app="testApp">
Testing angularjs routing
<div ng-view>{{message}}</div>
<div ng-controller="TestController">{{message}}</div>
</body>
</html>
And here is app.js:
var testApp = angular.module('testApp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl:'index.html',
controller: 'TestController'
}).when('/link', {
templateUrl:'link.html',
controller:'LinkController'
});
});
testApp.controller('TestController', function ($scope) {
$scope.message = "INDEX";
});
testApp.controller('LinkController', function ($scope) {
$scope.message = "LINK";
});
I'm trying to make routing work, but my link not clickabble at all, despite the fact that it looks like a normal link. Second message showing "INDEX", so I think problem in ng-view, because if I delete line with ng-view link become clickable again! I don't have a clue whats wrong!
There is quite a few things wrong with your code.
Actually, it's not that your link don't work, it's that your crashing the browser by introducing an infinite loop. This is because you point your view to 'index.html' when the route is '/'.
So when you start, your loading index.html, which then loads index.html in it's ng-view, which then loads index.html in it's view, which then loads index.html... and so goes the wheel...
You also have some content in your ng-view, this will be replaced by the actual view you load.
Finally you using your TestController both on a view and in your index.html, which isn't illegal, but I doubt it would make much sense in any application... I could be wrong though.
So overall, it's sort of a mess. Here is a working example: http://plnkr.co/edit/MrdAKu86S3RoreQhO14H?p=preview
var testApp = angular.module('testApp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl:'home.html',
controller: 'TestController'
}).when('/link', {
templateUrl:'link.html',
controller:'LinkController'
});
});
testApp.controller('TestController', function ($scope) {
$scope.message = "INDEX";
});
testApp.controller('LinkController', function ($scope) {
$scope.message = "LINK";
});
and
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
<script src="script.js"></script>
<title>TESTS</title>
</head>
<body ng-app="testApp">
Home
Testing angularjs routing
<div ng-view></div>
</body>
</html>
i have a lot of question about the angular ui-router module.
I'm tryin to understand it well before implement my applications with that one, but i have problems even with simple things.
HTML
<!doctype>
<html ng-app='myapp'>
<head>
<title>main</title>
<meta charset="utf-8">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<!--controller-->
<script src="app.js"></script>
<script src="controller.js"></script>
<!-- endbuild -->
</head>
<body>
hi
<div ui-view="view1"></div>
<div ui-view="view2"></div>
</body>
</html>
EDIT
var app=angular.module('myapp',['ui.router'
]);
app.config(function($stateProvider/*,$urlRouteProvider*/){
//$urlRouteProvider.otherwise("view1");
$stateProvider.
state('father',{
abstract:true,
template:'<div ui-view></div>',
controller:function($scope){
$scope.view='hi';
}
}).
state('son',{
parent:'father',
url:'/',
views:{'view1':{
templateUrl:'view1.html'
},
'view2':{
templateUrl:'view2.html'
}
}
})
})
and this is my js plunker http://plnkr.co/edit/hsEFKhpaGkIkzarQiuQQ?p=preview.
Now the questions:
1) As you can see in the index.html nothing appears, and my first intention is to see both the views in the main window
2)i have build an abstract state to pass a $scope.view to all the child state, but it seems it didn't work too
3)If what i want to do is done in the wrong way, what's the better approach to do it?
After spending more time than I should have playing around with it, I think I figured out what you were looking for.
I made a few changes and I will try to go over them all.
In the HTML, I added ui-router, moved your js script tags to just before </body>, that allowed me to get rid of all the console errors:
<!doctype>
<html ng-app='myapp'>
<head>
<title>main</title>
<meta charset="utf-8">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ui-view ></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script src="ui-router.js"></script>
<script src="app.js"></script>
</body>
</html>
Than in your app.js file I made a few changes:
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('', '/');
$stateProvider
.state('father', {
abstract: true,
// I couldn't get this to work without a templateUrl for some reason,
// I'm sure with a little time you could figure this part out.
templateUrl: 'father.html',
controller: function($scope) {
$scope.view = 'Hello Dad';
console.log($scope.view);
}
})
.state('father.son', {
parent: 'father',
url: '/',
views: {
// Added the absolute target declaration `#father`, see link 1 below
'view1#father': {
templateUrl: 'view1.html',
controller: function($scope) {
console.log($scope.view);
}
},
'view2#father': {
templateUrl: 'view2.html',
controller: function($scope) {
console.log($scope.view);
}
}
}
})
});
Here is the father.html template:
<!-- Big file, I know -->
<div ui-view="view1"></div>
<div ui-view="view2"></div>
Link 1: View Names - Relative vs. Absolute Names
Link 2: Plunker