Include script tag on HTML pages in Ionic

In angularjs we can not include the external <script> tag other than the index.html.

So here a  way by which you can include <script>  in your html page in angularjs.

For example -

Following is the code of the main.html page we want to include the <script>:-

<ion-view view-title="News" hide-back-button="true">

    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>
    <ion-content>
        <a class="twitter-timeline" href="https://twitter.com/" >Tweets </a>
<script>
    !function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
        if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.src = p + "://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);
        }
    }(document, "script", "twitter-wjs");
</script>
    </ion-content>
</ion-view>

which  is not working.

So, what script we want to include on html page, we will include that script in the corresponding controller in the following ways:-

your main.html look like-

<ion-view view-title="News" hide-back-button="true">
    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>
    <ion-content>
        <a class="twitter-timeline" href="https://twitter.com/">Tweets</a>
    </ion-content>
</ion-view>

and your controller.js look like:-

Myapp.controller('MainCtrl', function() {

    !function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
        if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.src = p + "://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);
        }
    }(document, "script", "twitter-wjs");
})

 Now it will be work.

Include menu-bar and back-button on each page in ionic

Hello,

I want to include menu-bar on each and every page in my ionic project, so i include following lines of code in my html page :-

Currently my about.html is look like:-

<ion-view view-title="About Us">
    <ion-nav-bar align-title="center" class="bar-positive header-size">
   
        <ion-nav-back-button class="button-icon icon ion-chevron-left">
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-content class='container-about' scroll="false">
        <div class="text-block">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
        <div class="text-block">
            It is a long established fact that a reader will be distracted by the readable content of a page when
            looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
            of letters, as opposed to using.
        </div>
   
    </ion-content>
</ion-view>

After including the code for menu-bar and back-button on a page in ionic in about.html:-

<ion-view view-title="About Us" hide-back-button="false">
    <ion-nav-bar align-title="center" class="bar-positive header-size">
     <ion-nav-buttons side="left">
            <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
        </ion-nav-buttons>
        <ion-nav-back-button class="button-icon icon ion-chevron-left">
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-content class='container-about' scroll="false">
        <div class="text-block">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
        <div class="text-block">
            It is a long established fact that a reader will be distracted by the readable content of a page when
            looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
            of letters, as opposed to using.
        </div>
   
    </ion-content>
</ion-view>

   

Include an icons in ion-item on left

Hello,

It will be helpful to support icons on the left side for list items, the same way images can be used on the left.

Currently icons are left aligned via the following code 

and your main.html look like:-

 <ion-view view-title="main">
 <ion-content>
<ion-list>
<ion-item class="item-icon-left"> <i class="icon ion-document-text"></i>item-icon-left </ion-item> <ion-item class="item-icon-left"> <i class="icon icon ion-email"></i>email </ion-item> <ion-item class="item-icon-left"> <i class="icon ion-document-text"></i>item-icon-left </ion-item> <ion-item class="item-avatar"> <i class="icon ion-document-text"></i>
document </ion-item> <ion-item class="item-avatar"> <i class="icon ion-document-text"></i>item-avatar </ion-item> <ion-item class="item-avatar"> <i class="icon ion-document-text"></i>item-avatar </ion-item> </ion-list>
</ion-content>
<ion-view>

Include a html file into another html file in angularjs

AngularJS Includes:-

                                                         With AngularJS, you can include HTML files in HTML, by using ngInclude directive in your HTML page. 

ngInclude:- 

                              ngInclude is used for Fetches, compiles and includes an external HTML fragment. 

By default, the template URL is restricted to the same domain and protocol as the application document. But by including ngInclude in a template , we can also use another html in that html.

For example-

After including the two html page in a html page.

your html page  look like this

<body>
<div class="container">  <div ng-include="'project.html'"></div>  <div ng-include="'view.html'"></div></div>
</body>  

where project.html and view.html are two different html, which we are using in desired html page, where we want to use these templates.   

project.html

    <h3>Users</h3><table class="table table-striped">  <thead><tr>    <th>Edit</th>    <th>First Name</th>    <th>Last Name</th>  </tr></thead>  <tbody><tr ng-repeat="user in users">    <td>      <button class="btn" ng-click="editUser(user.id)">        <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit      </button>    </td>    <td>{{ user.fName }}</td>    <td>{{ user.lName }}</td>  </tr></tbody></table>

view.html

<button class="btn btn-success" ng-click="editUser('new')">  <span class="glyphicon glyphicon-user"></span> Create New User</button><hr>
<h3 ng-show="edit">Create New User:</h3><h3 ng-hide="edit">Edit User:</h3>
<form class="form-horizontal"><div class="form-group">  <label class="col-sm-2 control-label">First Name:</label>  <div class="col-sm-10">    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">  </div></div> <div class="form-group">  <label class="col-sm-2 control-label">Last Name:</label>  <div class="col-sm-10">    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">  </div></div><div class="form-group">  <label class="col-sm-2 control-label">Password:</label>  <div class="col-sm-10">    <input type="password" ng-model="passw1" placeholder="Password">  </div></div><div class="form-group">  <label class="col-sm-2 control-label">Repeat:</label>  <div class="col-sm-10">    <input type="password" ng-model="passw2" placeholder="Repeat Password">  </div></div></form>
<hr><button class="btn btn-success" ng-disabled="error || incomplete">  <span class="glyphicon glyphicon-save"></span> Save Changes</button>

Show and hide dropdown menu on mouse hover using CSS

Show and hide dropdown menu on mouse hover using CSS:-

To show and hide dropdown menu on mouse hover, we include the following css in your style.css:-

<style type="text/css">
    ul{
        padding: 0;
        list-style: none;
        background: #f2f2f2;
    }
    ul li{
        display: inline-block;
        position: relative;
        line-height: 21px;
        text-align: left;
    }
    ul li a{
        display: block;
        padding: 8px 25px;
        color: #333;
        text-decoration: none;
    }
    ul li a:hover{
        color: #fff;
        background: #939393;
    }
    ul li ul.dropdown{
        min-width: 125px; /* Set width of the dropdown */
        background: #f2f2f2;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
    }
    ul li:hover ul.dropdown{
        display: block; /* Display the dropdown */
    }
    ul li ul.dropdown li{
        display: block;
    }
</style>