tag:blogger.com,1999:blog-45475742796316973582024-03-05T01:06:15.265-08:00Tutorialshttps://tutoriallk.blogspot.com/Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.comBlogger41125tag:blogger.com,1999:blog-4547574279631697358.post-22866984848068619922016-12-06T00:29:00.002-08:002017-10-28T03:06:00.567-07:00SQL:Reset Row Identity Value<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;">DBCC CHECKIDENT (SYS_ServiceCategory, RESEED, <span style="color: #009999;">0</span>)
</pre>
</div>
Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0tag:blogger.com,1999:blog-4547574279631697358.post-60729238325563628862016-12-06T00:28:00.000-08:002017-10-28T01:56:33.841-07:00SQL:function And Table Update With Temp Table<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #0000aa;">CREATE</span> <span style="color: #0000aa;">FUNCTION</span> getSystemServiceSubCatIdByServiceSubCatId (
@id <span style="color: #00aaaa;">INT</span>
)
<span style="color: #0000aa;">RETURNS</span> <span style="color: #00aaaa;">INT</span>
<span style="color: #0000aa;">AS</span>
<span style="color: #0000aa;">BEGIN</span>
<span style="color: #0000aa;">DECLARE</span> @<span style="color: #0000aa;">sysId</span> <span style="color: #00aaaa;">INT</span> = <span style="color: #009999;">0</span>
<span style="color: #0000aa;">SELECT</span> @<span style="color: #0000aa;">sysId</span> = sys_subcat.Id
<span style="color: #0000aa;">FROM</span> [dbo].[Service] <span style="color: #0000aa;">AS</span> s
<span style="color: #0000aa;">JOIN</span> [dbo].[ServiceSubCategory] <span style="color: #0000aa;">AS</span> ssc
<span style="color: #0000aa;">ON</span> s.ServiceSubCategoryId = ssc.Id
<span style="color: #0000aa;">JOIN</span> [dbo].[SYS_ServiceSubCategory] <span style="color: #0000aa;">AS</span> sys_subcat
<span style="color: #0000aa;">ON</span> ssc.Code = sys_subcat.Code
<span style="color: #0000aa;">WHERE</span> ServiceSubCategoryId = @id
<span style="color: #0000aa;">GROUP</span> <span style="color: #0000aa;">BY</span> sys_subcat.Id
<span style="color: #0000aa;">RETURN</span> @<span style="color: #0000aa;">sysId</span>
<span style="color: #0000aa;">END</span>
<span style="color: #0000aa;">GO</span>
<span style="color: #0000aa;">CREATE</span> <span style="color: #0000aa;">TABLE</span> #tempTable_Service(
Id <span style="color: #00aaaa;">INT</span>,
ServiceId <span style="color: #00aaaa;">INT</span>,
ServiceSubCategoryId <span style="color: #00aaaa;">INT</span>
)
<span style="color: #0000aa;">INSERT</span> <span style="color: #0000aa;">INTO</span> #tempTable_Service
(Id, ServiceId, ServiceSubCategoryId)
<span style="color: #0000aa;">SELECT</span> ROW_NUMBER() OVER (<span style="color: #0000aa;">ORDER</span> <span style="color: #0000aa;">BY</span> Id) <span style="color: #0000aa;">AS</span> Id, Id, ServiceSubCategoryId <span style="color: #0000aa;">FROM</span> [dbo].[Service]
<span style="color: #0000aa;">DECLARE</span> @counter <span style="color: #00aaaa;">INT</span> = <span style="color: #009999;">0</span>
<span style="color: #0000aa;">DECLARE</span> @<span style="color: #0000aa;">count</span> <span style="color: #00aaaa;">INT</span> = <span style="color: #009999;">0</span>
<span style="color: #0000aa;">SELECT</span> @<span style="color: #0000aa;">count</span> = <span style="color: #0000aa;">COUNT</span>(*) <span style="color: #0000aa;">FROM</span> [dbo].[Service]
WHILE @<span style="color: #0000aa;">count</span> > @counter
<span style="color: #0000aa;">BEGIN</span>
<span style="color: #0000aa;">DECLARE</span> @serviceSubCategoryId <span style="color: #00aaaa;">INT</span> = <span style="color: #009999;">0</span>
<span style="color: #0000aa;">DECLARE</span> @serviceId <span style="color: #00aaaa;">INT</span> = <span style="color: #009999;">0</span>
<span style="color: #0000aa;">SET</span> @counter = @counter + <span style="color: #009999;">1</span>
<span style="color: #0000aa;">SELECT</span> @serviceSubCategoryId = ServiceSubCategoryId,
@serviceId = ServiceId
<span style="color: #0000aa;">FROM</span> #tempTable_Service
<span style="color: #0000aa;">WHERE</span> Id = @counter
<span style="color: #0000aa;">DECLARE</span> @sys_serviceSubCategoryId <span style="color: #00aaaa;">INT</span> = <span style="color: #009999;">0</span>
<span style="color: #0000aa;">SELECT</span> @sys_serviceSubCategoryId = [dbo].[getSystemServiceSubCatIdByServiceSubCatId](@serviceSubCategoryId)
<span style="color: #0000aa;">UPDATE</span> [dbo].[Service]
<span style="color: #0000aa;">SET</span> ServiceSubCategoryId = @sys_serviceSubCategoryId
<span style="color: #0000aa;">WHERE</span> Id = @serviceId
<span style="color: #0000aa;">END</span>
<span style="color: #0000aa;">DROP</span> <span style="color: #0000aa;">TABLE</span> #tempTable_Service
<span style="color: #0000aa;">DROP</span> <span style="color: #0000aa;">FUNCTION</span> getSystemServiceSubCatIdByServiceSubCatId
<span style="color: #0000aa;">SELECT</span> b.Name BranchName, s.Name ServiceName <span style="color: #0000aa;">FROM</span> [dbo].[Service] <span style="color: #0000aa;">AS</span> s
<span style="color: #0000aa;">LEFT</span> <span style="color: #0000aa;">JOIN</span> [dbo].[Branch] <span style="color: #0000aa;">AS</span> b
<span style="color: #0000aa;">ON</span> s.BranchId = b.Id
<span style="color: #0000aa;">WHERE</span> s.ServiceSubCategoryId = <span style="color: #009999;">0</span>
<span style="color: #0000aa;">ORDER</span> <span style="color: #0000aa;">BY</span> b.Name, s.Name
</pre>
</td></tr>
</tbody></table>
</div>
Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0tag:blogger.com,1999:blog-4547574279631697358.post-3502944239715505062016-12-06T00:26:00.000-08:002017-10-28T01:57:21.817-07:00SQL:Doing Server Side Pagination Example<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #0000aa;">CREATE</span> <span style="color: #0000aa;">PROCEDURE</span> [dbo].[FingerTips_GetServiceBookingHistoryWithPagination]
@customerId <span style="color: #00aaaa;">INT</span>,
@bookingStatus <span style="color: #00aaaa;">VARCHAR</span>(<span style="color: #009999;">20</span>),
@pageNumber <span style="color: #00aaaa;">INT</span>,
@pageSize <span style="color: #00aaaa;">INT</span>,
@bookingNumber <span style="color: #00aaaa;">VARCHAR</span>(<span style="color: #009999;">100</span>) = <span style="color: #0000aa;">NULL</span>,
@bookingDate <span style="color: #00aaaa;">VARCHAR</span>(<span style="color: #009999;">30</span>) = <span style="color: #0000aa;">NULL</span>,
@branchName <span style="color: #00aaaa;">VARCHAR</span>(<span style="color: #009999;">200</span>) = <span style="color: #0000aa;">NULL</span>,
@serviceName NVARCHAR (<span style="color: #0000aa;">MAX</span>) = <span style="color: #0000aa;">NULL</span>
<span style="color: #0000aa;">AS</span>
<span style="color: #0000aa;">BEGIN</span>
<span style="color: #0000aa;">WITH</span> TempResult <span style="color: #0000aa;">AS</span> (
<span style="color: #0000aa;">SELECT</span> sb.Id,
sb.RegDate,
sb.BookingNo,
sb.DisplayBookingNo,
sb.BookingDate,
sb.BookingStatusChangeDate,
sb.BookingStartTime,
sb.BookingEndTime,
sb.ConfirmationNo,
sb.EmployeeId,
sb.ServiceId,
sb.BranchId,
CONCAT(em.FirstName,<span style="color: #aa5500;">' '</span>,em.LastName) <span style="color: #0000aa;">AS</span> <span style="color: #aa5500;">'Technician'</span>,
em.ImageUrl <span style="color: #0000aa;">AS</span> <span style="color: #aa5500;">'TechnicianImageUrl'</span>,
br.Name <span style="color: #0000aa;">AS</span> <span style="color: #aa5500;">'BranchName'</span>,
se.Name <span style="color: #0000aa;">AS</span> <span style="color: #aa5500;">'ServiceName'</span>,
bs.Name <span style="color: #0000aa;">AS</span> <span style="color: #aa5500;">'BookingStatus'</span>,
bs.Id <span style="color: #0000aa;">AS</span> <span style="color: #aa5500;">'BookingStatusId'</span>
<span style="color: #0000aa;">FROM</span> [dbo].[ServiceBooking] <span style="color: #0000aa;">AS</span> sb
<span style="color: #0000aa;">LEFT</span> <span style="color: #0000aa;">JOIN</span> [dbo].[Employee] <span style="color: #0000aa;">AS</span> em
<span style="color: #0000aa;">ON</span> sb.EmployeeId = em.Id <span style="color: #0000aa;">AND</span>
em.IsActive = <span style="color: #009999;">1</span> <span style="color: #0000aa;">AND</span>
em.IsDelete = <span style="color: #009999;">0</span>
<span style="color: #0000aa;">JOIN</span> [dbo].[Branch] <span style="color: #0000aa;">AS</span> br
<span style="color: #0000aa;">ON</span> sb.BranchId = br.Id <span style="color: #aaaaaa; font-style: italic;">--AND</span>
<span style="color: #aaaaaa; font-style: italic;">--br.IsActive = 1 AND</span>
<span style="color: #aaaaaa; font-style: italic;">--br.IsDelete = 0</span>
<span style="color: #0000aa;">JOIN</span> [dbo].[Service] <span style="color: #0000aa;">AS</span> se
<span style="color: #0000aa;">ON</span> sb.ServiceId = se.Id <span style="color: #0000aa;">AND</span>
se.IsActive = <span style="color: #009999;">1</span> <span style="color: #0000aa;">AND</span>
se.IsDelete = <span style="color: #009999;">0</span>
<span style="color: #0000aa;">JOIN</span> [dbo].[BookingStatus] <span style="color: #0000aa;">AS</span> bs
<span style="color: #0000aa;">ON</span> sb.BookingStatusId = bs.Id <span style="color: #0000aa;">AND</span>
bs.IsActive = <span style="color: #009999;">1</span> <span style="color: #0000aa;">AND</span>
bs.IsDelete = <span style="color: #009999;">0</span>
<span style="color: #0000aa;">WHERE</span> sb.IsActive = <span style="color: #009999;">1</span> <span style="color: #0000aa;">AND</span>
sb.IsDelete = <span style="color: #009999;">0</span> <span style="color: #0000aa;">AND</span>
sb.CustomerId = @customerId <span style="color: #0000aa;">AND</span>
bs.Name = @bookingStatus <span style="color: #0000aa;">AND</span>
(@bookingNumber <span style="color: #0000aa;">IS</span> <span style="color: #0000aa;">NULL</span> <span style="color: #0000aa;">OR</span> sb.DisplayBookingNo <span style="color: #0000aa;">LIKE</span> @bookingNumber + <span style="color: #aa5500;">'%'</span>) <span style="color: #0000aa;">AND</span>
(@bookingDate <span style="color: #0000aa;">IS</span> <span style="color: #0000aa;">NULL</span> <span style="color: #0000aa;">OR</span> sb.BookingDate = @bookingDate) <span style="color: #0000aa;">AND</span>
(@branchName <span style="color: #0000aa;">IS</span> <span style="color: #0000aa;">NULL</span> <span style="color: #0000aa;">OR</span> br.Name <span style="color: #0000aa;">LIKE</span> @branchName + <span style="color: #aa5500;">'%'</span>) <span style="color: #0000aa;">AND</span>
(@serviceName <span style="color: #0000aa;">IS</span> <span style="color: #0000aa;">NULL</span> <span style="color: #0000aa;">OR</span> se.Name <span style="color: #0000aa;">LIKE</span> @serviceName + <span style="color: #aa5500;">'%'</span>)
), TempCount <span style="color: #0000aa;">AS</span> (
<span style="color: #0000aa;">SELECT</span> <span style="color: #0000aa;">COUNT</span>(*) <span style="color: #0000aa;">AS</span> MaxRowCount <span style="color: #0000aa;">FROM</span> TempResult
)
<span style="color: #0000aa;">SELECT</span> * <span style="color: #0000aa;">FROM</span> TempResult, TempCount
<span style="color: #0000aa;">ORDER</span> <span style="color: #0000aa;">BY</span> TempResult.BookingStatusChangeDate <span style="color: #0000aa;">DESC</span>
<span style="color: #0000aa;">OFFSET</span> (@pageNumber - <span style="color: #009999;">1</span>) * @pageSize <span style="color: #0000aa;">ROWS</span>
<span style="color: #0000aa;">FETCH</span> <span style="color: #0000aa;">NEXT</span> @pageSize <span style="color: #0000aa;">ROWS</span> <span style="color: #0000aa;">ONLY</span>
<span style="color: #0000aa;">END</span>
</pre>
</td></tr>
</tbody></table>
</div>
Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0tag:blogger.com,1999:blog-4547574279631697358.post-23364846780651983172016-12-05T23:40:00.002-08:002017-10-28T00:40:34.638-07:00Ionic:fix icon and splash screen issues (ios and android) (vs2015)1. Add icon.png (1024 * 1024) and splash.png (2208 * 2208) into resources folder in ionic project<br />
2. Go to project root<br />
3. Open the command promt from the root (shift + right click on mounse then open command window here (windows))<br />
4. Run the following command<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><!-- HTML generated using hilite.me --><br />
<div style="background: #202020; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #d0d0d0;">ionic</span> <span style="color: #d0d0d0;">resources</span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
5. It will add the relavant icons and splash screens to specific folders in project<br />
6. Also it will update the config.xml<br />
7. Then find the platform name="ios" related icon and splash screen paths and change if backward slash (\) are there<br />
to forward slash (/). This is only done for ios, in Android backward slash will work fine.Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0tag:blogger.com,1999:blog-4547574279631697358.post-89142462175255858102016-12-05T23:39:00.005-08:002017-10-28T00:52:57.174-07:00Ionic:fix error code 127 010_add_platform_class.js<br />
# check if the file has ^M line endings<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #202020; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #d0d0d0;">cat</span> <span style="color: #d0d0d0;">-v</span> <span style="color: #d0d0d0;">FILE-NAME-WITH-ERROR</span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
# fix the file<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #202020; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #d0d0d0;">tr</span> <span style="color: #d0d0d0;">-d</span> <span style="color: #ed9d13;">'\r'</span> <span style="color: #d0d0d0;"><</span> <span style="color: #d0d0d0;">FILE-NAME-WITH-ERROR</span> <span style="color: #d0d0d0;">></span> <span style="color: #d0d0d0;">FILE-NAME-WITH-ERROR.fix</span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
# check if problem fixed in resulting file from above<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #202020; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #d0d0d0;">cat</span> <span style="color: #d0d0d0;">-v</span> <span style="color: #d0d0d0;">FILE-NAME-WITH-ERROR.fix</span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
# overwrite original file with fixed file<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #202020; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #d0d0d0;">mv</span> <span style="color: #d0d0d0;">FILE-NAME-WITH-ERROR.fix</span> <span style="color: #d0d0d0;">FILE-NAME-WITH-ERROR</span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
Resources:<br />
<a href="https://forum.ionicframework.com/t/error-hook-failed-with-error-code-127/12236">https://forum.ionicframework.com/t/error-hook-failed-with-error-code-127/12236</a>Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0tag:blogger.com,1999:blog-4547574279631697358.post-82997814070827318412016-12-05T23:39:00.002-08:002017-10-28T00:59:17.522-07:00Ionic:fix cannot read $valid of undefined in form validation<!-- HTML generated using hilite.me --><br />
<div style="background: #202020; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #24909d;">Error</span><span style="color: #d0d0d0;">:</span> <span style="color: #d0d0d0;">ionic.bundle.js:</span><span style="color: #3677a9;">21162</span> <span style="color: #d0d0d0;">TypeError:</span> <span style="color: #d0d0d0;">Cannot</span> <span style="color: #d0d0d0;">read</span> <span style="color: #d0d0d0;">property</span> <span style="color: #ed9d13;">'$valid'</span> <span style="color: #d0d0d0;">of</span> <span style="color: #6ab825; font-weight: bold;">undefined</span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<b><span style="font-size: x-large;">How to fix:</span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"><br />
</span><b><span style="font-size: large;"> Use<span class="Apple-tab-span" style="white-space: pre;"> </span></span></b><!-- HTML generated using hilite.me --><br />
<div style="background: #202020; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #d0d0d0;">$scope.$$childTail.yourFormName.$valid</span>
</pre>
</div>
<b><span style="font-size: large;">Instead-of <span class="Apple-tab-span" style="white-space: pre;"> </span></span></b><!-- HTML generated using hilite.me --><br />
<div style="background: #202020; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #d0d0d0;">$scope.yourFormName.$valid</span>
</pre>
</div>
Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0tag:blogger.com,1999:blog-4547574279631697358.post-70729927109848275572016-12-05T23:38:00.002-08:002017-10-28T01:00:36.135-07:00Ionic:fix map not load in deviceAdd below meta tag to header<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #202020; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #6ab825; font-weight: bold;"><meta</span> <span style="color: #bbbbbb;">http-equiv=</span><span style="color: #ed9d13;">"Content-Security-Policy"</span> <span style="color: #bbbbbb;">content=</span><span style="color: #ed9d13;">"default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *"</span><span style="color: #6ab825; font-weight: bold;">></span>
</pre>
</div>
<br />
<br />
give as "*" to Domain Access URI of in config.xml under 'Common' sectionTutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0tag:blogger.com,1999:blog-4547574279631697358.post-36165228059831413922016-12-05T23:36:00.001-08:002016-12-05T23:51:20.466-08:00Ionic:fix ionic build Syntax Error Unexpected token 1This issue is caused because the default build.json has a BOM that the NodeJS JSON parser doesn't like. You can fix this in a number of ways, but the simplest is to open the file using Visual Studio's Binary editor.<br />
<br />
Right-click build.json, select "Open With...", then choose the "Binary Editor" from the list. You should see something like this:<br />
<br />
resourc link:<br />
http://stackoverflow.com/questions/32352280/cannot-build-signed-android-package-through-visual-studio-cordova<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKmvalFVG8UkSXgWQnn0L4Fxb6VKrFmcXibuP3AalvpvrIW_lmWMlZsPSMGslU-ZVDErIaPrVAgCnCmtijsPGgPKpFA8Th8Tqpf_rflpMc1CfJCD65ploCcu8BhIFZvVtXIzKUvJsUwRQ/s1600/Untitled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="154" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKmvalFVG8UkSXgWQnn0L4Fxb6VKrFmcXibuP3AalvpvrIW_lmWMlZsPSMGslU-ZVDErIaPrVAgCnCmtijsPGgPKpFA8Th8Tqpf_rflpMc1CfJCD65ploCcu8BhIFZvVtXIzKUvJsUwRQ/s320/Untitled.png" width="320" /></a></div>
Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0tag:blogger.com,1999:blog-4547574279631697358.post-10249689120148662912016-12-05T23:35:00.000-08:002017-10-28T01:01:37.747-07:00Ionic:add plugins to IonicAdd ng-cordova plugins<br />
e.g. network<br />
<br />
plugins link : <a href="https://github.com/apache/cordova-plugin-network-information">https://github.com/apache/cordova-plugin-network-information</a><br />
<br />
FYI: <a href="https://github.com/driftyco/ng-cordova/blob/master/src/plugins/network.js">https://github.com/driftyco/ng-cordova/blob/master/src/plugins/network.js</a><br />
<br />
How to install plugin to VS 2015<br />
<a href="https://taco.visualstudio.com/en-us/docs/manage-plugins/">https://taco.visualstudio.com/en-us/docs/manage-plugins/</a><br />
<br />
Process<br />
<a href="http://www.nikola-breznjak.com/blog/codeproject/check-network-information-change-with-ionic-famework/">http://www.nikola-breznjak.com/blog/codeproject/check-network-information-change-with-ionic-famework/</a>Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0tag:blogger.com,1999:blog-4547574279631697358.post-46934544163495631622016-12-05T23:32:00.001-08:002016-12-05T23:52:38.300-08:00Fixed wamp server localhost issueFixed localhost<br />
Not Found<br />
HTTP Error 404. The requested resource is not found.<br />
<br />
go to httpd.conf<br />
go to line 62<br />
change<br />
<br />
Listen 0.0.0.0:80<br />
Listen [::0]:80<br />
<br />
to<br />
<br />
Listen 0.0.0.0:8080<br />
Listen [::0]:8080<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkAsmLBcE_Cf49Ce5XV9xzCaHpjUXvcZBUveM3qBOBEfwXIirfq5t0dzA4XeiLL1qRjw5GcdKc4jJv1K4C8FRx3NFyaDvEOobp5huW1Lt2I6-y5wbWrElNZStrekUDB5EZUBPKhYl0l6M/s1600/Untitled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="289" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkAsmLBcE_Cf49Ce5XV9xzCaHpjUXvcZBUveM3qBOBEfwXIirfq5t0dzA4XeiLL1qRjw5GcdKc4jJv1K4C8FRx3NFyaDvEOobp5huW1Lt2I6-y5wbWrElNZStrekUDB5EZUBPKhYl0l6M/s320/Untitled.png" width="320" /></a></div>
Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0tag:blogger.com,1999:blog-4547574279631697358.post-832644611528857542016-12-05T23:29:00.004-08:002017-10-28T01:59:15.824-07:00Angularjs:window resize identify directive<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: black; font-weight: bold;">.</span><span style="color: black;">directive</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'resize'</span><span style="color: black; font-weight: bold;">,</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">(</span><span style="color: black;">$window</span><span style="color: black; font-weight: bold;">)</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">(</span><span style="color: black;">scope</span><span style="color: black; font-weight: bold;">,</span> <span style="color: black;">element</span><span style="color: black; font-weight: bold;">)</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">w</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">angular</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">element</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">$window</span><span style="color: black; font-weight: bold;">);</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">getWindowDimensions</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">()</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black; font-weight: bold;">{</span> <span style="color: #4e9a06;">'h'</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: black;">w</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">height</span><span style="color: black; font-weight: bold;">(),</span> <span style="color: #4e9a06;">'w'</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: black;">w</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">width</span><span style="color: black; font-weight: bold;">()</span> <span style="color: black; font-weight: bold;">};</span>
<span style="color: black; font-weight: bold;">};</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">$watch</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">getWindowDimensions</span><span style="color: black; font-weight: bold;">,</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">(</span><span style="color: black;">newValue</span><span style="color: black; font-weight: bold;">,</span> <span style="color: black;">oldValue</span><span style="color: black; font-weight: bold;">)</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">windowHeight</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">newValue</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">h</span><span style="color: black; font-weight: bold;">;</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">windowWidth</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">newValue</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">w</span><span style="color: black; font-weight: bold;">;</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">style</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">()</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: #4e9a06;">'height'</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: black; font-weight: bold;">(</span><span style="color: black;">newValue</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">h</span> <span style="color: #ce5c00; font-weight: bold;">-</span> <span style="color: #0000cf; font-weight: bold;">100</span><span style="color: black; font-weight: bold;">)</span> <span style="color: #ce5c00; font-weight: bold;">+</span> <span style="color: #4e9a06;">'px'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: #4e9a06;">'width'</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: black; font-weight: bold;">(</span><span style="color: black;">newValue</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">w</span> <span style="color: #ce5c00; font-weight: bold;">-</span> <span style="color: #0000cf; font-weight: bold;">100</span><span style="color: black; font-weight: bold;">)</span> <span style="color: #ce5c00; font-weight: bold;">+</span> <span style="color: #4e9a06;">'px'</span>
<span style="color: black; font-weight: bold;">};</span>
<span style="color: black; font-weight: bold;">};</span>
<span style="color: black; font-weight: bold;">},</span> <span style="color: #204a87; font-weight: bold;">true</span><span style="color: black; font-weight: bold;">);</span>
<span style="color: black;">w</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">bind</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'resize'</span><span style="color: black; font-weight: bold;">,</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">()</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">$apply</span><span style="color: black; font-weight: bold;">();</span>
<span style="color: black; font-weight: bold;">});</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">})</span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<b><i>Resources:</i></b><br />
<a href="http://jsfiddle.net/zbjLh/2/">http://jsfiddle.net/zbjLh/2/</a>Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com1tag:blogger.com,1999:blog-4547574279631697358.post-64580572682372576432016-12-05T19:02:00.000-08:002017-10-28T02:03:16.203-07:00Angularjs:$templateCache<b><span style="font-size: x-large;">$templateCache</span></b><br />
<b><span style="font-size: large;"><br />
</span></b> <span style="font-size: large;">.html</span><br />
<!-- HTML generated using hilite.me --><br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #8f5902; font-style: italic;"><!DOCTYPE html></span>
<span style="color: #204a87; font-weight: bold;"><html></span>
<span style="color: #204a87; font-weight: bold;"><head</span> <span style="color: #c4a000;">lang=</span><span style="color: #4e9a06;">"en"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><meta</span> <span style="color: #c4a000;">charset=</span><span style="color: #4e9a06;">"UTF-8"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><title></span>AngularJs Training<span style="color: #204a87; font-weight: bold;"></title></span>
<span style="color: #204a87; font-weight: bold;"><link</span> <span style="color: #c4a000;">rel=</span><span style="color: #4e9a06;">"stylesheet"</span> <span style="color: #c4a000;">href=</span><span style="color: #4e9a06;">"lib/css/foundation/foundation.css"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><link</span> <span style="color: #c4a000;">rel=</span><span style="color: #4e9a06;">"stylesheet"</span> <span style="color: #c4a000;">href=</span><span style="color: #4e9a06;">"lib/css/style.css"</span><span style="color: #204a87; font-weight: bold;">/></span>
<span style="color: #204a87; font-weight: bold;"></head></span>
<span style="color: #204a87; font-weight: bold;"><body></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-app=</span><span style="color: #4e9a06;">"app"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><product></span>
<span style="color: #204a87; font-weight: bold;"><div></span> Rs. 234.00<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"></product></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"lib/angularjs/angular.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #8f5902; font-style: italic;"><!--<script type="text/javascript" src="app.js"></script>--></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"controllers/main.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #204a87; font-weight: bold;"></body></span>
<span style="color: #204a87; font-weight: bold;"></html></span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<span style="font-size: large;">main.js</span><br />
<!-- HTML generated using hilite.me --><br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">app</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">angular</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">module</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'app'</span><span style="color: black; font-weight: bold;">,</span> <span style="color: black; font-weight: bold;">[])</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">run</span><span style="color: black; font-weight: bold;">(</span><span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">$templateCache</span><span style="color: black; font-weight: bold;">){</span>
<span style="color: #8f5902; font-style: italic;">//Templates could be added to $templateCache manually in following way</span>
<span style="color: #8f5902; font-style: italic;">//($templateCache.put(key,template))</span>
<span style="color: black;">$templateCache</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">put</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'price.html'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: #4e9a06;">'<div class="button" ng-click="showPrice()">{{btnName}} Price</div>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<div ng-show="isShow">Price: <ng-transclude></ng-transclude> </div>'</span><span style="color: black; font-weight: bold;">)</span>
<span style="color: black; font-weight: bold;">})</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">directive</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'product'</span><span style="color: black; font-weight: bold;">,</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">(</span><span style="color: black;">$templateCache</span><span style="color: black; font-weight: bold;">)</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: #8f5902; font-style: italic;">//Could be get the template from the $templateCache by,</span>
<span style="color: #8f5902; font-style: italic;">//$templateCache.get('price.html')</span>
<span style="color: black;">console</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">log</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">$templateCache</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">get</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'price.html'</span><span style="color: black; font-weight: bold;">))</span> <span style="color: #8f5902; font-style: italic;">// this will show the template in as a log</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">restrict</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'E'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">scope</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: black; font-weight: bold;">{},</span>
<span style="color: black;">transclude</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #204a87; font-weight: bold;">true</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">templateUrl</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'price.html'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">link</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">(</span><span style="color: black;">scope</span><span style="color: black; font-weight: bold;">)</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">btnName</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #4e9a06;">'Show'</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">isShow</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">false</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">showPrice</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">()</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">isShow</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #ce5c00; font-weight: bold;">!</span><span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">isShow</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">btnName</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">isShow</span> <span style="color: #ce5c00; font-weight: bold;">?</span> <span style="color: #4e9a06;">'Hide'</span> <span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'Show'</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">})</span>
</pre>
</td></tr>
</tbody></table>
</div>
Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0tag:blogger.com,1999:blog-4547574279631697358.post-54013098489786579972016-12-05T19:01:00.002-08:002017-10-28T02:15:26.624-07:00Angularjs:templateUrl<span style="font-size: x-large;"><b>templateUrl</b></span><br />
<br />
<!-- HTML generated using hilite.me --><span style="font-size: large;">.html</span><br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #8f5902; font-style: italic;"><!DOCTYPE html></span>
<span style="color: #204a87; font-weight: bold;"><html></span>
<span style="color: #204a87; font-weight: bold;"><head</span> <span style="color: #c4a000;">lang=</span><span style="color: #4e9a06;">"en"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><meta</span> <span style="color: #c4a000;">charset=</span><span style="color: #4e9a06;">"UTF-8"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><title></span>AngularJs Training<span style="color: #204a87; font-weight: bold;"></title></span>
<span style="color: #204a87; font-weight: bold;"><link</span> <span style="color: #c4a000;">rel=</span><span style="color: #4e9a06;">"stylesheet"</span> <span style="color: #c4a000;">href=</span><span style="color: #4e9a06;">"lib/css/foundation/foundation.css"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><link</span> <span style="color: #c4a000;">rel=</span><span style="color: #4e9a06;">"stylesheet"</span> <span style="color: #c4a000;">href=</span><span style="color: #4e9a06;">"lib/css/style.css"</span><span style="color: #204a87; font-weight: bold;">/></span>
<span style="color: #204a87; font-weight: bold;"></head></span>
<span style="color: #204a87; font-weight: bold;"><body></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-app=</span><span style="color: #4e9a06;">"app"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/ng-template"</span> <span style="color: #c4a000;">id=</span><span style="color: #4e9a06;">"price.html"</span><span style="color: #204a87; font-weight: bold;">></span></pre>
<pre style="line-height: 125%; margin: 0;"><span style="color: #ce5c00; font-weight: bold;"><</span><span style="color: black;">div</span> <span style="color: #204a87; font-weight: bold;">class</span><span style="color: #ce5c00; font-weight: bold;">=</span><span style="color: #4e9a06;">"button"</span> <span style="color: black;">ng</span><span style="color: #ce5c00; font-weight: bold;">-</span><span style="color: black;">click</span><span style="color: #ce5c00; font-weight: bold;">=</span><span style="color: #4e9a06;">"showPrice()"</span><span style="color: #ce5c00; font-weight: bold;">></span><span style="color: black; font-weight: bold;">{{</span><span style="color: black;">btnName</span><span style="color: black; font-weight: bold;">}}</span> <span style="color: black;">Price</span> <span style="color: #ce5c00; font-weight: bold;"><</span><span style="border: 1px solid #ef2929; color: #a40000;">/div></span>
<span style="color: #ce5c00; font-weight: bold;"><</span><span style="color: black;">div</span> <span style="color: black;">ng</span><span style="color: #ce5c00; font-weight: bold;">-</span><span style="color: black;">show</span><span style="color: #ce5c00; font-weight: bold;">=</span><span style="color: #4e9a06;">"isShow"</span><span style="color: #ce5c00; font-weight: bold;">></span> <span style="color: black;">Price</span><span style="color: #ce5c00; font-weight: bold;">:</span>
<span style="color: #ce5c00; font-weight: bold;"><</span><span style="color: black;">ng</span><span style="color: #ce5c00; font-weight: bold;">-</span><span style="color: black;">transclude</span><span style="color: #ce5c00; font-weight: bold;">><</span><span style="border: 1px solid #ef2929; color: #a40000;">/ng-transclude></span>
<span style="color: #ce5c00; font-weight: bold;"><</span><span style="border: 1px solid #ef2929; color: #a40000;">/div></span>
<span style="color: #204a87; font-weight: bold;"></script></span>
<span style="color: #204a87; font-weight: bold;"><product></span>
<span style="color: #204a87; font-weight: bold;"><div></span>Rs 235.00<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"></product></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"lib/angularjs/angular.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #8f5902; font-style: italic;"><!--<script type="text/javascript" src="app.js"></script>--></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"controllers/main.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #204a87; font-weight: bold;"></body></span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<span style="font-size: large;">main.js</span><br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">app</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">angular</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">module</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'app'</span><span style="color: black; font-weight: bold;">,</span> <span style="color: black; font-weight: bold;">[])</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">directive</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'product'</span><span style="color: black; font-weight: bold;">,</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">()</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">restrict</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'E'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">scope</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: black; font-weight: bold;">{},</span>
<span style="color: black;">transclude</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #204a87; font-weight: bold;">true</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: #8f5902; font-style: italic;">// Templates could be put into separate html file and refer as below</span>
<span style="color: #8f5902; font-style: italic;">//templateUrl:'templates/price.html'</span>
<span style="color: #8f5902; font-style: italic;">//If test this, comment the following lines of index.html</span>
<span style="color: #8f5902; font-style: italic;">/*<script type="text/ng-template" id="price.html"></span>
<span style="color: #8f5902; font-style: italic;"> <div class="button" ng-click="showPrice()">{{btnName}} Price</div></span>
<span style="color: #8f5902; font-style: italic;"> <div ng-show="isShow">Price:</span>
<span style="color: #8f5902; font-style: italic;"> <ng-transclude></ng-transclude></span>
<span style="color: #8f5902; font-style: italic;"> </div></span>
<span style="color: #8f5902; font-style: italic;"> </script></span>
<span style="color: #8f5902; font-style: italic;"> */</span>
<span style="color: black;">templateUrl</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'price.html'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">link</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">(</span><span style="color: black;">scope</span><span style="color: black; font-weight: bold;">)</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">btnName</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #4e9a06;">'Show'</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">isShow</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">false</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">showPrice</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">()</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">isShow</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #ce5c00; font-weight: bold;">!</span><span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">isShow</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">btnName</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">isShow</span> <span style="color: #ce5c00; font-weight: bold;">?</span> <span style="color: #4e9a06;">'Hide'</span> <span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'Show'</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">})</span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0tag:blogger.com,1999:blog-4547574279631697358.post-60404714987002970382016-12-05T19:00:00.003-08:002017-10-28T02:17:46.731-07:00Angularjs:Using angular.element<span style="font-size: x-large;"><b>Using angular.element</b></span><br />
<span style="font-size: large;"><br />
</span> <span style="font-size: large;">.html</span><br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #8f5902; font-style: italic;"><!DOCTYPE html></span>
<span style="color: #204a87; font-weight: bold;"><html></span>
<span style="color: #204a87; font-weight: bold;"><head</span> <span style="color: #c4a000;">lang=</span><span style="color: #4e9a06;">"en"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><meta</span> <span style="color: #c4a000;">charset=</span><span style="color: #4e9a06;">"UTF-8"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><title></span>AngularJs Traini<span style="color: #204a87; font-weight: bold;"></title></span>
<span style="color: #204a87; font-weight: bold;"><link</span> <span style="color: #c4a000;">rel=</span><span style="color: #4e9a06;">"stylesheet"</span> <span style="color: #c4a000;">href=</span><span style="color: #4e9a06;">"lib/css/foundation/foundation.css"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><link</span> <span style="color: #c4a000;">rel=</span><span style="color: #4e9a06;">"stylesheet"</span> <span style="color: #c4a000;">href=</span><span style="color: #4e9a06;">"lib/css/style.css"</span><span style="color: #204a87; font-weight: bold;">/></span>
<span style="color: #204a87; font-weight: bold;"></head></span>
<span style="color: #204a87; font-weight: bold;"><body></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-app=</span><span style="color: #4e9a06;">"app"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><password</span><span style="color: #c4a000;">-check</span><span style="color: #204a87; font-weight: bold;">><password</span><span style="color: #c4a000;">-check</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"lib/angularjs/angular.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #8f5902; font-style: italic;"><!--<script type="text/javascript" src="app.js"></script>--></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"controllers/main.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #204a87; font-weight: bold;"></body></span>
<span style="color: #204a87; font-weight: bold;"></html></span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<span style="font-size: large;">main.js</span><br />
<!-- HTML generated using hilite.me --><br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">app</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">angular</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">module</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'app'</span><span style="color: black; font-weight: bold;">,[])</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">directive</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'passwordCheck'</span><span style="color: black; font-weight: bold;">,</span><span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(){</span>
<span style="color: #8f5902; font-style: italic;">// if want to use ng-if use like this</span>
<span style="color: #8f5902; font-style: italic;">// '<div> <span ng-if="password.length > 0">{{message}}</span></div></span>
<span style="color: #8f5902; font-style: italic;">// because of it does not change the classes when use like,</span>
<span style="color: #8f5902; font-style: italic;">// '<div ng-if="password.length > 0"> {{message}}</div></span>
<span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">validationElm</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">angular</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">element</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'<div ng-show="password.length > 0"> {{message}}</div>'</span><span style="color: black; font-weight: bold;">);</span>
<span style="color: #204a87; font-weight: bold;">this</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">linkFun</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">(</span><span style="color: black;">scope</span><span style="color: black; font-weight: bold;">)</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">password</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #4e9a06;">''</span><span style="color: black; font-weight: bold;">;</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">$watch</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'password'</span><span style="color: black; font-weight: bold;">,</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">(</span><span style="color: black;">password</span><span style="color: black; font-weight: bold;">)</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: #204a87; font-weight: bold;">if</span> <span style="color: black; font-weight: bold;">(</span><span style="color: black;">password</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">length</span> <span style="color: #ce5c00; font-weight: bold;"><</span> <span style="color: #0000cf; font-weight: bold;">5</span><span style="color: black; font-weight: bold;">)</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">validationElm</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">removeClass</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'normalpassword'</span><span style="color: black; font-weight: bold;">)</span>
<span style="color: black;">validationElm</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">removeClass</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'strongpassword'</span><span style="color: black; font-weight: bold;">)</span>
<span style="color: black;">validationElm</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">addClass</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'weekpassword'</span><span style="color: black; font-weight: bold;">)</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">message</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #4e9a06;">'week'</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: #204a87; font-weight: bold;">else</span> <span style="color: #204a87; font-weight: bold;">if</span> <span style="color: black; font-weight: bold;">(</span><span style="color: black;">password</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">length</span> <span style="color: #ce5c00; font-weight: bold;"><</span> <span style="color: #0000cf; font-weight: bold;">7</span><span style="color: black; font-weight: bold;">)</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">validationElm</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">removeClass</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'strongpassword'</span><span style="color: black; font-weight: bold;">)</span>
<span style="color: black;">validationElm</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">addClass</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'normalpassword'</span><span style="color: black; font-weight: bold;">)</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">message</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #4e9a06;">'normal'</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: #204a87; font-weight: bold;">else</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">validationElm</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">addClass</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'strongpassword'</span><span style="color: black; font-weight: bold;">)</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">message</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #4e9a06;">'strong'</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">})</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">restrict</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'E'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">replace</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #204a87; font-weight: bold;">true</span><span style="color: black; font-weight: bold;">,</span> <span style="color: #8f5902; font-style: italic;">// remove the <password-check> element from html DOM</span>
<span style="color: black;">scope</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: black; font-weight: bold;">{},</span>
<span style="color: black;">template</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'<div>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<div><input type="password" ng-model="password"/></div>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'</div>'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">compile</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">(</span><span style="color: black;">tElm</span><span style="color: black; font-weight: bold;">)</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">tElm</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">append</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">validationElm</span><span style="color: black; font-weight: bold;">);</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black;">linkFun</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">})</span>
<span style="color: #8f5902; font-style: italic;">/*</span>
<span style="color: #8f5902; font-style: italic;">app.directive('passwordCheck',function(){</span>
<span style="color: #8f5902; font-style: italic;"> return {</span>
<span style="color: #8f5902; font-style: italic;"> restrict: 'E',</span>
<span style="color: #8f5902; font-style: italic;"> replace:true, // remove the <password-check> element from html DOM</span>
<span style="color: #8f5902; font-style: italic;"> scope:{},</span>
<span style="color: #8f5902; font-style: italic;"> template:'<div>' +</span>
<span style="color: #8f5902; font-style: italic;"> '<div><input type="password" ng-model="password"/></div>' +</span>
<span style="color: #8f5902; font-style: italic;"> '<div ng-if="password.length > 0">{{message}}</div>' +</span>
<span style="color: #8f5902; font-style: italic;"> '</div>',</span>
<span style="color: #8f5902; font-style: italic;"> link:function(scope, element){</span>
<span style="color: #8f5902; font-style: italic;"> scope.$watch('password',function(password){</span>
<span style="color: #8f5902; font-style: italic;"> if(password.length < 5){</span>
<span style="color: #8f5902; font-style: italic;"> element.children(1).removeClass('normalpassword')</span>
<span style="color: #8f5902; font-style: italic;"> element.children(1).removeClass('strongpassword')</span>
<span style="color: #8f5902; font-style: italic;"> element.children(1).addClass('weekpassword')</span>
<span style="color: #8f5902; font-style: italic;"> scope.message = 'week'</span>
<span style="color: #8f5902; font-style: italic;"> }</span>
<span style="color: #8f5902; font-style: italic;"> else if(password.length < 7 ){</span>
<span style="color: #8f5902; font-style: italic;"> element.children(1).removeClass('strongpassword')</span>
<span style="color: #8f5902; font-style: italic;"> element.children(1).addClass('normalpassword')</span>
<span style="color: #8f5902; font-style: italic;"> scope.message = 'normal'</span>
<span style="color: #8f5902; font-style: italic;"> }</span>
<span style="color: #8f5902; font-style: italic;"> else{</span>
<span style="color: #8f5902; font-style: italic;"> element.children(1).addClass('strongpassword')</span>
<span style="color: #8f5902; font-style: italic;"> scope.message = 'strong'</span>
<span style="color: #8f5902; font-style: italic;"> }</span>
<span style="color: #8f5902; font-style: italic;"> })</span>
<span style="color: #8f5902; font-style: italic;"> }</span>
<span style="color: #8f5902; font-style: italic;"> }</span>
<span style="color: #8f5902; font-style: italic;">})*/</span>
</pre>
</td></tr>
</tbody></table>
</div>
Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0tag:blogger.com,1999:blog-4547574279631697358.post-46192255901793788872016-12-05T19:00:00.000-08:002017-10-28T02:18:02.067-07:00Angularjs:Transclude review<span style="font-size: x-large;"><b>Transclude review</b></span><br />
<br />
<span style="font-size: large;">.html</span><br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #8f5902; font-style: italic;"><!DOCTYPE html></span>
<span style="color: #204a87; font-weight: bold;"><html></span>
<span style="color: #204a87; font-weight: bold;"><head</span> <span style="color: #c4a000;">lang=</span><span style="color: #4e9a06;">"en"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><meta</span> <span style="color: #c4a000;">charset=</span><span style="color: #4e9a06;">"UTF-8"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><title></span>AngularJs Training<span style="color: #204a87; font-weight: bold;"></title></span>
<span style="color: #204a87; font-weight: bold;"><link</span> <span style="color: #c4a000;">rel=</span><span style="color: #4e9a06;">"stylesheet"</span> <span style="color: #c4a000;">href=</span><span style="color: #4e9a06;">"lib/foundation/foundation.css"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"></head></span>
<span style="color: #204a87; font-weight: bold;"><body></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-app=</span><span style="color: #4e9a06;">"animalApp"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">class=</span><span style="color: #4e9a06;">"lable"</span><span style="color: #204a87; font-weight: bold;">></span>Animal Name:
<span style="color: #204a87; font-weight: bold;"><input</span> <span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text"</span> <span style="color: #c4a000;">ng-model=</span><span style="color: #4e9a06;">"animal.name"</span><span style="color: #204a87; font-weight: bold;">/></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">class=</span><span style="color: #4e9a06;">"lable"</span><span style="color: #204a87; font-weight: bold;">></span>Animal Discription:
<span style="color: #204a87; font-weight: bold;"><input</span> <span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text"</span> <span style="color: #c4a000;">ng-model=</span><span style="color: #4e9a06;">"animal.discrip"</span><span style="color: #204a87; font-weight: bold;">/></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"><animal</span> <span style="color: #c4a000;">animal-name=</span><span style="color: #4e9a06;">"animal.name"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><h2></span>Discription: {{animal.discrip}}<span style="color: #204a87; font-weight: bold;"></h2></span>
<span style="color: #204a87; font-weight: bold;"></animal></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"lib/angularjs/angular.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #8f5902; font-style: italic;"><!--<script type="text/javascript" src="app.js"></script>--></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"controllers/main.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #204a87; font-weight: bold;"></body></span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<span style="font-size: large;">main.js</span><br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">app</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">angular</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">module</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'animalApp'</span><span style="color: black; font-weight: bold;">,</span> <span style="color: black; font-weight: bold;">[])</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">directive</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'animal'</span><span style="color: black; font-weight: bold;">,</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">()</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">rescrict</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'E'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">scope</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">animalName</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'='</span>
<span style="color: black; font-weight: bold;">},</span>
<span style="color: black;">transclude</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #204a87; font-weight: bold;">true</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">template</span><span style="color: #ce5c00; font-weight: bold;">:</span>
<span style="color: #4e9a06;">'<div class="button" ng-click="showInfo()">{{buttonName}}info <lable ng-if="animalName.length > 0">about</lable> {{animalName}}</div>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<br/>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<div ng-if="isShow"><h2><ng-transclude></ng-transclude></h2></div>'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">link</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">(</span><span style="color: black;">scope</span><span style="color: black; font-weight: bold;">)</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">buttonName</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #4e9a06;">'Show '</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">isShow</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">false</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">showInfo</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">()</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">isShow</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #ce5c00; font-weight: bold;">!</span><span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">isShow</span><span style="color: black; font-weight: bold;">;</span>
<span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">buttonName</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">isShow</span> <span style="color: #ce5c00; font-weight: bold;">?</span> <span style="color: #4e9a06;">'Hide '</span> <span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'Show '</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">})</span>
</pre>
</td></tr>
</tbody></table>
</div>
Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com2tag:blogger.com,1999:blog-4547574279631697358.post-5815830916515255302016-12-05T18:59:00.002-08:002017-10-28T02:20:38.504-07:00Angularjs:Code organization example<b><span style="font-size: x-large;">Code organization example</span></b><br />
<span style="font-size: large;"><br /></span>
<!-- HTML generated using hilite.me --><span style="font-size: large;">.html</span><br />
<br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #8f5902; font-style: italic;"><!DOCTYPE html></span>
<span style="color: #204a87; font-weight: bold;"><html></span>
<span style="color: #204a87; font-weight: bold;"><head</span> <span style="color: #c4a000;">lang=</span><span style="color: #4e9a06;">"en"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><meta</span> <span style="color: #c4a000;">charset=</span><span style="color: #4e9a06;">"UTF-8"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><title></span>AngularJs Training<span style="color: #204a87; font-weight: bold;"></title></span>
<span style="color: #204a87; font-weight: bold;"><link</span> <span style="color: #c4a000;">rel=</span><span style="color: #4e9a06;">"stylesheet"</span> <span style="color: #c4a000;">href=</span><span style="color: #4e9a06;">"lib/foundation/foundation.css"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"></head></span>
<span style="color: #204a87; font-weight: bold;"><body></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-app=</span><span style="color: #4e9a06;">"animalApp"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-controller=</span><span style="color: #4e9a06;">"catCtrl"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><cat</span><span style="color: #c4a000;">-lable</span><span style="color: #204a87; font-weight: bold;">></span><span style="border: 1px solid #ef2929; color: #a40000;"><</span>/cat-lable>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">class=</span><span style="color: #4e9a06;">"button"</span> <span style="color: #c4a000;">ng-click=</span><span style="color: #4e9a06;">"doEat()"</span><span style="color: #204a87; font-weight: bold;">></span>Eat<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-controller=</span><span style="color: #4e9a06;">"dogCtrl"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><dog</span><span style="color: #c4a000;">-lable</span><span style="color: #204a87; font-weight: bold;">></span><span style="border: 1px solid #ef2929; color: #a40000;"><</span>/dog-lable>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">class=</span><span style="color: #4e9a06;">"button"</span> <span style="color: #c4a000;">ng-click=</span><span style="color: #4e9a06;">"doEat()"</span><span style="color: #204a87; font-weight: bold;">></span>Eat<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"lib/angularjs/angular.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #8f5902; font-style: italic;"><!--<script type="text/javascript" src="app.js"></script>--></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"controllers/main.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #204a87; font-weight: bold;"></body></span>
<span style="color: #204a87; font-weight: bold;"></html></span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<span style="font-size: large;">main.js</span><br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">app</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">angular</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">module</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'animalApp'</span><span style="color: black; font-weight: bold;">,[])</span>
<span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">ctrls</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black; font-weight: bold;">{}</span>
<span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">directives</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black; font-weight: bold;">{}</span>
<span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">catCtrl</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">){</span>
<span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">message</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #4e9a06;">'cat'</span><span style="color: black; font-weight: bold;">;</span>
<span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">doEat</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(){</span>
<span style="color: black;">alert</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'I\'am eating a fish'</span><span style="color: black; font-weight: bold;">)</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black;">ctrls</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">catCtrl</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">catCtrl</span><span style="color: black; font-weight: bold;">;</span>
<span style="color: black;">ctrls</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">dogCtrl</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">){</span>
<span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">doEat</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(){</span>
<span style="color: black;">alert</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'I\'am eating a meat'</span><span style="color: black; font-weight: bold;">)</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">};</span>
<span style="color: black;">directives</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">catLable</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(){</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">restrict</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'E'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">template</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'<div>I \' am a cat</div>'</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black;">directives</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">dogLable</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(){</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">restrict</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'E'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">template</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'<div>I \' am a dog</div>'</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">controller</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">ctrls</span><span style="color: black; font-weight: bold;">)</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">directive</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">directives</span><span style="color: black; font-weight: bold;">)</span>
<span style="color: #8f5902; font-style: italic;">//NOTE.</span>
<span style="color: #8f5902; font-style: italic;">// This kind of organization cannot be applied for filtctrls</span>
<span style="color: #8f5902; font-style: italic;">//Above code can be organized according to module wise as following</span>
<span style="color: #8f5902; font-style: italic;">/*</span>
<span style="color: #8f5902; font-style: italic;">var app = angular.module('animalApp',[])</span>
<span style="color: #8f5902; font-style: italic;">var animalApp = {}</span>
<span style="color: #8f5902; font-style: italic;">animalApp.ctrls = {}</span>
<span style="color: #8f5902; font-style: italic;">animalApp.directives = {}</span>
<span style="color: #8f5902; font-style: italic;">var catCtrl = function($scope){</span>
<span style="color: #8f5902; font-style: italic;"> $scope.doEat = function(){</span>
<span style="color: #8f5902; font-style: italic;"> alert('I\'am eating a fish')</span>
<span style="color: #8f5902; font-style: italic;"> }</span>
<span style="color: #8f5902; font-style: italic;">}</span>
<span style="color: #8f5902; font-style: italic;">animalApp.ctrls.catCtrl = catCtrl;</span>
<span style="color: #8f5902; font-style: italic;">animalApp.ctrls.dogCtrl = function($scope){</span>
<span style="color: #8f5902; font-style: italic;"> $scope.doEat = function(){</span>
<span style="color: #8f5902; font-style: italic;"> alert('I\'am eating a meat')</span>
<span style="color: #8f5902; font-style: italic;"> }</span>
<span style="color: #8f5902; font-style: italic;">};</span>
<span style="color: #8f5902; font-style: italic;">animalApp.directives.catLable = function(){</span>
<span style="color: #8f5902; font-style: italic;"> return {</span>
<span style="color: #8f5902; font-style: italic;"> restrict:'E',</span>
<span style="color: #8f5902; font-style: italic;"> template:'<div>I \' am a cat</div>'</span>
<span style="color: #8f5902; font-style: italic;"> }</span>
<span style="color: #8f5902; font-style: italic;">}</span>
<span style="color: #8f5902; font-style: italic;">animalApp.directives.dogLable = function(){</span>
<span style="color: #8f5902; font-style: italic;"> return {</span>
<span style="color: #8f5902; font-style: italic;"> restrict:'E',</span>
<span style="color: #8f5902; font-style: italic;"> template:'<div>I \' am a dog</div>'</span>
<span style="color: #8f5902; font-style: italic;"> }</span>
<span style="color: #8f5902; font-style: italic;">}</span>
<span style="color: #8f5902; font-style: italic;">app.controller(animalApp.ctrls)</span>
<span style="color: #8f5902; font-style: italic;">app.directive(animalApp.directives)*/</span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0tag:blogger.com,1999:blog-4547574279631697358.post-69642574183629319672016-12-05T18:58:00.002-08:002017-10-28T02:22:30.131-07:00Angularjs:transclusion<span style="font-size: x-large;"><b>transclusion</b></span><br />
<br />
<!-- HTML generated using hilite.me --><span style="font-size: large;">.html</span><br />
<br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #8f5902; font-style: italic;"><!DOCTYPE html></span>
<span style="color: #204a87; font-weight: bold;"><html></span>
<span style="color: #204a87; font-weight: bold;"><head</span> <span style="color: #c4a000;">lang=</span><span style="color: #4e9a06;">"en"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><meta</span> <span style="color: #c4a000;">charset=</span><span style="color: #4e9a06;">"UTF-8"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><title></span>AngularJs Training<span style="color: #204a87; font-weight: bold;"></title></span>
<span style="color: #204a87; font-weight: bold;"><link</span> <span style="color: #c4a000;">rel=</span><span style="color: #4e9a06;">"stylesheet"</span> <span style="color: #c4a000;">href=</span><span style="color: #4e9a06;">"lib/foundation/foundation.css"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"></head></span>
<span style="color: #204a87; font-weight: bold;"><body></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-app=</span><span style="color: #4e9a06;">"my-app"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><my</span><span style="color: #c4a000;">-lable</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">class=</span><span style="color: #4e9a06;">"button"</span><span style="color: #204a87; font-weight: bold;">></span>Click me<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="border: 1px solid #ef2929; color: #a40000;"><</span>/my-lable>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"lib/angularjs/angular.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #8f5902; font-style: italic;"><!--<script type="text/javascript" src="app.js"></script>--></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"controllers/main.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #204a87; font-weight: bold;"></body></span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<span style="font-size: large;">main.js</span><br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">app</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">angular</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">module</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'my-app'</span><span style="color: black; font-weight: bold;">,[])</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">directive</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'myLable'</span><span style="color: black; font-weight: bold;">,</span><span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(){</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">restrict</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'E'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">transclude</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'true'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: #8f5902; font-style: italic;">//ng-transclude tag place the <div class="button">Click me</div> of view</span>
<span style="color: black;">template</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'<div class="" >I am a Pannel<ng-transclude></ng-transclude> </div>'</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">})</span>
</pre>
</td></tr>
</tbody></table>
</div>
Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com1tag:blogger.com,1999:blog-4547574279631697358.post-79587481034767593162016-12-05T18:57:00.005-08:002017-10-28T02:24:57.319-07:00Angularjs:Review of Isolate scope<span style="font-size: x-large;"><b>Review of Isolate scope</b></span><br />
<span style="font-size: x-large;"><b><br /></b></span>
<span style="font-size: large;">.html</span><br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #8f5902; font-style: italic;"><!DOCTYPE html></span>
<span style="color: #204a87; font-weight: bold;"><html></span>
<span style="color: #204a87; font-weight: bold;"><head</span> <span style="color: #c4a000;">lang=</span><span style="color: #4e9a06;">"en"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><meta</span> <span style="color: #c4a000;">charset=</span><span style="color: #4e9a06;">"UTF-8"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><title></span>AngularJs Training<span style="color: #204a87; font-weight: bold;"></title></span>
<span style="color: #204a87; font-weight: bold;"><link</span> <span style="color: #c4a000;">rel=</span><span style="color: #4e9a06;">"stylesheet"</span> <span style="color: #c4a000;">href=</span><span style="color: #4e9a06;">"lib/foundation/foundation.css"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"></head></span>
<span style="color: #204a87; font-weight: bold;"><body></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-app=</span><span style="color: #4e9a06;">"messageApp"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-controller=</span><span style="color: #4e9a06;">"messageCtrl"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><lable></span>Message 01<span style="color: #204a87; font-weight: bold;"></lable></span>
<span style="color: #204a87; font-weight: bold;"><message</span> <span style="color: #c4a000;">msgtype=</span><span style="color: #4e9a06;">"msgtype"</span> <span style="color: #c4a000;">types=</span><span style="color: #4e9a06;">"types"</span> <span style="color: #c4a000;">number=</span><span style="color: #4e9a06;">"{{number}}"</span> <span style="color: #c4a000;">send=</span><span style="color: #4e9a06;">"send(number,message)"</span><span style="color: #204a87; font-weight: bold;">></message></span>
<span style="color: #204a87; font-weight: bold;"><lable></span>Message 02<span style="color: #204a87; font-weight: bold;"></lable></span>
<span style="color: #204a87; font-weight: bold;"><message</span> <span style="color: #c4a000;">msgtype=</span><span style="color: #4e9a06;">"msgtype"</span> <span style="color: #c4a000;">types=</span><span style="color: #4e9a06;">"types"</span> <span style="color: #c4a000;">number=</span><span style="color: #4e9a06;">"{{number}}"</span> <span style="color: #c4a000;">send=</span><span style="color: #4e9a06;">"send(number,message)"</span><span style="color: #204a87; font-weight: bold;">></message></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"lib/angularjs/angular.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #8f5902; font-style: italic;"><!--<script type="text/javascript" src="app.js"></script>--></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"controllers/main.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #204a87; font-weight: bold;"></body></span>
<span style="color: #204a87; font-weight: bold;"></html></span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<span style="font-size: large;">main.js</span><br />
<span style="font-size: large;"><br /></span>
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">app</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">angular</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">module</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'messageApp'</span><span style="color: black; font-weight: bold;">,[]);</span>
<span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">messageCtrl</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">){</span>
<span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">number</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #4e9a06;">'0552233002'</span><span style="color: black; font-weight: bold;">;</span>
<span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">types</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black; font-weight: bold;">[{</span><span style="color: black;">name</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'SMS'</span><span style="color: black; font-weight: bold;">,</span> <span style="color: black;">type</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'sms'</span><span style="color: black; font-weight: bold;">},</span>
<span style="color: black; font-weight: bold;">{</span><span style="color: black;">name</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'MMS'</span><span style="color: black; font-weight: bold;">,</span> <span style="color: black;">type</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'mms'</span><span style="color: black; font-weight: bold;">},</span>
<span style="color: black; font-weight: bold;">{</span><span style="color: black;">name</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'VMS'</span><span style="color: black; font-weight: bold;">,</span> <span style="color: black;">type</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'vms'</span><span style="color: black; font-weight: bold;">}];</span>
<span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">msgtype</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black; font-weight: bold;">{</span><span style="color: black;">selected</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">types</span><span style="color: black; font-weight: bold;">[</span><span style="color: #0000cf; font-weight: bold;">1</span><span style="color: black; font-weight: bold;">]};</span>
<span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">send</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">number</span><span style="color: black; font-weight: bold;">,</span><span style="color: black;">message</span><span style="color: black; font-weight: bold;">){</span>
<span style="color: black;">alert</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'Message is sent! \n Message type: '</span><span style="color: #ce5c00; font-weight: bold;">+</span><span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">msgtype</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">selected</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">name</span><span style="color: #ce5c00; font-weight: bold;">+</span><span style="color: #4e9a06;">'\n Number: '</span><span style="color: #ce5c00; font-weight: bold;">+</span><span style="color: black;">number</span><span style="color: #ce5c00; font-weight: bold;">+</span><span style="color: #4e9a06;">'\n Message: '</span><span style="color: #ce5c00; font-weight: bold;">+</span><span style="color: black;">message</span><span style="color: black; font-weight: bold;">);</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">};</span>
<span style="color: black;">messageCtrl</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">$inject</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black; font-weight: bold;">[</span><span style="color: #4e9a06;">'$scope'</span><span style="color: black; font-weight: bold;">];</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">controller</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'messageCtrl'</span><span style="color: black; font-weight: bold;">,</span><span style="color: black;">messageCtrl</span><span style="color: black; font-weight: bold;">);</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">directive</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'message'</span><span style="color: black; font-weight: bold;">,</span><span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(){</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">scope</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">number</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'@'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">msgtype</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'='</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">types</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'='</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">send</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'&'</span>
<span style="color: black; font-weight: bold;">},</span>
<span style="color: black;">template</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'<div>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<div ng-repeat="type in types">'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<input type="radio" ng-model="$parent.msgtype.selected" ng-value="type"/>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<lable>{{type.name}}</lable>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'</div>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'{{msgtype.selected | json}}'</span><span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<br/>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<lable>Number</lable>'</span><span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<input type="text" ng-model="number"/>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<lable>Message</lable>'</span><span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<input type="text" ng-model="msg"/>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<div class="button" ng-click="send({number:number, message:msg})">Send</div>'</span><span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'</div>'</span><span style="color: #8f5902; font-style: italic;">/*,</span>
<span style="color: #8f5902; font-style: italic;"> link: function(scope){</span>
<span style="color: #8f5902; font-style: italic;"> scope.types = [{name:'SMS', type:'sms'},</span>
<span style="color: #8f5902; font-style: italic;"> {name:'MMS', type:'mms'},</span>
<span style="color: #8f5902; font-style: italic;"> {name:'VMS', type:'vms'}];</span>
<span style="color: #8f5902; font-style: italic;"> scope.msgtype = {selected: scope.types[1]};</span>
<span style="color: #8f5902; font-style: italic;"> }*/</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">})</span>
</pre>
</td></tr>
</tbody></table>
</div>
Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0tag:blogger.com,1999:blog-4547574279631697358.post-23188053871672769392016-12-05T18:57:00.002-08:002017-10-28T02:27:42.385-07:00Angularjs:@,= and & review<b><span style="font-size: x-large;"> @,= and & review</span></b><br />
<b><span style="font-size: x-large;"><br /></span></b>
<span style="font-size: large;">.html</span><br />
<span style="font-size: large;"><br /></span>
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #8f5902; font-style: italic;"><!DOCTYPE html></span>
<span style="color: #204a87; font-weight: bold;"><html></span>
<span style="color: #204a87; font-weight: bold;"><head</span> <span style="color: #c4a000;">lang=</span><span style="color: #4e9a06;">"en"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><meta</span> <span style="color: #c4a000;">charset=</span><span style="color: #4e9a06;">"UTF-8"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><title></span>AngularJs Training<span style="color: #204a87; font-weight: bold;"></title></span>
<span style="color: #204a87; font-weight: bold;"><link</span> <span style="color: #c4a000;">rel=</span><span style="color: #4e9a06;">"stylesheet"</span> <span style="color: #c4a000;">href=</span><span style="color: #4e9a06;">"lib/foundation/foundation.css"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"></head></span>
<span style="color: #204a87; font-weight: bold;"><body></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-app=</span><span style="color: #4e9a06;">"messageApp"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-controller=</span><span style="color: #4e9a06;">"messageCtrl"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><lable></span>Message 01<span style="color: #204a87; font-weight: bold;"></lable></span>
<span style="color: #204a87; font-weight: bold;"><message</span> <span style="color: #c4a000;">msgtype=</span><span style="color: #4e9a06;">"msgtype"</span> <span style="color: #c4a000;">types=</span><span style="color: #4e9a06;">"types"</span> <span style="color: #c4a000;">number=</span><span style="color: #4e9a06;">"{{number}}"</span> <span style="color: #c4a000;">send=</span><span style="color: #4e9a06;">"send(number,message)"</span><span style="color: #204a87; font-weight: bold;">></message></span>
<span style="color: #204a87; font-weight: bold;"><lable></span>Message 02<span style="color: #204a87; font-weight: bold;"></lable></span>
<span style="color: #204a87; font-weight: bold;"><message</span> <span style="color: #c4a000;">msgtype=</span><span style="color: #4e9a06;">"msgtype"</span> <span style="color: #c4a000;">types=</span><span style="color: #4e9a06;">"types"</span> <span style="color: #c4a000;">number=</span><span style="color: #4e9a06;">"{{number}}"</span> <span style="color: #c4a000;">send=</span><span style="color: #4e9a06;">"send(number,message)"</span><span style="color: #204a87; font-weight: bold;">></message></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"lib/angularjs/angular.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #8f5902; font-style: italic;"><!--<script type="text/javascript" src="app.js"></script>--></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"controllers/main.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #204a87; font-weight: bold;"></body></span>
<span style="color: #204a87; font-weight: bold;"></html></span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<span style="font-size: large;">main.js</span><br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">app</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">angular</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">module</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'messageApp'</span><span style="color: black; font-weight: bold;">,[]);</span>
<span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">messageCtrl</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">){</span>
<span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">number</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #4e9a06;">'0552233002'</span><span style="color: black; font-weight: bold;">;</span>
<span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">types</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black; font-weight: bold;">[{</span><span style="color: black;">name</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'SMS'</span><span style="color: black; font-weight: bold;">,</span> <span style="color: black;">type</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'sms'</span><span style="color: black; font-weight: bold;">},</span>
<span style="color: black; font-weight: bold;">{</span><span style="color: black;">name</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'MMS'</span><span style="color: black; font-weight: bold;">,</span> <span style="color: black;">type</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'mms'</span><span style="color: black; font-weight: bold;">},</span>
<span style="color: black; font-weight: bold;">{</span><span style="color: black;">name</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'VMS'</span><span style="color: black; font-weight: bold;">,</span> <span style="color: black;">type</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'vms'</span><span style="color: black; font-weight: bold;">}];</span>
<span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">msgtype</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black; font-weight: bold;">{</span><span style="color: black;">selected</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">types</span><span style="color: black; font-weight: bold;">[</span><span style="color: #0000cf; font-weight: bold;">1</span><span style="color: black; font-weight: bold;">]};</span>
<span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">send</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">number</span><span style="color: black; font-weight: bold;">,</span><span style="color: black;">message</span><span style="color: black; font-weight: bold;">){</span>
<span style="color: black;">alert</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'Message is sent! \n Message type: '</span><span style="color: #ce5c00; font-weight: bold;">+</span><span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">msgtype</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">selected</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">name</span><span style="color: #ce5c00; font-weight: bold;">+</span><span style="color: #4e9a06;">'\n Number: '</span><span style="color: #ce5c00; font-weight: bold;">+</span><span style="color: black;">number</span><span style="color: #ce5c00; font-weight: bold;">+</span><span style="color: #4e9a06;">'\n Message: '</span><span style="color: #ce5c00; font-weight: bold;">+</span><span style="color: black;">message</span><span style="color: black; font-weight: bold;">);</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">};</span>
<span style="color: black;">messageCtrl</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">$inject</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black; font-weight: bold;">[</span><span style="color: #4e9a06;">'$scope'</span><span style="color: black; font-weight: bold;">];</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">controller</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'messageCtrl'</span><span style="color: black; font-weight: bold;">,</span><span style="color: black;">messageCtrl</span><span style="color: black; font-weight: bold;">);</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">directive</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'message'</span><span style="color: black; font-weight: bold;">,</span><span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(){</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">scope</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">number</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'@'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">msgtype</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'='</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">types</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'='</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">send</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'&'</span>
<span style="color: black; font-weight: bold;">},</span>
<span style="color: black;">template</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'<div>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<div ng-repeat="type in types">'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<input type="radio" ng-model="$parent.msgtype.selected" ng-value="type"/>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<lable>{{type.name}}</lable>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'</div>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'{{msgtype.selected | json}}'</span><span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<br/>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<lable>Number</lable>'</span><span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<input type="text" ng-model="number"/>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<lable>Message</lable>'</span><span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<input type="text" ng-model="msg"/>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<div class="button" ng-click="send({number:number, message:msg})">Send</div>'</span><span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'</div>'</span><span style="color: #8f5902; font-style: italic;">/*,</span>
<span style="color: #8f5902; font-style: italic;"> link: function(scope){</span>
<span style="color: #8f5902; font-style: italic;"> scope.types = [{name:'SMS', type:'sms'},</span>
<span style="color: #8f5902; font-style: italic;"> {name:'MMS', type:'mms'},</span>
<span style="color: #8f5902; font-style: italic;"> {name:'VMS', type:'vms'}];</span>
<span style="color: #8f5902; font-style: italic;"> scope.msgtype = {selected: scope.types[1]};</span>
<span style="color: #8f5902; font-style: italic;"> }*/</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">})</span>
</pre>
</td></tr>
</tbody></table>
</div>
Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com1tag:blogger.com,1999:blog-4547574279631697358.post-62392085653507135712016-12-05T18:56:00.003-08:002017-10-28T02:30:05.895-07:00Angularjs:Usage of & sign in scope<span style="font-size: x-large;"><b>Usage of & sign in scope</b></span><br />
<span style="font-size: x-large;"><b><br /></b></span>
<span style="font-size: large;">.html</span><br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #8f5902; font-style: italic;"><!DOCTYPE html></span>
<span style="color: #204a87; font-weight: bold;"><html></span>
<span style="color: #204a87; font-weight: bold;"><head</span> <span style="color: #c4a000;">lang=</span><span style="color: #4e9a06;">"en"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><meta</span> <span style="color: #c4a000;">charset=</span><span style="color: #4e9a06;">"UTF-8"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><title></span>AngularJs Training<span style="color: #204a87; font-weight: bold;"></title></span>
<span style="color: #204a87; font-weight: bold;"><link</span> <span style="color: #c4a000;">rel=</span><span style="color: #4e9a06;">"stylesheet"</span> <span style="color: #c4a000;">href=</span><span style="color: #4e9a06;">"lib/foundation/foundation.css"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"></head></span>
<span style="color: #204a87; font-weight: bold;"><body></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-app=</span><span style="color: #4e9a06;">"messageApp"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-controller=</span><span style="color: #4e9a06;">"messageCtrl"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><message</span> <span style="color: #c4a000;">send=</span><span style="color: #4e9a06;">"sendMessage(message)"</span><span style="color: #204a87; font-weight: bold;">></message></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">message</span> <span style="color: #c4a000;">send=</span><span style="color: #4e9a06;">"sendMessage(message)"</span><span style="color: #204a87; font-weight: bold;">></div></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"lib/angularjs/angular.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #8f5902; font-style: italic;"><!--<script type="text/javascript" src="app.js"></script>--></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"controllers/main.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #204a87; font-weight: bold;"></body></span>
<span style="color: #204a87; font-weight: bold;"></html></span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<span style="font-size: large;">main.js</span><br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">app</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">angular</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">module</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'messageApp'</span><span style="color: black; font-weight: bold;">,</span> <span style="color: black; font-weight: bold;">[]);</span>
<span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">messageCtrl</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">(</span><span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">)</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">sendMessage</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">(</span><span style="color: black;">message</span><span style="color: black; font-weight: bold;">)</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">alert</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">message</span> <span style="color: #ce5c00; font-weight: bold;">+</span> <span style="color: #4e9a06;">', message has been sent'</span><span style="color: black; font-weight: bold;">);</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black;">messageCtrl</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">$inject</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black; font-weight: bold;">[</span><span style="color: #4e9a06;">'$scope'</span><span style="color: black; font-weight: bold;">];</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">controller</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'messageCtrl'</span><span style="color: black; font-weight: bold;">,</span> <span style="color: black;">messageCtrl</span><span style="color: black; font-weight: bold;">);</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">directive</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'message'</span><span style="color: black; font-weight: bold;">,</span> <span style="color: #204a87; font-weight: bold;">function</span> <span style="color: black; font-weight: bold;">()</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">scope</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">send</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'&'</span>
<span style="color: black; font-weight: bold;">},</span>
<span style="color: black;">template</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'<input type="text" ng-model="msg"/>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<div class="button" ng-click="send({message:msg})">send</div>'</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">})</span>
</pre>
</td></tr>
</tbody></table>
</div>
Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0tag:blogger.com,1999:blog-4547574279631697358.post-70304579873790805402016-12-05T18:55:00.004-08:002017-11-11T01:41:25.517-08:00Angularjs:Usage of = sign in scope<b><span style="font-size: x-large;">Usage of = sign in scope</span></b><br />
<br />
<span style="font-size: large;">.html</span><br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #8f5902; font-style: italic;"><!DOCTYPE html></span>
<span style="color: #204a87; font-weight: bold;"><html></span>
<span style="color: #204a87; font-weight: bold;"><head</span> <span style="color: #c4a000;">lang=</span><span style="color: #4e9a06;">"en"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><meta</span> <span style="color: #c4a000;">charset=</span><span style="color: #4e9a06;">"UTF-8"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><title></span>AngularJs Training<span style="color: #204a87; font-weight: bold;"></title></span>
<span style="color: #204a87; font-weight: bold;"><link</span> <span style="color: #c4a000;">rel=</span><span style="color: #4e9a06;">"stylesheet"</span> <span style="color: #c4a000;">href=</span><span style="color: #4e9a06;">"lib/foundation/foundation.css"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"></head></span>
<span style="color: #204a87; font-weight: bold;"><body></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-app=</span><span style="color: #4e9a06;">"animalApp"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-controller=</span><span style="color: #4e9a06;">"animalCtrl"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><lable></span>From Controller<span style="color: #204a87; font-weight: bold;"></lable></span>
<span style="color: #204a87; font-weight: bold;"><input</span> <span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text"</span> <span style="color: #c4a000;">ng-model=</span><span style="color: #4e9a06;">"animal.name"</span><span style="color: #204a87; font-weight: bold;">/></span>
<span style="color: #204a87; font-weight: bold;"><hr/></span>
<span style="color: #204a87; font-weight: bold;"><lable></span>From Directive<span style="color: #204a87; font-weight: bold;"></lable></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">animal</span> <span style="color: #c4a000;">animalobj=</span><span style="color: #4e9a06;">"animal"</span><span style="color: #204a87; font-weight: bold;">></div></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"lib/angularjs/angular.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #8f5902; font-style: italic;"><!--<script type="text/javascript" src="app.js"></script>--></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"controllers/main.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #204a87; font-weight: bold;"></body></span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<span style="font-size: large;">main.js</span><br />
<span style="font-size: large;"><br /></span>
<!-- HTML generated using hilite.me -->
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">app</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">angular</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">module</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'animalApp'</span><span style="color: black; font-weight: bold;">,[]);</span>
<span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">animalCtrl</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">){</span>
<span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">animal</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black; font-weight: bold;">{};</span>
<span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">animal</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">name</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #4e9a06;">'cat'</span><span style="color: black; font-weight: bold;">;</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black;">animalCtrl</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">$inject</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black; font-weight: bold;">[</span><span style="color: #4e9a06;">'$scope'</span><span style="color: black; font-weight: bold;">];</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">controller</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'animalCtrl'</span><span style="color: black; font-weight: bold;">,</span><span style="color: black;">animalCtrl</span><span style="color: black; font-weight: bold;">);</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">directive</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'animal'</span><span style="color: black; font-weight: bold;">,</span><span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(){</span>
<span style="color: #204a87; font-weight: bold;">return</span><span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">scope</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: black; font-weight: bold;">{</span>
<span style="color: #8f5902; font-style: italic;">// '=' sign is used to bind to a object.</span>
<span style="color: #8f5902; font-style: italic;">// This binding happens two way, Controller to Directive and Directive to Controller</span>
<span style="color: black;">animalobj</span> <span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'='</span>
<span style="color: black; font-weight: bold;">},</span>
<span style="color: black;">template</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'<input type="text" ng-model="animalobj.name"/>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<br/><div>{{animalobj.name}}</div>'</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">})</span>
</pre>
</td></tr>
</tbody></table>
</div>
Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0tag:blogger.com,1999:blog-4547574279631697358.post-61446674278599794632016-12-05T18:55:00.000-08:002017-11-11T01:36:26.409-08:00Angularjs:Usage of @ sing with scope<span style="font-size: x-large;"><b>Usage of @ sing with scope</b></span><br />
<br />
<span style="font-size: large;">.html</span><br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #8f5902; font-style: italic;"><!DOCTYPE html></span>
<span style="color: #204a87; font-weight: bold;"><html></span>
<span style="color: #204a87; font-weight: bold;"><head</span> <span style="color: #c4a000;">lang=</span><span style="color: #4e9a06;">"en"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><meta</span> <span style="color: #c4a000;">charset=</span><span style="color: #4e9a06;">"UTF-8"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><title></span>AngularJs Training<span style="color: #204a87; font-weight: bold;"></title></span>
<span style="color: #204a87; font-weight: bold;"><link</span> <span style="color: #c4a000;">rel=</span><span style="color: #4e9a06;">"stylesheet"</span> <span style="color: #c4a000;">href=</span><span style="color: #4e9a06;">"lib/foundation/foundation.css"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"></head></span>
<span style="color: #204a87; font-weight: bold;"><body></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-app=</span><span style="color: #4e9a06;">"animalApp"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-controller=</span><span style="color: #4e9a06;">"animalCtrl"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><animal</span> <span style="color: #c4a000;">name=</span><span style="color: #4e9a06;">"{{animalName}}"</span><span style="color: #204a87; font-weight: bold;">></animal></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"lib/angularjs/angular.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #8f5902; font-style: italic;"><!--<script type="text/javascript" src="app.js"></script>--></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"controllers/main.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #204a87; font-weight: bold;"></body></span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">main.js</span><br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">app</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">angular</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">module</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'animalApp'</span><span style="color: black; font-weight: bold;">,[])</span>
<span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">animalCtrl</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">){</span>
<span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">animalName</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #4e9a06;">'Cat'</span><span style="color: black; font-weight: bold;">;</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black;">animalCtrl</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">$inject</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black; font-weight: bold;">[</span><span style="color: #4e9a06;">'$scope'</span><span style="color: black; font-weight: bold;">];</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">controller</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'animalCtrl'</span><span style="color: black; font-weight: bold;">,</span><span style="color: black;">animalCtrl</span><span style="color: black; font-weight: bold;">);</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">directive</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'animal'</span><span style="color: black; font-weight: bold;">,</span><span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(){</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">restrict</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'E'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">scope</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">name</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'@'</span>
<span style="color: black; font-weight: bold;">},</span>
<span style="color: black;">template</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: #4e9a06;">'<div>Hi I\'am a {{name}}</div>'</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">})</span>
<span style="color: #8f5902; font-style: italic;">//Above code result could be get from the follwing codes, without using '@'.</span>
<span style="color: #8f5902; font-style: italic;">//But this is only for FYI</span>
<span style="color: #8f5902; font-style: italic;">/*app.directive('animal',function(){</span>
<span style="color: #8f5902; font-style: italic;"> return {</span>
<span style="color: #8f5902; font-style: italic;"> restrict: 'E',</span>
<span style="color: #8f5902; font-style: italic;"> template:'<div>Hi I\'am {{name}}</div>',</span>
<span style="color: #8f5902; font-style: italic;"> link:function(scope,element,attrs){</span>
<span style="color: #8f5902; font-style: italic;"> scope.name = attrs.name;</span>
<span style="color: #8f5902; font-style: italic;"> }</span>
<span style="color: #8f5902; font-style: italic;"> }</span>
<span style="color: #8f5902; font-style: italic;">})*/</span>
<span style="color: #8f5902; font-style: italic;">/*</span>
<span style="color: #8f5902; font-style: italic;">app.directive('animal',function(){</span>
<span style="color: #8f5902; font-style: italic;"> return {</span>
<span style="color: #8f5902; font-style: italic;"> restrict: 'E',</span>
<span style="color: #8f5902; font-style: italic;"> template:'<div>Hi I\'am {{name}}</div>',</span>
<span style="color: #8f5902; font-style: italic;"> link:function(scope){</span>
<span style="color: #8f5902; font-style: italic;"> scope.name = 'cat'</span>
<span style="color: #8f5902; font-style: italic;"> }</span>
<span style="color: #8f5902; font-style: italic;"> }</span>
<span style="color: #8f5902; font-style: italic;">})*/</span>
</pre>
</td></tr>
</tbody></table>
</div>
Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0tag:blogger.com,1999:blog-4547574279631697358.post-70135478916232941102016-12-05T18:54:00.001-08:002017-10-28T02:32:22.454-07:00Angularjs:More about isolate scope<span style="font-size: x-large;"><b>More about isolate scope</b></span><br />
<br />
<span style="font-size: large;">.html</span><br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #8f5902; font-style: italic;"><!DOCTYPE html></span>
<span style="color: #204a87; font-weight: bold;"><html></span>
<span style="color: #204a87; font-weight: bold;"><head</span> <span style="color: #c4a000;">lang=</span><span style="color: #4e9a06;">"en"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><meta</span> <span style="color: #c4a000;">charset=</span><span style="color: #4e9a06;">"UTF-8"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><title></span>AngularJs Training<span style="color: #204a87; font-weight: bold;"></title></span>
<span style="color: #204a87; font-weight: bold;"><link</span> <span style="color: #c4a000;">rel=</span><span style="color: #4e9a06;">"stylesheet"</span> <span style="color: #c4a000;">href=</span><span style="color: #4e9a06;">"lib/foundation/foundation.css"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"></head></span>
<span style="color: #204a87; font-weight: bold;"><body></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-app=</span><span style="color: #4e9a06;">"teacherApp"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-controller=</span><span style="color: #4e9a06;">"teacherCtrl"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><teacher</span> <span style="color: #c4a000;">teach=</span><span style="color: #4e9a06;">"teach(sub)"</span><span style="color: #204a87; font-weight: bold;">></teacher></span>
<span style="color: #204a87; font-weight: bold;"><teacher</span> <span style="color: #c4a000;">teach=</span><span style="color: #4e9a06;">"teach(sub)"</span><span style="color: #204a87; font-weight: bold;">></teacher></span>
<span style="color: #204a87; font-weight: bold;"><teacher</span> <span style="color: #c4a000;">teach=</span><span style="color: #4e9a06;">"teach(sub)"</span><span style="color: #204a87; font-weight: bold;">></teacher></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"lib/angularjs/angular.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #8f5902; font-style: italic;"><!--<script type="text/javascript" src="app.js"></script>--></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"controllers/main.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #204a87; font-weight: bold;"></body></span>
<span style="color: #204a87; font-weight: bold;"></html></span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<span style="font-size: large;">main.js</span><br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">app</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">angular</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">module</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'teacherApp'</span><span style="color: black; font-weight: bold;">,[])</span>
<span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">teacherCtrl</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">){</span>
<span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">teach</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">subject</span><span style="color: black; font-weight: bold;">){</span>
<span style="color: black;">alert</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">subject</span><span style="color: black; font-weight: bold;">);</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black;">teacherCtrl</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">$inject</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black; font-weight: bold;">[</span><span style="color: #4e9a06;">'$scope'</span><span style="color: black; font-weight: bold;">];</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">controller</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'teacherCtrl'</span><span style="color: black; font-weight: bold;">,</span><span style="color: black;">teacherCtrl</span><span style="color: black; font-weight: bold;">)</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">directive</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'teacher'</span><span style="color: black; font-weight: bold;">,</span><span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(){</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">restrict</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'E'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">scope</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">teach</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'&'</span>
<span style="color: black; font-weight: bold;">},</span>
<span style="color: black;">template</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">''</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<div>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<input type="text" ng-model="subject">'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'{{subject}} </br>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'<div class="button" ng-click="teach({sub:subject})">TEACH</div>'</span> <span style="color: #ce5c00; font-weight: bold;">+</span>
<span style="color: #4e9a06;">'</div>'</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">})</span>
</pre>
</td></tr>
</tbody></table>
</div>
Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0tag:blogger.com,1999:blog-4547574279631697358.post-29714923956976228912016-12-05T18:53:00.001-08:002017-10-28T02:34:39.339-07:00Angularjs:Isolate scope<span style="font-size: x-large;"><b>Isolate scope</b></span><br />
<!-- HTML generated using hilite.me --><br />
<span style="font-size: large;">.html</span><br />
<br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #8f5902; font-style: italic;"><!DOCTYPE html></span>
<span style="color: #204a87; font-weight: bold;"><html></span>
<span style="color: #204a87; font-weight: bold;"><head</span> <span style="color: #c4a000;">lang=</span><span style="color: #4e9a06;">"en"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><meta</span> <span style="color: #c4a000;">charset=</span><span style="color: #4e9a06;">"UTF-8"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><title></span>AngularJs Training<span style="color: #204a87; font-weight: bold;"></title></span>
<span style="color: #204a87; font-weight: bold;"><link</span> <span style="color: #c4a000;">rel=</span><span style="color: #4e9a06;">"stylesheet"</span> <span style="color: #c4a000;">href=</span><span style="color: #4e9a06;">"lib/foundation/foundation.css"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"></head></span>
<span style="color: #204a87; font-weight: bold;"><body></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-app=</span><span style="color: #4e9a06;">"teacherApp"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><teacher></teacher></span>
<span style="color: #204a87; font-weight: bold;"><teacher></teacher></span>
<span style="color: #204a87; font-weight: bold;"><teacher></teacher></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"lib/angularjs/angular.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #8f5902; font-style: italic;"><!--<script type="text/javascript" src="app.js"></script>--></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"controllers/main.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #204a87; font-weight: bold;"></body></span>
<span style="color: #204a87; font-weight: bold;"></html></span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<span style="font-size: large;">main.js</span><br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">app</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">angular</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">module</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'teacherApp'</span><span style="color: black; font-weight: bold;">,[])</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">directive</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'teacher'</span><span style="color: black; font-weight: bold;">,</span><span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(){</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">restrict</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'E'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: #8f5902; font-style: italic;">//scope:{}, //To check the working of isolate scope uncomment this line</span>
<span style="color: black;">template</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'<div><input type="text" ng-model="subject">{{subject}}</div>'</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">})</span>
</pre>
</td></tr>
</tbody></table>
</div>
Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0tag:blogger.com,1999:blog-4547574279631697358.post-12801516112491683522016-12-05T18:51:00.001-08:002017-11-11T01:30:08.826-08:00Angularjs:comunication between directives<span style="font-size: x-large;"><b>Comunication between directives</b></span><br />
<span style="font-size: x-large;"><b><br />
</b></span> <span style="font-size: large;">.html</span><br />
<span style="font-size: large;"><br />
</span> <!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #8f5902; font-style: italic;"><!DOCTYPE html></span>
<span style="color: #204a87; font-weight: bold;"><html></span>
<span style="color: #204a87; font-weight: bold;"><head</span> <span style="color: #c4a000;">lang=</span><span style="color: #4e9a06;">"en"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><meta</span> <span style="color: #c4a000;">charset=</span><span style="color: #4e9a06;">"UTF-8"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><title></span>AngularJs Training<span style="color: #204a87; font-weight: bold;"></title></span>
<span style="color: #204a87; font-weight: bold;"><link</span> <span style="color: #c4a000;">rel=</span><span style="color: #4e9a06;">"stylesheet"</span> <span style="color: #c4a000;">href=</span><span style="color: #4e9a06;">"lib/foundation/foundation.css"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"></head></span>
<span style="color: #204a87; font-weight: bold;"><body></span>
<span style="color: #204a87; font-weight: bold;"><div</span> <span style="color: #c4a000;">ng-app=</span><span style="color: #4e9a06;">"animalApp"</span><span style="color: #204a87; font-weight: bold;">></span>
<span style="color: #204a87; font-weight: bold;"><animal</span> <span style="color: #c4a000;">run</span> <span style="color: #c4a000;">swim</span><span style="color: #204a87; font-weight: bold;">></span>Dog<span style="color: #204a87; font-weight: bold;"></animal></span>
<span style="color: #204a87; font-weight: bold;"><animal</span> <span style="color: #c4a000;">run</span><span style="color: #204a87; font-weight: bold;">></span>Cat<span style="color: #204a87; font-weight: bold;"></animal></span>
<span style="color: #204a87; font-weight: bold;"><animal</span> <span style="color: #c4a000;">fly</span><span style="color: #204a87; font-weight: bold;">></span>Bird<span style="color: #204a87; font-weight: bold;"></animal></span>
<span style="color: #204a87; font-weight: bold;"></div></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"lib/angularjs/angular.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #8f5902; font-style: italic;"><!--<script type="text/javascript" src="app.js"></script>--></span>
<span style="color: #204a87; font-weight: bold;"><script </span><span style="color: #c4a000;">type=</span><span style="color: #4e9a06;">"text/javascript"</span> <span style="color: #c4a000;">src=</span><span style="color: #4e9a06;">"controllers/main.js"</span><span style="color: #204a87; font-weight: bold;">></script></span>
<span style="color: #204a87; font-weight: bold;"></body></span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<span style="font-size: large;">main.js</span><br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #f8f8f8; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #204a87; font-weight: bold;">var</span> <span style="color: black;">app</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black;">angular</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">module</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'animalApp'</span><span style="color: black; font-weight: bold;">,[]);</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">directive</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'animal'</span><span style="color: black; font-weight: bold;">,</span><span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(){</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">restrict</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'E'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">scope</span><span style="color: #ce5c00; font-weight: bold;">:</span><span style="color: black; font-weight: bold;">{},</span>
<span style="color: black;">controller</span><span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">){</span>
<span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">abilities</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: black; font-weight: bold;">[];</span>
<span style="color: #204a87; font-weight: bold;">this</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">addRun</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(){</span>
<span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">abilities</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">push</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'Run'</span><span style="color: black; font-weight: bold;">);</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: #204a87; font-weight: bold;">this</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">addSwim</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(){</span>
<span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">abilities</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">push</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'Swim'</span><span style="color: black; font-weight: bold;">);</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: #204a87; font-weight: bold;">this</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">addFly</span> <span style="color: #ce5c00; font-weight: bold;">=</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(){</span>
<span style="color: black;">$scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">abilities</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">push</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'Fly'</span><span style="color: black; font-weight: bold;">);</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">},</span>
<span style="color: black;">link</span> <span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">scope</span><span style="color: black; font-weight: bold;">,</span><span style="color: black;">element</span><span style="color: black; font-weight: bold;">){</span>
<span style="color: black;">element</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">addClass</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'button'</span><span style="color: black; font-weight: bold;">);</span>
<span style="color: black;">element</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">bind</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'click'</span><span style="color: black; font-weight: bold;">,</span><span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(){</span>
<span style="color: black;">console</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">log</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">scope</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">abilities</span><span style="color: black; font-weight: bold;">);</span>
<span style="color: black; font-weight: bold;">})</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">})</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">directive</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'run'</span><span style="color: black; font-weight: bold;">,</span><span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(){</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">require</span> <span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'animal'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">link</span> <span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">scope</span><span style="color: black; font-weight: bold;">,</span><span style="color: black;">element</span><span style="color: black; font-weight: bold;">,</span><span style="color: black;">attrs</span><span style="color: black; font-weight: bold;">,</span><span style="color: black;">animaCtrl</span><span style="color: black; font-weight: bold;">){</span>
<span style="color: black;">animaCtrl</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">addRun</span><span style="color: black; font-weight: bold;">();</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">})</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">directive</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'swim'</span><span style="color: black; font-weight: bold;">,</span><span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(){</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">require</span> <span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'animal'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">link</span> <span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">scope</span><span style="color: black; font-weight: bold;">,</span><span style="color: black;">element</span><span style="color: black; font-weight: bold;">,</span><span style="color: black;">attrs</span><span style="color: black; font-weight: bold;">,</span><span style="color: black;">animaCtrl</span><span style="color: black; font-weight: bold;">){</span>
<span style="color: black;">animaCtrl</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">addSwim</span><span style="color: black; font-weight: bold;">();</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">})</span>
<span style="color: black;">app</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">directive</span><span style="color: black; font-weight: bold;">(</span><span style="color: #4e9a06;">'fly'</span><span style="color: black; font-weight: bold;">,</span><span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(){</span>
<span style="color: #204a87; font-weight: bold;">return</span> <span style="color: black; font-weight: bold;">{</span>
<span style="color: black;">require</span> <span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #4e9a06;">'animal'</span><span style="color: black; font-weight: bold;">,</span>
<span style="color: black;">link</span> <span style="color: #ce5c00; font-weight: bold;">:</span> <span style="color: #204a87; font-weight: bold;">function</span><span style="color: black; font-weight: bold;">(</span><span style="color: black;">scope</span><span style="color: black; font-weight: bold;">,</span><span style="color: black;">element</span><span style="color: black; font-weight: bold;">,</span><span style="color: black;">attrs</span><span style="color: black; font-weight: bold;">,</span><span style="color: black;">animaCtrl</span><span style="color: black; font-weight: bold;">){</span>
<span style="color: black;">animaCtrl</span><span style="color: black; font-weight: bold;">.</span><span style="color: black;">addFly</span><span style="color: black; font-weight: bold;">();</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">}</span>
<span style="color: black; font-weight: bold;">})</span>
</pre>
</td></tr>
</tbody></table>
</div>
Tutorialshttp://www.blogger.com/profile/01146606595069516588noreply@blogger.com0