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>
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!.';
});
The ng-view is not showing pages and routing doesn't seem to work but it is loading the angular-route.min.js in the browsers console/network.
The file structure is folders -> css, fonts, js, pages. there are 2 files in the root which are app.js and index.html and inside the pages folder are 2 more files which are the main.html and second.html which are supposed to be added to the ng-view parts but wont load.
When clicking on a link for the main.html content it comes back with http://127.0.0.1/main and completely ignores the /pages folder
**updated code, got the first page to load its content but the second one doesn't and there are no errors in the console so assumably I have the wrong href path?
Header Scripts
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="app.js"></script>
HTML
<div class="row">
Main Content
Second Content
</div>
<div class="row">
<div class="col-md-12">
<div ng-view></div>
</div>
</div>
<hr>
</div>
JS
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateURL: 'pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateURL: 'pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', function($scope) {
}]);
myApp.controller('secondController', ['$scope', '$log', function($scope, $log) {
}]);
Use templateUrl instead of templateURL.
In your html use #/main.
Don't use tow ng-views
JS code
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/main', {
templateUrl: 'main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', function($scope) {
$scope.name = "world"
}]);
myApp.controller('secondController', ['$scope', '$log', function($scope, $log) {
}]);
HTML code
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="//code.angularjs.org/1.4.0/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="mainController">
<p>Hello {{name}}!</p>
<div class="row">
Main Content
Second Content
</div>
<div class="row">
<div class="col-md-12">
<div ng-view></div>
</div>
</div>
<hr>
</body>
</html>
Here is working plunker
EDIT
Please note I have used angular version 1.4.0. If you want to use angular 1.6.1 they have changed default hash-prefix used for $location hash-bang URLs it is now ('!') instead of ('')
So you need to add this in your config phase.
myApp.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
now it will work with angular 1.6.1 as well
.when('/main', {
templateURL: 'pages/main.html',
controller: 'mainController'
})
or
use this url to access main page :
http://127.0.0.1/
It should work, as you have not set routing for main in config.
I can see changes in the url but the content in that page is not visible in ng-view please help. The following are the code files.
Angular script
<script>
var app = angular
.module("myapp", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/Home", {
templateUrl: "Home.html",
})
.when("/ThankYou", {
templateUrl: "ThankYou.html",
})
})
</script>
Html code
This is the main UI.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<title></title>
</head ng-app="myapp">
<body>
<div>
Home
ThankYou
</div>
<div ng-view></div>
</body>
</html>
Home.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
Home
</div>
</body>
</html>
var app = angular.module("Demo", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/Home', {
templateUrl: 'Home.html',
controller: 'FirstController'
})
.when('/ThankYou', {
templateUrl: 'ThankYou.html',
controller: 'SecondController'
})
});
app.controller('FirstController', function($scope) {
});
app.controller('SecondController', function($scope) {
});
DEMO
I am building a website using angularJS and PHP. Website has many pages like- Home, About Us etc.
So, I have created a common header for the website which I included in my HTML view like this:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="commonController.js"></script>
<script src="homeController.js"></script>
<script src="loginController.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="header" ng-controller="CommonController"
ng-include="'header.html'"></div>
<div class="main" ng-view></div>
</body>
</html>
and the header (header.html) page looks like this:
<nav class="navbar-inverse navbar-fixed-top" role="navigation">
Home
<a href="#/notifications" >{{vm.commonId}}</a>
</nav>
and header controller has a http call which fetches user id and I am trying to show this id as a label for one of the links mentioned above (commonController.js)
(function() {
angular
.module('myApp.common', ['ngRoute'])
.factory('myCommonService', function($http) {
var baseUrl = 'api/';
return {
getBasicUserInfo:function() {
return $http.get(baseUrl + 'getBasicUserInformation');
}
};
})
.controller('CommonController', function($scope, $routeParams, myCommonService) {
var vm = this;
myCommonService.getBasicUserInfo().success(function(data) {
vm.commonId = data.id;
});
});
})();
But when I navigate through pages, header remains same. So, I'm not able to initiate that http call. There are many pages in my website.
Can this be done? I'm pretty much new to this platform.
Route (app.js)
(function() {
angular.module('myApp', [
'ngRoute',
'myApp.login',
'myApp.home',
'myApp.common'
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/login', {
controller: 'LoginController',
templateUrl: 'loginView.html',
controllerAs: 'vm'
})
.when('/home', {
controller: 'HomeController',
templateUrl: 'homeView.html',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/login'
});
}]);
})();
P.S: I excluded other pages to reduce complexity and make my query easy to understand.
Thanks!
Seems to me all that is missing is letting the template know the scoped alias for the controller
<div class="header" ng-controller="CommonController as common"
ng-include="'header.html'"></div>
and in header.html
{{common.commonId}}
Note that I've used common instead of vm as some of your routes are using vm and it's best to avoid conflicts.
If you want to trigger an update on page navigation (ie, route change), change your CommonController to this
.controller('CommonController', function($scope, myCommonService) {
var ctrl = this;
var update = function() {
myCommonService.getBasicUserInfo().then(function(res) {
ctrl.commonId = res.data.id;
});
};
update();
$scope.$on('$routeChangeSuccess', update);
});
You should be able to do this:
.when('/login', {
controller: 'LoginController',
templateUrl: 'loginView.html',
resolve: function(){ //your code here }
controllerAs: 'vm'
})
instead of getting it from the controller
I think that your issue might be that the include can't read the controller, so instead try this:
<nav class="navbar-inverse navbar-fixed-top" role="navigation" ng-controller="CommonController as vm">
Home
<a href="#/notifications" >{{vm.commonId}}</a>
</nav>
Note that you're also missing the controllerAs syntax so I added that.
And remove ng-controller from here:
<div class="header" ng-include="'header.html'"></div>
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>