I think you are already knew, hosted approaches in SharePoint 2013. There are three types of hosted approaches (SharePoint-Hosted, Provider-Hosted, Auto-Hosted). Though there are similarities as well as differences. Thus there are slightly differences in developing client app part in SharePoint Hosted Model.
This is Step by Step Guide to Create a Client App part.
( If you looked closely you can find out it is referring jQuery 1.6.2 version that is quite old. So if you want you can right click the project and go to NuGet Manager and install new version. )
Simple App Part
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" Language="C#" %> <%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %><%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %><%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <!-- The following tells SharePoint to allow this page to be hosted in an IFrame --><WebPartPages:AllowFraming runat="server" /> <html><head></head><body > <div>Simple Client App Part</div></body></html>
<Content Type="html" Src="~appWebUrl/Pages/AppPart/Simple.aspx?DisplayType=iframe" />
App Part with SharePoint
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" Language="C#" %><%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %><%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %><%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %><!-- The following tells SharePoint to allow this page to be hosted in an IFrame --><WebPartPages:AllowFraming runat="server" /><html><head> <!-- Add your CSS styles to the following file --> <link href="../../Content/App.css" rel="stylesheet" /> <script src="../../Scripts/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script> <script type="text/javascript" src="/_layouts/15/init.js"></script> <%--<script type="text/javascript" src="/_layouts/15/mQuery.js"></script> <script type="text/javascript" src="/_layouts/15/sp.ui.dialog.js"></script>--%> <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script> <script type="text/javascript" src="/_layouts/15/sp.js"></script> <%--<script type="text/javascript" src="/_layouts/15/callout.js"></script>--%> <script src="../../Scripts/App.js"></script> <%--/Yon can write your js here/--%> <script type="text/javascript"> $(document).ready(function () { SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () { // sharePointReady(); Any Code }); }); </script></head><body> </body></html>
Maheshkumar S Tiwari edited Original. Comment: Added tags
nice but need some advance labs. can we open any page here