I am trying to create a single page application demo for practice.I have stored all three html files in same folder. I tried to give whole path of pages.I tried giving container ng-view /ng-view. I am using brackets editor for this. Change in url can be seen but it is not displaying contents from html pages Login.html and About.html in container ng-view.Please help.. my code is here:
<!DOCTYPE html><html><head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route/angular-route.min.js"></script>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider)
{
$routeProvider
.when("/", {
templateUrl : "/Index.html"
})
.when("/red", {
templateUrl : "/Login.html"
})
.when("/green", {
templateUrl : "/About.html"
});
});
</script>
</head>
<body ng-app="myApp">
<ul>
<li>Main</li>
<li>Red</li>
<li>Green</li>
</ul>
<p>Click on the links.</p>
<p>This example uses the ng-view directive as an attribute to a DIV element.</p>
<div ng-view> </div>
</body>
Probably a problem with the relative paths that was supplied to "templateUrl".
Try to change to "template" and just add a simple Test - page name
element for each page.
If you can see all the pages - that means that the problem is in the relative paths you proved to templateUrl.
and maybe try to put the "/" route at the end (i don't remember in angular 1.x but in angular 2+ the order matter).
Related
i new to angular routing. I have an index.html and home.html. what i am trying to do is by default the index.html should be loaded.There is a link from index.html to home.html. How would i load the index file with a default url using route like
http://localhost/myapp?user=123.
I have deployed my codebase in IIS with virtual directory as myapp.
Also when i click on the home link the url should change to
http://localhost/myapp/index.html#/home
What i am trying to do is:
app.js
var app = angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl:'index.html', controller: 'MainController'});
$routeProvider.when('/home', {templateUrl:'home.html',controller: 'TestController'});
$routeProvider.otherwise({redirectTo: '/home'});
}]);
index.html
<div class="main" ng-controller="MainController as main">
<li>Home</li>
</div>
Controller.js
app.controller('TestController', ['$scope', '$log','$location', function($scope,$log,$location) {
$log.info("Test Controller loaded");
test();
$scope.test = function(){
console.log("Test");
}
$log.info("Test Controller function");
}])
Both the controllers are not getting loaded. The main controller is similar to test controller. What am i missing here?
I can't comment as I don't have enough reputation, but do you have the ng-app directive somewhere in your code ? Like ng-app="myApp" in a body/html tag or something like that ? Plus, if you're using angular routes, you shouldn't need the ng-controller directive in your index.html file as your controller will be set by your routeProvider.
Edit : I think it's a problem with your tags or the structure of your code.
You might have an index.html with the ng-app directive AND an ng-view
Your index.html content should be in another html file (like my nav.html in the plunker below)
That's the only thing I had to do in order to get your code working.
You can look at this plunker, which reuses mostly your code :
http://plnkr.co/edit/DbgJKe51c7QoGCG6rXlN?p=info
could you please tell me why I am not able to navigate one page to another on button click .
I do like that
var loginCntrl=function($scope,$location){
$scope.testClick =function(){
alert('sss');
$location.path("/no");
}
$scope.name="naveen";
$scope.lastname="sharam";
$scope.fullname = function() {
return $scope.firstname + $scope.lastname;
};
}
here is plunker
http://plnkr.co/edit/gQcXe0Njvx6Iviu8Fjep?p=preview
I want to go on second page .
Thanks
When using ui-router you should be using $state to transfer from page to page. You should inject $state into your controller, then you can use $state.go('appaa') to transfer to that state.
See https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options for more information.
Not that much clear your question. Might you are try to make single page app using AngularJS.
We can create many HTML pages and call in single page without refreshing the page using AngularJS $routeProvider (https://docs.angularjs.org/api/ngRoute/provider/$routeProvider).
Find the below Example
1) Create three html pages home.html, about.html, services.html and save in 'pages' folder.
2) Create JS and add below script and save in 'js' folder (js/script.js).
var shanidkvApp = angular.module('shanidkvApp', ['ngRoute']);
// configure routes
spaApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html'
})
.when('/about', {
templateUrl : 'pages/about.html'
})
.when('/services', {
templateUrl : 'pages/services.html'
});
});
3) Create a index page and call angular.min.js, script.js
<!DOCTYPE HTML>
<html ng-app="spaApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<h1>AngularJS Routing</h1>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
<div class="contentwrap" ng-view>Loading...</div>
</body>
</html>
Download working example from Github
I try to implement a single page app with angularjs
There is the route code:
angular.module('todomvc', ['ngRoute'])
.config(function ($routeProvider) {
'use strict';
$routeProvider.when('/account', {
controller: 'TodoCtrl',
templateUrl: 'account.html'
}).when('/', {
controller: 'TodoCtrl',
templateUrl: 'todomvc-index.html'
}).otherwise({
redirectTo: '/'
});
});
The html of the single page is:
<!doctype html>
<html lang="en" data-framework="angularjs">
<head>
<link rel="stylesheet" ... >
<script ...></script>
</head>
<body ng-app="todomvc">
<ng-view />
<script type="text/ng-template" id="account.html">
a html template segment(*) here
///////////// this is the template of the first appearance. //////////////
</script>
<script type="text/ng-template" id="todomvc-index.html">
the same html template segment(*) here
///////////// this is the template of the second appearance. //////////////
But both appearance share a common template segment. How to remove the duplication?
</script>
</body>
</html>
By default, the second page is show up. After a user click a button on the second page, it will trigger $location.path("account"); and route to jump to the first page. In my case, both templates share a div block, that is, a common part is load to both templates. Currently, the template segment is copy and paste to both areas as shown in above code. But the copy-paste is hard to maintain. How can I share the template segment between the two text/ng-template?
Thank you.
Define your common div in a seperate .html file and include it using the ngInclude directive.
<ng-include src="commonDiv.html"/>
I strongly recommend a module called ui-route which provide a simple and easy way to maintain nested views and templates.
Inside my AngularJS app index.html page I have three main divs (top, footer and ) which display different views depending on current route. The problem I am facing now is that I need to display some data in the footer area, including data that will require loop (ex. list of States, Cities...etc) but I am not sure how to display data in index.html outside of the ng-view. So can someone tell me how this can be accomplished? Any example code is highly appreciated. Thanks
Below is my index.html structure, App.js
app.js
var myApp = angular.module('myApp', ['ngRoute', 'ngSanitize']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/',
{ templateUrl: 'templates/home.html',
controller: 'HController',
title: 'Home',
});
}]);
Index.html
<html lang="en" ng-app="myApp">
<head>...</head>
<div id="header">....</div>
<div ng-view></div>
<div id="header">
<!-- Here is where I need to loop to display data -->
</div>
Using ngRoute and ng-view does not preclude using ng-controller and other angular constructs in your code as long as the code resides inside an element which has ng-app attribute (or has been bootstrapped).
So, since you have ng-app attribute on html, you can define a new controller and use it in #header:
index.html:
<div id="header" ng-controller="headerController">
{{myData}}
<!-- Here is where I need to loop to display data -->
</div>
app.js:
myApp.controller('headerController',
[ '$scope', function ($scope) {
$scope.myData = 'Stuff.';
}]
);
I want to create an app using AngularJS that is contained in one file. Something similar to jQuery Mobile's multi-page template. It would be nice to define several divs with ng-controller, each of which would represent a controller with a template. Instead, angular-ui-router seems to require a templateUrl or a template string. Is there an elegant way to do that?
Sure , you can put your templates into script tag directives like this:
<script type="text/ng-template" id="page1.html">
<h1>Page 1</h1> <b>markup</b>
</script>
<script type="text/ng-template" id="page2.html">
<h2>Page 2</h2> here we go
</script>
And then customize the routeProvider in this way:
$routeProvider.when('/page1', {
templateUrl : "page1.html"
}).when('/page2', {
templateUrl : "page2.html"
}).otherwise({
redirectTo: 'page1'
});
Example: http://plnkr.co/edit/akd7gX?p=preview