I am using the ui-router in my angular 1.4 app. I currently have the ng-app like this:
<div class="container main-content" ui-view ng-app="myApp">
</div>
The templates are loading fine directly. I know need to move the ng-app directive to the html tag:
<html ng-app="myApp">
...
</html>
I am using a modulebased approach per page:
$stateProvider.state('myview', {
url: '/myview/:id',
templateUrl:'app/modules/myview.html',
controller: 'MyViewController'
So each page has a state definition seperately.
After moving the ng-app to the html tag when I click on a different route the url changes in the browser but wont load the template? Is this related to the ui-router config or something else?
The issue was that instead of using ui-sref as a link href was used.
Related
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).
On my website i'm displaying the same header on each page and I wanted to know if there's an AngularJS / jQuery or simple JS solution to load only the content of the body and not the header on page change.
<html ng-app="headerApp" ng-controller="HeaderCtrl">
<head>
<!-- here I load my JS and css ... -->
<div ng-include="'templates/Header.tpl.html'"></div>
</head>
<body>
<div ng-include="'templates/IndexBody.tpl.html'"></div>
</body>
<footer><div ng-include="'templates/Footer.tpl.html'"></div> </footer>
</html>
So my HTML looks like this I have separate template for each parts. But for now I create a html file for each pages. So I think there's a way to change the ng-include in the body.
Thanks for your help !
This is kind of the idea behind single page applications. Angular provides a built-in router that does this for you, and there is also the popular ui-router plugin.
You would change your view to:
<html ng-app="headerApp">
<head ng-controller="HeaderCtrl">
<div ng-include="'templates/Header.tpl.html'"></div>
</head>
<body>
<div ng-view></div>
</body>
<footer><div ng-include="'templates/Footer.tpl.html'"></div> </footer>
</html>
and configure the router in app.js:
angular.module('headerApp', ['ngRoute']).config(function($routeProvider){
$routeProvider.when('/', {
templateUrl: 'templates/IndexBody.tpl.html',
controller: 'IndexBodyCtrl'
});
});
Note that you will need to include angular-route.js in your index.html. More reading here: https://docs.angularjs.org/api/ngRoute
If it's an Angular app would you not use ng-view? Everything outside the view is the template and static as such. If you aren't building a spa then Angular probably isn't the best approach.
If it's Jquery then you could just do:
$("article").load('templatefiletoload.html');
beware that loading in your content like this is poor from an SEO point of view. Use server side includes if possible
I'm new to angularjs and working on project where is need to use ngView with jade for rendering views. I have also searched through the previous questions asked about ngView here but couldn't find anything helpful. The issue I'm facing is whenever I use ngView as an attribute of div in jade it compiles the jade template and shows the compiled HTML like:-
<div ng-controller='ArticleListCtrl'>
<!-- ngView: -->
</div>
The jade template is:-
div(ng-controller='ArticleListCtrl')
div(ng-view)
The route using config function in my app.js is:-
var nodeApp = angular.module("nodeApp",["ngRoute"]);
nodeApp.config(['$locationProvider','$routeProvider',function($locationProvider,$routeProvider){
$routeProvider
.when('/',{
templateUrl: 'articles/art.html',
controller: 'ArticleListCtrl'
})
$locationProvider.html5Mode(true);
}]);
So, can anybody help me or point me in right direction if I'm doing something wrong?
This is the complete jade template:-
doctype html
html(ng-app='nodeApp' lang='en')
include ../includes/head
body
div(ng-controller='ArticleListCtrl')
div(ng-view)
And this is compiled html generated from the jade template above:-
<!DOCTYPE html>
<html class="ng-scope" lang="en" ng-app="nodeApp">
<head prefix="og: http://ogp.me/ns# nodejsexpressdemo: http://ogp.me/ns/apps/nodejsexpressdemo#"></head>
<body>
<div class="ng-scope" ng-controller="ArticleListCtrl">
<!-- ngView: -->
</div>
</body>
</html>
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.
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