I am trying to reference JavaScript files for my Ionic Mobile Apps project's navigation.html, located inside the www/templates/ directory.
*Note : I created the project using the side menu template in Visual Studio 2015 and the project includes an index.html, and all those html pages located inside the www/templates/ directory are using the index.html, something like master page.
In my navigation.html, I have the following code snippet:
<ion-view view-title="Navigation">
<ion-content>
// my html codes will be stored here
</ion-content>
</ion-view>
I tried to reference the JavaScript files in the index.html but I received some error. So I wanna reference the JavaScript files inside the navigation.html. However, since my navigation.html does not have tags, like , , I created them inside the navigation.html. After modifying the navigation.html and putting the reference for the JavaScript files in the navigation.html, it looked like this.
<!DOCTYPE html>
<html>
<head>
// some js files
</head>
<body>
</body>
However, the javascript files are not loaded in the navigation.html. It is supposed to work as I have tried in notepad++, the same codes, and it worked perfectly. I have tried a couple different things, but cannot get the javascript files loaded in the navigation.html. Does anyone know a way I could make this work? Thanks.
If you want to load files (and plug in) only for some views instead of all your app you can use oclazy (https://github.com/ocombe/ocLazyLoad)
And use like this in your routing:
$stateProvider
.state("index", {
preload: true,
abstract: true, //<-- THIS IS A FATHER VIEW
url: "/index",
templateUrl: "/app/view/template/common/content.html"
})
.state("index.main", {
url: "/main",
templateUrl: "/app/view/template/home/home_new.html",
data: { pageTitle: "Home" },
controller: "HomeController",
controllerAs: "homeCtrl",
resolve: {
loadPlugin: function ($ocLazyLoad) { //<-- HERE YOU CAN LOAD FILES ONLY FOR YOUR ROUTING
return $ocLazyLoad.load([
{
name: "ngTagsInput",
files: ["/app/view/assets/lib/bower/ng-tags-input/ng-tags-input.js"]
},
]);
}
}
})
Related
I am using templates to build my app. Basically have one main page, and then I am loading others pages thru it using ng-view. The href links in the index.html work fine. But I also want to be able to change ng-view within js functions as well. How is this done?
I tried to go to the red page using $location.path, but nothing seems to happen besides printing to the console. Before that i tried using $window.location.href(), which did go to the page, but dropped the index.html container, breaking the app.
edit:
As pointed out in Siddhesh's answer comments, it works if not used with $locationProvider.html5Mode(true);. But I would like to keep clean urls. So I'm looking for a way to keep it, IF that's possible.
index.html
<head>
<base href="/testing/onetest/">
<script>
app.controller('masterController',function($location){
setTimeout(change, 3000);
function change() {
console.log("changing in 3 seconds");
$location.path('/red');
}
});
</script>
</head>
<body ng-app="app" ng-controller="masterController">
Main
Red
Green<br>
<div ng-view></div>
</body>
app.js
var app = angular.module("app", ["ngRoute"]);
app.config(function($routeProvider,$locationProvider) {
$routeProvider
.when("/", {
templateUrl : "home.html",
controller : 'mainController'
})
.when("/red", {
templateUrl : "red.html"
})
.when("/green", {
templateUrl : "green.html"
});
$locationProvider.html5Mode(true);
});
For angular js version less than 1.6
$window.location.href= '#red';
For angular js version 1.6 or more
$window.location.href= '#!red';
Try this and see if it works. This might help you to change the ng-view from function. It worked for me.
I am learning angular.js and found an example on w3c.school
http://www.w3schools.com/angular/tryit.asp?filename=try_ng_routing
But when I try to test it it doesn't work,
I made two .htm files simply containing one word, for example "RED", or "GREEN". As simple as this example is I cannot get it to work. I think that it might be the libraries I am using
<!DOCTYPE html>
<html>
<!-- JavaScript Files -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.js"></script>
<body ng-app="myApp">
<p>Main
</p>
Red
Green
Blue
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider.when("/", {
templateUrl: "test.html"
}).when("/red", {
templateUrl: "red.htm"
}).when("/green", {
templateUrl: "green.htm"
});
});
</script>
</body>
</html>
In this case you are moving towards a page "red.htm" which,... Doesn't exist in your situation! The page is already there in the directory for W3School (http://www.w3schools.com/angular/red.htm for exmaple)
So what you need to do is to create a htm page called red.htm in the same directory and thus navigate to it using routing. If you want to make the same example copy the code of the page I linked and try to run it with both files on the same directory.
From the three files I was using (test.html, red.html, green.html) I finally noticed/understood that you mustn't self-reference the file you are writing the script in.
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider.when("/red", {
templateUrl: "red.htm"
}).when("/green", {
templateUrl: "green.htm"
});
});
</script>
Simply by removing the .when method for 'test.html' (which is the exact same file the code is in) the self-referencing stops, and the code is allowed to execute.
I'm new to AngularJS. All examples that I have seen so far, have the sidemenu html code in the base index.html file, and not in the templates html partials. I want to move the sidemenu html (as it could become large) into its own template file.
So far the index.html has:
...
<ion-side-menu side="left">
<div ui-view='menu-left'></div>
</ion-side-menu>
...
Then in the app.js I have (and I know this is wrong):
$stateProvider
.state('menu-left', {
url: '/menu-left',
views: {
'menu-left': {
templateUrl: 'templates/menu-left.html'
}
}
})
I see in the browser console the partial file 'templates/menu-left.html' is being loaded. Also if I navigate to ..#/menu-left URL in my app the menu appears. However it should appear on all pages in that spot.
Thanks,
You don't need to create a separate route/state to make use of external HTML templates. As #charlietfl suggests, you can use ng-include to refer to external templates.
Add this line in your index.html
<body>
...
<!-- Note the single quotes within double quotes -->
<div ng-include="'menu-left.html'"></div>
...
</body>
ngInclude documentation
menu-left.html can then have the side menu HTML.
Note that using ng-include leads to additional HTTP calls to fetch the external template. Tempting as it may be to "modularize" the HTML for the navbar, side-menu etc, you may be better off placing the code of core functionality available throughout the web app in a single HTML file to avoid the costs of additional HTTP requests.
Instead of ng-include you could use an abstract parent state and inject the child templates into the ion-nav-view inside parent template.
.state('menu', {
url: '/menu',
abstract: true,
templateUrl: 'templates/menu.html'
})
.state('menu.child', {
url: '/child',
views: {
'menuContent': {
templateUrl: 'templates/child.html'
}
}
});
HTML files: menu.html
<ion-side-menus>
<ion-side-menu>
<ion-nav-bar>
<!-- ion nav buttons -->
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu>
</ion-side-menus>
I am writing a directive that I want other people to reuse.
The problem I encounter is that my directive has several js files it uses, and if I want others to use it, they need to add the js files explicitly.
Is there a way to make the directive include those files so that other will only have to add the directive file?
The way it works today is by adding the js files in the main head html file.
Can I use tamplateUrl to load the js files? Iv'e seen in THIS post that loading scripts creates some problems.
Concrete Example:
index.html:
<body data-ng-app="example">
<test-dir></test-dir>
</body>
index.js:
(function(angular){
var app = angular.module('example', []);
app.directive('testDir', function(){
return{
restrict: 'E',
templateUrl: 'test-me.html'
}
});
})(window.angular);
test-me.html:
<script type="text/javascript" src="test.js"></script>
<div> TEXT </div>
test.js:
function testMe() {
console.log('blah');
}
This format will call the directive and I will see the div TEXT text. BUT, I can't call the function testMe and I don't see any transfer in the network for test.js which is included in the directive's template.
How can I make it work?
I want to display two pages, but use a base layout. I have it somewhat working with the following:
index.html
<html data-ng-app="myApp">
<head>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div data-ng-view class="container"></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="public/app.js"></script>
</body>
</html>
main.html
<div>
<h2> Hello! This is Main page </h2>
</div>
list.html
<div>
<h2> This is List page </h2>
</div>
app.js
var myApp = angular.module('myApp', []);
// Routing Setup
function myAppRouteConfig($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'index.html'
}).
when('/list', {
controller: ListController,
templateUrl: 'list.html'
}).
otherwise({
redirectTo: '/'
});
}
myApp.config(myAppRouteConfig);
This somewhat works when I visit index.html and list.html, but two problems:
When I load index.html, bootstrap loads fine. But when I visit list.html, bootstrap doesn't load. In fact, looking at the html source in firebug, all the code from index.html isn't loaded. The container is missing, the script and css links are missing.
How do I load an actual index page? I have my main.html that I want to load when a user visits the root page, but index.html is the base layout that contains code that persists through all other views (ie, like header and footer etc). If I modify my app.js and set the templateUrl: 'main.html', it seems to still load index.html. Is AngularJS implicitly looking for index.html as the base template?
EDIT:
File structure:
-- server.js
-- public/
|-- index.html
|-- list.html
|-- main.html
|-- js
|-- app.js
Change your route to:
$routeProvider.
when('/', {
templateUrl: 'main.html'
}).
when('/list', {
controller: ListController,
templateUrl: 'list.html'
}).
//if you need to use login page, add 1 more route
when('/login', {
templateUrl: 'login.html'
})
otherwise({
redirectTo: '/'
});
and put your index.html at the root directory (or any sub directory) of your web app, configure it as the default document.
Is AngularJS implicitly looking for index.html as the base template?
There is nothing related to angular here, this is the normal behavior of loading an html page from a web server.
Here is how it works:
When users access your application at the root url (e.x: http://example.com) or any sub directory (http://example.com/public), the index.html is loaded into browser like with normal web applications, then your app.js is run as normal. When the routes are registered and the application is bootstrapped, angular checks the route and loads main.html to be inserted into the container where ng-view is declared.
After digging around, it turns out my AngularJS route requires ngRoute, which is its own module now. After including it, it started to display the correct pages.