I have the following code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/styles/bootstrap.min.css" rel="stylesheet" />
<link href="~/styles/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script>
</head>
<body ng-app="appName">
view1
view2
<div>
this is a dynamic message: {{message}}
</div>
<div ng-view>
</div>
<script type="text/javascript">
var app = angular.module('appName', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'pages/home.html',
controller: 'HomeController'
})
.when('/view1', {
templateUrl: 'pages/about.html',
controller: 'FirstController'
})
.when('/view2', {
templateUrl: 'pages/contact.html',
controller: 'SecondController'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('FirstController', function ($scope) {
$scope.message = 'first controller';
});
app.controller('SecondController', function ($scope) {
$scope.message = 'Second controller';
});
app.controller('HomeController', function ($scope) {
$scope.message = 'Home controller';
});
</script>
</body>
</html>
but when i click on the view1 or view2 anchor tag, nothing is happening and i get an error like this
resource not found error
I dont get any error in the console, can anyone help me to figure out what exactly is wrong.
In your html you miss
ngview directive add it.
<div ng-view></div>
For further help see this link
http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/
Use ng-view to display content and you missed # at anchor tag
<body ng-app="appName">
view1
view2
<div ng-view>
this is a dynamic message: {{message}}
</div>
<script>
<!-- script here -->
</script>
</body>
You don't have ng-view
add following in html to get the pages loaded
<div ng-view></div>
Try this for app config
app.config(function (locationProvider, $routeProvider) {
$locationProvider.hashPrefix('#');
$routeProvider.when('/', {
templateUrl: 'pages/home.html',
controller: 'HomeController'
})
.when('/view1', {
templateUrl: 'pages/about.html',
controller: 'FirstController'
})
.when('/view2', {
templateUrl: 'pages/contact.html',
controller: 'SecondController'
})
.otherwise({
redirectTo: '/'
});
});
Related
I have problem with controller load when I triggered ng-route.
This is my main page:
<!DOCTYPE html>
<html>
<head ng-app="testapp">
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>XX</title>
</head>
<body>
<nav ng-controller="defaultnav"></nav>
<div ng-view></div>
</body>
</html>
and this is my app.js file:
var app = angular.module('testapp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.
when("/", {
templateUrl: "index.html"
})
.when("/page1", {
templateUrl: "page1.html"
})
})
inside the page1.html I inisiate controller like this:
<div ng-controller="page1">
</div>
<script type="text/javascript">
app.controller('page1', function ($scope) {
// code...
})
</script>
I don't know best practice to handle this. When I code this I got error with [Error, ctrlreg] it says that I have problem about registering controller.
Please give me advice to solve this.
Thanks in advance.
In JS, the app name in line var app = angular.module('enterprise', ['ngRoute']); is enterprise
In HTML, <head ng-app="testapp">, the app name is testapp. Change to <head ng-app="enterprise">
Its best practice to load the java script seperately. so remove js code from html and keep it in seperate file and load it
Click here for working demo in plnkr.
You can use AngularJS ngRoute:
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/home', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
// route for the about page
.when('/about', {
templateUrl: 'pages/about.html',
controller: 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
})
//otherwise redirect to home
.otherwise({
redirectTo: "/home"
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!!!!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us!.';
});
I am running my AngularJS code in VS 2015. The routing just doesn't work. I tried everything but I get the url like below in the address bar of the browser when I click on the hyperlink "Add" and nothing gets displayed and same issue with other hyperlinks also. Please advise.
"http://localhost:21530/Index.html#!#Add"
Here is the code:
HTML File:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/Main/Home.js"></script>
</head>`enter code here`
<body>
<div>
<ul>
<li>Homes</li>
<li>Add</li>
<li>Edit</li>
<li>Delete</li>
</ul>
<ng-view>
</ng-view>
</div>
</body>
</html>
Home.js:
/// <reference path="../angular.js" />
var MyApp = angular.module("MyApp", ["ngRoute"]);
MyApp.config(function($routeProvider) {
$routeProvider.
when("/Add", {
templateUrl: "Views/Add.html",
controller: "AddController"
})
.when("/Edit", {
templateUrl: "Views/Edit.html",
controller: "EditController"
})
.when("/Delete", {
templateUrl: "Views/Delete.html",
controller: "DeleteController"
})
.when("/Home", {
templateUrl: "Views/Home.html",
controller: "HomesController"
});
});
MyApp.controller("AddController", function($scope) {
$scope.message = "Add Screen";
});
MyApp.controller("EditController", function($scope) {
$scope.message = "Edit Screen";
});
MyApp.controller("DeleteController", function($scope) {
$scope.message = "Delete Screen";
});
MyApp.controller("HomeController", function($scope) {
$scope.message = "Home Screen";
});
change all your href as below :
<div>
<ul>
<li>Homes</li>
<li>Add</li>
<li>Edit</li>
<li>Delete</li>
</ul>
<ng-view>
</ng-view>
</div>
Try to activate the HTML5 mode ($locationProvider.html5Mode(true);) in MyApp.config.
See the official doc: https://docs.angularjs.org/api/ngRoute/service/$route#example
MyApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when("/Add", {
templateUrl: "Views/Add.html",
controller: "AddController"
})
.when("/Edit", {
templateUrl: "Views/Edit.html",
controller: "EditController"
})
.when("/Delete", {
templateUrl: "Views/Delete.html",
controller: "DeleteController"
})
.when("/Home", {
templateUrl: "Views/Home.html",
controller: "HomesController"
});
}]);
You have to inject $routeprovider first. The $routeprovider inside function() you have written is just the parameter name which can be anything.
Please see that you open and close the square brackets properly.. Try Running the application now. If it doesnt work, also try <a ng-href="#Add">Add</a> inside the nav li.
Hope it works for you :) .
I am getting to understand routing and I have a simple application with a couple buttons at the top in the header area. The buttons work well and display the correct information but I've directed that one of the pages (directory.html) use the "myController" controller that I created but instead it continues to give me the curley braces and not the actual scope data. Can someone tell me what I'm doing wrong?
HTML
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Sample app</title>
<link href="content/css/styles.css" rel="stylesheet" type="text/css" />
<script src="app/lib/angular.min.js"></script>
<script src="app/lib/angular-route.min.js"></script>
<script src="app/app.js"></script>
</head>
<body>
<header ng-include="'header.html'"></header>
<main ng-view></main>
</body>
</html>
JS
angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: 'views/home.html'
})
.when('/directory', {
templateUrl: 'views/directory.html',
//since this page requires a controller
controller: 'myController'
})
.otherwise({
redirectTo: '/home'
});
}]);
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.message = ("Hello World");
});
Directory.html
<p>This is my directory page.</p>
<p>{{message}}</p>
Header.html
<div id="menu-bar">
<h1>My Sample App</h1>
<ul>
<li>Home</li>
<li>Directory</li>
</ul>
</div>
Your js file is invalid.
angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: 'views/home.html'
})
.when('/directory', {
templateUrl: 'views/directory.html',
//since this page requires a controller
controller: 'myController'
})
.otherwise({
redirectTo: '/home'
});
}]);
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.message = ("Hello World");
});
You have placed your controller inside the config module...
I'm a beginner to Angular JS. I am working through the tutorial listed here: "https://tests4geeks.com/tutorials/single-page-application-using-angularjs-tutorial/". I cannot route the pages that are from a separate template file. The author of the tutorial states that "Browsers don’t support loading resources from disk using ajax".So, I uploaded the files to my VPS. But I still can't make routing. I have successfully hosted many web pages with that well configured VPS.
angular_test.html
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
</head>
<body>
Home
Blog
About
<h1>{{message}}</h1>
<div ng-view></div>
<script src="app.js"></script>
</body>
</html>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.controller('HomeController', function($scope) {
$scope.message = 'This is home controller';
});
app.controller('BlogController', function($scope) {
$scope.message = 'Hello from BlogController';
});
app.controller('AboutController', function($scope) {
$scope.message = 'Hello from AboutController';
});
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'home.html',
controller : 'HomeController'
})
.when('/blog', {
templateUrl : 'blog.html',
controller : 'BlogController'
})
.when('/about', {
templateUrl : 'about.html',
controller : 'AboutController'
})
.otherwise({redirectTo: '/'});
});
home.html
<h1>Home</h1>
<h3>{{message}}</h3>
blog.html
<h1>Blog</h1>
<h3>{{message}}</h3>
about.html
<h1>About</h1>
<h3>{{message}}</h3>
I got it.This is because my chrome browser can't download my resource files.I just made the following steps.(Failed to load resource under Chrome)
1.Right-click chrome
2.Go to 'inspect element'
3.Look for the 'network' tab somewhere at the top. Click it.
4.Check the 'disable cache' checkbox.
It solves my problems but I don't know why.
it looks like your example is working for me (running http-server https://www.npmjs.com/package/http-server)
Have you made sure that your directory structure is correct
- index.html (angular_test.html)
- app.js
- pages/
|-- home.html
|-- blog.html
|-- about.html
Try This
<!DOCTYPE html>
<html>
<head>
<script src="~/angular-1.5.3/angular-1.5.3/angular.min.js"></script>
<script src="~/angular-1.5.3/angular-1.5.3/angular-route.min.js"></script>
<meta name="viewport" content="width=device-width" />
<title>test</title>
</head>
<body ng-app="myApp">
contact
about
<div ng-view></div>
</body>
</html>
<script>
angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/home', {
controller: 'homeCtrl',
templateUrl: '/Html/home.html'
});
$routeProvider.when('/contact', {
controller: 'contactCtrl',
templateUrl: '/Html/contact.html'
});
$routeProvider.when('/about', {
controller: 'aboutCtrl',
templateUrl: '/Html/about.html'
});
$routeProvider.otherwise({ redirectTo: "/home" });
}).controller('homeCtrl', function ($scope) {
$scope.PageName = "Home Page "
}).controller('contactCtrl', function ($scope) {
$scope.PageName = "Contact Page "
}).controller('aboutCtrl', function ($scope) {
$scope.PageName = "About Page "
})
</script>
I'm trying to implement the solution offered by ProLoser in link
in my Plunk. My problem is that whenever I press a link instead of opening in a sub-view below the links it overrides the entire view.
I need to understand how to solve this problem.
My flow is like that: index.html -> content.html (ng-view) -> link1/2/3.html (using ng-include).
My layout:
Index.html:
<!DOCTYPE html>
<html ng-app="webApp">
<head>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>This is header</Header>
<div class="content" ng-view>
</div>
</body>
</html>
content.html:
<div>
<h1>This is Content brought to you by ngView</h1>
<br>
link1
link 2
link 3
<ng-include src="'/sub/'+link + '.html' "></ng-include>
</div>
My code:
var webApp = angular.module('webApp', []);
//router logic
webApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'content.html',
controller: 'MainCtrl'
})
.when('/sub/:link', {
controller: 'LinkCtrl'
})
.otherwise({redirectTo: '/'});
}]);
//controllers
webApp.controller ('MainCtrl', function ($scope, $routeParams) {
$scope.link = $routeParams.link
});
You don't have a LinkCtrl to handle the links, it should work if you change:
.when('/sub/:link', {
controller: 'LinkCtrl'
})
to
.when('/sub/:link', {
templateUrl: 'content.html',
controller: 'MainCtrl'
})
And edit the line:
<ng-include src="'/sub/'+link + '.html' "></ng-include>
to:
<ng-include src="link + '.html'"></ng-include>