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
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).
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.
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 am designing a page in angularjs that would be a mini SPA (single page app). This page is part of a larger web site that was written in traditional jquery and asp.net. The page will have 2 main sections - the 1st section is just some simple data elements that can be bound easily with ng-model's. The 2nd section will be dynamically generated based on user's interaction, and the data will be retrieved through ajax ($http or $resource).
So should I have ng-view on the whole content page that contains the 2 sections? Or should I only do ng-view on the 2nd dynamic sections? If it's better to have ng-view on the 2nd section only, how do I handle the routes in this case knowing that the 1st section's data should be preserved statically?
thanks.
You don't have to use ng-view and routes for your simple case (widget-like angular application inside other application). You can use ng-include instead. Here is an example of application. I prefer this approach because it does not require to use shared resource like URL location hash that may be already in a use by legacy application or other widgets. Application below switch views dynamically, loads different data for each view and affects it's display options (number of displayed items):
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="angular.js#*" data-semver="1.2.11" src="http://code.angularjs.org/1.2.11/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Here is my legacy app markup</h1>
<div ng-app="app" ng-controller="appController">
<div>
<input placeholder="Number of items" ng-model="numberOfItems"/><br/>
<select placeholder="View" ng-model="currentView" ng-options="view.name for view in views"></select>
</div>
<div ng-include="currentView.url"></div>
</div>
<div id="jqueryContainer">And here is some markup generated with jQuery<br /></div>
</body>
</html>
JavaScript
angular.module('app', []).
controller('appController', function($scope, $http) {
$scope.views = [{
name: 'view1',
url: 'view1.html',
dataUrl: 'data1.json'
}, {
name: 'view2',
url: 'view2.html',
dataUrl: 'data2.json'
}];
$scope.numberOfItems = 2;
$scope.currentView = $scope.views[0];
$scope.$watch('currentView', function(currentView) {
if(currentView && currentView.dataUrl) {
$http.get(currentView.dataUrl).success(function(data) {
$scope.data = data;
});
}
});
});
$(function(){
$('#jqueryContainer').append('<span>Some markup generated dynamically.</span>');
});
view1.html
<div>
<h2>View1 specific markup {{data.length}}</h2>
<ul>
<li ng-repeat="item in data | limitTo:numberOfItems">{{item.text}}</li>
</ul>
</div>
data1.json
[{"text":"Text1"},{"text":"Text2"},{"text":"Text3"},{"text":"Text4"},{"text":"Text5"}]
Plunker: http://plnkr.co/edit/Y5IZmPbrrO63YrL8uCkc?p=preview
You can also find useful examples of this approach in AngularJS documentation: http://docs.angularjs.org/api/ng.directive:ngInclude
yes you can separate the static view with the dynamic view, in actual this is what angularjs suggest.It is not required to move the scope of ng-app.
so you can do like this: menu is displayed as the static part
index.html
<body ng-app>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
</body>
in your config file you can include your routing which page routes to which page and which controller to used on loading of any view.
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
I am attempting to include multiple partial templates to be included in an ng-view, but the routeProvider directives are always trying to fetch the file from the server (not the embedded ng-template).
I have the following defined in my HTML:
<script type="text/ng-template" id="groupList.html">
<!-- contents -->
</script>
<script type="text/ng-template" id="participantList.html">
<!-- contents -->
</script>
<script src="js/app.js"></script> <!-- AngularJS app file -->
In my app.js file I have the following:
var myApp = angular.module('myApp', ['ngResource', '$strap.directives']);
// Update interpolateProvider for Django server
myApp.config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
myApp.config(function ($routeProvider)
{
$routeProvider.when('/', {
templateUrl: '../static/views/home.html'
});
$routeProvider.when('/group', {
controller: 'GroupCheckInCtrl',
templateUrl: 'groupList.html'
});
$routeProvider.when('/group/:groupId', {
controller: 'GroupCheckInCtrl',
templateUrl: 'participantList.html'
});
$routeProvider.otherwise({
redirectTo: '/'
});
});
When ever I load the page, I get an error in my browser console:
GET http://127.0.0.1:8000/visitorLog/group/groupList.html 404 (NOT FOUND)
The AngularJS app section of my page looks like this:
<div ng-app="myApp" ng-controller="GroupCheckInCtrl">
<!-- other content -->
<ng-view>Loading...</ng-view>
</div>
What am I missing that is not allowing AngularJS to load my ng-template script directive?
make sure that the inline script tags are children of the element that has the ng-app="myApp" attribute. If the script tags are outside this element, it will not work. The easiest way to fix this is to add the "ng-app='myApp'" to the tag. Here is an example of what I mean:
<body ng-app="plunker" ng-controller="MainCtrl">
<script type="text/ng-template" id="groupList.html">
Group list html
</script>
<script type="text/ng-template" id="participantList.html">
Participants list html
</script>
<ul>
<li>group</li>
<li>participant</li>
</ul>
<div ng-view>
Loading...
</div>
</body>
Here is the relevant plunker: http://plnkr.co/edit/K1gMiLenRk0oPkzlGNjv