tag:blogger.com,1999:blog-77147155813395001202024-03-14T00:54:56.476-07:00The Angular ClubA Begginer's Step By Step Guide to the Angular SPA WorldCarmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.comBlogger64125tag:blogger.com,1999:blog-7714715581339500120.post-23800709312515742932022-01-14T08:02:00.000-08:002022-01-14T08:02:02.709-08:00SOLVED - Error "Unable to resolve dependency tree" while running npm install<p> In this article we review <b>how to fix the Error "Unable to resolve dependency tree" while running npm install using Angular 12,</b> error that looks like this :</p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhSTU-rDOhTPARzvdr-4wbjiBY6zeOIdw0zpp1_1phRhN_Rts2yqBplWl1MLPl8my19M-cgGdvcTJu-EhbsgCEOSlTjey-hPk5Bz1TaiWsBSvsMn64cRoMO3pH8R1DWdqqkjAJv8H7YQzMMWRn8-wTFbv7MQTaQjiEdirvqaKMIJ5lBV22RPSyCToAj=s726" style="font-size: small; font-weight: 700; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="262" data-original-width="726" height="230" src="https://blogger.googleusercontent.com/img/a/AVvXsEhSTU-rDOhTPARzvdr-4wbjiBY6zeOIdw0zpp1_1phRhN_Rts2yqBplWl1MLPl8my19M-cgGdvcTJu-EhbsgCEOSlTjey-hPk5Bz1TaiWsBSvsMn64cRoMO3pH8R1DWdqqkjAJv8H7YQzMMWRn8-wTFbv7MQTaQjiEdirvqaKMIJ5lBV22RPSyCToAj=w640-h230" width="640" /></a><br /><br /><br /><br /><h3 style="text-align: center;">Solve the Error "Unable to resolve dependency tree" while running npm install using Angular12</h3><div><br /></div>This error is rooted on an npm 7 bug, therefore one solution would be to use npm 6 for now, that means, downgrading to npm 6 , like this:<div>npm install -g npm@6.14.15</div><div><br /></div><div>Another solution, without touching NPM, would be to change versions of the Angular dependencies of your app.<br /><div>Certainly, the present error can happen whether while you are creating a brand new Angular client app, or later on, while running npm install on your app. </div><div>On both cases, you can open the package.json file, and look for the devDependencies section, like this :</div><div><br /></div><div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhFlEi6tg31IJIu2GEB1V3MU08sQAJtmDDtqksFZEB_4Hk43pIHCfWWAWeB5IFNUlA6ByfPzX1qzaQvnePlRfygTcBJefcOkU1_BAuDbNNJP7je0gNT7_NjkWcuDrYfMIspvgtft8regEL29DubKS6a5u24m8YI5z_NO2aPE4k-ACywOK867PmS_cNm=s403" style="font-size: small; font-weight: 700; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="292" data-original-width="403" height="232" src="https://blogger.googleusercontent.com/img/a/AVvXsEhFlEi6tg31IJIu2GEB1V3MU08sQAJtmDDtqksFZEB_4Hk43pIHCfWWAWeB5IFNUlA6ByfPzX1qzaQvnePlRfygTcBJefcOkU1_BAuDbNNJP7je0gNT7_NjkWcuDrYfMIspvgtft8regEL29DubKS6a5u24m8YI5z_NO2aPE4k-ACywOK867PmS_cNm=s320" width="320" /></a></div><div><br /></div><div><br /></div><div>Here on this section, change the version of the "jasmine-core" and the "karma-jasmine-html-</div><div>reporter" , like this:</div><div><br /><br /></div><div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEifGW6YhtB_WQl4CTL0y_ohWZiGgV0AHXSOvsMuyJl55rS_ZJzljzY8qbzWHxnFClSZe2-Un8arU8SvwHLtsFw_g_QJsR1GxIB2DGzmx6Hkq-jReLGlRRzh43RDrFwYGAF2G2ueVY0-d6rf50S_eVZkZbdF7MMonc4M9jJh2LLQoSCZay3tkc0E4NMx=s397" style="font-size: small; font-weight: 700; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="291" data-original-width="397" height="235" src="https://blogger.googleusercontent.com/img/a/AVvXsEifGW6YhtB_WQl4CTL0y_ohWZiGgV0AHXSOvsMuyJl55rS_ZJzljzY8qbzWHxnFClSZe2-Un8arU8SvwHLtsFw_g_QJsR1GxIB2DGzmx6Hkq-jReLGlRRzh43RDrFwYGAF2G2ueVY0-d6rf50S_eVZkZbdF7MMonc4M9jJh2LLQoSCZay3tkc0E4NMx=s320" width="320" /></a></div><div><br /></div><div> Open the terminal and run again the NPM I or npm install command, and everything will get right.</div><div>Now you can run ng serve -o, and browse to your app.</div><div><br /></div><div>That's All!!! </div><div><b>Enjoy Angular.....</b><br /><b><br /></b><b> </b>by Carmel Schvartzman<br /><br /><b><span style="font-size: x-small;">כתב: כרמל שוורצמן<div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /></span></b></div></div>Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-7714715581339500120.post-53115555264996533022021-07-16T10:05:00.002-07:002021-08-04T20:51:30.517-07:00Using BehaviorSubject in Angular 12 : differences between Observable VS Subject VS BehaviorSubject<p> In this article we review <b>how to use BehaviorSubject in Angular 12 : and also the differences between Observable VS Subject VS BehaviorSubject.</b></p><br /><h3 style="text-align: center;">Using <b style="text-align: left;">BehaviorSubject in Angular 12 : differences between Observable VS Subject VS BehaviorSubject</b> </h3><div><br /></div><div><br /></div>A BehaviorSubject is a kind of observable so you can subscribe to messages sent by the PUBLISHER like any other observable. <div><br /><div>However, BehaviorSubject allows you to control the messages as well, and emit messages at observer's will!!</div><div><br /></div> In addition, BehaviorSubjects are multicast. A Subject or a BehaviorSubject are like an Observable, but can multicast to many Observers, while plain Observables are unicast (each subscribed Observer owns an independent execution of the Observable). </div><div><br /></div><div>That way, Subjects are like EventEmitters: they maintain a registry of many listeners.</div><div><br /></div><div><div>Upon subscription, BehaviorSubject returns the last value kept. However, a regular Observable or a Subject, only trigger when they receive an "NEXT" operation.<br />For this sake, BehaviorSubject needs a DEFAULT value upon creation, as it must always return a value on SUBSCRIPTION TIME , even if it hasn't received a "NEXT" operation call.</div><div><br /></div><div>We can retrieve the last value of the subject in a regular non-observable code by using the getValue() method.<br /><br />The difference between an Observable and a Subject is that it is an <b>observer </b>in addition to being an observable : you can also edit and emit and send values from a Subject in addition to subscribing to it.<br /><br />Behavior subject can be turned into observable using the asObservable() method on BehaviorSubject.</div><div><br /><br /><div>This is a BehaviorSubject example: DEFAULT VALUE + IMMEDIATE MESSAGE ON SUBSCRIPTION:</div><div><br /></div><div><div style="background-color: #1e1e1e; font-size: 12px; line-height: 18px; white-space: pre;"><div style="color: #d4d4d4;"> </div><div style="line-height: 18px;"><span style="color: #d4d4d4;"><br /></span><div><div style="line-height: 18px;"><div><span style="color: #9cdcfe;">let</span><span style="color: #d4d4d4;"> </span><span style="color: #dd6a6f;">bs</span><span style="color: #d4d4d4;">= </span><span style="color: #9cdcfe;">new</span><span style="color: #d4d4d4;"> </span><span style="color: #f44747;">BehaviorSubject</span><span style="color: #d4d4d4;">(</span><span style="color: #569cd6;">"1"</span><span style="color: #d4d4d4;">); </span></div><span style="color: #d4d4d4;"><br /></span><div style="color: #d4d4d4;"><span style="color: #dd6a6f;">bs</span>.<span style="color: #f44747;">next</span>(<span style="color: #569cd6;">"2"</span>);</div><span style="color: #d4d4d4;"><br /></span><div style="color: #d4d4d4;"><span style="color: #dd6a6f;">bs</span>.<span style="color: #f44747;">subscribe</span>(<span style="color: #dd6a6f;">value</span> <span style="color: #9cdcfe;">=></span> {</div><div style="color: #d4d4d4;"> <span style="color: #dd6a6f;">console</span>.<span style="color: #f44747;">log</span>(<span style="color: #569cd6;">"Value received : "</span>, <span style="color: #dd6a6f;">value</span>); </div><div style="color: #d4d4d4;"> <span style="color: #cc6666;">// Subscription got 2 !!!!!!!!!! However, an observable or subject wouldn's have send a message at this stage</span></div><div style="color: #d4d4d4;">});</div><span style="color: #d4d4d4;"><br /></span><div style="color: #d4d4d4;"><span style="color: #dd6a6f;">bs</span>.<span style="color: #f44747;">next</span>(<span style="color: #569cd6;">"3"</span>); <span style="color: #cc6666;">// Subscription got 3</span></div><div style="color: #d4d4d4;"><span style="color: #dd6a6f;">bs</span>.<span style="color: #f44747;">next</span>(<span style="color: #569cd6;">"4"</span>); <span style="color: #cc6666;">// Subscription got 4</span></div></div></div></div><div style="color: #d4d4d4;"> </div></div></div><div><br /></div><div>And this is an example of Subject: NO DEFAULT, NO MESSAGE UNTIL "NEXT" method triggered:</div><div><br /></div><div><div style="background-color: #1e1e1e; font-size: 12px; line-height: 18px; white-space: pre;"><div><div style="line-height: 18px;"><span style="color: #d4d4d4;"><br /></span><div><span style="color: #9cdcfe;">let</span><span style="color: #d4d4d4;"> </span><span style="color: #dd6a6f;">s</span><span style="color: #d4d4d4;">= </span><span style="color: #9cdcfe;">new</span><span style="color: #d4d4d4;"> </span><span style="color: #f44747;">Subject</span><span style="color: #d4d4d4;">(); </span></div><span style="color: #d4d4d4;"><br /></span><div style="color: #d4d4d4;"><span style="color: #dd6a6f;">s</span>.<span style="color: #f44747;">next</span>(<span style="color: #569cd6;">"2"</span>);</div><span style="color: #d4d4d4;"><br /></span><div style="color: #d4d4d4;"><span style="color: #dd6a6f;">s</span>.<span style="color: #f44747;">subscribe</span>(<span style="color: #dd6a6f;">value</span> <span style="color: #9cdcfe;">=></span> {</div><div style="color: #d4d4d4;"> <span style="color: #dd6a6f;">console</span>.<span style="color: #f44747;">log</span>(<span style="color: #569cd6;">"</span><span style="color: #569cd6;">Value received :</span><span style="color: #569cd6;">"</span>, <span style="color: #dd6a6f;">value</span>); </div><div style="color: #d4d4d4;"> <span style="color: #cc6666;">// Subscription wont get any message at this point</span></div><div style="color: #d4d4d4;">});</div><span style="color: #d4d4d4;"><br /></span><div style="color: #d4d4d4;"><span style="color: #dd6a6f;">s</span>.<span style="color: #f44747;">next</span>(<span style="color: #569cd6;">"3"</span>); </div><div style="color: #d4d4d4;"><span style="color: #dd6a6f;">s</span>.<span style="color: #f44747;">next</span>(<span style="color: #569cd6;">"4"</span>); </div></div></div><div style="color: #d4d4d4;"><br /></div><div style="color: #d4d4d4;"> </div></div></div><div><br /></div><div><br /></div><div><br /></div><div><b><span style="font-size: large;">Example of BehaviorSubject use</span></b>:</div><br /><br />Following is an example of using BehaviorSubject: <a href="https://angular-behaviorsubject-example-deatnr.stackblitz.io" target="_blank">here is the app to try</a><div>These TWO components pass data one another using a BehaviorSubject from a Service:</div><div><br /></div><div><div><br /></div><div>1) First, we define the BehaviorSubject on some Service:<br /><div><br /></div><div><div style="background-color: #1e1e1e; color: #d4d4d4; font-size: 12px; line-height: 18px; white-space: pre;"><div><span style="color: #a79873;">import</span> { <span style="color: #dd6a6f;">Injectable</span> } <span style="color: #a79873;">from</span> <span style="color: #569cd6;">'@angular/core'</span>;</div><div><span style="color: #a79873;">import</span> { <span style="color: #dd6a6f;">BehaviorSubject</span> } <span style="color: #a79873;">from</span> <span style="color: #569cd6;">'rxjs'</span>;</div><br /><div>@<span style="color: #f44747;">Injectable</span>()</div><div><span style="color: #a79873;">export</span> <span style="color: #9cdcfe;">class</span> <span style="color: grey;">MyService</span> {</div><div> <span style="color: #9cdcfe;">constructor</span>() {}</div><div> <span style="color: #9cdcfe;">private</span> <span style="color: #dd6a6f;">bs</span> = <span style="color: #9cdcfe;">new</span> <span style="color: #f44747;">BehaviorSubject</span><<span style="color: grey;">string</span>>(<span style="color: #569cd6;">'default'</span>);</div><div> <span style="color: #dd6a6f;">obs$</span> = <span style="color: #9cdcfe;">this</span>.<span style="color: #dd6a6f;">bs</span>.<span style="color: #f44747;">asObservable</span>();</div><br /><div> <span style="color: #f44747;">editData</span>(<span style="color: #dd6a6f;">newData</span>) {</div><div> <span style="color: #9cdcfe;">this</span>.<span style="color: #dd6a6f;">bs</span>.<span style="color: #f44747;">next</span>(<span style="color: #dd6a6f;">newData</span>);</div><div> }</div><div>}</div><br /></div></div><div><br /></div><div>2) Then, we use it on an OBSERVER Component, like this :<br /><br /></div><div><div style="background-color: #1e1e1e; color: #d4d4d4; font-size: 12px; line-height: 18px; white-space: pre;"><div><span style="color: #a79873;">import</span> { <span style="color: #dd6a6f;">Component</span>, <span style="color: #dd6a6f;">OnInit</span> } <span style="color: #a79873;">from</span> <span style="color: #569cd6;">'@angular/core'</span>;</div><div><span style="color: #a79873;">import</span> { <span style="color: #dd6a6f;">tap</span> } <span style="color: #a79873;">from</span> <span style="color: #569cd6;">'rxjs/operators'</span>;</div><div><span style="color: #a79873;">import</span> { <span style="color: #dd6a6f;">MyService</span> } <span style="color: #a79873;">from</span> <span style="color: #569cd6;">'../services/my.service'</span>;</div><br /><div>@<span style="color: #f44747;">Component</span>({</div><div> <span style="color: #dd6a6f;">selector:</span> <span style="color: #569cd6;">'my-two'</span>,</div><div> <span style="color: #dd6a6f;">templateUrl:</span> <span style="color: #569cd6;">'./two.component.html'</span>,</div><div> <span style="color: #dd6a6f;">styleUrls:</span> [<span style="color: #569cd6;">'./two.component.css'</span>]</div><div>})</div><div><span style="color: #a79873;">export</span> <span style="color: #9cdcfe;">class</span> <span style="color: grey;">TwoComponent</span> <span style="color: #9cdcfe;">implements</span> <span style="color: grey;">OnInit</span> {</div><div> <span style="color: #dd6a6f;">data</span>: <span style="color: grey;">string</span>;</div><div> <span style="color: #dd6a6f;">newData</span>: <span style="color: grey;">string</span>;</div><div> <span style="color: #dd6a6f;">tapData</span>: <span style="color: grey;">any</span>;</div><br /><div> <span style="color: #9cdcfe;">constructor</span>(<span style="color: #9cdcfe;">private</span> <span style="color: #dd6a6f;">svc</span>: <span style="color: grey;">MyService</span>) {}</div><br /><div> <span style="color: #f44747;">ngOnInit</span>() {</div><div> <span style="color: #9cdcfe;">this</span>.<span style="color: #dd6a6f;">svc</span>.<span style="color: #dd6a6f;">obs$</span></div><div> .<span style="color: #f44747;">pipe</span>(<span style="color: #f44747;">tap</span>(<span style="color: #dd6a6f;">d</span> <span style="color: #9cdcfe;">=></span> (<span style="color: #9cdcfe;">this</span>.<span style="color: #dd6a6f;">tapData</span> = <span style="color: #dd6a6f;">d</span>)))</div><div> .<span style="color: #f44747;">subscribe</span>(<span style="color: #dd6a6f;">d</span> <span style="color: #9cdcfe;">=></span> (<span style="color: #9cdcfe;">this</span>.<span style="color: #dd6a6f;">data</span> = <span style="color: #dd6a6f;">d</span>));</div><div> }</div><br /><div> <span style="color: #f44747;">UpdateData</span>(<span style="color: #dd6a6f;">user</span>) {</div><div> <span style="color: #9cdcfe;">this</span>.<span style="color: #dd6a6f;">svc</span>.<span style="color: #f44747;">editData</span>(<span style="color: #9cdcfe;">this</span>.<span style="color: #dd6a6f;">newData</span>);</div><div> }</div><div>}</div><br /></div></div><div><br /></div><div><br /></div><div><br /></div><div><br /></div><div>3) Then, we use on the template HTML is as follows :</div><div><br /></div><div><div style="background-color: #1e1e1e; color: #d4d4d4; font-size: 12px; line-height: 18px; white-space: pre;"><div><span style="color: magenta;"><</span><span style="color: #9cdcfe;">p</span><span style="color: magenta;">></span></div><div> Data received on Component TWO : {{data}}</div><div><span style="color: magenta;"></</span><span style="color: #9cdcfe;">p</span><span style="color: magenta;">></span></div><br /><br /><div>JSON = {{data | json}}</div></div></div><div><br /></div><div><br /></div><div><br /></div><div><br /></div><div>4) The PUBLISHER will be the component ONE:</div><div><br /></div><div><div style="background-color: #1e1e1e; color: #d4d4d4; font-size: 12px; line-height: 18px; white-space: pre;"><div><span style="color: #a79873;">import</span> { <span style="color: #dd6a6f;">Component</span>, <span style="color: #dd6a6f;">OnInit</span> } <span style="color: #a79873;">from</span> <span style="color: #569cd6;">'@angular/core'</span>;</div><div><span style="color: #a79873;">import</span> { <span style="color: #dd6a6f;">MyService</span> } <span style="color: #a79873;">from</span> <span style="color: #569cd6;">'../services/my.service'</span>;</div><div>@<span style="color: #f44747;">Component</span>({</div><div> <span style="color: #dd6a6f;">selector:</span> <span style="color: #569cd6;">'my-one'</span>,</div><div> <span style="color: #dd6a6f;">templateUrl:</span> <span style="color: #569cd6;">'./one.component.html'</span>,</div><div> <span style="color: #dd6a6f;">styleUrls:</span> [<span style="color: #569cd6;">'./one.component.css'</span>]</div><div>})</div><div><span style="color: #a79873;">export</span> <span style="color: #9cdcfe;">class</span> <span style="color: grey;">OneComponent</span> <span style="color: #9cdcfe;">implements</span> <span style="color: grey;">OnInit</span> {</div><div> <span style="color: #dd6a6f;">data</span>: <span style="color: grey;">string</span>;</div><div> <span style="color: #dd6a6f;">newData</span>: <span style="color: grey;">string</span>;</div><br /><div> <span style="color: #9cdcfe;">constructor</span>(<span style="color: #9cdcfe;">private</span> <span style="color: #dd6a6f;">svc</span>: <span style="color: grey;">MyService</span>) {}</div><br /><div> <span style="color: #f44747;">ngOnInit</span>() {</div><div> <span style="color: #cc6666;">// receive data back:</span></div><div> <span style="color: #9cdcfe;">this</span>.<span style="color: #dd6a6f;">svc</span>.<span style="color: #dd6a6f;">obs$</span>.<span style="color: #f44747;">subscribe</span>(<span style="color: #dd6a6f;">d</span> <span style="color: #9cdcfe;">=></span> (<span style="color: #9cdcfe;">this</span>.<span style="color: #dd6a6f;">data</span> = <span style="color: #dd6a6f;">d</span>));</div><div> }</div><div> <span style="color: #f44747;">UpdateData</span>() {</div><div> <span style="color: #cc6666;">// send updated data</span></div><div> <span style="color: #9cdcfe;">this</span>.<span style="color: #dd6a6f;">svc</span>.<span style="color: #f44747;">editData</span>(<span style="color: #9cdcfe;">this</span>.<span style="color: #dd6a6f;">newData</span>);</div><div> }</div><div>}</div><br /></div></div><div><br /></div><div><div style="background-color: #1e1e1e; color: #d4d4d4; font-size: 12px; line-height: 18px; white-space: pre;"><div><span style="color: magenta;"><</span><span style="color: #9cdcfe;">p</span><span style="color: magenta;">></span> Data sent from component ONE : <span style="color: magenta;"><</span><span style="color: #9cdcfe;">br</span> <span style="color: magenta;">/></span></div><div> {{data}}</div><div><span style="color: magenta;"></</span><span style="color: #9cdcfe;">p</span><span style="color: magenta;">></span></div><div><span style="color: magenta;"><</span><span style="color: #9cdcfe;">input</span> <span style="color: #dd6a6f;">[(ngModel)]</span>=<span style="color: #569cd6;">"newData"</span><span style="color: magenta;">/></span></div><div><span style="color: magenta;"><</span><span style="color: #9cdcfe;">button</span> <span style="color: #dd6a6f;">(click)</span>=<span style="color: #569cd6;">"UpdateData();"</span><span style="color: magenta;">></span>Update Data<span style="color: magenta;"></</span><span style="color: #9cdcfe;">button</span><span style="color: magenta;">></span></div></div></div><div><br /></div><div>5) And both components will be used on the App.Component :</div><div><br /></div><div><br /></div><div><div style="background-color: #1e1e1e; color: #d4d4d4; font-size: 12px; line-height: 18px; white-space: pre;"><div><span style="color: magenta;"><</span><span style="color: #9cdcfe;">p</span><span style="color: magenta;">></span></div><div> Publish Data from Component ONE to Component TWO</div><div><span style="color: magenta;"></</span><span style="color: #9cdcfe;">p</span><span style="color: magenta;">></span></div><br /><div><span style="color: magenta;"><</span><span style="color: #9cdcfe;">my-one</span><span style="color: magenta;">></</span><span style="color: #9cdcfe;">my-one</span><span style="color: magenta;">></span></div><div><span style="color: magenta;"><</span><span style="color: #9cdcfe;">my-two</span><span style="color: magenta;">></</span><span style="color: #9cdcfe;">my-two</span><span style="color: magenta;">></span></div></div></div><div><br /></div><div>This way, both components are interconnected and pass the data on the fly each another.</div><div>( See the code on <a href="https://stackblitz.com/edit/angular-behaviorsubject-example-deatnr?file=src/app/one/one.component.html" target="_blank">stackblitz.com</a> )</div><div><br /></div><div><br /></div><div><br /></div><div>That's All!!! </div><div>This post was about <b>BehaviorSubject in Angular 12 : differences between Observable VS Subject VS BehaviorSubject.</b></div><div><b>Enjoy Angular.....</b><br /><b><br /></b><b> </b>by Carmel Schvartzman<br /><br /><b><span style="font-size: x-small;">כתב: כרמל שוורצמן </span></b></div></div></div></div></div>Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-7714715581339500120.post-39514000198054337472021-06-25T01:58:00.000-07:002021-06-25T01:58:45.951-07:00SOLVED : How to fix Angular 10 Ionic ERROR "NullInjectorError: No provider for Contacts!" on Ionic 5<p> In this article we review <b>how to fix Angular 10 Ionic ERROR "NullInjectorError: No provider for Contacts!" on Ionic 5,</b> looking like this :</p><a href="https://1.bp.blogspot.com/-dSp-UqXoi1g/X7yG15OJh_I/AAAAAAAAQHg/afgAUTXMixo_ibHb0EdjNyZELWuYOn-9gCLcBGAsYHQ/s337/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="67" data-original-width="337" height="91" src="https://1.bp.blogspot.com/-dSp-UqXoi1g/X7yG15OJh_I/AAAAAAAAQHg/afgAUTXMixo_ibHb0EdjNyZELWuYOn-9gCLcBGAsYHQ/w455-h91/1.PNG" width="455" /></a><br /><br /><br /><h3 style="text-align: center;"> How to fix Angular 10 Ionic ERROR "NullInjectorError: No provider for Contacts!" using Ionic 5</h3><div><br /></div><div><div>After you received this error, you'd probably take a look at the documentation on the official website of Ionic, and on the Github repository for the Contacts component:</div><div><br /></div><div>https://www.npmjs.com/package/@ionic-native/contacts</div><div>https://ionicframework.com/docs/native/contacts#usage</div></div><div><br /></div><div>But the problem is also there: the documentation is not up to date.</div><div><br /></div><div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-EBuetiL7RAM/X7yG18YAEsI/AAAAAAAAQHc/lbENm6Br950Sfvx8DqJQ25PBkkPvEXJgwCLcBGAsYHQ/s948/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="663" data-original-width="948" height="442" src="https://1.bp.blogspot.com/-EBuetiL7RAM/X7yG18YAEsI/AAAAAAAAQHc/lbENm6Br950Sfvx8DqJQ25PBkkPvEXJgwCLcBGAsYHQ/w632-h442/2.PNG" width="632" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-OqulqrzSClQ/X7yG1y2KQgI/AAAAAAAAQHY/8B6aZNq3eFcmtLpDhyNgEFYDWmi2A9AJQCLcBGAsYHQ/s969/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="423" data-original-width="969" height="309" src="https://1.bp.blogspot.com/-OqulqrzSClQ/X7yG1y2KQgI/AAAAAAAAQHY/8B6aZNq3eFcmtLpDhyNgEFYDWmi2A9AJQCLcBGAsYHQ/w707-h309/3.PNG" width="707" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-OjcCqUHbQJY/X7yG2htzvkI/AAAAAAAAQHk/kn-wKg0kVogUyHm1rr1heNefhXIF8zwAACLcBGAsYHQ/s596/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="178" data-original-width="596" height="216" src="https://1.bp.blogspot.com/-OjcCqUHbQJY/X7yG2htzvkI/AAAAAAAAQHk/kn-wKg0kVogUyHm1rr1heNefhXIF8zwAACLcBGAsYHQ/w722-h216/4.PNG" width="722" /></a></div></div><div><br /></div><div><br /></div><div>You can copy-paste all pieces of source code as you move forward through this Tutorial, or elsewhere you can download the entire Angular code from the following URL:<br /><br /></div><div>That's All!!! </div><div><b>Enjoy Angular.....</b><br /><b><br /></b><b> </b>by Carmel Schvartzman<br /><br /><b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b></div><div class="separator" style="clear: both; text-align: center;"><br /></div>Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-7714715581339500120.post-21897253383081832772021-06-11T01:08:00.005-07:002021-06-11T01:35:17.235-07:00SOLVED - how to solve the error " there is no package called ‘bslib’ " on Heroku deployment from GitHub repository<p> <span style="font-family: inherit;">In this tutorial we'll learn</span> <b>how to solve the error " there is no package called ‘bslib’ " on Heroku deployment from GitHub repository </b><span style="font-family: inherit;">. </span></p><p><span style="font-family: inherit;">This error occurs while deploying an app to Heroku from a GitHub repository . Your app works perfectly on your development machine, but it would fail on deployment, like this :</span></p><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-Vp0ktKsMSZI/YMMWshBgzVI/AAAAAAAAQio/o1sT--yG6OwZw0hV6P2B6ha340DYv7o-gCLcBGAsYHQ/s635/1.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="340" data-original-width="635" height="214" src="https://1.bp.blogspot.com/-Vp0ktKsMSZI/YMMWshBgzVI/AAAAAAAAQio/o1sT--yG6OwZw0hV6P2B6ha340DYv7o-gCLcBGAsYHQ/w400-h214/1.jpg" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><h3 style="text-align: center;">Step by step how to solve the error " there is no package called ‘bslib’ " on Heroku deployment from GitHub repository </h3><p><br /></p><p><span style="font-family: inherit;">First of all, notice that it seems to be an ENCODING problem</span> : something does not look good with these symbols : " <b>‘bslib’ "</b></p><p><span style="font-family: inherit;"></span></p><p>So probably you just have been trying of changing the encoding for your files, also at your machine or uploading again the files to your repository at GitHub.</p><p><span style="font-family: inherit;">However, nothing seems to help.</span></p><p><span style="font-family: inherit;">But if you take a closer look, the error states "...NO package called..." : the PACKAGES are not there.</span></p><p><span style="font-family: inherit;">And inside the word </span> <b>‘bslib’ </b><span style="text-align: center;">you can realise the name of the unknown package .</span></p><p><span style="text-align: center;">So check whether you are loading this package :</span></p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/--wq7vvCGNUI/YMMWsjcfymI/AAAAAAAAQiw/hrPFOvUbavgpQt96-3wSlc1jqiTLOW12QCLcBGAsYHQ/s482/2.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="132" data-original-width="482" height="110" src="https://1.bp.blogspot.com/--wq7vvCGNUI/YMMWsjcfymI/AAAAAAAAQiw/hrPFOvUbavgpQt96-3wSlc1jqiTLOW12QCLcBGAsYHQ/w400-h110/2.jpg" width="400" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div>In case you are not loading it, just add it to the setup installations : <p></p><p><br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-7LzUxVuhl48/YMMWs9zGBwI/AAAAAAAAQis/n-J_YrCnUY0O4c_zdbP3pdY2z5JLzCrHwCLcBGAsYHQ/s595/3.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="423" data-original-width="595" height="284" src="https://1.bp.blogspot.com/-7LzUxVuhl48/YMMWs9zGBwI/AAAAAAAAQis/n-J_YrCnUY0O4c_zdbP3pdY2z5JLzCrHwCLcBGAsYHQ/w400-h284/3.jpg" width="400" /></a></div><p><br /></p>So, redeploy and take a look again: the app is now working:<p></p><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-RdedwYFHqDo/YMMgCC2DY2I/AAAAAAAAQjI/Rbe0Nybid9cPR3hC2mxL6ZkAmVvEHs_swCLcBGAsYHQ/s1270/5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="580" data-original-width="1270" height="276" src="https://1.bp.blogspot.com/-RdedwYFHqDo/YMMgCC2DY2I/AAAAAAAAQjI/Rbe0Nybid9cPR3hC2mxL6ZkAmVvEHs_swCLcBGAsYHQ/w603-h276/5.jpg" width="603" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><span><br /></span><p></p><div><b>That's all.... </b></div><span>In this tutorial we've seen </span><b>how to solve the error " there is no package called ‘bslib’ " on Heroku deployment from GitHub repository </b><span>.</span><br /><b>Happy programming.....</b><br /> By Carmel Shvartzman<div><br /><div style="direction: rtl;"><b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br /><div></div></div><br /><br /><br /><br /><br /><br /><br /><br /></div>Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-7714715581339500120.post-67617865413777047842020-12-04T05:46:00.000-08:002020-12-04T05:46:01.994-08:00SOLVED - "An ERROR ocurred while running subprocess cordova" with Angular 9In this article we review <b>how to solve the error "An ERROR ocurred while running subprocess cordova" using Angular 9 on Ionic 5,</b> on an Angular Application that includes references to cordova framework, looking like this :<br />
<br />
<br />
<a href="https://1.bp.blogspot.com/-F-Wdx6FEIYM/Xw_XU5ghmkI/AAAAAAAAP0s/5vHkfTkZu3IcWc-xGZy5FtyTJLyw6JfAACLcBGAsYHQ/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="154" data-original-width="721" height="136" src="https://1.bp.blogspot.com/-F-Wdx6FEIYM/Xw_XU5ghmkI/AAAAAAAAP0s/5vHkfTkZu3IcWc-xGZy5FtyTJLyw6JfAACLcBGAsYHQ/s640/1.PNG" width="640" /></a><br />
<br />
<h3 style="text-align: center;">
<b>How to solve the error "An ERROR ocurred while running subprocess cordova" using Angular 9 on Ionic 5</b> </h3>
<div>
Fortunatly, the error message contains a hint about what to do:<br />
<br />
<a href="https://1.bp.blogspot.com/-F-Wdx6FEIYM/Xw_XU5ghmkI/AAAAAAAAP0s/5vHkfTkZu3IcWc-xGZy5FtyTJLyw6JfAACLcBGAsYHQ/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="154" data-original-width="721" height="136" src="https://1.bp.blogspot.com/-F-Wdx6FEIYM/Xw_XU5ghmkI/AAAAAAAAP0s/5vHkfTkZu3IcWc-xGZy5FtyTJLyw6JfAACLcBGAsYHQ/s640/1.PNG" width="640" /></a><br />
<br /></div>
<div>
To solve the problem, we'll have to re-install Gradle. </div>
<div>
Create a new directory C:\Gradle with File Explorer. <div>
Download Gradle and unpack the Gradle distribution ZIP into<span style="background-color: white; color: #02303a; font-family: Lato, "Helvetica Neue", Arial, sans-serif; font-size: 16px;"> </span><code style="background-color: #f9f9f9; border-radius: 3px; box-sizing: border-box; color: #bf616a; font-family: "Courier New", monospace; font-size: 13.6px; padding: 0.25em 0.5em;">C:\Gradle</code><span style="background-color: white; color: #02303a; font-family: Lato, "Helvetica Neue", Arial, sans-serif; font-size: 16px;"> </span>using an archiver tool.</div>
<div>
<br /></div>
<div>
<br /></div>
The next step is to configure your system environment, editing the "PATH" environment variable like follows :</div>
<div>
Click on "Edit" to edit the "Path" variable, and add the following path to it:<br /><div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<div class="gmail_default" style="color: #741b47; font-family: tahoma, sans-serif;">
<span style="background-color: #f9f9f9; color: #bf616a; font-family: "Courier New", monospace; font-size: 13.6px;">C:\Gradle\gradle-6.5.1\bin</span></div>
</div>
</div>
<div>
<br /></div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-HUpNpyKwVqU/Xw_XUw530uI/AAAAAAAAP0o/B2mNUjiSRZAjBs-Ipw3y7f9mIQiNj0X_QCLcBGAsYHQ/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="280" data-original-width="609" height="294" src="https://1.bp.blogspot.com/-HUpNpyKwVqU/Xw_XUw530uI/AAAAAAAAP0o/B2mNUjiSRZAjBs-Ipw3y7f9mIQiNj0X_QCLcBGAsYHQ/s640/2.PNG" width="640" /></a></div>
<br />
Next, before you try again to compile the app, CLOSE the cmd.exe console, so that it re-reads the now updated environment variables. Compile again :<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-BHPscOzTt74/Xw_XU0bosbI/AAAAAAAAP0k/EShFNwPxSxQ6DR-ebZG2p8nKF8uxPSFgwCLcBGAsYHQ/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="332" data-original-width="619" height="342" src="https://1.bp.blogspot.com/-BHPscOzTt74/Xw_XU0bosbI/AAAAAAAAP0k/EShFNwPxSxQ6DR-ebZG2p8nKF8uxPSFgwCLcBGAsYHQ/s640/3.PNG" width="640" /></a></div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
That's All!!! </div>
<div>
<b>Enjoy Angular.....</b><br />
<b><br /></b><b> </b>by Carmel Schvartzman<br />
<br />
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b></div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-7714715581339500120.post-40180927274660582262020-12-04T05:45:00.000-08:002020-12-04T05:45:07.271-08:00SOLVED - How to Move Apps to SD Card on Xiaomi Mobile Phones<p> In this article we review <b>how to Move Apps to SD Card on Xiaomi Mobile Phones. </b></p>After some months of use, users would wish to move MIUI and downloaded apps to SD cards in order to save space on their Xiaomi phones.<div>But up to the present, there is not an option like this on the native interface of Android for Xiami Redmi phones.</div><div>Meaning that if you mount an SD card to your phone , you could ONLY move the data to it (movies, pictures, music), but no the APPS themselves.</div><div>Here we depict you step by step how to do that, for phones with Android 6.0 Marshmallow and up , after which, you will get the option to change storage drive for the apps , looking like this :<br /><br /><a href="https://1.bp.blogspot.com/-UwFBFscGgMg/X8o1tieUbSI/AAAAAAAAQJU/IEhL6dmJxvovlKTdxAn0BktDXuoESVG5gCLcBGAsYHQ/s1920/Screenshot_2020-12-03-09-56-48-808_com.android.settings.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="1920" data-original-width="1080" height="400" src="https://1.bp.blogspot.com/-UwFBFscGgMg/X8o1tieUbSI/AAAAAAAAQJU/IEhL6dmJxvovlKTdxAn0BktDXuoESVG5gCLcBGAsYHQ/w225-h400/Screenshot_2020-12-03-09-56-48-808_com.android.settings.jpg" width="225" /></a><br /><br /><br /><h3 style="text-align: center;"><b>How to Move Apps to SD Card on Xiaomi Mobile Phones</b></h3><div><br /></div><div>Insert the SD card to your phone. </div><div>Now we will convert part of the card, in INTERNAL storage for the phone, that means, a portion of the card will be out of reach for manual storage, since we'll transform it in some kind of internal storage for APPS only.</div><div>Take into account, that that part of the SD card will be formatted in such a manner that will be permanent out of reach for storage in the future: that portion will DISAPPEAR from the card forever.</div><div><br /></div><div>You will need 2 softwares to do this:</div><div><br /></div><div>1) download to your PC from some place on the web the free AFTISS app : <a href="https://superfiles.co/download/RxZCku1f/aftiss_b2.zip" target="_blank">AFTISS</a></div><div><br /></div><div>2) Go to the settings of the phone, to enable the USB Debugging feature on it. Go to Settings > About Phone and tap on the Build Number/MIUI version seven consecutive times, in order to unlock Developer Options. Then, go to Settings > Developer Options and enable the USB debugging feature.</div><div><br /></div><div><a href="https://1.bp.blogspot.com/-HOPmBMoKvZw/X8o1tqBvhdI/AAAAAAAAQJQ/qmssTsEetBgmfLAhzKgsqVfOvZ19-eFLQCLcBGAsYHQ/s1599/IMG-20201202-WA0016.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="1599" data-original-width="899" height="640" src="https://1.bp.blogspot.com/-HOPmBMoKvZw/X8o1tqBvhdI/AAAAAAAAQJQ/qmssTsEetBgmfLAhzKgsqVfOvZ19-eFLQCLcBGAsYHQ/w360-h640/IMG-20201202-WA0016.jpg" width="360" /></a></div><div><br /></div><div><br /></div><div>3) connect your phone to your PC, and run the AFTISS.cmd app on your PC, that was inside the ZIP file. Choose between the options, whether you want to asign 50% or some other percent to APPS storage. The formatting modes are : </div><div><br /></div><div>- 25% Internal\75% SDCard</div><div>- 50% Internal\50% SDCard</div><div>- 75% Internal\25% SDCard</div><div>- Custom<br /></div><div><br /></div><div>4) open Google Play Store and install the app " PackageViewer+ " :</div><div><br /></div><div><a href="https://1.bp.blogspot.com/-nPl7l5Kwgx8/X8o1smOiTOI/AAAAAAAAQJE/bo7Tu_hxJI4MFTINay9g52VSLv6xRmNLwCLcBGAsYHQ/s1599/IMG-20201202-WA0014.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="1599" data-original-width="899" height="640" src="https://1.bp.blogspot.com/-nPl7l5Kwgx8/X8o1smOiTOI/AAAAAAAAQJE/bo7Tu_hxJI4MFTINay9g52VSLv6xRmNLwCLcBGAsYHQ/w360-h640/IMG-20201202-WA0014.jpg" width="360" /></a></div><div><br /></div><div>Then select any app, open its “Storage” settings and tap on the “Change” button adjacent to the Storage feature, if it exists. If not, thats because the developer do not want users to move the app to any SD card:</div><div><br /></div><div><a href="https://1.bp.blogspot.com/-v1Xhlu-Yv50/X8o1s0FzVEI/AAAAAAAAQJI/Qh3xdpfRigUP-T7Bu-PCCq73-G1Nx3_NACLcBGAsYHQ/s1920/IMG-20201202-WA0013.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="1920" data-original-width="1080" height="640" src="https://1.bp.blogspot.com/-v1Xhlu-Yv50/X8o1s0FzVEI/AAAAAAAAQJI/Qh3xdpfRigUP-T7Bu-PCCq73-G1Nx3_NACLcBGAsYHQ/w360-h640/IMG-20201202-WA0013.jpg" width="360" /></a></div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-CzM2-4knz-c/X8o1snCZ7AI/AAAAAAAAQJA/z4kTnUqK8t8zAwjmCJQXYCpt2EdmuLWzgCLcBGAsYHQ/s1920/IMG-20201202-WA0012.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1920" data-original-width="1080" height="640" src="https://1.bp.blogspot.com/-CzM2-4knz-c/X8o1snCZ7AI/AAAAAAAAQJA/z4kTnUqK8t8zAwjmCJQXYCpt2EdmuLWzgCLcBGAsYHQ/w360-h640/IMG-20201202-WA0012.jpg" width="360" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-UwFBFscGgMg/X8o1tieUbSI/AAAAAAAAQJU/IEhL6dmJxvovlKTdxAn0BktDXuoESVG5gCLcBGAsYHQ/s1920/Screenshot_2020-12-03-09-56-48-808_com.android.settings.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1920" data-original-width="1080" height="640" src="https://1.bp.blogspot.com/-UwFBFscGgMg/X8o1tieUbSI/AAAAAAAAQJU/IEhL6dmJxvovlKTdxAn0BktDXuoESVG5gCLcBGAsYHQ/w360-h640/Screenshot_2020-12-03-09-56-48-808_com.android.settings.jpg" width="360" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div>5) That' all: move your apps to SD card storage. Take into account, that the size of your card will appear reduced like this 16 GB card in this picture, reduced to 4 GB , because 75% of the card has been destined to internal storage :<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-gmJpqDDjqW8/X8o1tWE_GMI/AAAAAAAAQJM/Mdr4Z85sPCkSapdrepgcYYqA6Gx8kJi4wCLcBGAsYHQ/s1599/IMG-20201202-WA0015.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1599" data-original-width="899" height="400" src="https://1.bp.blogspot.com/-gmJpqDDjqW8/X8o1tWE_GMI/AAAAAAAAQJM/Mdr4Z85sPCkSapdrepgcYYqA6Gx8kJi4wCLcBGAsYHQ/w225-h400/IMG-20201202-WA0015.jpg" width="225" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><div>Also you can see that the phone does not reveals the gained storage size adequately.</div><div><br /></div><div>It was <b>how to Move Apps to SD Card on Xiaomi Mobile Phones.</b></div><div>That's All!!! </div><div><b>Enjoy Angular.....</b><br /><b><br /></b><b> </b>by Carmel Schvartzman<br /><br /><b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br />Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-7714715581339500120.post-27393865673648010542020-08-26T20:50:00.000-07:002020-08-26T20:50:29.155-07:00SOLVED : Angular 9 ERROR Critical dependency: require function is used in a way in which dependencies cannot be statically extractedIn this article we review <b>how to solve the Angular 9 ERROR 'Critical dependency: require function is used in a way in which dependencies cannot be statically extracted',</b> looking like this :<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-9EVDACOluyg/XwFmYfvOXKI/AAAAAAAAPxw/KXwrxBzC-L0HLuEvHxuRjh23qNPP4G4ngCLcBGAsYHQ/s1600/0.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="368" data-original-width="1032" height="142" src="https://1.bp.blogspot.com/-9EVDACOluyg/XwFmYfvOXKI/AAAAAAAAPxw/KXwrxBzC-L0HLuEvHxuRjh23qNPP4G4ngCLcBGAsYHQ/s400/0.PNG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-OrjPNopGCtQ/XwFmYRxN20I/AAAAAAAAPx0/sVmvIBzh7nYLW4PZZi9EkZ55Qb4h_n_MgCLcBGAsYHQ/s1600/1.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="451" data-original-width="1113" height="161" src="https://1.bp.blogspot.com/-OrjPNopGCtQ/XwFmYRxN20I/AAAAAAAAPx0/sVmvIBzh7nYLW4PZZi9EkZ55Qb4h_n_MgCLcBGAsYHQ/s400/1.PNG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-hqrgP0dIwVA/XwFmYFIyrkI/AAAAAAAAPxs/7WwtK1hWZXkwJ7DIgopAufQO2Oo1mKc-ACLcBGAsYHQ/s1600/2.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="333" data-original-width="1085" height="122" src="https://1.bp.blogspot.com/-hqrgP0dIwVA/XwFmYFIyrkI/AAAAAAAAPxs/7WwtK1hWZXkwJ7DIgopAufQO2Oo1mKc-ACLcBGAsYHQ/s400/2.PNG" width="400" /></a></div>
<br />
<br />
<h3 style="text-align: center;">
H<b>ow to resolve the Angular 9 ERROR 'Critical dependency: require function is used in a way in which dependencies cannot be statically extracted'</b> using Angular9</h3>
<div>
<br /></div>
<div>
That;s an owfully bunch of errors all together to be solved, but that could be misleading. In effect, this errors ocurr just while adding an @Output() variable to your child component , like this :</div>
<div>
<br /></div>
<div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-xdMn1g1XHTQ/XwFmY568lVI/AAAAAAAAPx4/DgMvAHVagOQh3zTiMxyaVff3Klyu7TVOQCLcBGAsYHQ/s1600/3.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="108" data-original-width="719" height="96" src="https://1.bp.blogspot.com/-xdMn1g1XHTQ/XwFmY568lVI/AAAAAAAAPx4/DgMvAHVagOQh3zTiMxyaVff3Klyu7TVOQCLcBGAsYHQ/s640/3.PNG" width="640" /></a></div>
<br />
<br />
If you pay closest attention, you'll notice that the reference added to the imports is that of protractor, and not the intended one, from @Angular/core :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-PH2-1xdCLI0/XwFmZG3gI1I/AAAAAAAAPx8/rpul7ReMCcUSDuYPhede7aP5VjHqlXsNwCLcBGAsYHQ/s1600/4.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="214" data-original-width="601" height="141" src="https://1.bp.blogspot.com/-PH2-1xdCLI0/XwFmZG3gI1I/AAAAAAAAPx8/rpul7ReMCcUSDuYPhede7aP5VjHqlXsNwCLcBGAsYHQ/s400/4.PNG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: left;">
That's the source of the whole bunch of errors depicted above.</div>
<div class="separator" style="clear: both; text-align: left;">
Just change the import settings to that of the correct one, of @Angular/core :</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-fGM6c-zTNxQ/XwFmZTBuWyI/AAAAAAAAPyA/SGCC1y21aC0BITZBGbD6HJIDAsT-AbiiwCLcBGAsYHQ/s1600/5.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="177" data-original-width="685" height="164" src="https://1.bp.blogspot.com/-fGM6c-zTNxQ/XwFmZTBuWyI/AAAAAAAAPyA/SGCC1y21aC0BITZBGbD6HJIDAsT-AbiiwCLcBGAsYHQ/s640/5.PNG" width="640" /></a></div>
<br />
Perform ng s --port 4200 --base-href /yourwebsitename/ -o again, and get the success message :<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-PjZB5g6-wsk/XwFmZo6boCI/AAAAAAAAPyE/DY_8TYypbtgMF5DERb6fIPt2LWXNY2hbACLcBGAsYHQ/s1600/6.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="77" data-original-width="717" height="68" src="https://1.bp.blogspot.com/-PjZB5g6-wsk/XwFmZo6boCI/AAAAAAAAPyE/DY_8TYypbtgMF5DERb6fIPt2LWXNY2hbACLcBGAsYHQ/s640/6.PNG" width="640" /></a></div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
That's All!!! </div>
<div>
<b>Enjoy Angular.....</b><br />
<b><br /></b><b> </b>by Carmel Schvartzman<br />
<br />
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-7714715581339500120.post-84164398066867680972020-07-22T20:50:00.000-07:002020-07-22T20:50:58.252-07:00#17 - How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API In this article we review <b>How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API,</b> to erase items using a web service, by developing from scratch in 30 minutes an AngularJS SPA (Single Page App) Application that sends HTTP GET, HTTP POST, HTTP PATCH and HTTP DELETE Requests to Add, Edit, and Delete the items from and to a REST OData Web API. Also, all style will be Twitter Bootstrap CSS3.<br />
The source code for this SPA can be found in the following GitHub repository:<br />
<br />
<br />
<b><i>Although you can learn this tutorial as a standalone</i></b>, also you can see the previous lessons of the series, using the arrows below. This is the Lesson #17 in the "AngularJS: From 0 To 100" articles written for Beginners. This lessons start at <a href="http://angularjsclub.blogspot.com/2014/12/first-angularjs-application-for-Beginners-in-10-minutes.html" target="_blank">Lesson #1</a> .<br />
<br />
<b><a href="http://angularjsclub.blogspot.com/2015/02/how-to-send-patch-requests-to-odata-webapi-RESTful-service-http-angularjs.html" target="_blank"><<<< PREVIOUS LESSON</a> <a href="http://angularjsclub.blogspot.com/2015/02/Create-AngularJS-SPA-with-all-CRUD-functionality-connected-OData-RESTful-WebAPI-service.html" target="_blank">NEXT LESSON >>>></a></b><br />
<b><br />
</b> <b><br />
</b> This is a snapshot of the SPA AngularJS that we'll develop from scratch here, in 30 minutes :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-muzH_gT5sBc/VO22p0ODzdI/AAAAAAAAJf0/7y87E2rEOmc/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API " border="0" height="540" src="https://3.bp.blogspot.com/-muzH_gT5sBc/VO22p0ODzdI/AAAAAAAAJf0/7y87E2rEOmc/s1600/1.png" title="How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API " width="538" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: center;">
How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API</h3>
<br />
As we move forward through this Tutorial, we'll give you the source code to copy-paste to your project. In addition to that, you can download the entire AngularJS SPA App from the following GitHub repository, all together packed in a ZIP file:<br />
<br />
<br />
<br />
First we add the link references to the javascripts and styles , using CDN(content delivery network), instead of downloading the files to our project:<br />
<br />
<a href="http://2.bp.blogspot.com/-vO-HdoTF4P0/VOSbNyEZkRI/AAAAAAAAJXI/fjNOvRpzHlM/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API 1 " border="0" height="144" src="https://2.bp.blogspot.com/-vO-HdoTF4P0/VOSbNyEZkRI/AAAAAAAAJXI/fjNOvRpzHlM/s1600/1.png" title="How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API 1 " width="540" /></a><br />
<br />
As you see, we add 2 AngularJS scripts, and 2 Bootstrap CSS3 files. Also, we create directories for "Content" and "Controllers". It's important that you have the "angular.js" and ALSO the "angular-route.js" javascript files loaded.<br />
Now, because this is a tutorial about sending HTTP DELETE requests to an OData REST Web API, we'll use the AngularJS SPA that we built together in 20 minutes through the previous tutorial <a href="http://angularjsclub.blogspot.com/2015/02/make-post-requests-odata-web-api-restful-service-using-http-angularjs.html" target="_blank">Lesson #16</a> , and that already supports Create, Read and Update functionality.<br />
We'll add to it the AngularJS "Delete" functionality. That SPA already includes retrieving, adding and editing items by sending HTTP GET, POST and PATCH requests to an OData REST service. So please go back to the <a href="http://angularjsclub.blogspot.com/2015/02/make-post-requests-odata-web-api-restful-service-using-http-angularjs.html" target="_blank">Lesson #16</a> , if you do not have an SPA app already working.<br />
<div>
<br /></div>
After you have the SPA app with Create, Read and Update functionality working, open the OrchidsList.html file , and <b>add a new Bootstrap icon</b> next to the "Edit" one, as follows:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-prl3VEj9Pds/VO3IB96lzWI/AAAAAAAAJhE/8Ru6U3p15D0/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API 2 " border="0" height="392" src="https://3.bp.blogspot.com/-prl3VEj9Pds/VO3IB96lzWI/AAAAAAAAJhE/8Ru6U3p15D0/s1600/10.png" title="How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API 2 " width="540" /></a></div>
<br />
<br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"><a </span><span style="color: red;">href="#/delete/{{Orchid.BlogID}}"</span><span style="color: #38761d;">></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </a></b></span><br />
<br />
I've remarked the more relevant code in <b><span style="color: red;">red</span></b>. The two link buttons do load the "Edit" and the "Delete" View Templates, using the Bootstrap's Glyphicons.<br />
This links send the ID of the selected item to the Edit or the Delete Controllers.<br />
<br />
Next, we're going to code the AngularJS Module, and set the Routing to support also the "Delete" option, as follows:<br />
<br />
<a href="http://2.bp.blogspot.com/-cu7fXoi1v8A/VO22qYDjd8I/AAAAAAAAJf4/H39u0b_Vp-4/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API 3 " border="0" height="486" src="https://2.bp.blogspot.com/-cu7fXoi1v8A/VO22qYDjd8I/AAAAAAAAJf4/H39u0b_Vp-4/s1600/4.png" title="How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API 3 " width="540" /></a><br />
<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b> .when('/delete/:id',</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> templateUrl: "/App/Views/OrchidsDelete.html",</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> controller: "OrchidsDeleteCtl"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> })</b></span><br />
<br />
Here we are using the AngularJS $routeProvider to connect each View with the correspondent Template and Controller. If the "/delete" page is required, then the "OrchidsDelete.html" URL template will be displayed, and the "OrchidsDeleteCtl" Controller will be loaded.<br />
This is always the same main HTML web page being browsed here, since this is a SPA application: all belongs to THE SAME URL: there are no web page reloads at all!!!<br />
<br />
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Finally, we add the "Delete" functionality to our SPA application, by creating a new View template called OrchidsDelete.html, containing this markup:</div>
<div class="separator" style="clear: both;">
<a href="http://1.bp.blogspot.com/-PAI0au4ux-E/VO22ps3ZMXI/AAAAAAAAJfw/N4_1a0qZLKA/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API 4 " border="0" height="436" src="https://1.bp.blogspot.com/-PAI0au4ux-E/VO22ps3ZMXI/AAAAAAAAJfw/N4_1a0qZLKA/s1600/3.png" title="How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API 4 " width="540" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><div class="container"></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><div class="jumbotron"></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <div class="" > </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <h2>Delete this Orchid</h2> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </div> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <form name="deleteOrchid" class=""</b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-submit</span><span style="color: #38761d;">="fnDelete()"></span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <input type="text" class="form-control"</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> placeholder="Title"</b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="Orchid.Title"</span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> disabled></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <input type="text" class="form-control"</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> placeholder="Text"</b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="Orchid.Text"</span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> disabled></b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <input </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="Orchid.MainPicture" </span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> class="form-control" </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> disabled/> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <input type="submit" class="btn btn-default btn-lg"</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> value="Delete"</b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-disabled</span><span style="color: #38761d;">="fnDisable()" ><span>&nbsp;{{</span><span style="color: red;">fnShowMsg()</span><span style="color: #38761d;">}}</span></span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </form></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <a href="#/">See All Flowers</a></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b></div></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
As you see, all fields are read-only this time.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Also, we add a new Controller, for the "deleting" functionality:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<a href="http://3.bp.blogspot.com/-cZ-CJmIPHLc/VO22qg5pgAI/AAAAAAAAJf8/klWFJurWHec/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API 5 " border="0" height="398" src="https://3.bp.blogspot.com/-cZ-CJmIPHLc/VO22qg5pgAI/AAAAAAAAJf8/klWFJurWHec/s1600/5.png" title="How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API 5 " width="540" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>oOrchidsApp.controller('OrchidsDeleteCtl',</b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> ['OrchidsResource', 'GlobalSvc', '</span><span style="color: red;">$http</span><span style="color: #38761d;">', '</span><span style="color: red;">$routeParams</span><span style="color: #38761d;">', '$scope', '$location', '$log', 'msg',</span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> function (OrchidsResource, GlobalSvc, $http, $routeParams, $scope, $location, $log, msg) {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> msg.value = "";</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> $scope.isDisabled = false;</b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> $scope.Orchid = </span><span style="color: red;">OrchidsResource.get({ id: $routeParams.id }); </span><span style="color: #38761d;"> </span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> $scope.fnDelete = function () {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">$http</span><span style="color: #38761d;">(</span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> url: GlobalSvc.getURL() + $routeParams.id,</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> method:"DELETE"</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> }</b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> ).</span><span style="color: red;">success</span><span style="color: #38761d;">(function (response) {</span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> msg.value = "Orchid successfully deleted";</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> $scope.isDisabled = true;</b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> }).</span><span style="color: red;">error</span><span style="color: #38761d;">(function (err) { $log.error(err); });</span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> }</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> $scope.fnDisable = function () { return $scope.isDisabled;}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> $scope.fnShowMsg = function () { return msg.value; }</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}]);</b></span></div>
<div>
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
You can see here, that we first use the AngularJS $resource to fetch the data for the selected item, sending an HTTP GET(ID) request to the service. </div>
<div class="separator" style="clear: both;">
Then, when the user clicks the submit button, we send an HTTP DELETE request using the $http service that we inserted into the Controller at the Dependency Injection step.</div>
<div class="separator" style="clear: both;">
Also, we add two methods: fnDisable() , to disable the submit button only if the response has been successfully received.</div>
<div class="separator" style="clear: both;">
And fnShowMsg() , to display the corresponding message to the user.</div>
<div class="separator" style="clear: both;">
Browse to the Main HTML web page, and click over the Bootstrap's "delete" icon:</div>
<div class="separator" style="clear: both;">
<a href="http://2.bp.blogspot.com/-gpk6Yse0l8w/VO22ppYZnXI/AAAAAAAAJgg/9wlgbjBcXoI/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API 6 " border="0" height="482" src="https://2.bp.blogspot.com/-gpk6Yse0l8w/VO22ppYZnXI/AAAAAAAAJgg/9wlgbjBcXoI/s1600/2.png" title="How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API 6 " width="540" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
The Delete View will look as follows:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-fa-teXcTySA/VO22q7lG9hI/AAAAAAAAJgE/qDbxFYq44bk/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API 7 " border="0" height="480" src="https://2.bp.blogspot.com/-fa-teXcTySA/VO22q7lG9hI/AAAAAAAAJgE/qDbxFYq44bk/s1600/6.png" title="How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API 7 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Click the "Delete" button, and wait for the success message:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-AduCJFyR8L4/VO22rKfjqnI/AAAAAAAAJgI/6T11Exu6KH0/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API 8 " border="0" height="480" src="https://3.bp.blogspot.com/-AduCJFyR8L4/VO22rKfjqnI/AAAAAAAAJgI/6T11Exu6KH0/s1600/7.png" title="How to send HTTP DELETE Requests from a SPA to an OData RESTful Web API 8 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
If you get no response, or you get errors, check using the Developer's Tools (F12) in the "Network" tab, for the response status. If there is some error , refer to <a href="http://angularjsclub.blogspot.com/2015/02/how-to-fix-error-Method-DELETE-not-allowed-Access-Control-Allow-Methods.html" target="_blank">this HTTP Error Tutorial</a>.</div>
<div>
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Remember to use widely the $log service in your SPA, to send yourself messages for debugging purposes.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
That's All!!! You have started sending HTTP DELETE Requests to an OData Web API RESTful service, from your own SPA application, using the AngularJS Dependency Injection for the $http, $log, and $routeParameters Services. In the next article we will put all the pieces together to <a href="http://angularjsclub.blogspot.com/2015/02/Create-AngularJS-SPA-with-all-CRUD-functionality-connected-OData-RESTful-WebAPI-service.html" target="_blank">Create a SPA with all CRUD functionality connected to an OData web API restful service using angularjs</a> .<b> </b><br />
<b>Enjoy AngularJS.....</b><br />
<b><br />
</b><b> </b>by Carmel Schvartzman<br />
<br />
<br />
<b><a href="http://angularjsclub.blogspot.com/2015/02/how-to-send-patch-requests-to-odata-webapi-RESTful-service-http-angularjs.html" target="_blank"><<<< PREVIOUS LESSON</a> <a href="http://angularjsclub.blogspot.com/2015/02/Create-AngularJS-SPA-with-all-CRUD-functionality-connected-OData-RESTful-WebAPI-service.html" target="_blank">NEXT LESSON >>>></a></b><br />
<br />
<b><br />
</b> <br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
<b><span style="font-size: x-small;"><br />
</span></b></div>
<div>
</div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com1tag:blogger.com,1999:blog-7714715581339500120.post-40785957288953540792020-06-10T21:34:00.003-07:002020-06-10T21:34:35.158-07:00Solved : How to fix the Angular 9 error "node_modules/@angular/common/common"' has no exported member 'ViewportScroller'"In this article we review <b>how to fix the Angular 9 error "node_modules/@angular/common/common"' has no exported member 'ViewportScroller'" using Angular 9 with Ionic</b> , looking like this :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-SjDEa0Lu1JI/XuGzMWJT2_I/AAAAAAAAPsY/PI8-UlKAURAk6u7YodMBBuyM6tiUFLspgCLcBGAsYHQ/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="473" data-original-width="382" height="400" src="https://1.bp.blogspot.com/-SjDEa0Lu1JI/XuGzMWJT2_I/AAAAAAAAPsY/PI8-UlKAURAk6u7YodMBBuyM6tiUFLspgCLcBGAsYHQ/s400/1.PNG" width="322" /></a></div>
<br />
<br />
<h3 style="text-align: center;">
<b>Fix the Angular 9 error "node_modules/@angular/common/common" has no exported member 'ViewportScroller'</b> using Angular9</h3>
<div>
<br /></div>
<div>
The error description appears as : "<span style="color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit; white-space: inherit;">Module ':/ionicapp/node_modules/@</span><wbr style="color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit; white-space: inherit;"></wbr><span style="color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit; white-space: inherit;">angular/common/common"' has no exported member 'ViewportScroller'.</span>" .<br />
This error happens after you installed the missing router in the Ionic app :<br />
<br />
<span style="background-color: white; color: #741b47; font-family: tahoma, sans-serif; font-size: x-small;">npm install @angular/router --save</span></div>
<div>
<br /></div>
<div>
What the error is trying to inform us is, that the versions installed do not comply : the router installed is a different version from the one of the Angular version on your app.<br />
<br />
We have to open the PACKAGE.JSON file, and check the versions there :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-SjDEa0Lu1JI/XuGzMWJT2_I/AAAAAAAAPsY/PI8-UlKAURAk6u7YodMBBuyM6tiUFLspgCLcBGAsYHQ/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="473" data-original-width="382" height="400" src="https://1.bp.blogspot.com/-SjDEa0Lu1JI/XuGzMWJT2_I/AAAAAAAAPsY/PI8-UlKAURAk6u7YodMBBuyM6tiUFLspgCLcBGAsYHQ/s400/1.PNG" width="322" /></a></div>
<br />
<br />
In this case, version of the @angular/core is 5.2.11, while the @angular/router that was installed, is version 9.1.9 . Of course it wouldn't work. It lacks/requires all kind of methods and properties.<br />
<br />
Therefore, remove the router and install it according to the current version on your application:<br />
<br />
<span style="background-color: white; color: #741b47; font-family: tahoma, sans-serif; font-size: x-small;">npm install @angular/router@5.2.11 --save</span><br />
<br /></div>
<div>
After the installation, check again the PACKAGE.JSON, to see if version matches :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-xfFaCcqVVN8/XuGzMaiYt1I/AAAAAAAAPsU/_NkblIpIUAwNZHuXtLj2OWsB1GbsPWyJACLcBGAsYHQ/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="385" data-original-width="423" height="363" src="https://1.bp.blogspot.com/-xfFaCcqVVN8/XuGzMaiYt1I/AAAAAAAAPsU/_NkblIpIUAwNZHuXtLj2OWsB1GbsPWyJACLcBGAsYHQ/s400/2.PNG" width="400" /></a></div>
<br /></div>
<div>
Now it looks OK. Compile and keep enjoying !!</div>
<div>
<br /></div>
<div>
That's All!!! </div>
<div>
<b>Enjoy Angular.....</b><br />
<b><br /></b><b> </b>by Carmel Schvartzman<br />
<br />
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b></div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com1tag:blogger.com,1999:blog-7714715581339500120.post-59038690022784299782020-05-13T21:51:00.000-07:002020-05-13T21:51:02.294-07:00How to change Angular.json settings to generate components without test filesIn this article we review <b>How to change Angular.json settings to generate components without test files using Angular 7,</b> by changing the settings at the angular.json file of an Angular Application.<br />
<br />
Tired of typing " --spec false " every time you create an Angular component using the CLI ? :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-ZNTplbpiFrA/XreSpPkctlI/AAAAAAAAPok/xmyAPG6SYaQ2QVsGnmEFrTrQUg-b3-LsQCLcBGAsYHQ/s1600/0.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="123" data-original-width="553" height="139" src="https://1.bp.blogspot.com/-ZNTplbpiFrA/XreSpPkctlI/AAAAAAAAPok/xmyAPG6SYaQ2QVsGnmEFrTrQUg-b3-LsQCLcBGAsYHQ/s640/0.PNG" width="640" /></a></div>
<br />
<br />
<h3 style="text-align: center;">
How to change Angular.json settings to generate components without test files using Angular7</h3>
<div>
In addition, you might even found that " --spec false " is deprecated:<br />
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-ZNTplbpiFrA/XreSpPkctlI/AAAAAAAAPok/HqOyBhfh5w44DGB5vizxluogMBlcj-SqQCEwYBhgL/s1600/0.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="123" data-original-width="553" height="87" src="https://1.bp.blogspot.com/-ZNTplbpiFrA/XreSpPkctlI/AAAAAAAAPok/HqOyBhfh5w44DGB5vizxluogMBlcj-SqQCEwYBhgL/s400/0.PNG" width="400" /></a></div>
<br />
So why not changing the settings at the angular.json file ?<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-ZLuuht2XyRg/XreSpJaOZTI/AAAAAAAAPos/RobxeU9GhkcCjZNr3pDdF4Z833Eed4vzACEwYBhgL/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="157" data-original-width="690" height="90" src="https://1.bp.blogspot.com/-ZLuuht2XyRg/XreSpJaOZTI/AAAAAAAAPos/RobxeU9GhkcCjZNr3pDdF4Z833Eed4vzACEwYBhgL/s400/1.PNG" width="400" /></a></div>
<br />
Therefore, open the angular.json file and search for the "schematics" section, and add the following lines:<br />
<br />
<div style="background-color: #2d2b55; color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<span style="color: #9effff;"> </span><span style="color: #e1efff;">"</span><span style="color: #fad000;">schematics</span><span style="color: #e1efff;">"</span><span style="color: #e1efff;">:</span><span style="color: #9effff;"> </span><span style="color: #e1efff;">{</span></div>
<div>
<span style="color: #9effff;"> </span></div>
<div>
<span style="color: #9effff;"> </span><span style="color: #e1efff;">"</span><span style="color: #fad000;">@schematics/angular:component</span><span style="color: #e1efff;">"</span><span style="color: #e1efff;">:</span><span style="color: #9effff;"> </span><span style="color: #e1efff;">{</span></div>
<div>
<span style="color: #9effff;"> </span><span style="color: #e1efff;">"</span><span style="color: #fad000;">skipTests</span><span style="color: #e1efff;">"</span><span style="color: #e1efff;">:</span><span style="color: #9effff;"> </span><span style="color: #ff628c;">true</span></div>
<div>
<span style="color: #9effff;"> </span><span style="color: #e1efff;">}</span></div>
<div>
<span style="color: #e1efff;"><br /></span></div>
</div>
<br />
Or:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-2YiuHJ7ZFTo/XreSpDbsA3I/AAAAAAAAPos/7XoN6JrUFpI0SW2pfsV4OuqE9R7xXN6kwCEwYBhgL/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="276" data-original-width="503" height="218" src="https://1.bp.blogspot.com/-2YiuHJ7ZFTo/XreSpDbsA3I/AAAAAAAAPos/7XoN6JrUFpI0SW2pfsV4OuqE9R7xXN6kwCEwYBhgL/s400/2.PNG" width="400" /></a></div>
<br />
<br />
Next time you use the CLI for creating a component, you will automatically have no testing files:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-dVJ7aDkYFm0/XreSp_0ABvI/AAAAAAAAPo0/vFZfnNGCe_Ee6LSAdzOphbY5DMcUG6FPwCEwYBhgL/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="108" data-original-width="570" height="75" src="https://1.bp.blogspot.com/-dVJ7aDkYFm0/XreSp_0ABvI/AAAAAAAAPo0/vFZfnNGCe_Ee6LSAdzOphbY5DMcUG6FPwCEwYBhgL/s400/3.PNG" width="400" /></a></div>
<br /></div>
<div>
<br /></div>
<div>
Also, you can do the same for other kinds of angular,s building blocks, such as guards, directives, pipes, etc :<br /><br />
<div style="background-color: #2d2b55; color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<span style="color: #e1efff;">"</span><span style="color: #fad000;">@schematics/angular:class</span><span style="color: #e1efff;">"</span><span style="color: #e1efff;">:</span><span style="color: #9effff;"> </span><span style="color: #e1efff;">{</span></div>
<div>
<span style="color: #9effff;"> </span><span style="color: #e1efff;">"</span><span style="color: #fad000;">skipTests</span><span style="color: #e1efff;">"</span><span style="color: #e1efff;">:</span><span style="color: #9effff;"> </span><span style="color: #ff628c;">true</span></div>
<div>
<span style="color: #9effff;"> </span><span style="color: #e1efff;">},</span></div>
<div>
<span style="color: #9effff;"> </span><span style="color: #e1efff;">"</span><span style="color: #fad000;">@schematics/angular:component</span><span style="color: #e1efff;">"</span><span style="color: #e1efff;">:</span><span style="color: #9effff;"> </span><span style="color: #e1efff;">{</span></div>
<div>
<span style="color: #9effff;"> </span><span style="color: #e1efff;">"</span><span style="color: #fad000;">skipTests</span><span style="color: #e1efff;">"</span><span style="color: #e1efff;">:</span><span style="color: #9effff;"> </span><span style="color: #ff628c;">true</span></div>
<div>
<span style="color: #9effff;"> </span><span style="color: #e1efff;">},</span></div>
<div>
<span style="color: #9effff;"> </span><span style="color: #e1efff;">"</span><span style="color: #fad000;">@schematics/angular:directive</span><span style="color: #e1efff;">"</span><span style="color: #e1efff;">:</span><span style="color: #9effff;"> </span><span style="color: #e1efff;">{</span></div>
<div>
<span style="color: #9effff;"> </span><span style="color: #e1efff;">"</span><span style="color: #fad000;">skipTests</span><span style="color: #e1efff;">"</span><span style="color: #e1efff;">:</span><span style="color: #9effff;"> </span><span style="color: #ff628c;">true</span></div>
<div>
<span style="color: #9effff;"> </span><span style="color: #e1efff;">},</span></div>
</div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
That's All!!! </div>
<div>
<b>Enjoy Angular.....</b><br />
<b><br /></b><b> </b>by Carmel Schvartzman<br />
<br />
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b></div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-7714715581339500120.post-39351216186799278462020-04-18T21:53:00.000-07:002020-04-18T21:53:43.817-07:00How to solve the error "No directive with exportAs set to ngForm" while using Angular 7In this article we review <b>how to solve the error "No directive with exportAs set to ngForm" while using Angular 7.</b><br />
While declaring a variable on the View, to reference the Template Driven Form that we designed there, we would face an error , at the moment Angular tries to assign the ngForm Directive to the template variable.<br />
The error just states "<b>No directive with exportAs set to ngForm</b>":<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-XxyBpLBMcVY/XWI06X46CtI/AAAAAAAANik/dNCTtD20Z-8ZOUjsb8V2TXqAi8daTwEDQCLcBGAs/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="364" data-original-width="899" height="257" src="https://1.bp.blogspot.com/-XxyBpLBMcVY/XWI06X46CtI/AAAAAAAANik/dNCTtD20Z-8ZOUjsb8V2TXqAi8daTwEDQCLcBGAs/s640/1.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-Jvy_kbGHDiY/XWI3bghHiEI/AAAAAAAANi0/9GK7rVFY2RQXElZPuTRd5ojsb3Fri3sogCEwYBhgL/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="290" data-original-width="574" height="201" src="https://1.bp.blogspot.com/-Jvy_kbGHDiY/XWI3bghHiEI/AAAAAAAANi0/9GK7rVFY2RQXElZPuTRd5ojsb3Fri3sogCEwYBhgL/s400/3.PNG" width="400" /></a></div>
<br />
<br />
<br />
<h3 style="text-align: center;">
<b>How to solve the error "No directive with exportAs set to ngForm" while </b>using Angular7</h3>
<div>
<br /></div>
<div>
The cause of the error is quite simple. Indeed, the error message states the problem specifically : <b>"No directive with exportAs set to ngForm".</b></div>
<div>
Remember that ngForm is a Directive . Also, you know that if you code a Directive, you must decorate it with the "export" word. Therefore, Angular has not found the corresponding Directive, to bind it to the Template.</div>
<div>
In other words : "I could'nt find an ngForm directive with an 'export' definition".<br />
<br />
So that we do is to open the Module where your Component was declared, let's say the app.module for example, and IMPORT there the FormsModule class, which is in '@angular/forms' :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-6ZhyHh9_utk/XWI06oijp4I/AAAAAAAANio/iYib28MFWYwzZfSnk-NGqrlQks9Y6C1SACEwYBhgL/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="549" data-original-width="721" height="302" src="https://1.bp.blogspot.com/-6ZhyHh9_utk/XWI06oijp4I/AAAAAAAANio/iYib28MFWYwzZfSnk-NGqrlQks9Y6C1SACEwYBhgL/s400/2.PNG" width="400" /></a></div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
The FormsModule class, as stated in its definitions, has as its objective to "<span style="background-color: #2d2b55; color: #b362ff; font-family: "consolas" , "courier new" , monospace; font-size: 14px; font-style: italic; white-space: pre;">Exports the required providers and directives for template-driven forms</span>".</div>
<div>
<br /></div>
<div>
<br />
After you add this module in the "imports" section, delete and add again the Template variable, and the error will dissapear.</div>
<div>
<br /></div>
<div>
That's All!!! </div>
<div>
<b>Enjoy Angular.....</b><br />
<b><br /></b><b> </b>by Carmel Schvartzman<br />
<br />
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b></div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-7714715581339500120.post-33470326053360056952020-04-07T01:41:00.000-07:002020-04-07T01:41:41.166-07:00Solved : Preflight Request CORS error : "The requested resource does not support http method 'OPTIONS'"In this article we review <b>how to solve the Preflight CORS error "The requested resource does not support http method 'OPTIONS'".</b><br />
<b>Are you confronted to this error ? :</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-Lir7EB-nqNQ/XgLwYCIo-vI/AAAAAAAAO78/glSyiSdhgqsnKPquQ0dQ-JP9bzojzP3HQCEwYBhgL/s1600/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="683" data-original-width="693" height="393" src="https://1.bp.blogspot.com/-Lir7EB-nqNQ/XgLwYCIo-vI/AAAAAAAAO78/glSyiSdhgqsnKPquQ0dQ-JP9bzojzP3HQCEwYBhgL/s400/5.PNG" width="400" /></a></div>
<b><br /></b>
<b><br /></b>
For several CORS requests, the browser sends a previous request, named "preflight request", before it sends the actual request for the resource.<br />
It is not enought to use the standard CORS (Cross Origin Resource Sharing) on web.config , in order to solve the problem.<br />
<div>
Here you can see the web.config settings, usually arranged to solve the problem :<br />
<br />
<br />
<img border="0" data-original-height="176" data-original-width="854" height="81" src="https://1.bp.blogspot.com/-t3NrBV5rav8/XgLwYnkmbWI/AAAAAAAAO8A/UD8O7YCE98AqpDm0ez1zShfDCcCkk0SvQCEwYBhgL/s400/6.PNG" style="color: #0000ee; text-align: center;" width="400" /><br />
<br />
<br />
<br />
<br />
<h3 style="text-align: center;">
How <b>to solve the Preflight CORS error "The requested resource does not support http method 'OPTIONS'"</b> using Angular7</h3>
<div>
<br /></div>
<div>
<br /></div>
<div>
The issue appears while crossing domains, and relates to POST, PUT, PATCH, and DELETE methods:<br />
here you can see several requests , also from the Angular 7 app, as from POSTMAN :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-Cjj9bWmwRls/XgLwXwwiUsI/AAAAAAAAO8c/udR132CQO6Y3byA69u55Uage40ajvSXQgCEwYBhgL/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="559" data-original-width="1195" height="186" src="https://1.bp.blogspot.com/-Cjj9bWmwRls/XgLwXwwiUsI/AAAAAAAAO8c/udR132CQO6Y3byA69u55Uage40ajvSXQgCEwYBhgL/s400/3.PNG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-5dqOHCvTuck/XgLwX5p8JlI/AAAAAAAAO8U/B9Css9PxGJkhZQXKuwBXOpheiJorjos2wCEwYBhgL/s1600/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="329" data-original-width="948" height="138" src="https://1.bp.blogspot.com/-5dqOHCvTuck/XgLwX5p8JlI/AAAAAAAAO8U/B9Css9PxGJkhZQXKuwBXOpheiJorjos2wCEwYBhgL/s400/4.PNG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-xfV5KQXNGzo/XgLwWBt3ETI/AAAAAAAAO8U/6IQcaay_YWou_TznL9I5hodZ1tKCYjljACEwYBhgL/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="577" data-original-width="1204" height="191" src="https://1.bp.blogspot.com/-xfV5KQXNGzo/XgLwWBt3ETI/AAAAAAAAO8U/6IQcaay_YWou_TznL9I5hodZ1tKCYjljACEwYBhgL/s400/1.PNG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-BseEguSQ2A0/XgLwXZrzRzI/AAAAAAAAO8Y/Mp5JzWOcxfgUhywmAXppnRAsbf0jNHmtQCEwYBhgL/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="588" data-original-width="1183" height="198" src="https://1.bp.blogspot.com/-BseEguSQ2A0/XgLwXZrzRzI/AAAAAAAAO8Y/Mp5JzWOcxfgUhywmAXppnRAsbf0jNHmtQCEwYBhgL/s400/2.PNG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-O8RbZeFAJig/XgLwWEd5eVI/AAAAAAAAO8c/c90q5ANdnoUeokemZsc34nnNloXkzbNJQCEwYBhgL/s1600/0.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="329" data-original-width="948" height="138" src="https://1.bp.blogspot.com/-O8RbZeFAJig/XgLwWEd5eVI/AAAAAAAAO8c/c90q5ANdnoUeokemZsc34nnNloXkzbNJQCEwYBhgL/s400/0.PNG" width="400" /></a></div>
<br />
<br />
<br /></div>
<div>
As said, it is not enought to set the web.config to CORS.<br />
Now, usually the browser sends a previous request to the request that you are sending, named "preflight request", before it sends the actual request for the resource. This Preflight request is of OPTIONS type.<br />
If the response headers do not allow the required HTTP METHOD, the browser do not send it.<br />
<br />
The problem is, the WebApi app has not an action to process the Preflight OPTIONS request :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-4H4L1wRyddM/XgLwYj26U0I/AAAAAAAAO8c/vVwaaKy9IJExEsijVmBESwQiFX5dOCrrACEwYBhgL/s1600/7.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="630" data-original-width="727" height="346" src="https://1.bp.blogspot.com/-4H4L1wRyddM/XgLwYj26U0I/AAAAAAAAO8c/vVwaaKy9IJExEsijVmBESwQiFX5dOCrrACEwYBhgL/s400/7.PNG" width="400" /></a></div>
<br /></div>
<div>
<br /></div>
<div>
That is what the error is trying to say us.<br />
<br />
So, just write an action for OPTIONS verb, that only responds an "OK", as this :<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-hrbVeD9WRxw/XgLwYx6Ee0I/AAAAAAAAO8c/Yi1uqD0F8HA91zo2pxGAx2P9Ng92phiwgCEwYBhgL/s1600/8.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="137" data-original-width="794" height="110" src="https://1.bp.blogspot.com/-hrbVeD9WRxw/XgLwYx6Ee0I/AAAAAAAAO8c/Yi1uqD0F8HA91zo2pxGAx2P9Ng92phiwgCEwYBhgL/s640/8.PNG" width="640" /></a></div>
<br /></div>
<div>
Now try again. Send a request. The breakpoint will show the OPTIONS request being processed :<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-tXLEHXYPebY/XgLwZfCCKmI/AAAAAAAAO8c/TL6wxpplQkc0kaGE4mBxpVH2svBRrLH5wCEwYBhgL/s1600/9.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="154" data-original-width="889" height="68" src="https://1.bp.blogspot.com/-tXLEHXYPebY/XgLwZfCCKmI/AAAAAAAAO8c/TL6wxpplQkc0kaGE4mBxpVH2svBRrLH5wCEwYBhgL/s400/9.PNG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Immediately after, the intended request is taken care of:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-eRtrbsLJ8pI/XgLwWDkctSI/AAAAAAAAO8Q/UwtpvGWy0GEndnNi1PnBYSak05RG4bvYQCEwYBhgL/s1600/10.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="182" data-original-width="622" height="116" src="https://1.bp.blogspot.com/-eRtrbsLJ8pI/XgLwWDkctSI/AAAAAAAAO8Q/UwtpvGWy0GEndnNi1PnBYSak05RG4bvYQCEwYBhgL/s400/10.PNG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-lzDbvrE_om0/XgLwW0Jii2I/AAAAAAAAO8U/M6N7eILErNw3-D2HT1INxonhH-rYB7GiACEwYBhgL/s1600/11.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="602" data-original-width="455" height="400" src="https://1.bp.blogspot.com/-lzDbvrE_om0/XgLwW0Jii2I/AAAAAAAAO8U/M6N7eILErNw3-D2HT1INxonhH-rYB7GiACEwYBhgL/s400/11.PNG" width="301" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-Mq_kJIIKaZA/XgLwXIeIfqI/AAAAAAAAO8c/AuxmqQzOcYMiujhv4j1mymzq804IOAdOQCEwYBhgL/s1600/12.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="511" data-original-width="1175" height="173" src="https://1.bp.blogspot.com/-Mq_kJIIKaZA/XgLwXIeIfqI/AAAAAAAAO8c/AuxmqQzOcYMiujhv4j1mymzq804IOAdOQCEwYBhgL/s400/12.PNG" width="400" /></a></div>
<br /></div>
<div>
<br /></div>
<div>
That solves this issue.<br />
Have a good day :-)</div>
<div>
<br /></div>
<div>
<b>Enjoy Angular.....</b><br />
<b><br /></b><b> </b>by Carmel Schvartzman<br />
<br />
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b></div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-7714715581339500120.post-85572081061722134832020-01-29T09:36:00.000-08:002020-01-29T09:36:35.122-08:00How to implement ngDoCheck from the Angular LifeCycle Hooks using Angular 7In this article we review <b>how to implement ngDoCheck from the Angular LifeCycle Hooks using Angular 7.</b><br />
The ngDoCheck will be triggered ONLY when changes to some @Input() Property of the Child component are NOT DETECTED by the ngOnChanges method. This is the case of "impure" changes made to the Child by the Parent component.<br />
For example, if the child's property changed was an object, and the parent did not change the reference to that object, but some inner property, this is considered impure change, and therefore ngOnChanges will not detect it.<br />
That's why we use ngDoCheck :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-7tbjvNeFH38/XWPZrjKXsvI/AAAAAAAANjU/A4xq_Ud-N6IBTuQ5QW0mSehfqC9O2Q-NwCLcBGAs/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="435" data-original-width="1176" height="235" src="https://1.bp.blogspot.com/-7tbjvNeFH38/XWPZrjKXsvI/AAAAAAAANjU/A4xq_Ud-N6IBTuQ5QW0mSehfqC9O2Q-NwCLcBGAs/s640/1.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-pK9PRlBkF_0/XWPZrgB7QZI/AAAAAAAANjQ/elKm10fI2vc_00c7jroS6pWnMfmrmdmPwCLcBGAs/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="409" data-original-width="805" height="323" src="https://1.bp.blogspot.com/-pK9PRlBkF_0/XWPZrgB7QZI/AAAAAAAANjQ/elKm10fI2vc_00c7jroS6pWnMfmrmdmPwCLcBGAs/s640/2.PNG" width="640" /></a></div>
<br />
You can download the entire Angular code from the following URL:<br />
<a href="https://github.com/CarmelSchvartzman/ANGULAR/blob/master/LIFECYCLE_HOOKS/ngDOCHECK_ngONCHANGES_LifeCycle_Hook" target="_blank"><span style="font-size: x-small;">https://github.com/CarmelSchvartzman/ANGULAR/blob/master/LIFECYCLE_HOOKS/ngDOCHECK_ngONCHANGES_LifeCycle_Hook</span></a><br />
<br />
<h3 style="text-align: center;">
H<b>ow to implement ngDoCheck from the Angular LifeCycle Hooks</b> using Angular7</h3>
<div>
<br /></div>
<div>
To create both components using the CLI :<br />
<br />
///////// ng g c lifecycle/child --flat -s -t -m app.module -d<br />
///////// ng g c lifecycle/parent --flat -t -s -m app.module -d<br />
<br />
<br /></div>
<div>
This is the code for the child :<br />
<br />
///////////////// CHILD :<br />
<br />
import { Component, OnInit, Input, DoCheck, OnChanges, SimpleChanges } from '@angular/core';<br />
import { Friend } from '../models/friends';<br />
import { ComponentFactoryResolver } from '@angular/core/src/render3';<br />
<br />
@Component({<br />
selector: 'app-child',<br />
template: `<br />
<p class='centered'><br />
Data : {{data.name}}<br />
</p><br />
`,<br />
styles: [`.centered{display:flex;justify-content:center;}`]<br />
})<br />
export class ChildComponent implements OnChanges, DoCheck {<br />
@Input() data;<br />
<br />
<br />
ngOnChanges(changes: SimpleChanges) {<br />
// tslint:disable-next-line:forin<br />
for (const propName in changes) {<br />
const change = changes[propName];<br />
const curVal = (change.currentValue);<br />
const prevVal = (change.previousValue);<br />
if (prevVal != null) {<br />
console.warn(`ngOnChanges - PREVIOUS : ${prevVal.name} - CURRENT : ${curVal.name}`);<br />
}<br />
}<br />
}<br />
<br />
ngDoCheck() {<br />
console.warn(`ngDoCheck data : ${this.data.name} .`);<br />
}<br />
<br />
}<br />
<br />
<br />
and this is the code for the parent :<br />
<br /></div>
<div>
<br />
import { Component, OnInit } from '@angular/core';<br />
import { Friend } from '../models/friends';<br />
<br />
@Component({<br />
selector: 'app-parent',<br />
template: `<br />
<app-child id='child' [data]='parentData' ></app-child><br><br><br><br />
<div class='centered'><br />
<button class='btn btn-info ' (click)='ChangeData()'>Change Data</button><br />
</div><br />
`,<br />
styles: [` .centered{display:flex; justify-content:center;}`]<br />
})<br />
export class ParentComponent implements OnInit {<br />
parentData: Friend;<br />
<br />
<br />
ngOnInit() {<br />
this.parentData = new Friend();<br />
this.parentData.name = 'Original Name';<br />
}<br />
<br />
ChangeData(): void {<br />
<br />
// This change (IMPURE CHANGE) will trigger ONLY ngDoCheck : (because the reference was NOT changed)<br />
this.parentData.name = 'Changed name';<br />
<br />
// The following changes (PURE + IMPURE CHANGE) will trigger BOTH ngOnChange + ngDoCheck : (because the reference WAS changed)<br />
// this.parentData = new Friend();<br />
// this.parentData.name = 'NEW FRIEND NAME';<br />
}<br />
<br />
}</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
That's All!!! </div>
<div>
<b>Enjoy Angular.....</b><br />
<b><br /></b><b> </b>by Carmel Schvartzman<br />
<br />
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div>
<br /></div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-7714715581339500120.post-86444071083878619722020-01-24T00:10:00.000-08:002020-01-24T00:10:36.624-08:00How to create a Custom Validator for a Select control using Angular 7In this article we review <b>how to create a Custom Validator using Angular 7,</b> in an Angular Application that includes a Template Driven Form , custom validator that allows to ignore a default "Select a city" value , looking like this :<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-xfOZ9SNzmsg/XXjOQwyYlTI/AAAAAAAANqM/IHJuKz8YK0ErIw7Fpks1FgXWKbPpcWo9QCLcBGAsYHQ/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="294" data-original-width="878" height="133" src="https://1.bp.blogspot.com/-xfOZ9SNzmsg/XXjOQwyYlTI/AAAAAAAANqM/IHJuKz8YK0ErIw7Fpks1FgXWKbPpcWo9QCLcBGAsYHQ/s400/1.PNG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-l13aY3yZlUk/XXjORMcQ9KI/AAAAAAAANqU/AqQ90s0BR_8kX8wZXZN0AU4XqOQ2mtUmgCLcBGAsYHQ/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="228" data-original-width="532" height="171" src="https://1.bp.blogspot.com/-l13aY3yZlUk/XXjORMcQ9KI/AAAAAAAANqU/AqQ90s0BR_8kX8wZXZN0AU4XqOQ2mtUmgCLcBGAsYHQ/s400/3.PNG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/--coDNah1_cQ/XXjORnuMtPI/AAAAAAAANqY/9a4XfsfOx6YJwbBzQjxPYEr-o7Gt_d7EQCLcBGAsYHQ/s1600/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="189" data-original-width="588" height="127" src="https://1.bp.blogspot.com/--coDNah1_cQ/XXjORnuMtPI/AAAAAAAANqY/9a4XfsfOx6YJwbBzQjxPYEr-o7Gt_d7EQCLcBGAsYHQ/s400/4.PNG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-FIb7R6LhnAw/XXjOR6iSvvI/AAAAAAAANqc/il-vX4dzoJ4LSn4U7PlTYD18bKDPHKQXgCLcBGAsYHQ/s1600/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="210" data-original-width="595" height="140" src="https://1.bp.blogspot.com/-FIb7R6LhnAw/XXjOR6iSvvI/AAAAAAAANqc/il-vX4dzoJ4LSn4U7PlTYD18bKDPHKQXgCLcBGAsYHQ/s400/5.PNG" width="400" /></a></div>
<br />
<br />
<br />
<br />
<br />
You can copy-paste all pieces of source code from this Tutorial, or elsewhere you can download the entire Angular code from the following URL:<br />
<a href="https://github.com/CarmelSchvartzman/ANGULAR/blob/master/CUSTOM_VALIDATORS/SELECT_VALIDATOR" target="_blank"><span style="font-size: x-small;">https://github.com/CarmelSchvartzman/ANGULAR/blob/master/CUSTOM_VALIDATORS/SELECT_VALIDATOR</span></a><br />
<br />
<br />
<h3 style="text-align: center;">
How to create a Custom Validator for a Select control using Angular7</h3>
<div>
<br /></div>
<div>
////////////////////// CUSTOM VALIDATOR :</div>
<div>
<br />
<br />
import { Directive } from '@angular/core';<br />
import { Validator, AbstractControl, ValidationErrors, NG_VALIDATORS } from '@angular/forms';<br />
<br />
@Directive({<br />
selector: '[<b>appRequiredValidator</b>]',<br />
<b>providers</b>: [{ provide: NG_VALIDATORS, useExisting: RequiredValidatorDirective, multi: true }]<br />
})<br />
export class RequiredValidatorDirective<b> implements Validator</b> {<br />
<b>validate</b>(control: AbstractControl): <b>ValidationErrors </b>{<br />
return control.value === '-1' ? { noValueChosen: true } : null;<br />
<br />
}<br />
}<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-xfOZ9SNzmsg/XXjOQwyYlTI/AAAAAAAANqM/IHJuKz8YK0ErIw7Fpks1FgXWKbPpcWo9QCLcBGAsYHQ/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="294" data-original-width="878" height="214" src="https://1.bp.blogspot.com/-xfOZ9SNzmsg/XXjOQwyYlTI/AAAAAAAANqM/IHJuKz8YK0ErIw7Fpks1FgXWKbPpcWo9QCLcBGAsYHQ/s640/1.PNG" width="640" /></a></div>
<br />
<br />
//////////////////// HTML VIEW :<br />
<br />
<br />
<div class="form-group" [class.has-error]='city.errors?.<b>noValueChosen</b>' [class.has-success]='city.valid'><br />
<label class='control-label' for="city"><br />
City<br />
</label><br />
<select #city='ngModel' <b>appRequiredValidator </b>class="form-control" name="city" id="city" [(ngModel)]='friend.city'><br />
<option style='color:rgb(201, 149, 149)' value='-1'>Select a City</option><br />
<option *ngFor='let c of cities' [value]="c.id">{{c.name}}</option><br />
</select><br />
<span class='help-block' *ngIf='city.errors?.<b>noValueChosen</b>'>Please select a city</span><br />
</div><br />
<br />
<br />
///////////////////// COMPONENT :<br />
<br />
<b>cities</b>: City[] =<br />
[{ id: 1, name: 'Athens' }, { id: 2, name: 'Volos' }, { id: 3, name: 'Thesaloniki' },<br />
{ id: 4, name: 'Santorini' }, { id: 5, name: 'Corfu' }];<br />
<br />
<br />
///////////////////// MODULE :<br />
<br />
import { <b>RequiredValidatorDirective </b>} from './shared/required-validator.directive';<br />
<br />
@NgModule({<br />
declarations: [<br />
<b>RequiredValidatorDirective</b><br />
],<br />
............<br />
<br /></div>
<div>
The results :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-tRJrJhq_CO0/XXjOQ6haLtI/AAAAAAAANqs/3Vs8cGijh2siUkGo2zG9kNF5woMSFDK6wCEwYBhgL/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="249" data-original-width="596" height="133" src="https://1.bp.blogspot.com/-tRJrJhq_CO0/XXjOQ6haLtI/AAAAAAAANqs/3Vs8cGijh2siUkGo2zG9kNF5woMSFDK6wCEwYBhgL/s320/2.PNG" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-l13aY3yZlUk/XXjORMcQ9KI/AAAAAAAANqs/Lxxp24U7SVUqF9JII7ZQEqpgMAxiz5TuACEwYBhgL/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="228" data-original-width="532" height="137" src="https://1.bp.blogspot.com/-l13aY3yZlUk/XXjORMcQ9KI/AAAAAAAANqs/Lxxp24U7SVUqF9JII7ZQEqpgMAxiz5TuACEwYBhgL/s320/3.PNG" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/--coDNah1_cQ/XXjORnuMtPI/AAAAAAAANqo/lF705ZsfCwIH9B789qErwvCfsO1KuLJ8wCEwYBhgL/s1600/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="189" data-original-width="588" height="102" src="https://1.bp.blogspot.com/--coDNah1_cQ/XXjORnuMtPI/AAAAAAAANqo/lF705ZsfCwIH9B789qErwvCfsO1KuLJ8wCEwYBhgL/s320/4.PNG" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-nbsdHQhBopA/XXjOSOYsPCI/AAAAAAAANqw/GqskjSkZDrILbp6T4390r3KhM6CGaWI3ACEwYBhgL/s1600/6.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="203" data-original-width="605" height="107" src="https://1.bp.blogspot.com/-nbsdHQhBopA/XXjOSOYsPCI/AAAAAAAANqw/GqskjSkZDrILbp6T4390r3KhM6CGaWI3ACEwYBhgL/s320/6.PNG" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
And finally, if the DEFAULT value is chosen again :</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-FIb7R6LhnAw/XXjOR6iSvvI/AAAAAAAANqs/F4lkZtV0xqMWEM1DCwXGA0MfsrD6_mKQgCEwYBhgL/s1600/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="210" data-original-width="595" height="112" src="https://1.bp.blogspot.com/-FIb7R6LhnAw/XXjOR6iSvvI/AAAAAAAANqs/F4lkZtV0xqMWEM1DCwXGA0MfsrD6_mKQgCEwYBhgL/s320/5.PNG" width="320" /></a></div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
That's All!!! </div>
<div>
<b>Enjoy Angular.....</b><br />
<b><br /></b><b> </b>by Carmel Schvartzman<br />
<br />
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b></div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-7714715581339500120.post-60001027027982791522019-12-06T03:18:00.000-08:002019-12-06T03:18:37.886-08:00#18 - Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API serviceIn this article we explain step by step <b>How to Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service,</b> to Create, Read, Update and Delete (C.R.U.D.) items using a web service. In this article we'll be developing from scratch in 30 minutes an AngularJS SPA (Single Page App) Application that sends HTTP GET, HTTP POST, HTTP PATCH and HTTP DELETE Ajax Requests to Add, Edit, and erase the items from and to a REST OData Web API.<br />
Our SPA will also be using the responsive Twitter Bootstrap CSS3 styles.<br />
The source code for this SPA can be found in the following GitHub repository:<br />
<br />
<a href="https://github.com/CarmelSoftware/OrchidsSPA" target="_blank">https://github.com/CarmelSoftware/OrchidsSPA</a><br />
<br />
<b><i>This tutorial is a standalone</i></b>, but if you wish, you can take a look at the previous lessons on this series, using the arrow below, or starting at <a href="http://angularjsclub.blogspot.com/2014/12/first-angularjs-application-for-Beginners-in-10-minutes.html" target="_blank">Lesson #1</a> . In that environment, this counts as the Lesson #18 in the "AngularJS: From 0 To 100" articles written for absolute Beginners.<br />
<br />
<b><a href="http://angularjsclub.blogspot.com/2015/02/make-post-requests-odata-web-api-restful-service-using-http-angularjs.html" target="_blank"><<<< PREVIOUS LESSON</a> </b><br />
<b><br />
</b><br />
<br />
This is a snapshot of the SPA AngularJS that we'll develop from scratch here, in 30 minutes :<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-muzH_gT5sBc/VO22p0ODzdI/AAAAAAAAJf0/7y87E2rEOmc/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service " border="0" height="540" src="https://3.bp.blogspot.com/-muzH_gT5sBc/VO22p0ODzdI/AAAAAAAAJf0/7y87E2rEOmc/s1600/1.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service " width="538" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: center;">
How to Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service</h3>
<br />
As we move forward through this Tutorial,you will find the source code to copy-paste to your project. However, you can download this complete AngularJS CRUD SPA App from the following GitHub repository, all together packed in a ZIP file:<br />
<br />
<a href="https://github.com/CarmelSoftware/OrchidsSPA/archive/master.zip" target="_blank">https://github.com/CarmelSoftware/OrchidsSPA/archive/master.zip</a><br />
<br />
<br />
First we add the link references to the javascripts and styles , using CDN(content delivery network), instead of downloading the files to our project:<br />
<br />
<a href="http://2.bp.blogspot.com/-vO-HdoTF4P0/VOSbNyEZkRI/AAAAAAAAJXI/fjNOvRpzHlM/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 1 " border="0" height="144" src="https://2.bp.blogspot.com/-vO-HdoTF4P0/VOSbNyEZkRI/AAAAAAAAJXI/fjNOvRpzHlM/s1600/1.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 1 " width="540" /></a><br />
<br />
As you see, we add 2 AngularJS scripts, and 2 Bootstrap CSS3 files. Also, we create directories for "Content" and "Controllers".<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(get the source code):<br />
<blockquote class="tr_bq">
<span style="color: #38761d; font-size: x-small;"><b><!doctype html></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"><html </span><span style="color: red;">data-ng-app</span><span style="color: #38761d;">="OrchidsApp"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><head></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <title>AngularJS SPA App</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </title></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <link href="Contents/Style.css" rel="stylesheet" /></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" /></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular-route.js"></script></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <script src="/App/Controllers/SPAControllers.js" type="text/javascript"></script></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></head></b></span></blockquote>
<br />
Next, copy-paste the following CSS3 style to your style.css (placed at the "Contents" folder) file:<br />
<blockquote class="tr_bq">
<span style="color: #38761d; font-size: x-small;"><b>body {background:rgba(255, 238, 238, 0.5);</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>img {width:99%;height:99%;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.select</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>width:100px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>padding:5px 5px 5px 25px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>margin:10px 15px 15px 25px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>font:900 12px Comic Sans MS;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>opacity:0.9;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>background:#f0f0f0; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>border:5px solid #ddd; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>border-radius: 10px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>box-shadow:10px 10px 2px #c0c0c0;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.centered</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> text-align:center; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.div-table{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> display:table; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> width:auto; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> background-color:#eee;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> border-spacing:5px; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.div-table-row{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> display:table-row;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> width:auto;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> clear:both;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.div-cell-left{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> float:left; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> display:table-cell; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> width:33%;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> height:200px; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> padding:5px 5px 5px 5px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.div-cell-center{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> float:left; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> display:table-cell; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> width:56%; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> height:200px; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> padding:5px 5px 5px 5px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.div-cell-right{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> float:left; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> display:table-cell; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> width:10%; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> height:200px; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> padding:5px 5px 5px 5px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.msg {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>font:900 Comic Sans MS;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>color:#1b42ae;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></blockquote>
<div>
<br /></div>
<div>
Next, add a NavBar.html file (again at the Contents folder) containing the Bootstrap NavsBar as follows (adding the Twitter Bootstrap is thoroughly explained <a href="http://angularjsclub.blogspot.com/2015/02/add-css3-style-to-angularjs-Application-with-Twitter-Bootstrap.html" target="_blank">in this Bootstrap Tutorial</a>):<br />
<blockquote class="tr_bq">
<span style="color: #38761d; font-size: x-small;"><b><nav class="navbar navbar-default"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="container-fluid"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b> <div class="navbar-header"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <a class="navbar-brand" href="/">Orchids</a></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <ul class="nav navbar-nav"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <li class="active"><a href="/">Home <span class="sr-only">(current)</span></a></li></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <li><a href="#/">Orchids SPA</a></li></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <li><a href="/PDF">Create PDF</a></li></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <li><a href="/Home">Help</a></li></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <li><a href="/Home/About">About</a></li></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b> </ul></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <form class="navbar-form navbar-left" role="search"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="form-group"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <input type="text" class="form-control" placeholder="Search"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <button type="submit" class="btn btn-default">Submit</button></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </form></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <ul class="nav navbar-nav navbar-right"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <li><a href="/Home">Technologies</a></li></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b> </ul></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <!-- /.navbar-collapse --></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <!-- /.container-fluid --></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></nav></b></span></blockquote>
<br /></div>
<div>
<br /></div>
<br />
In the main HTML file, add a <div> bound to an <b><span style="color: #38761d;">data-ng-view</span></b>, and a <b><span style="color: #38761d;">data-ng-include</span></b> to insert the NavBar HTML5 inside the web page:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-IPE0Jiv18FE/VOnwnqtfMKI/AAAAAAAAJaw/byxXHhCa47s/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 2 " border="0" height="332" src="https://1.bp.blogspot.com/-IPE0Jiv18FE/VOnwnqtfMKI/AAAAAAAAJaw/byxXHhCa47s/s1600/2.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 2 " width="540" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(get the source code):<br />
<blockquote class="tr_bq">
<span style="color: #38761d; font-size: x-small;"><b><body class="container"></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <div </span><span style="color: red;">data-ng-include</span><span style="color: #38761d;">="" </span><span style="color: red;">src</span><span style="color: #38761d;">="'Contents/Navbar.html'" ></div></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="jumbotron"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <h1>Orchids SPA - AngularJS App</h1></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div id="container"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="font-size: x-small;"><b><span style="color: #38761d;"> <div </span><span style="color: red;">data-ng-view</span><span style="color: #38761d;">=""></div></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b> </div></b></span><b style="color: #38761d; font-size: small;"> </b><br />
<span style="color: #38761d; font-size: x-small;"><b></body></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></html></b></span></blockquote>
This <div> element will be replaced by AngularJS with three Template Views, according to the User's selection ("#/" , "#/add" and "#/edit"), that we're going to design next: a List of Items, a template for Adding a new Item, and another one for Editing .<br />
The first one is for the List of flowers, so create an "/App/Views/OrchidsList.html" file, and paste the following code inside it:<br />
<blockquote class="tr_bq">
<span style="color: #38761d; font-size: x-small;"><b><div class="jumbotron" > </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <h2>List of my Favorite Orchids</h2></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <h4 class="msg">{{Message}}</h4> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></div> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><div class="jumbotron"> </b></span><br />
<br />
<span style="color: #38761d; font-size: x-small;"><b> <ul class="list-group"> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <li </span><span style="color: red;">data-ng-repeat</span><span style="color: #38761d;">="Orchid in OrchidsList" class="list-group-item"> </span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="div-table" ></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="div-table-row"> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="div-cell-left"></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <img src="http://carmelwebapi.somee.com/AngularJS/Contents/Images/{{</span><span style="color: red;">Orchid.MainPicture</span><span style="color: #38761d;">}}" alt="{{Orchid.Title}}" title="{{Orchid.Title}}" > </span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="div-cell-center"> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <span >{{</span><span style="color: red;">Orchid.BlogID</span><span style="color: #38761d;">}} . {{</span><span style="color: red;">Orchid.Title | uppercase</span><span style="color: #38761d;">}} <br /><br /></span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> {{</span><span style="color: red;">Orchid.Text</span><span style="color: #38761d;">}} {{</span><span style="color: red;">Orchid.DatePosted | date</span><span style="color: #38761d;"> }}</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </span> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="div-cell-right"></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <a href="</span><span style="color: red;">#/edit/{{Orchid.BlogID}}</span><span style="color: #38761d;">"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </a></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </li> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </ul> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="panel panel-default"> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="panel-body | centered"></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <button </span><span style="color: red;">data-ng-click</span><span style="color: #38761d;">="fnShowOrchids(-1)" class="btn btn-default btn-lg" ><span class="glyphicon glyphicon-hand-left" aria-hidden="true"></span></button></span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <input type="number" </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="pageSize" max="4" min="1" value="2" class="select"/></span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <button </span><span style="color: red;">data-ng-click</span><span style="color: #38761d;">="fnShowOrchids(1)" class="btn btn-default btn-lg" ><span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span></button></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <a href="</span><span style="color: red;">#/add</span><span style="color: #38761d;">">Add your Favorite Flowers</a></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></div></b></span></blockquote>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-DmmnoASTIRA/VO26WKTBteI/AAAAAAAAJg0/PQQClMeYYVw/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service " border="0" height="448" src="https://3.bp.blogspot.com/-DmmnoASTIRA/VO26WKTBteI/AAAAAAAAJg0/PQQClMeYYVw/s1600/9.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service " width="540" /></a></div>
<br />
<br />
I've remarked the more relevant code in <b><span style="color: red;">red</span></b>. The two buttons at the bottom are for Pagination of the items forward and backwards. The Input "number" is for setting the size of every page while paging. Also, we just display all the flowers by showing all the OrchidsList that we will prepare at the Controller.<br />
We explained using AngularJS collections and the <b><span style="color: #38761d;">data-ng-repeat</span></b> <a href="http://angularjsclub.blogspot.com/2015/01/7-using-data-collections-in-angularjs.html" target="_blank">in a previous lesson</a> .<br />
There is also two link buttons to load the "Edit" and the "Delete" View Templates, using the Bootstrap's Glyphicons.<br />
This links send the ID of the selected item to the Edit or the Delete Controllers.<br />
<br />
Next, we're going to code the AngularJS Module, the Routing , and the Controllers.<br />
<br />
Create a javascript SPAControllers.js file, and add a Module with a RouteProvider, as follows:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<a href="http://2.bp.blogspot.com/-cu7fXoi1v8A/VO22qYDjd8I/AAAAAAAAJf4/H39u0b_Vp-4/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 3 " border="0" height="486" src="https://2.bp.blogspot.com/-cu7fXoi1v8A/VO22qYDjd8I/AAAAAAAAJf4/H39u0b_Vp-4/s1600/4.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 3 " width="540" /></a><br />
<br />
<br />
<blockquote class="tr_bq">
<span style="font-size: x-small;"><b><span style="color: #38761d;">var oOrchidsApp = angular.module('OrchidsApp', ['</span><span style="color: red;">ngRoute</span><span style="color: #38761d;">','</span><span style="color: red;">ngResource</span><span style="color: #38761d;">']);</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b>oOrchidsApp.config(['$routeProvider', function ($routeProvider) {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">$routeProvider</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b> .when('/',</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> templateUrl: "App/Views/OrchidsList.html",</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> controller: "OrchidsAllCtl"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> })</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> .when('/add',</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> templateUrl: "App/Views/OrchidsAdd.html",</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> controller: "OrchidsAddCtl"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> })</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> .when('/edit/:id',</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> templateUrl: "App/Views/OrchidsEdit.html",</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> controller: "OrchidsEditCtl"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> })</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> .when('/delete/:id',</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> templateUrl: "/App/Views/OrchidsDelete.html",</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> controller: "OrchidsDeleteCtl"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> })</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> .otherwise({ redirectTo: "/" });</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b>}]);</b></span></blockquote>
<div>
<br /></div>
<br />
<br />
We are using an AngularJS $routeProvider to bind each View with the correspondent Template and Controller. When the default "/" is required, the user will be faced with the "All" template. If the "/add" page is required, then the "Add" template will be displayed.<br />
The same thing for the "Edit" template.<br />
Remember, this is always the same HTML web page that is browsed here. This is a SPA application: all is done in THE SAME url: there are no reloads of the HTML page!!!<br />
That's why we referenced the angular-route.js javascript at the <head>: to use the $routeProvider at the Module, and enabling an SPA application.<br />
<br />
Next we add some Global variables, that is, some data that will be reused by the different Controllers, and we do not want to repeat several times all over the App:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-w0k00eguDyw/VOnwpHb0CBI/AAAAAAAAJbg/AvVaFQIciPs/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 4 " border="0" height="226" src="https://1.bp.blogspot.com/-w0k00eguDyw/VOnwpHb0CBI/AAAAAAAAJbg/AvVaFQIciPs/s1600/6.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 4 " width="540" /></a></div>
<br />
<br />
<br />
<br />
<blockquote class="tr_bq">
<span style="color: #38761d; font-size: x-small;"><b>oOrchidsApp.value('msg', { value: '' });</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b>oOrchidsApp.factory('GlobalSvc', [function () {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b> var oFlowersPictures = ["haeckel_orchidae.jpg", "Bulbophyllum.jpg", "Cattleya.jpg", "Orchid Calypso.jpg", "Paphiopedilum_concolor.jpg", "Peristeria.jpg", "Phalaenopsis_amboinensis.jpg", "Sobralia.jpg"];</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> var sURLDev = 'http://localhost:21435/WebAPI/OrchidsWebAPI/';</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> var sURLProd = 'http://CARMELWEBAPI.SOMEE.COM/WebAPI/OrchidsWebAPI/';</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> var bIsDevelopmentTest = false;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> var sURL = bIsDevelopmentTest ? sURLDev : sURLProd;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b> return {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> getFlowers: function () { return oFlowersPictures; },</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> getURL: function () { return sURL; }</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b> };</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}]);</b></span></blockquote>
<br />
The "value" object will contain a global message which communicates between the different Templates.<br />
The "GlobalSvc" is a Service created by an AngularJS Factory, containing the URLs used all over the Application, and also the list of items to be displayed by the Select list that we'll put in every View Template.<br />
We code two URLs: one for testing purposes and debugging, and one for Deployment.<br />
<br />
Next, we create a Resource, that will help us to sending HTTP GET requests for a specific ID of an item:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/--hSB9Qq62cI/VOnwpTAXz5I/AAAAAAAAJbY/N9mwxFH0WEY/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 5 " border="0" height="156" src="https://4.bp.blogspot.com/--hSB9Qq62cI/VOnwpTAXz5I/AAAAAAAAJbY/N9mwxFH0WEY/s1600/7.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 5 " width="540" /></a></div>
<br />
<br />
<br />
<span style="font-size: x-small;"><b><span style="color: #38761d;">oOrchidsApp.factory('OrchidsResource', ['GlobalSvc', '</span><span style="color: red;">$resource</span><span style="color: #38761d;">',function (GlobalSvc,</span><span style="color: red;"> $resource</span><span style="color: #38761d;">) {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> return </span><span style="color: red;">$resource</span><span style="color: #38761d;">(GlobalSvc.getURL() + ":id", </span><span style="color: red;">{ id: "@id" }</span><span style="color: #38761d;">);</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}]);</b></span><br />
<br />
<br />
Now we need the code for loading the View ALL Items Template, therefore add to the Module the following Controller:<br />
<blockquote class="tr_bq">
<span style="font-size: x-small;"><b><span style="color: #38761d;">oOrchidsApp.controller('OrchidsAllCtl', ['GlobalSvc', '$scope', '</span><span style="color: red;">$http</span><span style="color: #38761d;">', '$log', 'msg', function (GlobalSvc, $scope, $http, $log, msg) {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b> $scope.angularClass = "angular";</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.OrchidsList = [];</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.pageSize = 2;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> var iCurrentPage = -1; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b> $scope.fnShowOrchids = function (direction) {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b> iCurrentPage = iCurrentPage + direction;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> iCurrentPage = iCurrentPage >= 0 ? iCurrentPage : 0;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> var sURL = GlobalSvc.getURL() +</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> "?$skip=" +</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> iCurrentPage * $scope.pageSize</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> + "&$top=" +</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.pageSize;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">$http.get</span><span style="color: #38761d;">(sURL).</span><span style="color: red;">success</span><span style="color: #38761d;">(function (response) {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b> $scope.OrchidsList = response;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $log.info("OK");</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b> },function (err) { $log.error(err) })</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.Message = "";</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> }</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b> $scope.fnShowOrchids(1);</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.Message = msg.value;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>]);</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span> <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-zAu8kxQIMRs/VOnwp-XFH_I/AAAAAAAAJbs/mSURB-c3gyM/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 6 " border="0" height="432" src="https://2.bp.blogspot.com/-zAu8kxQIMRs/VOnwp-XFH_I/AAAAAAAAJbs/mSURB-c3gyM/s1600/8.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 6 " width="540" /></a></div>
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></blockquote>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
This HTTP GET Ajax request code is thoroughly explained in the <a href="http://angularjsclub.blogspot.com/2015/02/add-css3-style-to-angularjs-Application-with-Twitter-Bootstrap.html" target="_blank">Lesson #14</a>. Here we just get the URL from the "GlobalSvc" Service, append to it the OData code for Paging ("$skip=" + "$top="), and send an HTTP GET REST request via the $http Service.<br />
The "direction" function argument, as explained <a href="http://angularjsclub.blogspot.com/2015/02/add-css3-style-to-angularjs-Application-with-Twitter-Bootstrap.html" target="_blank">in a previous tutorial</a>, is for paging backwards and forward.<br />
Notice that we made Dependency Injections for three services : $scope, to get the variables, $http for sending HTTP REST requests to the web server, and $log for logging and making easy to debug our app.<br />
In case you don't have an OData RESTful web service working on your environment, i developed and deployed one that you can use. It can be found at this URL:<br />
<br />
<a href="http://carmelwebapi.somee.com/WebAPI/OrchidsWebAPI">http://carmelwebapi.somee.com/WebAPI/OrchidsWebAPI</a><br />
<br />
You can use freely use it: an example of using this OData Web API:<br />
<br />
<a href="http://carmelwebapi.somee.com/WebAPI/OrchidsWebAPI/?$skip=2&$top=3">http://carmelwebapi.somee.com/WebAPI/OrchidsWebAPI/?$skip=2&$top=3</a><br />
<br />
If you already have an OData service working, just replace the URLs at the Service.<br />
<br />
We're going to fetch the data from an OData RESTful service, by using the Ajax Service called $http in Angular. This service provide all kinds of HTTP functionality, like sending HTTP POST, PATCH, HTTP PUT or DELETE requests. Next we will use both the HTTP GET, and the HTTP POST and PATCH verbs.<br />
The documentation for the $http service can be seen at the <a href="https://docs.angularjs.org/api/ng/service/$http" target="_blank">Angular official web site</a>:<br />
<br />
<a href="http://2.bp.blogspot.com/-dbWzRaFBsW0/VNHh0xyjjsI/AAAAAAAAJPk/TsRH7Af-b6o/s1600/18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 17 " border="0" height="616" src="https://2.bp.blogspot.com/-dbWzRaFBsW0/VNHh0xyjjsI/AAAAAAAAJPk/TsRH7Af-b6o/s1600/18.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 17 " width="540" /></a><br />
<br />
<br />
<br />
<br />
Now let's design the AngularJS Template View for adding a new item to the Orchids collection.<br />
The "Add" Template will show as follows:<br />
<br />
<blockquote class="tr_bq">
<span style="color: #38761d; font-size: x-small;"><b><div class="container"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><div class="jumbotron"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="" > </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <h2>Add your Favorite Orchid</h2> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <form name="addOrchid" class=""</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-submit</span><span style="color: #38761d;">="fnAdd()"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <input type="text" class="form-control"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> placeholder="Title"</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;"> data-ng-model</span><span style="color: #38761d;">="Orchid.Title"</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> required></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <input type="text" class="form-control"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> placeholder="Text"</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="Orchid.Text"</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> required></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <select </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="Orchid.MainPicture" title="Select a Picture" </span><span style="color: red;">data-ng-options</span><span style="color: #38761d;">="Img for Img in Flowers" class="form-control"></select></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <input type="submit" class="btn btn-default btn-lg"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> value="Add"</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-disabled</span><span style="color: #38761d;">="addOrchid.$invalid"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <span>{{fnShowMsg()}}</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </form></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <a href="#/">See All Flowers</a></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></div></b></span></blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-Ug2utA3BUsM/VOnwqAQCbeI/AAAAAAAAJbk/2mQ3v8RrtRw/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 7 " border="0" height="300" src="https://2.bp.blogspot.com/-Ug2utA3BUsM/VOnwqAQCbeI/AAAAAAAAJbk/2mQ3v8RrtRw/s1600/9.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 7 " width="540" /></a></div>
<br />
<br />
<br />
At the Module, add a new Controller to add a ITEM capabilities of our SPA:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-HpoaBxBEmyg/VOnwlmoFVbI/AAAAAAAAJb4/AjFjp7wcQAg/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 8 " border="0" height="378" src="https://2.bp.blogspot.com/-HpoaBxBEmyg/VOnwlmoFVbI/AAAAAAAAJb4/AjFjp7wcQAg/s1600/10.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 8 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(get the source code):<br />
<blockquote class="tr_bq">
<span style="color: #38761d; font-size: x-small;"><b>oOrchidsApp.controller('OrchidsAddCtl',</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> ['GlobalSvc', '</span><span style="color: red;">$http</span><span style="color: #38761d;">', '$scope', '$location', '$log', 'msg',</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> function (GlobalSvc, $http, $scope, $location, $log, msg) {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> msg.value = "";</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.Flowers = GlobalSvc.getFlowers();</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.fnAdd = function () {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b> var oFlower = { "Title": $scope.Orchid.Title, "Text": $scope.Orchid.Text, </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> "MainPicture": $scope.Orchid.MainPicture }; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">$http</span><span style="color: #38761d;">({</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> url: GlobalSvc.getURL(),</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">method: "POST",</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> data: oFlower, </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">headers: { 'Content-Type': 'application/json' }</span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> }).</span><span style="color: red;">success</span><span style="color: #38761d;">(function (data, status, headers, config) {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> msg.value = "New Orchid saved";</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.IsSaved = true;</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> }).</span><span style="color: red;">error</span><span style="color: #38761d;">(function (err) {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $log.error(err);</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> }); </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> }</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b> $scope.fnShowMsg = function () { return msg.value; }</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>]);</b></span></blockquote>
Finally, we'll create the "Edit" View Template for our SPA. Add a new HTML file called "" and type the following markup:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-8axSZppOMVs/VOrWGF55nCI/AAAAAAAAJcY/cQbNbXvoT74/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 9 " border="0" height="312" src="https://4.bp.blogspot.com/-8axSZppOMVs/VOrWGF55nCI/AAAAAAAAJcY/cQbNbXvoT74/s1600/11.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 9 " width="540" /></a></div>
<br />
<blockquote class="tr_bq">
<span style="color: #38761d; font-size: x-small;"><b><div class="container"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><div class="jumbotron"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="" > </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <h2>Edit your Favorite Orchid</h2> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <form name="editOrchid" class=""</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-submit</span><span style="color: #38761d;">="fnEdit()"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <input type="text" class="form-control"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> placeholder="Title"</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="Orchid.Title"</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> required></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <input type="text" class="form-control"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> placeholder="Text"</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="Orchid.Text"</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> required></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <select </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="Orchid.MainPicture" title="Select a Picture" </span><span style="color: red;">data-ng-options</span><span style="color: #38761d;">="Img for Img in Flowers" class="form-control"></select></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <input type="submit" class="btn btn-default btn-lg"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> value="Update"</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-disabled</span><span style="color: #38761d;">="editOrchid.$invalid"></span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <span>{{</span><span style="color: red;">fnShowMsg()</span><span style="color: #38761d;">}}</span></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </form></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <a href="</span><span style="color: red;">#/</span><span style="color: #38761d;">">See All Flowers</a></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span></blockquote>
<br />
Then go back to the javascript Module and append another Controller as follows:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-NRIO_NCK5Qw/VOrWGLzDS1I/AAAAAAAAJcU/Kn4YAHojelU/s1600/12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 10 " border="0" height="354" src="https://3.bp.blogspot.com/-NRIO_NCK5Qw/VOrWGLzDS1I/AAAAAAAAJcU/Kn4YAHojelU/s1600/12.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 10 " width="540" /></a></div>
<br />
<blockquote class="tr_bq">
<span style="font-size: x-small;"><b><span style="color: #38761d;">oOrchidsApp.</span><span style="color: red;">controller</span><span style="color: #38761d;">('OrchidsEditCtl',</span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> ['</span><span style="color: red;">OrchidsResource</span><span style="color: #38761d;">', 'GlobalSvc', '</span><span style="color: red;">$http</span><span style="color: #38761d;">', '</span><span style="color: red;">$routeParams</span><span style="color: #38761d;">', '$scope', '$location', '$log', '</span><span style="color: red;">msg</span><span style="color: #38761d;">',</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> function (OrchidsResource, GlobalSvc, $http, $routeParams, $scope, $location, $log, msg) {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b> msg.value = "";</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.Flowers = GlobalSvc.getFlowers();</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> $scope.Orchid = </span><span style="color: red;">OrchidsResource.get({ id: $routeParams.id });</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b> $scope.fnEdit = function () {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> var oFlower = { "BlogId": </span><span style="color: red;">$routeParams.id</span><span style="color: #38761d;"> , "Title": $scope.Orchid.Title, </span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> "Text": $scope.Orchid.Text, "MainPicture": $scope.Orchid.MainPicture };</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">$http</span><span style="color: #38761d;">({</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> url: GlobalSvc.getURL() + $routeParams.id,</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">method: "PATCH",</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> data: oFlower,</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> headers: { 'Content-Type': 'application/json' }</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="font-size: x-small;"><b><span style="color: #38761d;"> }).</span><span style="color: red;">success</span><span style="color: #38761d;">(function (data) { msg.value = "Orchid successfully updated"; }).</span><span style="color: red;">error</span><span style="color: #38761d;">(function (err) { });</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span><span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> }</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.fnShowMsg = function () { return msg.value; }</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>]);</b></span></blockquote>
<div>
<br /></div>
Here are some new things that will call your attention: the <b style="font-size: small;"><span style="color: red;">$routeParams.id</span></b> allows us to get the ID of the specific item to be edited.<br />
The get() method of the OrchidsResource just send an HTTP GET request to get THIS specific item that we're going to edit.<br />
Then we use $http to send an HTTP PATCH request, and if the response is OK ("success"), we change the "msg" value to output some feedback to the user. Also, this "msg" variable is Global, and that will allows us to show a message also at the List View Template, although it has an other different $scope at all.<br />
<br />
Save and run the SPA:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/--KRnE4UDMXY/VOnwmiUXlyI/AAAAAAAAJb8/q0I-VYqmla0/s1600/13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 11 " border="0" height="540" src="https://3.bp.blogspot.com/--KRnE4UDMXY/VOnwmiUXlyI/AAAAAAAAJb8/q0I-VYqmla0/s1600/13.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 11 " width="524" /></a></div>
<br />
<br />
<br />
<br />
Now you can click the "Add" link to be prompted with the "Add" template, which will look this way:<br />
<br />
<a href="http://1.bp.blogspot.com/-9nUzDBxx2tA/VOSbRaFCS9I/AAAAAAAAJYE/reyuE09PyIU/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 12 " border="0" height="474" src="https://1.bp.blogspot.com/-9nUzDBxx2tA/VOSbRaFCS9I/AAAAAAAAJYE/reyuE09PyIU/s1600/9.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 12 " width="540" /></a><br />
<br />
<br />
Here you can add a new item. This is how looks the list of pictures at the drop down list:<br />
<br />
<a href="http://4.bp.blogspot.com/-ZIqAWTzFCV8/VOSbN41HROI/AAAAAAAAJXA/Yd9mOoUhe48/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 13 " border="0" height="442" src="https://4.bp.blogspot.com/-ZIqAWTzFCV8/VOSbN41HROI/AAAAAAAAJXA/Yd9mOoUhe48/s1600/10.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 13 " width="540" /></a><br />
<br />
<br />
Save a flower, to see how it works:<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-eTWqxkcadgE/VOSbNxjJybI/AAAAAAAAJXE/l9ZeRnBnWQ8/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 14 " border="0" height="412" src="https://2.bp.blogspot.com/-eTWqxkcadgE/VOSbNxjJybI/AAAAAAAAJXE/l9ZeRnBnWQ8/s1600/11.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 14 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
Now you will see the "New orchid saved" message (provided that the web service is working properly).</div>
<div class="separator" style="clear: both;">
Return to the "See all flowers" View (because this is a SPA Application, we're actually browsing to the SAME html web page):</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-2jXBitul9Eg/VOrWIXum63I/AAAAAAAAJcw/SHn8vya5it4/s1600/13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 15 " border="0" height="540" src="https://1.bp.blogspot.com/-2jXBitul9Eg/VOrWIXum63I/AAAAAAAAJcw/SHn8vya5it4/s1600/13.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 15 " width="524" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
Here we can see the new item that we added to the collection, and clicking the "Edit" icon, we'll edit it:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-Yc1tIecUlVc/VOrWGyo032I/AAAAAAAAJcs/arEi9SuVZ_o/s1600/14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 16 " border="0" height="540" src="https://2.bp.blogspot.com/-Yc1tIecUlVc/VOrWGyo032I/AAAAAAAAJcs/arEi9SuVZ_o/s1600/14.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 16 " width="540" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
As you can see, the URL contains the ID of the item being edited. Make some changes, and click the "Update" button, to send an HTTP PATCH request to the OData REST service:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-sKlofxDWlHU/VOrWHXpG9WI/AAAAAAAAJck/WHhA-MSm0Qg/s1600/15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 17 " border="0" height="526" src="https://3.bp.blogspot.com/-sKlofxDWlHU/VOrWHXpG9WI/AAAAAAAAJck/WHhA-MSm0Qg/s1600/15.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 17 " width="540" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
If you get no response, check at the Developer's Tools (F12) in the "Network" tab, for the response status. If there is some error , refer to <a href="http://angularjsclub.blogspot.com/2015/02/how-to-fix-error-Method-DELETE-not-allowed-Access-Control-Allow-Methods.html" target="_blank">this HTTP Error Tutorial</a>.</div>
<div class="separator" style="clear: both;">
After you updated your item, take a look at it on the items List:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-5_orfJK5xFs/VOrWIOAhgoI/AAAAAAAAJc4/5hWQj9o42gQ/s1600/16.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 18 " border="0" height="540" src="https://3.bp.blogspot.com/-5_orfJK5xFs/VOrWIOAhgoI/AAAAAAAAJc4/5hWQj9o42gQ/s1600/16.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 18 " width="546" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Notice the "Msg" that we display here , in the "All" View.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Finally, we add the "Delete" functionality to our SPA application, by creating a new View template called OrchidsDelete.html, containing this markup:</div>
<div class="separator" style="clear: both;">
<a href="http://1.bp.blogspot.com/-PAI0au4ux-E/VO22ps3ZMXI/AAAAAAAAJfw/N4_1a0qZLKA/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 19 " border="0" height="436" src="https://1.bp.blogspot.com/-PAI0au4ux-E/VO22ps3ZMXI/AAAAAAAAJfw/N4_1a0qZLKA/s1600/3.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 19 " width="540" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
</div>
<blockquote class="tr_bq">
<span style="color: #38761d; font-size: x-small;"><b><div class="container"></b></span></blockquote>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><div class="jumbotron"></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <div class="" > </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <h2>Delete this Orchid</h2> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </div> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <form name="deleteOrchid" class=""</b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-submit</span><span style="color: #38761d;">="fnDelete()"></span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <input type="text" class="form-control"</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> placeholder="Title"</b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="Orchid.Title"</span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> disabled></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <input type="text" class="form-control"</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> placeholder="Text"</b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="Orchid.Text"</span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> disabled></b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <input </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="Orchid.MainPicture" </span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> class="form-control" </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> disabled/> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <input type="submit" class="btn btn-default btn-lg"</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> value="Delete"</b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-disabled</span><span style="color: #38761d;">="fnDisable()" ><span>&nbsp;{{</span><span style="color: red;">fnShowMsg()</span><span style="color: #38761d;">}}</span></span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </form></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <a href="#/">See All Flowers</a></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b></div></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span></div>
<div class="separator" style="clear: both;">
</div>
<div class="separator" style="clear: both;">
As you see, all fields are read-only this time.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Also, we add a new Controller, for the delete functionality:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<a href="http://3.bp.blogspot.com/-cZ-CJmIPHLc/VO22qg5pgAI/AAAAAAAAJf8/klWFJurWHec/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 20 " border="0" height="398" src="https://3.bp.blogspot.com/-cZ-CJmIPHLc/VO22qg5pgAI/AAAAAAAAJf8/klWFJurWHec/s1600/5.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 20 " width="540" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>oOrchidsApp.controller('OrchidsDeleteCtl',</b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> ['OrchidsResource', 'GlobalSvc', '</span><span style="color: red;">$http</span><span style="color: #38761d;">', '</span><span style="color: red;">$routeParams</span><span style="color: #38761d;">', '$scope', '$location', '$log', 'msg',</span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> function (OrchidsResource, GlobalSvc, $http, $routeParams, $scope, $location, $log, msg) {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> msg.value = "";</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> $scope.isDisabled = false;</b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> $scope.Orchid = </span><span style="color: red;">OrchidsResource.get({ id: $routeParams.id }); </span><span style="color: #38761d;"> </span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> $scope.fnDelete = function () {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">$http</span><span style="color: #38761d;">(</span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> url: GlobalSvc.getURL() + $routeParams.id,</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> method:"DELETE"</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> }</b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> ).</span><span style="color: red;">success</span><span style="color: #38761d;">(function (response) {</span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> msg.value = "Orchid successfully deleted";</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> $scope.isDisabled = true;</b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> }).</span><span style="color: red;">error</span><span style="color: #38761d;">(function (err) { $log.error(err); });</span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> }</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> $scope.fnDisable = function () { return $scope.isDisabled;}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> $scope.fnShowMsg = function () { return msg.value; }</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}]);</b></span></div>
<div>
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
</div>
</blockquote>
You can see here, that we first use the AngularJS $resource to fetch the data for the selected item, sending an HTTP GET(ID) request to the service.<br />
<div class="separator" style="clear: both;">
Then, when the user clicks the submit button, we send an HTTP DELETE request using the $http service that we inserted into the Controller at the Dependency Injection step.</div>
<div class="separator" style="clear: both;">
Also, we add two methods: fnDisable() , to disable the submit button only if the response has been successfully received.</div>
<div class="separator" style="clear: both;">
And fnShowMsg() , to display the corresponding message to the user.</div>
<div class="separator" style="clear: both;">
Browse to the Main HTML web page, and click over the Bootstrap's "delete" icon:</div>
<div class="separator" style="clear: both;">
<a href="http://2.bp.blogspot.com/-gpk6Yse0l8w/VO22ppYZnXI/AAAAAAAAJgg/9wlgbjBcXoI/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 21 " border="0" height="482" src="https://2.bp.blogspot.com/-gpk6Yse0l8w/VO22ppYZnXI/AAAAAAAAJgg/9wlgbjBcXoI/s1600/2.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 21 " width="540" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
The Delete View will look as follows:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-fa-teXcTySA/VO22q7lG9hI/AAAAAAAAJgE/qDbxFYq44bk/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 22 " border="0" height="480" src="https://2.bp.blogspot.com/-fa-teXcTySA/VO22q7lG9hI/AAAAAAAAJgE/qDbxFYq44bk/s1600/6.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 22 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Click the "Delete" button, and wait for the success message:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-AduCJFyR8L4/VO22rKfjqnI/AAAAAAAAJgI/6T11Exu6KH0/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 23 " border="0" height="480" src="https://3.bp.blogspot.com/-AduCJFyR8L4/VO22rKfjqnI/AAAAAAAAJgI/6T11Exu6KH0/s1600/7.png" title="Create an AngularJS SPA with all CRUD functionality connected to an OData RESTful Web API service 23 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Remember to widely using the $log functionality in your SPA, to send to yourself messages with some feedback from your AngularJS app.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
That's All!!! You have built your own complete SPA application with full CRUD functionality, using the AngularJS Dependency Injection for the $http, $log, and $routeParameters Services, and connected to an OData RESTful Web API service.<br />
<br />
<b>Enjoy AngularJS.....</b><br />
<b><br />
</b><b> </b>by Carmel Schvartzman<br />
<br />
<br />
<b><a href="http://angularjsclub.blogspot.com/2015/02/make-post-requests-odata-web-api-restful-service-using-http-angularjs.html" target="_blank"><<<< PREVIOUS LESSON</a> </b><br />
<br />
<b><br />
</b> <br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
<b><span style="font-size: x-small;"><br />
</span></b></div>
<div>
</div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-7714715581339500120.post-23768808982489835082019-09-11T03:45:00.000-07:002019-09-11T03:45:37.743-07:00How to hide the Scripts folder while debugging an Angular application on Visual Studio 2015/2017In this article we review <b>how to hide the Scripts folder while debugging an Angular application on Visual Studio 2015/2017,</b> when by default the folder that contains the Angular javascript files is displayed automatically :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-wKaMHC5KB_g/XGuiwuBj8uI/AAAAAAAANLM/vlPlzo4062QPnJ_GGQVu_VjOr7avlqn6QCEwYBhgL/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="916" data-original-width="376" height="640" src="https://3.bp.blogspot.com/-wKaMHC5KB_g/XGuiwuBj8uI/AAAAAAAANLM/vlPlzo4062QPnJ_GGQVu_VjOr7avlqn6QCEwYBhgL/s640/1.PNG" width="262" /></a></div>
<br />
<br />
<h3 style="text-align: center;">
How to hide the Scripts folder while debugging an Angular application on Visual Studio 2015/2017</h3>
<div>
<br /></div>
<div>
Follow this steps :<br />
<br />
1) While debugging , close the Script Documents folder on Visual Studio, and click on the project that you are developing:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-p794zHAEi_M/XGuiwn4k1RI/AAAAAAAANLI/6xH29U2ghlgao-TPBj8S8upno9nb_6FMACEwYBhgL/s1600/0.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="413" data-original-width="389" height="400" src="https://3.bp.blogspot.com/-p794zHAEi_M/XGuiwn4k1RI/AAAAAAAANLI/6xH29U2ghlgao-TPBj8S8upno9nb_6FMACEwYBhgL/s400/0.PNG" width="376" /></a></div>
<br />
<br />
2) Click on the "Scope to this" function over the current project:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-VMq7-s27W2Q/XGuiwl0G6AI/AAAAAAAANLQ/CZjkHL4QrmkGMLQF6TrxQv_xjdb-aEyrACEwYBhgL/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="357" data-original-width="550" height="258" src="https://3.bp.blogspot.com/-VMq7-s27W2Q/XGuiwl0G6AI/AAAAAAAANLQ/CZjkHL4QrmkGMLQF6TrxQv_xjdb-aEyrACEwYBhgL/s400/2.PNG" width="400" /></a></div>
<br />
Now, the scripts folder will disappear, and you could keep working on your project without it.<br />
<br />
3) To reenable the scripts folder, just click on the "Home" button on the Solution Explorer:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-UFqiIQbfalA/XGuixdUnCTI/AAAAAAAANLU/8oPGBq4ft9A_4Ag3fjATkaX7CoRUTcjbgCEwYBhgL/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="205" data-original-width="305" src="https://1.bp.blogspot.com/-UFqiIQbfalA/XGuixdUnCTI/AAAAAAAANLU/8oPGBq4ft9A_4Ag3fjATkaX7CoRUTcjbgCEwYBhgL/s1600/3.PNG" /></a></div>
<br />
<br />
<br /></div>
<div>
That's All!!! </div>
<div>
<b>Enjoy Angular.....</b><br />
<b><br /></b><b> </b>by Carmel Schvartzman<br />
<br />
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b></div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-7714715581339500120.post-10985584196116641012019-08-14T21:11:00.001-07:002019-08-14T21:11:39.390-07:00How to enable intellisense for Bootstrap classes in Visual Studio 2015-2017In this article we review <b>How to enable intellisense for Bootstrap classes in Visual Studio 2015-2017</b> . This is when Bootstrap intellisense is not showing up in an HTML page in an Angular project in Visual Studio:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-XjuShT7mKOI/XGPBmZjJrEI/AAAAAAAANIc/5d_m_ZKql9Q8R0asR4lWr5OlKpeOEorQQCEwYBhgL/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="207" data-original-width="482" height="274" src="https://4.bp.blogspot.com/-XjuShT7mKOI/XGPBmZjJrEI/AAAAAAAANIc/5d_m_ZKql9Q8R0asR4lWr5OlKpeOEorQQCEwYBhgL/s640/3.PNG" width="640" /></a></div>
<br />
<br />
<br />
<h3 style="text-align: center;">
How to enable intellisense for Bootstrap classes in Visual Studio 2015-2017</h3>
<div>
<br /></div>
<div>
1) First, go to the Solution Explorer, and inside the SRC folder, click on the "Show all files" button. Then open the "node_modules" folder:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-SSLv4wHzuvA/XGPBmZW9dVI/AAAAAAAANIU/uqovT_N9X1s_Ta8urzORhQE3Sgp9C7qVwCEwYBhgL/s1600/0.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="346" data-original-width="269" height="320" src="https://1.bp.blogspot.com/-SSLv4wHzuvA/XGPBmZW9dVI/AAAAAAAANIU/uqovT_N9X1s_Ta8urzORhQE3Sgp9C7qVwCEwYBhgL/s320/0.PNG" width="248" /></a></div>
<div>
<br /></div>
<div>
2) Look for the "Bootstrap" folder, and select the "Include in project" option for this folder:<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-UruScMi-0KA/XGPBmSjcHQI/AAAAAAAANIY/Xqb0sbeXw1o50gl5vQOi0oXrfBI0hh3mgCEwYBhgL/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="259" data-original-width="330" height="251" src="https://3.bp.blogspot.com/-UruScMi-0KA/XGPBmSjcHQI/AAAAAAAANIY/Xqb0sbeXw1o50gl5vQOi0oXrfBI0hh3mgCEwYBhgL/s320/1.PNG" width="320" /></a></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
3) Restart your Visual Studio application, and going to some HTML file, and pressing CTL+SPACE inside the "class" of some tag , you'll see the Bootstrap intellisense working:<br />
<br />
<a href="https://4.bp.blogspot.com/-XjuShT7mKOI/XGPBmZjJrEI/AAAAAAAANIc/5d_m_ZKql9Q8R0asR4lWr5OlKpeOEorQQCEwYBhgL/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="207" data-original-width="482" height="274" src="https://4.bp.blogspot.com/-XjuShT7mKOI/XGPBmZjJrEI/AAAAAAAANIc/5d_m_ZKql9Q8R0asR4lWr5OlKpeOEorQQCEwYBhgL/s640/3.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
That's All!!! Here we've seen how to enable intellisense for Bootstrap classes in Visual Studio 2015-2017.</div>
<div>
<b>Enjoy Angular.....</b><br />
<b><br /></b><b> </b>by Carmel Schvartzman<br />
<br />
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b></div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com2tag:blogger.com,1999:blog-7714715581339500120.post-45020561727059474412019-04-30T00:19:00.002-07:002019-04-30T00:19:56.689-07:00Simple HTML Form Building-block with Bootstrap styles<br />
In this article we review <b>a Simple HTML Form Building-block with Bootstrap styles</b> :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-ixqsqusIGJA/XMf228NhM1I/AAAAAAAANSk/LBT748FOd9E-I3FpRlJiUlnnmiLRbi4DQCLcBGAs/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="410" data-original-width="1275" height="204" src="https://3.bp.blogspot.com/-ixqsqusIGJA/XMf228NhM1I/AAAAAAAANSk/LBT748FOd9E-I3FpRlJiUlnnmiLRbi4DQCLcBGAs/s640/1.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<h3 style="text-align: center;">
Simple HTML Form Building-block with Bootstrap styles</h3>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
You can copy-paste the following building block, in order to start your Form:</div>
<div>
<br /></div>
<div>
<br />
<!DOCTYPE html><br />
<html lang="en"><br />
<head><br />
<title>Bootstrap Example</title><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width, initial-scale=1"><br />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"><br />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><br />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script><br />
</head><br />
<body><br />
<br />
<div class="container"><br />
<h2>Form Building-block</h2><br />
<form action="/action_page.php"><br />
<br />
<div class="panel panel-primary"><br />
<div class="panel-heading panel-primary"><br />
<h3 class="panel-title ">Create Employee</h3><br />
</div><br />
<div class="panel-body panel-primary"><br />
<div class="form-group"><br />
<label for="email">Email:</label><br />
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email"><br />
</div><br />
<div class="form-group"><br />
<label for="pwd">Password:</label><br />
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd"><br />
</div><br />
<div class="checkbox"><br />
<label><input type="checkbox" name="remember"> Remember me</label><br />
</div><br />
<br />
</div><br />
<div class="panel-footer panel-primary"><br />
<button class="btn btn-primary" type="submit">Save</button><br />
</div><br />
<br />
</form><br />
</div><br />
<br />
</body><br />
</html><br />
<div>
<br /></div>
<br />
<div>
</div>
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<div style="margin: 0px;">
<br /></div>
</div>
</div>
<div>
<br /></div>
<div>
That's All!!! </div>
<div>
<b>Enjoy Angular.....</b><br />
<b><br /></b><b> </b>by Carmel Schvartzman<br />
<br />
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b></div>
<br />
<br />
<br />
<br />
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-7714715581339500120.post-70117061928038007752019-02-14T02:19:00.000-08:002019-02-14T02:19:48.237-08:00#15 - Make POST Requests to an OData Web API RESTful service using $http AngularJSIn this article we review <b>how to Make POST Requests to an OData Web API RESTful service using $http AngularJS,</b> by developing from scratch an AngularJS Application that includes a Controller with an $http service dependency, to send HTTP POST Requests and preserve the items into a REST OData web service .<br />
The complete source code for this AngularJS App can be downloaded from the following GitHub repository:<br />
<a href="https://github.com/CarmelSoftware/AngularJS_OData_HTTPPOST" target="_blank">https://github.com/CarmelSoftware/AngularJS_OData_HTTPPOST</a><br />
<br />
<b><i>You can learn this step-by-step tutorial as a standalone</i></b>, or you can see the previous lessons of the series. This is the Lesson #15 in the "AngularJS: From 0 To 100" articles written for Beginners. This lessons start at <a href="http://angularjsclub.blogspot.com/2014/12/first-angularjs-application-for-Beginners-in-10-minutes.html" target="_blank">Lesson #1</a> .<br />
<br />
<b><a href="http://angularjsclub.blogspot.com/2015/02/make-http-get-requests-with-pagination-to-OData-WebAPI-RESTful-service.html" target="_blank"><<<< PREVIOUS LESSON</a> <a href="http://angularjsclub.blogspot.com/2015/02/how-to-send-patch-requests-to-odata-webapi-RESTful-service-http-angularjs.html" target="_blank">NEXT LESSON >>>></a></b><br />
<b><br /></b><b><br /></b>Because here we're using the "Brackets" open source web Editor , optimized for AngularJS , we prepared a short tutorial about it <a href="http://angularjsclub.blogspot.com/2014/12/powerful-open-source-web-editor-optimized-for-AngularJS-Web-Design.html" target="_blank">in this post</a>.<br />
<br />
This is the AngularJS App that we'll develop from scratch here, in 20 minutes :<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-lnxukgy92Q8/VOSbQ6BtM7I/AAAAAAAAJYA/y-9A8dsjDYs/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://2.bp.blogspot.com/-lnxukgy92Q8/VOSbQ6BtM7I/AAAAAAAAJYA/y-9A8dsjDYs/s1600/8.png" width="598" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: center;">
Make POST Requests to an OData Web API RESTful service using $http AngularJS</h3>
<br />
You can copy-paste all pieces of source code as you move forward through this Tutorial, or elsewhere you can download the entire AngularJS web site from the following URL:<br />
<a href="https://github.com/CarmelSoftware/AngularJS_OData_HTTPPOST/archive/master.zip" target="_blank">https://github.com/CarmelSoftware/AngularJS_OData_HTTPPOST/archive/master.zip</a><br />
<br />
First, let's add the references to the scripts and styles to use, via CDN(content delivery network), instead of downloading all files to our app. Also, we are defining the HTML5 file as an <b><span style="color: #38761d;">data-ng-app</span></b> Angular App:<br />
<br />
<a href="http://2.bp.blogspot.com/-vO-HdoTF4P0/VOSbNyEZkRI/AAAAAAAAJXI/fjNOvRpzHlM/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="144" src="https://2.bp.blogspot.com/-vO-HdoTF4P0/VOSbNyEZkRI/AAAAAAAAJXI/fjNOvRpzHlM/s1600/1.png" width="640" /></a><br />
<br />
As you see, we add 2 AngularJS scripts, and 2 Bootstrap CSS3 files. Also, we create directories for "Content" and "Controllers".<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(get the source code):<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b><!doctype html></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"><html </span><span style="color: red;">data-ng-app</span><span style="color: #38761d;">="OrchidsApp"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><head></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <title>AngularJS SPA App</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </title></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <link href="Contents/Style.css" rel="stylesheet" /></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" /></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular-route.js"></script></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <script src="/App/Controllers/SPAControllers.js" type="text/javascript"></script></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></head></b></span><br />
<br />
<br />
Next, copy-paste the following CSS3 style to your style.css file:<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b>body {background:rgba(255, 238, 238, 0.5);</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>img {width:100px;height:100px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.select</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>width:100px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>padding:5px 5px 5px 25px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>margin:10px 15px 15px 25px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>font:900 12px Comic Sans MS;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>opacity:0.9;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>background:#f0f0f0; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>border:5px solid #ddd; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>border-radius: 10px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>box-shadow:10px 10px 2px #c0c0c0;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.centered</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> text-align:center; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<div>
<br /></div>
<br />
In the same HTML file, add a <div> bound to an <b><span style="color: #38761d;">data-ng-view</span></b>:<br />
<br />
<a href="http://1.bp.blogspot.com/-FoXzu6XBHEk/VOSbO-d00gI/AAAAAAAAJXQ/_M0o5q_lHKE/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="281" src="https://1.bp.blogspot.com/-FoXzu6XBHEk/VOSbO-d00gI/AAAAAAAAJXQ/_M0o5q_lHKE/s1600/2.png" width="400" /></a><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(get the source code):<br />
<span style="color: #38761d; font-size: x-small;"><b><body class="container"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="jumbotron"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <h1>Orchids SPA</h1></b></span><b style="color: #38761d; font-size: small;"> </b><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div id="container"></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <div </span><span style="color: red;">data-ng-view</span><span style="color: #38761d;">=""></div></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></body></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></html></b></span><br />
<br />
This <div> will be replaced by 2 Template Views, that we're going to design next.<br />
The first one is for the List of flowers. Create an "/App/Views/OrchidsList.html" file, and paste the following code inside it:<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b><div class="jumbotron" > </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <h2>List of my Favorite Orchids</h2> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></div> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><div class="jumbotron"> </b></span><br />
<br />
<span style="color: #38761d; font-size: x-small;"><b> <ul class="list-group"> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <li </span><span style="color: red;">data-ng-repeat</span><span style="color: #38761d;">="</span><span style="color: red;">Orchid in OrchidsList</span><span style="color: #38761d;">" class="list-group-item"> </span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div > </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <img src="/Contents/Images/{{</span><span style="color: red;">Orchid.MainPicture</span><span style="color: #38761d;">}}" alt="{{</span><span style="color: red;">Orchid.Title</span><span style="color: #38761d;">}}" title="{{</span><span style="color: red;">Orchid.Title</span><span style="color: #38761d;">}}" > <br /> </span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <span >{{</span><span style="color: red;">Orchid.BlogID</span><span style="color: #38761d;">}} . {{</span><span style="color: red;">Orchid.Title | uppercase</span><span style="color: #38761d;">}} <br /></span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> {{</span><span style="color: red;">Orchid.Text</span><span style="color: #38761d;">}} {{</span><span style="color: red;">Orchid.DatePosted | date</span><span style="color: #38761d;"> }}</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </span> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </li> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </ul></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="panel panel-default"> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="panel-body | centered"></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <button </span><span style="color: red;">data-ng-click</span><span style="color: #38761d;">="fnShowOrchids(-1)" class="btn btn-default btn-lg" ><<<<</button></span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <input type="number" </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="pageSize" max="4" min="1" value="2" class="select"/></span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <button </span><span style="color: red;">data-ng-click</span><span style="color: #38761d;">="fnShowOrchids(1)" class="btn btn-default btn-lg" >>>>></button></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <a href="#/add">Add your Favorite Flowers</a></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></div></b></span><br />
<br />
<a href="http://3.bp.blogspot.com/-gK7MdRXNL_0/VOSbPDDuPNI/AAAAAAAAJXU/7R3U8uC3uX8/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="296" src="https://3.bp.blogspot.com/-gK7MdRXNL_0/VOSbPDDuPNI/AAAAAAAAJXU/7R3U8uC3uX8/s1600/3.png" width="640" /></a><br />
<br />
I've remarked the more relevant code in <b><span style="color: red;">red</span></b>. The two buttons are for paging the items forward and backwards. The Input type=number is for setting the size of every page while paging. Also, we just display all the flowers by showing all the OrchidsList that we will prepare at the Controller.<br />
We explained using AngularJS collections and the <b><span style="color: #38761d;">data-ng-repeat</span></b> <a href="http://angularjsclub.blogspot.com/2015/01/7-using-data-collections-in-angularjs.html" target="_blank">in a previous lesson</a> .<br />
Create a javascript SPAControllers.js file, and add a module with a Controller , as follows:<br />
<br />
<a href="http://4.bp.blogspot.com/-dkZul-hhrds/VOSbPCH4umI/AAAAAAAAJXs/-koIsJJ2OSg/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="344" src="https://4.bp.blogspot.com/-dkZul-hhrds/VOSbPCH4umI/AAAAAAAAJXs/-koIsJJ2OSg/s1600/4.png" width="640" /></a><br />
<br />
We use an Angular $routeProvider to bind each View with a Controller. When the default "/" is required, the user will be faced with the "All" template. If the "/add" page is required, then the "Add" template will be displayed.<br />
Remember, this is always the same HTML web page that is browsed here. This is a SPA application: all is done in THE SAME WEB PAGE: there are no reloads of the HTML page!!!<br />
That's why we referenced the angular-route.js javascript at the <head>: to use the $routeProvider at the Module, and enabling an SPA application.<br />
Now add to the Module, the following Controller:<br />
<br />
<span style="font-size: x-small;"><b><span style="color: #38761d;">oOrchidsApp.controller('OrchidsAllCtl', ['$scope', '</span><span style="color: red;">$http</span><span style="color: #38761d;">', '$log', function ($scope, </span><span style="color: red;">$http</span><span style="color: #38761d;">, $log) {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span> <span style="color: #38761d; font-size: x-small;"><b> $scope.angularClass = "angular";</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.OrchidsList = [];</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.pageSize = 2;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> var iCurrentPage = -1;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span> <span style="color: #38761d; font-size: x-small;"><b> $scope.fnShowOrchids = function (direction) {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span> <span style="color: #38761d; font-size: x-small;"><b> iCurrentPage = iCurrentPage + direction;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> iCurrentPage = iCurrentPage >= 0 ? iCurrentPage : 0;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span> <span style="color: #38761d; font-size: x-small;"><b> var sURL = "http://carmelwebapi.somee.com/WebAPI/OrchidsWebAPI/" +</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> "?$skip=" +</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> iCurrentPage * </span><span style="color: red;">$scope.pageSize</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> + "&$top=" +</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.pageSize;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span> <span style="color: #38761d; font-size: x-small;"><b><br /></b></span> <span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">$http.get</span><span style="color: #38761d;">(sURL).</span><span style="color: red;">success</span><span style="color: #38761d;">(function (response) {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span> <span style="color: #38761d; font-size: x-small;"><b> $scope.OrchidsList = response;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $log.info("OK");</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span> <span style="color: #38761d; font-size: x-small;"><b> },</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> function (err) { $log.error(err) }</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> )</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> }</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span> <span style="color: #38761d; font-size: x-small;"><b> $scope.fnShowOrchids(1);</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span> <span style="color: #38761d; font-size: x-small;"><b><br /></b></span> <span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>]);</b></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-uVJKaCVr2VU/VOSbPvHvg_I/AAAAAAAAJXk/63P7v5jjOK4/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="452" src="https://3.bp.blogspot.com/-uVJKaCVr2VU/VOSbPvHvg_I/AAAAAAAAJXk/63P7v5jjOK4/s1600/5.png" width="640" /></a></div>
<br />
This HTTP GET Ajax request code is explained in the <a href="http://angularjsclub.blogspot.com/2015/02/add-css3-style-to-angularjs-Application-with-Twitter-Bootstrap.html" target="_blank">Lesson #14</a>. In short, here we just build the URL for using the OData protocol, and sending a REST request.<br />
The "direction" parameter, as explained <a href="http://angularjsclub.blogspot.com/2015/02/add-css3-style-to-angularjs-Application-with-Twitter-Bootstrap.html" target="_blank">in the previous tutorial</a>, is for paging backwards and forward.<br />
Notice that we made a Dependency Injection for three services : $scope, to get the variables, $http for sending HTTP REST requests to the web server, and $log for logging and making easy to debug our app.<br />
In case you don't have an OData RESTful web service working on your environment, i developed and deployed one that you can use. It can be found at this URL:<br />
<br />
<a href="http://carmelwebapi.somee.com/WebAPI/OrchidsWebAPI">http://carmelwebapi.somee.com/WebAPI/OrchidsWebAPI</a><br />
<br />
You can use it at your own. An example of using this OData Web API:<br />
<br />
<a href="http://carmelwebapi.somee.com/WebAPI/OrchidsWebAPI/?$skip=2&$top=3">http://carmelwebapi.somee.com/WebAPI/OrchidsWebAPI/?$skip=2&$top=3</a><br />
<br />
If you have an OData service working, just replace the URLs at the Controllers.<br />
<br />
We're going to fetch the data from an OData RESTful service, by using the Ajax Service called $http in Angular. This service provide all kinds of HTTP functionality, like sending POST, PUT or DELETE requests. Here we will use both the HTTP GET and the HTTP POST verbs.<br />
The official documentation for the $http AngularJS service can be learned at the <a href="https://docs.angularjs.org/api/ng/service/$http" target="_blank">Angular official web site</a>:<br />
<br />
<a href="http://2.bp.blogspot.com/-dbWzRaFBsW0/VNHh0xyjjsI/AAAAAAAAJPk/TsRH7Af-b6o/s1600/18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 17 " border="0" height="616" src="https://2.bp.blogspot.com/-dbWzRaFBsW0/VNHh0xyjjsI/AAAAAAAAJPk/TsRH7Af-b6o/s1600/18.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 17 " width="540" /></a><br />
<br />
<br />
<br />
<br />
Now let's design the AngularJS Template View for adding a new item to the collection.<br />
The "Add" Template will be as follows:<br />
<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b><div class="container"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><div class="jumbotron"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="" > </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <h2>Add your Favorite Orchid</h2> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <form name="addOrchid" class=""</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-submit</span><span style="color: #38761d;">="fnAdd()"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <input type="text" class="form-control"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> placeholder="Title"</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="Orchid.Title"</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> required></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <input type="text" class="form-control"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> placeholder="Text"</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="Orchid.Text"</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> required></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <select </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="Orchid.MainPicture" title="Select a Picture" </span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-options="Img for Img in Flowers"</span><span style="color: #38761d;"> class="form-control"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </select></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <input type="submit" class="btn btn-default btn-lg"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> value="Add"</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-disabled</span><span style="color: #38761d;">="addOrchid.$invalid"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <span>{{msg}}</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </form></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <a href="</span><span style="color: red;">#/</span><span style="color: #38761d;">">See All Flowers</a></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<br />
<a href="http://4.bp.blogspot.com/-3-JtRe2V4Hw/VOSbPz4T4gI/AAAAAAAAJXg/hRrvKXVWi94/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="394" src="https://4.bp.blogspot.com/-3-JtRe2V4Hw/VOSbPz4T4gI/AAAAAAAAJXg/hRrvKXVWi94/s1600/6.png" width="640" /></a><br />
<br />
<br />
<br />
At the Module, add a new Controller to enable the NEW ITEM capabilities of our SPA:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<img border="0" height="502" src="https://1.bp.blogspot.com/-eN1KRXcpIlQ/VOSbQsen8eI/AAAAAAAAJYM/y_0PSNFbYRc/s1600/7.png" style="color: #0000ee; text-align: center;" width="640" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(get the source code):<br />
<br />
<span style="font-size: x-small;"><b><span style="color: #38761d;">oOrchidsApp.</span><span style="color: red;">controller</span><span style="color: #38761d;">('OrchidsAddCtl', </span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> ['$http', '$scope', '$location', '$log', </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> function ($http, $scope, $location, $log) {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span> <span style="color: #38761d; font-size: x-small;"><b> $scope.Flowers = ["haeckel_orchidae", "Bulbophyllum", "Cattleya", </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> "Orchid Calypso", "Paphiopedilum_concolor", </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> "Peristeria", "Phalaenopsis_amboinensis", "Sobralia"];</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span> <span style="color: #38761d; font-size: x-small;"><b> $scope.fnAdd = function () {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span> <span style="color: #38761d; font-size: x-small;"><b> var oFlower = { "Title": $scope.Orchid.Title, </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> "Text": $scope.Orchid.Text, </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> "MainPicture": $scope.Orchid.MainPicture + '.jpg' </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> };</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span> <span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">$http({</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> url: 'http://carmelwebapi.somee.com/WebAPI/OrchidsWebAPI/',</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">method: "POST",</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> data: oFlower,</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">headers: { 'Content-Type': 'application/json' }</span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> }).</span><span style="color: red;">success</span><span style="color: #38761d;">(function (data) { </span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.msg = "New Orchid saved";</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> }).</span><span style="color: red;">error</span><span style="color: #38761d;">(function (err) {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $log.log(err);</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> });</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span> <span style="color: #38761d; font-size: x-small;"><b> }</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>]);</b></span><br />
<br />
<br />
Save and run the SPA:<br />
<br />
<a href="http://2.bp.blogspot.com/-lnxukgy92Q8/VOSbQ6BtM7I/AAAAAAAAJYA/y-9A8dsjDYs/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="640" src="https://2.bp.blogspot.com/-lnxukgy92Q8/VOSbQ6BtM7I/AAAAAAAAJYA/y-9A8dsjDYs/s1600/8.png" width="598" /></a><br />
<br />
<br />
Provided everything went OK , you can click the "Add" button to be prompted with the "Add" View , which will look something like this:<br />
<br />
<a href="http://1.bp.blogspot.com/-9nUzDBxx2tA/VOSbRaFCS9I/AAAAAAAAJYE/reyuE09PyIU/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="474" src="https://1.bp.blogspot.com/-9nUzDBxx2tA/VOSbRaFCS9I/AAAAAAAAJYE/reyuE09PyIU/s1600/9.png" width="640" /></a><br />
<br />
<br />
This is the looks of the selected list for the pictures:<br />
<br />
<a href="http://4.bp.blogspot.com/-ZIqAWTzFCV8/VOSbN41HROI/AAAAAAAAJXA/Yd9mOoUhe48/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="442" src="https://4.bp.blogspot.com/-ZIqAWTzFCV8/VOSbN41HROI/AAAAAAAAJXA/Yd9mOoUhe48/s1600/10.png" width="640" /></a><br />
<br />
<br />
Enter some data and click the "Add" button, to see how it works:<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-eTWqxkcadgE/VOSbNxjJybI/AAAAAAAAJXE/l9ZeRnBnWQ8/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="412" src="https://2.bp.blogspot.com/-eTWqxkcadgE/VOSbNxjJybI/AAAAAAAAJXE/l9ZeRnBnWQ8/s1600/11.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
If everything went ok, you will see the "New orchid saved" message.</div>
<div class="separator" style="clear: both; text-align: left;">
Return to the "See all flowers" View (remember, all the time we are inside the SAME HTML5 file: that's why this is called a SPA Application):</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-Ap6xp3qPFGY/VOSbOnq27_I/AAAAAAAAJXM/o4PPbdiEuRI/s1600/12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="586" src="https://4.bp.blogspot.com/-Ap6xp3qPFGY/VOSbOnq27_I/AAAAAAAAJXM/o4PPbdiEuRI/s1600/12.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Here we can see the new item added to the collection.</div>
<div class="separator" style="clear: both;">
Remember to widely use the $log service functionality in your SPA, to log to yourself messages , and giving you some feedback about your AngularJS app.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
That's All!!! You have begun making HTTP POST Requests to an OData Web API RESTful service, in your own SPA application, thanks to the AngularJS Dependency Injection that allows you to use several Services like $http, $log, $location , and so on. In the next article we will continue to learn Step by Step about <a href="http://angularjsclub.blogspot.com/2015/02/how-to-send-patch-requests-to-odata-webapi-RESTful-service-http-angularjs.html" target="_blank">making HTTP PATCH requests to an odata web api restful service using the $http angularjs</a> .<b> </b><br />
<b>Enjoy AngularJS.....</b><br />
<b><br /></b><b> </b>by Carmel Schvartzman<br />
<br />
<br />
<b><a href="http://angularjsclub.blogspot.com/2015/02/make-http-get-requests-with-pagination-to-OData-WebAPI-RESTful-service.html" target="_blank"><<<< PREVIOUS LESSON</a> <a href="http://angularjsclub.blogspot.com/2015/02/how-to-send-patch-requests-to-odata-webapi-RESTful-service-http-angularjs.html" target="_blank">NEXT LESSON >>>></a></b><br />
<br />
<b><br /></b>
<br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
<b><span style="font-size: x-small;"><br /></span></b></div>
<div>
</div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com1tag:blogger.com,1999:blog-7714715581339500120.post-15308789498462578292019-02-10T22:28:00.000-08:002019-02-10T22:28:36.093-08:00#16 - How to send PATCH Requests to an OData Web API RESTful service using $http AngularJSIn this article we review h<b>ow to send PATCH Requests to an OData Web API RESTful service using $http AngularJS,</b> by developing from scratch in 20 minutes an AngularJS SPA Application that includes a Controller with an $http dependency injection, to send HTTP PATCH Requests to Edit the items into a REST OData web service . This SPA will send also HTTP GET and HTTP POST requests.<br />
The source code for this SPA can be found in the following GitHub repository:<br />
<br />
<a href="https://github.com/CarmelSoftware/AngularJS_OData_HTTPPATCH/tree/master" target="_blank">https://github.com/CarmelSoftware/AngularJS_OData_HTTPPATCH/tree/master</a><br />
<br />
<b><i>This step-by-step tutorial can be learned as a standalone</i></b>, but also you can see the previous lessons of the series, using the arrows below. This is the Lesson #16 in the "AngularJS: From 0 To 100" articles written for Beginners. This lessons start at <a href="http://angularjsclub.blogspot.com/2014/12/first-angularjs-application-for-Beginners-in-10-minutes.html" target="_blank">Lesson #1</a> .<br />
<br />
<b><a href="http://angularjsclub.blogspot.com/2015/02/make-post-requests-odata-web-api-restful-service-using-http-angularjs.html" target="_blank"><<<< PREVIOUS LESSON</a> <a href="http://angularjsclub.blogspot.com/2015/02/how-to-send-http-delete-requests-SPA-OData-RESTful-WebAPI.html" target="_blank">NEXT LESSON >>>></a></b><br />
<b><br /></b><b><br /></b>(If you need to follow a short Tutorial about using the "Brackets" open source web Editor , optimized for AngularJS development, you can browse <a href="http://angularjsclub.blogspot.com/2014/12/powerful-open-source-web-editor-optimized-for-AngularJS-Web-Design.html" target="_blank">to this post</a>.)<br />
<br />
This is a snapshot of the AngularJS App that we'll develop from scratch here, in 20 minutes :<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/--KRnE4UDMXY/VOnwmiUXlyI/AAAAAAAAJb8/q0I-VYqmla0/s1600/13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://3.bp.blogspot.com/--KRnE4UDMXY/VOnwmiUXlyI/AAAAAAAAJb8/q0I-VYqmla0/s1600/13.png" width="524" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: center;">
How to send PATCH Requests to an OData Web API RESTful service using $http AngularJS</h3>
<br />
While we move forward through this Tutorial, you'll be given the source code to copy-paste to your project. But always you could download the entire AngularJS SPA App from the following GitHub repository, packed in a ZIP file:<br />
<a href="https://github.com/CarmelSoftware/AngularJS_OData_HTTPPATCH/archive/master.zip" target="_blank">https://github.com/CarmelSoftware/AngularJS_OData_HTTPPATCH/archive/master.zip</a><br />
<br />
<br />
First, let's add the references to the scripts and styles to use, via CDN(content delivery network), instead of downloading all files to our app. Also, we are defining the HTML5 file as an <b><span style="color: #38761d;">data-ng-app</span></b> Angular App:<br />
<br />
<a href="http://2.bp.blogspot.com/-vO-HdoTF4P0/VOSbNyEZkRI/AAAAAAAAJXI/fjNOvRpzHlM/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="144" src="https://2.bp.blogspot.com/-vO-HdoTF4P0/VOSbNyEZkRI/AAAAAAAAJXI/fjNOvRpzHlM/s1600/1.png" width="640" /></a><br />
<br />
As you see, we add 2 AngularJS scripts, and 2 Bootstrap CSS3 files. Also, we create directories for "Content" and "Controllers".<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(get the source code):<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b><!doctype html></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"><html </span><span style="color: red;">data-ng-app</span><span style="color: #38761d;">="OrchidsApp"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><head></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <title>AngularJS SPA App</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </title></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <link href="Contents/Style.css" rel="stylesheet" /></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" /></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular-route.js"></script></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <script src="/App/Controllers/SPAControllers.js" type="text/javascript"></script></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></head></b></span><br />
<br />
<br />
Next, copy-paste the following CSS3 style to your style.css (placed at the "Contents" folder) file:<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b>body {background:rgba(255, 238, 238, 0.5);</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>img {width:99%;height:99%;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.select</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>width:100px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>padding:5px 5px 5px 25px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>margin:10px 15px 15px 25px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>font:900 12px Comic Sans MS;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>opacity:0.9;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>background:#f0f0f0; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>border:5px solid #ddd; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>border-radius: 10px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>box-shadow:10px 10px 2px #c0c0c0;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.centered</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> text-align:center; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.div-table{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> display:table; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> width:auto; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> background-color:#eee;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> border-spacing:5px; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.div-table-row{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> display:table-row;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> width:auto;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> clear:both;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.div-cell-left{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> float:left; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> display:table-cell; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> width:33%;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> height:200px; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> padding:5px 5px 5px 5px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.div-cell-center{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> float:left; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> display:table-cell; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> width:56%; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> height:200px; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> padding:5px 5px 5px 5px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.div-cell-right{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> float:left; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> display:table-cell; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> width:10%; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> height:200px; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> padding:5px 5px 5px 5px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.msg {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>font:900 Comic Sans MS;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>color:#1b42ae;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<div>
<br /></div>
<div>
Next, add a NavBar.html file (again at the Contents folder) containing the Bootstrap NavsBar as follows (adding the Twitter Bootstrap is thoroughly explained <a href="http://angularjsclub.blogspot.com/2015/02/add-css3-style-to-angularjs-Application-with-Twitter-Bootstrap.html" target="_blank">in this Bootstrap Tutorial</a>):<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b><nav class="navbar navbar-default"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="container-fluid"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b> <div class="navbar-header"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <a class="navbar-brand" href="/">Orchids</a></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <ul class="nav navbar-nav"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <li class="active"><a href="/">Home <span class="sr-only">(current)</span></a></li></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <li><a href="#/">Orchids SPA</a></li></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <li><a href="/PDF">Create PDF</a></li></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <li><a href="/Home">Help</a></li></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <li><a href="/Home/About">About</a></li></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b> </ul></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <form class="navbar-form navbar-left" role="search"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="form-group"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <input type="text" class="form-control" placeholder="Search"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <button type="submit" class="btn btn-default">Submit</button></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </form></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <ul class="nav navbar-nav navbar-right"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <li><a href="/Home">Technologies</a></li></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b> </ul></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <!-- /.navbar-collapse --></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <!-- /.container-fluid --></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></nav></b></span><br />
<br />
<br /></div>
<div>
<br /></div>
<br />
In the main HTML file, add a <div> bound to an <b><span style="color: #38761d;">data-ng-view</span></b>, and a <b><span style="color: #38761d;">data-ng-include</span></b> to insert the NavBar HTML5 inside the web page:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-IPE0Jiv18FE/VOnwnqtfMKI/AAAAAAAAJaw/byxXHhCa47s/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="332" src="https://1.bp.blogspot.com/-IPE0Jiv18FE/VOnwnqtfMKI/AAAAAAAAJaw/byxXHhCa47s/s1600/2.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(get the source code):<br />
<span style="color: #38761d; font-size: x-small;"><b><body class="container"></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <div </span><span style="color: red;">data-ng-include</span><span style="color: #38761d;">="" </span><span style="color: red;">src</span><span style="color: #38761d;">="'Contents/Navbar.html'" ></div></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="jumbotron"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <h1>Orchids SPA - AngularJS App</h1></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div id="container"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <div </span><span style="color: red;">data-ng-view</span><span style="color: #38761d;">=""></div></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><b style="color: #38761d; font-size: small;"> </b><br />
<span style="color: #38761d; font-size: x-small;"><b></body></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></html></b></span><br />
<br />
This <div> element will be replaced by AngularJS with three Template Views, according to the User's selection ("#/" , "#/add" and "#/edit"), that we're going to design next: a List of Items, a template for Adding a new Item, and another one for Editing .<br />
The first one is for the List of flowers, so create an "/App/Views/OrchidsList.html" file, and paste the following code inside it:<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b><div class="jumbotron" > </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <h2>List of my Favorite Orchids</h2></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <h4 class="msg">{{Message}}</h4> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></div> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><div class="jumbotron"> </b></span><br />
<br />
<span style="color: #38761d; font-size: x-small;"><b> <ul class="list-group"> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <li </span><span style="color: red;">data-ng-repeat</span><span style="color: #38761d;">="Orchid in OrchidsList" class="list-group-item"> </span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="div-table" ></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="div-table-row"> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="div-cell-left"></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <img src="http://carmelwebapi.somee.com/AngularJS/Contents/Images/{{</span><span style="color: red;">Orchid.MainPicture</span><span style="color: #38761d;">}}" alt="{{Orchid.Title}}" title="{{Orchid.Title}}" > </span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="div-cell-center"> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <span >{{</span><span style="color: red;">Orchid.BlogID</span><span style="color: #38761d;">}} . {{</span><span style="color: red;">Orchid.Title | uppercase</span><span style="color: #38761d;">}} <br /><br /></span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> {{</span><span style="color: red;">Orchid.Text</span><span style="color: #38761d;">}} {{</span><span style="color: red;">Orchid.DatePosted | date</span><span style="color: #38761d;"> }}</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </span> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="div-cell-right"></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <a href="</span><span style="color: red;">#/edit/{{Orchid.BlogID}}</span><span style="color: #38761d;">"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </a></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </li> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </ul> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="panel panel-default"> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="panel-body | centered"></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <button </span><span style="color: red;">data-ng-click</span><span style="color: #38761d;">="fnShowOrchids(-1)" class="btn btn-default btn-lg" ><span class="glyphicon glyphicon-hand-left" aria-hidden="true"></span></button></span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <input type="number" </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="pageSize" max="4" min="1" value="2" class="select"/></span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <button </span><span style="color: red;">data-ng-click</span><span style="color: #38761d;">="fnShowOrchids(1)" class="btn btn-default btn-lg" ><span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span></button></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <a href="</span><span style="color: red;">#/add</span><span style="color: #38761d;">">Add your Favorite Flowers</a></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></div></b></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ExYX5GgR66g/VOnwoebUj9I/AAAAAAAAJbM/ePGOiR8ogRc/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="434" src="https://2.bp.blogspot.com/-ExYX5GgR66g/VOnwoebUj9I/AAAAAAAAJbM/ePGOiR8ogRc/s1600/4.png" width="640" /></a></div>
<br />
<br />
<br />
I've remarked the more relevant code in <b><span style="color: red;">red</span></b>. The two buttons are for Pagination of the items forward and backwards. The Input "number" is for setting the size of every page while paging. Also, we just display all the flowers by showing all the OrchidsList that we will prepare at the Controller.<br />
We explained using AngularJS collections and the <b><span style="color: #38761d;">data-ng-repeat</span></b> <a href="http://angularjsclub.blogspot.com/2015/01/7-using-data-collections-in-angularjs.html" target="_blank">in a previous lesson</a> .<br />
There is also a link button to load the "Edit" View Template, using one of the Bootstrap's Glyphicons.<br />
This link sends the ID of the selected item to the Edit Controller.<br />
<br />
Next, we're going to code the AngularJS Module, the Routing , and the Controllers.<br />
<br />
Create a javascript SPAControllers.js file, and add a Module with a RouteProvider, as follows:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-bnA_MsGsmdQ/VOnwosTNTTI/AAAAAAAAJbQ/iPg7Hu8_fBU/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="414" src="https://2.bp.blogspot.com/-bnA_MsGsmdQ/VOnwosTNTTI/AAAAAAAAJbQ/iPg7Hu8_fBU/s1600/5.png" width="640" /></a></div>
<br />
<br />
<br />
<br />
<span style="font-size: x-small;"><b><span style="color: #38761d;">var oOrchidsApp = angular.module('OrchidsApp', ['</span><span style="color: red;">ngRoute</span><span style="color: #38761d;">','</span><span style="color: red;">ngResource</span><span style="color: #38761d;">']);</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b>oOrchidsApp.config(['$routeProvider', function ($routeProvider) {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">$routeProvider</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b> .when('/',</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> templateUrl: "App/Views/OrchidsList.html",</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> controller: "OrchidsAllCtl"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> })</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> .when('/add',</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> templateUrl: "App/Views/OrchidsAdd.html",</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> controller: "OrchidsAddCtl"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> })</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> .when('/edit/:id',</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> templateUrl: "App/Views/OrchidsEdit.html",</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> controller: "OrchidsEditCtl"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> })</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> .otherwise({ redirectTo: "/" });</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b>}]);</b></span><br />
<div>
<br /></div>
<br />
<br />
We are using an AngularJS $routeProvider to bind each View with the correspondent Template and Controller. When the default "/" is required, the user will be faced with the "All" template. If the "/add" page is required, then the "Add" template will be displayed.<br />
The same thing for the "Edit" template.<br />
Remember, this is always the same HTML web page that is browsed here. This is a SPA application: all is done in THE SAME url: there are no reloads of the HTML page!!!<br />
That's why we referenced the angular-route.js javascript at the <head>: to use the $routeProvider at the Module, and enabling an SPA application.<br />
<br />
Next we add some Global variables, that is, some data that will be reused by the different Controllers, and we do not want to repeat several times all over the App:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-w0k00eguDyw/VOnwpHb0CBI/AAAAAAAAJbg/AvVaFQIciPs/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="226" src="https://1.bp.blogspot.com/-w0k00eguDyw/VOnwpHb0CBI/AAAAAAAAJbg/AvVaFQIciPs/s1600/6.png" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b>oOrchidsApp.value('msg', { value: '' });</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b>oOrchidsApp.factory('GlobalSvc', [function () {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b> var oFlowersPictures = ["haeckel_orchidae.jpg", "Bulbophyllum.jpg", "Cattleya.jpg", "Orchid Calypso.jpg", "Paphiopedilum_concolor.jpg", "Peristeria.jpg", "Phalaenopsis_amboinensis.jpg", "Sobralia.jpg"];</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> var sURLDev = 'http://localhost:21435/WebAPI/OrchidsWebAPI/';</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> var sURLProd = 'http://CARMELWEBAPI.SOMEE.COM/WebAPI/OrchidsWebAPI/';</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> var bIsDevelopmentTest = false;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> var sURL = bIsDevelopmentTest ? sURLDev : sURLProd;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b> return {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> getFlowers: function () { return oFlowersPictures; },</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> getURL: function () { return sURL; }</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b> };</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}]);</b></span><br />
<br />
The "value" object will contain a global message which communicates between the different Templates.<br />
The "GlobalSvc" is a Service created by an AngularJS Factory, containing the URLs used all over the Application, and also the list of items to be displayed by the Select list that we'll put in every View Template.<br />
We code two URLs: one for testing purposes and debugging, and one for Deployment.<br />
<br />
Next, we create a Resource, that will help us to sending HTTP GET requests for a specific ID of an item:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/--hSB9Qq62cI/VOnwpTAXz5I/AAAAAAAAJbY/N9mwxFH0WEY/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="156" src="https://4.bp.blogspot.com/--hSB9Qq62cI/VOnwpTAXz5I/AAAAAAAAJbY/N9mwxFH0WEY/s1600/7.png" width="640" /></a></div>
<br />
<br />
<br />
<span style="font-size: x-small;"><b><span style="color: #38761d;">oOrchidsApp.factory('OrchidsResource', ['GlobalSvc', '</span><span style="color: red;">$resource</span><span style="color: #38761d;">',function (GlobalSvc,</span><span style="color: red;"> $resource</span><span style="color: #38761d;">) {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> return </span><span style="color: red;">$resource</span><span style="color: #38761d;">(GlobalSvc.getURL() + ":id", </span><span style="color: red;">{ id: "@id" }</span><span style="color: #38761d;">);</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}]);</b></span><br />
<br />
<br />
Now we need the code for loading the View ALL Items Template, therefore add to the Module the following Controller:<br />
<br />
<span style="font-size: x-small;"><b><span style="color: #38761d;">oOrchidsApp.controller('OrchidsAllCtl', ['GlobalSvc', '$scope', '</span><span style="color: red;">$http</span><span style="color: #38761d;">', '$log', 'msg', function (GlobalSvc, $scope, $http, $log, msg) {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b> $scope.angularClass = "angular";</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.OrchidsList = [];</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.pageSize = 2;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> var iCurrentPage = -1; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b> $scope.fnShowOrchids = function (direction) {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b> iCurrentPage = iCurrentPage + direction;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> iCurrentPage = iCurrentPage >= 0 ? iCurrentPage : 0;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> var sURL = GlobalSvc.getURL() +</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> "?$skip=" +</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> iCurrentPage * $scope.pageSize</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> + "&$top=" +</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.pageSize;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">$http.get</span><span style="color: #38761d;">(sURL).</span><span style="color: red;">success</span><span style="color: #38761d;">(function (response) {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b> $scope.OrchidsList = response;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $log.info("OK");</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b> },function (err) { $log.error(err) })</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.Message = "";</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> }</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b> $scope.fnShowOrchids(1);</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.Message = msg.value;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>]);</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-zAu8kxQIMRs/VOnwp-XFH_I/AAAAAAAAJbs/mSURB-c3gyM/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="432" src="https://2.bp.blogspot.com/-zAu8kxQIMRs/VOnwp-XFH_I/AAAAAAAAJbs/mSURB-c3gyM/s1600/8.png" width="640" /></a></div>
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
This HTTP GET Ajax request code is thoroughly explained in the <a href="http://angularjsclub.blogspot.com/2015/02/add-css3-style-to-angularjs-Application-with-Twitter-Bootstrap.html" target="_blank">Lesson #14</a>. Here we just get the URL from the "GlobalSvc" Service, append to it the OData code for Paging ("$skip=" + "$top="), and send an HTTP GET REST request via the $http Service.<br />
The "direction" function argument, as explained <a href="http://angularjsclub.blogspot.com/2015/02/add-css3-style-to-angularjs-Application-with-Twitter-Bootstrap.html" target="_blank">in a previous tutorial</a>, is for paging backwards and forward.<br />
Notice that we made Dependency Injections for three services : $scope, to get the variables, $http for sending HTTP REST requests to the web server, and $log for logging and making easy to debug our app.<br />
In case you don't have an OData RESTful web service working on your environment, i developed and deployed one that you can use. It can be found at this URL:<br />
<br />
<a href="http://carmelwebapi.somee.com/WebAPI/OrchidsWebAPI">http://carmelwebapi.somee.com/WebAPI/OrchidsWebAPI</a><br />
<br />
You can use freely use it: an example of using this OData Web API:<br />
<br />
<a href="http://carmelwebapi.somee.com/WebAPI/OrchidsWebAPI/?$skip=2&$top=3">http://carmelwebapi.somee.com/WebAPI/OrchidsWebAPI/?$skip=2&$top=3</a><br />
<br />
If you already have an OData service working, just replace the URLs at the Service.<br />
<br />
We're going to fetch the data from an OData RESTful service, by using the Ajax Service called $http in Angular. This service provide all kinds of HTTP functionality, like sending HTTP POST, PATCH, HTTP PUT or DELETE requests. Next we will use both the HTTP GET, and the HTTP POST and PATCH verbs.<br />
The documentation for the $http service can be seen at the <a href="https://docs.angularjs.org/api/ng/service/$http" target="_blank">Angular official web site</a>:<br />
<br />
<a href="http://2.bp.blogspot.com/-dbWzRaFBsW0/VNHh0xyjjsI/AAAAAAAAJPk/TsRH7Af-b6o/s1600/18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 17 " border="0" height="616" src="https://2.bp.blogspot.com/-dbWzRaFBsW0/VNHh0xyjjsI/AAAAAAAAJPk/TsRH7Af-b6o/s1600/18.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 17 " width="540" /></a><br />
<br />
<br />
<br />
<br />
Now let's design the AngularJS Template View for adding a new item to the Orchids collection.<br />
The "Add" Template will show as follows:<br />
<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b><div class="container"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><div class="jumbotron"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="" > </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <h2>Add your Favorite Orchid</h2> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <form name="addOrchid" class=""</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-submit</span><span style="color: #38761d;">="fnAdd()"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <input type="text" class="form-control"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> placeholder="Title"</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;"> data-ng-model</span><span style="color: #38761d;">="Orchid.Title"</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> required></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <input type="text" class="form-control"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> placeholder="Text"</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="Orchid.Text"</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> required></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <select </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="Orchid.MainPicture" title="Select a Picture" </span><span style="color: red;">data-ng-options</span><span style="color: #38761d;">="Img for Img in Flowers" class="form-control"></select></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <input type="submit" class="btn btn-default btn-lg"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> value="Add"</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-disabled</span><span style="color: #38761d;">="addOrchid.$invalid"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <span>{{fnShowMsg()}}</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </form></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <a href="#/">See All Flowers</a></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></div></b></span><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-Ug2utA3BUsM/VOnwqAQCbeI/AAAAAAAAJbk/2mQ3v8RrtRw/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://2.bp.blogspot.com/-Ug2utA3BUsM/VOnwqAQCbeI/AAAAAAAAJbk/2mQ3v8RrtRw/s1600/9.png" width="640" /></a></div>
<br />
<br />
<br />
At the Module, add a new Controller to add a ITEM capabilities of our SPA:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-HpoaBxBEmyg/VOnwlmoFVbI/AAAAAAAAJb4/AjFjp7wcQAg/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="378" src="https://2.bp.blogspot.com/-HpoaBxBEmyg/VOnwlmoFVbI/AAAAAAAAJb4/AjFjp7wcQAg/s1600/10.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(get the source code):<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b>oOrchidsApp.controller('OrchidsAddCtl',</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> ['GlobalSvc', '</span><span style="color: red;">$http</span><span style="color: #38761d;">', '$scope', '$location', '$log', 'msg',</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> function (GlobalSvc, $http, $scope, $location, $log, msg) {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> msg.value = "";</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.Flowers = GlobalSvc.getFlowers();</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.fnAdd = function () {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b> var oFlower = { "Title": $scope.Orchid.Title, "Text": $scope.Orchid.Text, </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> "MainPicture": $scope.Orchid.MainPicture }; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">$http</span><span style="color: #38761d;">({</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> url: GlobalSvc.getURL(),</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">method: "POST",</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> data: oFlower, </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">headers: { 'Content-Type': 'application/json' }</span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> }).</span><span style="color: red;">success</span><span style="color: #38761d;">(function (data, status, headers, config) {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> msg.value = "New Orchid saved";</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.IsSaved = true;</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> }).</span><span style="color: red;">error</span><span style="color: #38761d;">(function (err) {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $log.error(err);</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> }); </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> }</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b> $scope.fnShowMsg = function () { return msg.value; }</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>]);</b></span><br />
<br />
Finally, we'll create the "Edit" View Template for our SPA. Add a new HTML file called "" and type the following markup:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-8axSZppOMVs/VOrWGF55nCI/AAAAAAAAJcY/cQbNbXvoT74/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="https://4.bp.blogspot.com/-8axSZppOMVs/VOrWGF55nCI/AAAAAAAAJcY/cQbNbXvoT74/s1600/11.png" width="640" /></a></div>
<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b><div class="container"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><div class="jumbotron"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="" > </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <h2>Edit your Favorite Orchid</h2> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <form name="editOrchid" class=""</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-submit</span><span style="color: #38761d;">="fnEdit()"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <input type="text" class="form-control"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> placeholder="Title"</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="Orchid.Title"</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> required></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <input type="text" class="form-control"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> placeholder="Text"</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="Orchid.Text"</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> required></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <select </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="Orchid.MainPicture" title="Select a Picture" </span><span style="color: red;">data-ng-options</span><span style="color: #38761d;">="Img for Img in Flowers" class="form-control"></select></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <input type="submit" class="btn btn-default btn-lg"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> value="Update"</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-disabled</span><span style="color: #38761d;">="editOrchid.$invalid"></span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <span>{{</span><span style="color: red;">fnShowMsg()</span><span style="color: #38761d;">}}</span></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </form></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <a href="</span><span style="color: red;">#/</span><span style="color: #38761d;">">See All Flowers</a></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<br />
<br />
Then go back to the javascript Module and append another Controller as follows:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-NRIO_NCK5Qw/VOrWGLzDS1I/AAAAAAAAJcU/Kn4YAHojelU/s1600/12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="354" src="https://3.bp.blogspot.com/-NRIO_NCK5Qw/VOrWGLzDS1I/AAAAAAAAJcU/Kn4YAHojelU/s1600/12.png" width="640" /></a></div>
<br />
<br />
<span style="font-size: x-small;"><b><span style="color: #38761d;">oOrchidsApp.</span><span style="color: red;">controller</span><span style="color: #38761d;">('OrchidsEditCtl',</span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> ['</span><span style="color: red;">OrchidsResource</span><span style="color: #38761d;">', 'GlobalSvc', '</span><span style="color: red;">$http</span><span style="color: #38761d;">', '</span><span style="color: red;">$routeParams</span><span style="color: #38761d;">', '$scope', '$location', '$log', '</span><span style="color: red;">msg</span><span style="color: #38761d;">',</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> function (OrchidsResource, GlobalSvc, $http, $routeParams, $scope, $location, $log, msg) {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b> msg.value = "";</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.Flowers = GlobalSvc.getFlowers();</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> $scope.Orchid = </span><span style="color: red;">OrchidsResource.get({ id: $routeParams.id });</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b> $scope.fnEdit = function () {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> var oFlower = { "BlogId": </span><span style="color: red;">$routeParams.id</span><span style="color: #38761d;"> , "Title": $scope.Orchid.Title, </span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> "Text": $scope.Orchid.Text, "MainPicture": $scope.Orchid.MainPicture };</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">$http</span><span style="color: #38761d;">({</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> url: GlobalSvc.getURL() + $routeParams.id,</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">method: "PATCH",</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> data: oFlower,</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> headers: { 'Content-Type': 'application/json' }</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="font-size: x-small;"><b><span style="color: #38761d;"> }).</span><span style="color: red;">success</span><span style="color: #38761d;">(function (data) { msg.value = "Orchid successfully updated"; }).</span><span style="color: red;">error</span><span style="color: #38761d;">(function (err) { });</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br /></b></span>
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> }</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.fnShowMsg = function () { return msg.value; }</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>]);</b></span><br />
<div>
<br /></div>
Here are some new things that will call your attention: the <b style="font-size: small;"><span style="color: red;">$routeParams.id</span></b> allows us to get the ID of the specific item to be edited.<br />
The get() method of the OrchidsResource just send an HTTP GET request to get THIS specific item that we're going to edit.<br />
Then we use $http to send an HTTP PATCH request, and if the response is OK ("success"), we change the "msg" value to output some feedback to the user. Also, this "msg" variable is Global, and that will allows us to show a message also at the List View Template, although it has an other different $scope at all.<br />
<br />
Save and run the SPA:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/--KRnE4UDMXY/VOnwmiUXlyI/AAAAAAAAJb8/q0I-VYqmla0/s1600/13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://3.bp.blogspot.com/--KRnE4UDMXY/VOnwmiUXlyI/AAAAAAAAJb8/q0I-VYqmla0/s1600/13.png" width="524" /></a></div>
<br />
<br />
<br />
<br />
Now you can click the "Add" link to be prompted with the "Add" template, which will look this way:<br />
<br />
<a href="http://1.bp.blogspot.com/-9nUzDBxx2tA/VOSbRaFCS9I/AAAAAAAAJYE/reyuE09PyIU/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="474" src="https://1.bp.blogspot.com/-9nUzDBxx2tA/VOSbRaFCS9I/AAAAAAAAJYE/reyuE09PyIU/s1600/9.png" width="640" /></a><br />
<br />
<br />
Here you can add a new item. This is how looks the list of pictures at the drop down list:<br />
<br />
<a href="http://4.bp.blogspot.com/-ZIqAWTzFCV8/VOSbN41HROI/AAAAAAAAJXA/Yd9mOoUhe48/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="442" src="https://4.bp.blogspot.com/-ZIqAWTzFCV8/VOSbN41HROI/AAAAAAAAJXA/Yd9mOoUhe48/s1600/10.png" width="640" /></a><br />
<br />
<br />
Save a flower, to see how it works:<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-eTWqxkcadgE/VOSbNxjJybI/AAAAAAAAJXE/l9ZeRnBnWQ8/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="412" src="https://2.bp.blogspot.com/-eTWqxkcadgE/VOSbNxjJybI/AAAAAAAAJXE/l9ZeRnBnWQ8/s1600/11.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
Now you will see the "New orchid saved" message (provided that the web service is working properly).</div>
<div class="separator" style="clear: both;">
Return to the "See all flowers" View (because this is a SPA Application, we're actually browsing to the SAME html web page):</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-2jXBitul9Eg/VOrWIXum63I/AAAAAAAAJcw/SHn8vya5it4/s1600/13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://1.bp.blogspot.com/-2jXBitul9Eg/VOrWIXum63I/AAAAAAAAJcw/SHn8vya5it4/s1600/13.png" width="524" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
Here we can see the new item that we added to the collection, and clicking the "Edit" icon, we'll edit it:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-Yc1tIecUlVc/VOrWGyo032I/AAAAAAAAJcs/arEi9SuVZ_o/s1600/14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="540" src="https://2.bp.blogspot.com/-Yc1tIecUlVc/VOrWGyo032I/AAAAAAAAJcs/arEi9SuVZ_o/s1600/14.png" width="640" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
As you can see, the URL contains the ID of the item being edited. Make some changes, and click the "Update" button, to send an HTTP PATCH request to the OData REST service:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-sKlofxDWlHU/VOrWHXpG9WI/AAAAAAAAJck/WHhA-MSm0Qg/s1600/15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="526" src="https://3.bp.blogspot.com/-sKlofxDWlHU/VOrWHXpG9WI/AAAAAAAAJck/WHhA-MSm0Qg/s1600/15.png" width="640" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
If you get no response, check at the Developer's Tools (F12) in the "Network" tab, for the response status. If there is some error , refer to <a href="http://angularjsclub.blogspot.com/2015/02/how-to-fix-error-Method-DELETE-not-allowed-Access-Control-Allow-Methods.html" target="_blank">this HTTP Error Tutorial</a>.</div>
<div class="separator" style="clear: both;">
After you updated your item, take a look at it on the items List:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-5_orfJK5xFs/VOrWIOAhgoI/AAAAAAAAJc4/5hWQj9o42gQ/s1600/16.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://3.bp.blogspot.com/-5_orfJK5xFs/VOrWIOAhgoI/AAAAAAAAJc4/5hWQj9o42gQ/s1600/16.png" width="546" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Notice the "Msg" that we display here , in the "All" View.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Remember to widely using the $log functionality in your SPA, to send to yourself messages with some feedback from your AngularJS app.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
That's All!!! You have started sending HTTP PATCH Requests to an OData Web API RESTful service, in your own SPA application, using the AngularJS Dependency Injection for the $http, $log, and $routeParameters Services. In the next article we will continue to learn Step by Step about <a href="http://angularjsclub.blogspot.com/2015/02/how-to-send-http-delete-requests-SPA-OData-RESTful-WebAPI.html" target="_blank">making HTTP DELETE requests to an odata web api restful service using the $http angularjs</a> .<b> </b><br />
<b>Enjoy AngularJS.....</b><br />
<b><br /></b><b> </b>by Carmel Schvartzman<br />
<br />
<br />
<b><a href="http://angularjsclub.blogspot.com/2015/02/make-post-requests-odata-web-api-restful-service-using-http-angularjs.html" target="_blank"><<<< PREVIOUS LESSON</a> <a href="http://angularjsclub.blogspot.com/2015/02/how-to-send-http-delete-requests-SPA-OData-RESTful-WebAPI.html" target="_blank">NEXT LESSON >>>></a></b><br />
<br />
<b><br /></b>
<br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
<b><span style="font-size: x-small;"><br /></span></b></div>
<div>
</div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-7714715581339500120.post-57812170503187860402016-03-31T03:31:00.000-07:002016-03-31T03:31:47.882-07:00#14 - Make GET Requests with pagination to OData Web API RESTful service using $http AngularJSIn this article we review <b>how to Make GET Requests to an OData Web API RESTful service using $http AngularJS,</b> by developing in 15 minutes an Angular Application that includes a Controller with an $http service dependency, to fetch data from a REST OData web service , loading a paginated list of products.<br />
<b><i>You can learn this step-by-step tutorial as a standalone</i></b>, or you can see the previous lessons of the series. This is the Lesson #14 in the "AngularJS: From 0 To 100" articles written for Beginners. This lessons start at <a href="http://angularjsclub.blogspot.com/2014/12/first-angularjs-application-for-Beginners-in-10-minutes.html" target="_blank">Lesson #1</a> .<br />
This App can be downloaded from the following GitHub repository:<br />
<a href="https://github.com/CarmelSoftware/AngularJS_OData_HTTPGET" target="_blank">https://github.com/CarmelSoftware/AngularJS_OData_HTTPGET</a><br />
<br />
<br />
<b><a href="http://angularjsclub.blogspot.com/2015/02/add-css3-style-to-angularjs-Application-with-Twitter-Bootstrap.html" target="_blank"><<<< PREVIOUS LESSON</a> <a href="http://angularjsclub.blogspot.com/2015/02/make-post-requests-odata-web-api-restful-service-using-http-angularjs.html" target="_blank">NEXT LESSON >>>></a></b><br />
<b><br />
</b> <b><br />
</b> In this tutorial we're using the "Brackets" open source web Editor , which supports AngularJS Apps, and you can read more about it <a href="http://angularjsclub.blogspot.com/2014/12/powerful-open-source-web-editor-optimized-for-AngularJS-Web-Design.html" target="_blank">in this post</a>.<br />
<br />
This is the AngularJS App that we'll develop here from scratch :<br />
<br />
<a href="http://4.bp.blogspot.com/-fdyT7VJrz6I/VNHhzsQx77I/AAAAAAAAJPQ/s-1SJ17OU60/s1600/15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 14 " border="0" src="https://4.bp.blogspot.com/-fdyT7VJrz6I/VNHhzsQx77I/AAAAAAAAJPQ/s-1SJ17OU60/s1600/15.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 14 " width="560" /></a><br />
<br />
<br />
<h3 style="text-align: center;">
Make GET Requests with pagination to OData Web API RESTful service using $http AngularJS</h3>
<br />
You can download this entire App from the following URL:<br />
<a href="https://github.com/CarmelSoftware/AngularJS_OData_HTTPGET/archive/master.zip" target="_blank">https://github.com/CarmelSoftware/AngularJS_OData_HTTPGET/archive/master.zip</a><br />
<br />
First, let's add the references to the AngularJS javascript framework using CDN, and defining the HTML5 file as an <b><span style="color: #38761d;">data-ng-app</span></b> Angular App:<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-8GFXcyliQv8/VNHhyNZ_INI/AAAAAAAAJPA/i8PP3ZHzHA4/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger " border="0" height="158" src="https://3.bp.blogspot.com/-8GFXcyliQv8/VNHhyNZ_INI/AAAAAAAAJPA/i8PP3ZHzHA4/s1600/1.png" title="How to Debug AngularJS Apps with the free Batarang Debugger " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(get the source code):<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b><!doctype html></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"><html </span><span style="color: red;">data-ng-app</span><span style="color: #38761d;">="OrchidsApp"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><head></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><title></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> AngularJS HTTP GET</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></title></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <link href="Style.css" rel="stylesheet" type="text/css" /></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;"><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <script src="Controllers.js" type="text/javascript"></script></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></head></b></span><br />
<br />
<br />
Next, copy-paste the following CSS3 style to your style.css file:<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b>body {background:rgba(255, 238, 238, 0.5);</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>img {width:100px;height:100px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>div[id^=controls] , input[type=number]</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>padding:5px 5px 5px 25px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>margin:10px 15px 15px 25px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>font:900 12px Comic Sans MS;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>opacity:0.9;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>background:#fed; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>border:10px solid #ddd; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>border-radius: 10px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>box-shadow:10px 10px 2px #c0c0c0;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>button</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>padding:5px 5px 5px 5px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>margin:10px 15px 15px 15px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>width:120px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>text-align: center;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>background:#ddd; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>font:900 14px Comic Sans MS;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>opacity:0.9;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>border:1px solid #c0c0c0; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>border-radius: 10px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>box-shadow:10px 10px 2px #c0c0c0;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>ul</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>list-style:none; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.centered</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> text-align:center; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.angular</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>padding:5px 5px 5px 5px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>margin:25px 15px 15px 25px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>width:350px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>text-align:center;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>background:#fee; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>font:900 14px Comic Sans MS;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>opacity:0.9;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>border:1px solid #c0c0c0; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>border-radius: 10px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>box-shadow:10px 10px 2px #faf;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.title {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> width: 90%;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> border: solid 1px #fea;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<br />
<br />
Add a <div> bound to an <b><span style="color: #38761d;">data-ng-controller</span></b>:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-245YqSRnB9E/VNHh1b08haI/AAAAAAAAJP0/pXpSDQN1gV8/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 1 " border="0" height="470" src="https://4.bp.blogspot.com/-245YqSRnB9E/VNHh1b08haI/AAAAAAAAJP0/pXpSDQN1gV8/s1600/2.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 1 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(get the source code):<br />
<span style="color: #38761d; font-size: x-small;"><b><body class="centered"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><div class="angular | title" > </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <h1>Orchids AngularJS App</h1> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <h2>List of my Favorite Orchids</h2> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></div> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <div id="controls1" </span><span style="color: red;">data-ng-controller</span><span style="color: #38761d;">="OrchidsCtl"> </span></b></span><br />
<br />
<br />
Create a javascript Controller.js file, and add a module with a Controller:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-J5lYOME6SpM/VNHh1gQ3b2I/AAAAAAAAJPw/Bjym2qa_jUA/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 2 " border="0" height="87" src="https://4.bp.blogspot.com/-J5lYOME6SpM/VNHh1gQ3b2I/AAAAAAAAJPw/Bjym2qa_jUA/s1600/3.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 2 " width="560" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Notice we did a Dependency Injection for three services : $scope, to work with variables, $http for sending HTTP requests to the web server, and $log for making it easy to debug our app.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(get the source code):<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b>var oOrchidsApp = angular.module('OrchidsApp', []);</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span> <span style="font-size: x-small;"><b><span style="color: #38761d;">oOrchidsApp.controller('OrchidsCtl', [</span><span style="color: red;">'$scope', '$http', '$log'</span><span style="color: #38761d;">, function (</span><span style="color: red;">$scope, $http, $log</span><span style="color: #38761d;">) {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span> <span style="color: #38761d; font-size: x-small;"><b> $scope.angularClass = "angular";</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.OrchidsList = [];</b></span><br />
<br />
<br />
At the HTML5 file, add a list and use the data-ng-repeat directive, for displaying the "Orchid" items when loaded from the OData web service:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-qTuF7rhEYC4/VNHh2Sy1pYI/AAAAAAAAJP4/3HmIUXEgXXo/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 3 " border="0" height="320" src="https://4.bp.blogspot.com/-qTuF7rhEYC4/VNHh2Sy1pYI/AAAAAAAAJP4/3HmIUXEgXXo/s1600/4.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 3 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(get the source code):<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b><ul > </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <li </span><span style="color: red;">data-ng-repeat</span><span style="color: #38761d;">="Orchid in OrchidsList"> </span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <div </span><span style="color: red;">data-ng-class</span><span style="color: #38761d;">="angularClass" > </span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <img src="Images/</span><span style="color: red;">{{Orchid.MainPicture}}</span><span style="color: #38761d;">" alt="</span><span style="color: red;">{{Orchid.Title}}</span><span style="color: #38761d;">" > <br /> </span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <span ></span><span style="color: red;">{{Orchid.BlogID}} . {{Orchid.Title | uppercase}}</span><span style="color: #38761d;"> <br /></span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">{{Orchid.Text}} {{Orchid.DatePosted | date }}</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </span> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </li> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </ul> </b></span><br />
<br />
<br />
We thoroughly explained using AngularJS collections <a href="http://angularjsclub.blogspot.com/2015/01/7-using-data-collections-in-angularjs.html" target="_blank">in this previous lesson</a> .<br />
The difference is, now we're going to fetch the data from an OData RESTful web service, using an Ajax enabled AngularJS Service called $http. This service provide also another kinds of HTTP requests like POST, PUT etc. Here we only need to use the HTTP GET verb.<br />
More info about the $http AngularJS service can be found at the <a href="https://docs.angularjs.org/api/ng/service/$http" target="_blank">Angular official web site</a>:<br />
<br />
<a href="http://2.bp.blogspot.com/-dbWzRaFBsW0/VNHh0xyjjsI/AAAAAAAAJPk/TsRH7Af-b6o/s1600/18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 17 " border="0" height="616" src="https://2.bp.blogspot.com/-dbWzRaFBsW0/VNHh0xyjjsI/AAAAAAAAJPk/TsRH7Af-b6o/s1600/18.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 17 " width="540" /></a><br />
<br />
<br />
So let's use the $http get() method service as follows:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-bxg9-bLp4Mk/VNHh2l5PJ4I/AAAAAAAAJQA/U910Bl44CJM/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 4 " border="0" height="294" src="https://4.bp.blogspot.com/-bxg9-bLp4Mk/VNHh2l5PJ4I/AAAAAAAAJQA/U910Bl44CJM/s1600/5.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 4 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(get the source code):<br />
<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b>$scope.fnShowOrchids = function (direction) {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span> <span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">$http.get(sURL).success</span><span style="color: #38761d;">(</span><span style="color: #0b5394;">function (response)</span><span style="color: #38761d;"> {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span> <span style="color: #38761d; font-size: x-small;"><b> $scope.OrchidsList = response;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $log.info("OK");</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span> <span style="color: #38761d; font-size: x-small;"><b> },</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span> <span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: #134f5c;">function (err)</span><span style="color: #38761d;"> { $log.error(err) })</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> }</b></span><br />
<br />
You can see that we concatenate this get() method with another "success" method, a callback which gets two functions as parameters: the first is the callback called when everything's fine, and the second is for when something went wrong.<br />
Inside the method, we just load the "OrchidsList" with the data returned by the HTTP response.<br />
Now , we need a REST OData web service, which in my case is the following:<br />
<br />
<a href="http://3.bp.blogspot.com/-j-h9v3-IuuY/VNHhyE98CXI/AAAAAAAAJO8/LI4ud1zl5BY/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 10 " border="0" height="540" src="https://3.bp.blogspot.com/-j-h9v3-IuuY/VNHhyE98CXI/AAAAAAAAJO8/LI4ud1zl5BY/s1600/11.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 10 " width="516" /></a><br />
<br />
In case that you don't have an OData RESTful web service on your project, i developed one that you can use, in this URL:<br />
<br />
<a href="http://carmelwebapi.somee.com/WebAPI/OrchidsWebAPI">http://carmelwebapi.somee.com/WebAPI/OrchidsWebAPI</a><br />
<br />
This OData RESTful service is exactly the same as described in this tutorial. You can use it at your own.<br />
An example of using this OData Web API:<br />
<a href="http://carmelwebapi.somee.com/WebAPI/OrchidsWebAPI/?$skip=2&$top=3">http://carmelwebapi.somee.com/WebAPI/OrchidsWebAPI/?$skip=2&$top=3</a><br />
<br />
<br />
Now , about Pagination. We don't want all the data to be displayed on the web page, so we use the built in OData pagination capabilities. The OData service supports a "skip" and a "top" parameters, for example, this snapshot shows skipping 2 orchids blog posts, and displaying the top 3 items:<br />
<br />
<a href="http://3.bp.blogspot.com/-oVXIjQt38ZM/VNHhyrozLDI/AAAAAAAAJPE/ryU4aA3ZJq4/s1600/12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 11 " border="0" height="614" src="https://3.bp.blogspot.com/-oVXIjQt38ZM/VNHhyrozLDI/AAAAAAAAJPE/ryU4aA3ZJq4/s1600/12.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 11 " width="540" /></a><br />
<br />
In other words, in this example the Page has 3 items, and we just skipped 2 other ones.<br />
To produce the pagination, we add two buttons that call a Controller's method "fnShowOrchids", telling it to display 1 previous page (-1) and 1 next page (1):<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-oXEmrNzpNRU/VNHh22MxXfI/AAAAAAAAJQE/J0xKybVTyQA/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 5 " border="0" height="268" src="https://1.bp.blogspot.com/-oXEmrNzpNRU/VNHh22MxXfI/AAAAAAAAJQE/J0xKybVTyQA/s1600/6.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 5 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(get the source code):<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b><div class="centered"> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <button </span><span style="color: red;">data-ng-click</span><span style="color: #38761d;">="fnShowOrchids(-1)"><<<<</button></span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <button </span><span style="color: red;">data-ng-click</span><span style="color: #38761d;">="fnShowOrchids(1)">>>>></button></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div> </b></span><br />
<br />
<br />
At the Controller, we should add the Page size and the Current page variables, and calculate which page claim from the web server:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-0Q9283c4Vq8/VNHh3XD8odI/AAAAAAAAJQU/uMr4a7cx-Vg/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 6 " border="0" height="426" src="https://1.bp.blogspot.com/-0Q9283c4Vq8/VNHh3XD8odI/AAAAAAAAJQU/uMr4a7cx-Vg/s1600/7.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 6 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(get the source code):<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.pageSize = 2;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> var iCurrentPage = -1;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span> <span style="color: #38761d; font-size: x-small;"><b>$scope.fnShowOrchids = function (direction) {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span> <span style="color: #38761d; font-size: x-small;"><b> iCurrentPage = iCurrentPage + direction;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> iCurrentPage = iCurrentPage >= 0 ? iCurrentPage : 0;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> var sURL = "http://localhost:21435/WebAPI/OrchidsWebAPI/" +</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">"?$skip="</span><span style="color: #38761d;"> +</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> iCurrentPage * $scope.pageSize</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> + </span><span style="color: red;">"&$top="</span><span style="color: #38761d;"> + </span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.pageSize;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span> <span style="color: #38761d; font-size: x-small;"><b><br />
</b></span> <span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">$http.get(sURL).success</span><span style="color: #38761d;">(function (response) {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span> <span style="color: #38761d; font-size: x-small;"><b> $scope.OrchidsList = response;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $log.info("OK");</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span> <span style="color: #38761d; font-size: x-small;"><b> },</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span> <span style="color: #38761d; font-size: x-small;"><b> function (err) { $log.error(err) })</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> }</b></span><br />
<br />
We build the URL , and send the current Page and also the its size :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-3FHUQpMLcek/VNHh3hsL0YI/AAAAAAAAJQQ/zr4-bArAZj0/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 7 " border="0" height="362" src="https://1.bp.blogspot.com/-3FHUQpMLcek/VNHh3hsL0YI/AAAAAAAAJQQ/zr4-bArAZj0/s1600/8.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 7 " width="540" /></a></div>
<br />
<br />
<br />
<br />
We made the page size an $scope variable, a part of the Model, in order to allow the user to modify its size, using the following HTML5 input number element:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-AadU6bsq79Q/VNHh4GsF74I/AAAAAAAAJQY/0kgpm7TWglc/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 8 " border="0" height="344" src="https://3.bp.blogspot.com/-AadU6bsq79Q/VNHh4GsF74I/AAAAAAAAJQY/0kgpm7TWglc/s1600/9.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 8 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(get the source code):<br />
<br />
<b style="font-size: small;"><span style="color: #38761d;"> <input type="number" </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="pageSize" max="4" min="1" value="2" /></span></b><br />
<br />
Then the $scope.pageSize allows us to calculate the "skip" and "top" values:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-_PRIjKnNAkk/VNHhyIMgaII/AAAAAAAAJO4/aKZKjEmMTD8/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 9 " border="0" height="192" src="https://1.bp.blogspot.com/-_PRIjKnNAkk/VNHhyIMgaII/AAAAAAAAJO4/aKZKjEmMTD8/s1600/10.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 9 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
We're done with the code. Now, run the app to get this web page:<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-VrVXeqGSN0s/VNHhy1tQq_I/AAAAAAAAJQ4/Z4A_QCAPr0Q/s1600/13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 12 " border="0" height="290" src="https://3.bp.blogspot.com/-VrVXeqGSN0s/VNHhy1tQq_I/AAAAAAAAJQ4/Z4A_QCAPr0Q/s1600/13.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 12 " width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Click the NEXT (>>>) button and see the data fetched from the OData service:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-w1zoeHbZODk/VNHhzGYakUI/AAAAAAAAJPM/7djPudx1jyI/s1600/14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 13 " border="0" height="540" src="https://3.bp.blogspot.com/-w1zoeHbZODk/VNHhzGYakUI/AAAAAAAAJPM/7djPudx1jyI/s1600/14.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 13 " width="464" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The page size is "2" by default, as we instantiated it at the Controller:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-fdyT7VJrz6I/VNHhzsQx77I/AAAAAAAAJPQ/s-1SJ17OU60/s1600/15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 14 " border="0" height="540" src="https://4.bp.blogspot.com/-fdyT7VJrz6I/VNHhzsQx77I/AAAAAAAAJPQ/s-1SJ17OU60/s1600/15.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 14 " width="436" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now, let's change the page size:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-yKddA_s60h4/VNHh0JxC5zI/AAAAAAAAJPg/TvzugFQdRzY/s1600/16.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 15 " border="0" height="540" src="https://2.bp.blogspot.com/-yKddA_s60h4/VNHh0JxC5zI/AAAAAAAAJPg/TvzugFQdRzY/s1600/16.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 15 " width="562" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
As you see, now the page size is 1:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/--1_HiV9ntSs/VNHh0QdE2bI/AAAAAAAAJPY/ZAje8FzMYYQ/s1600/17.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Debug AngularJS Apps with the free Batarang Debugger 16 " border="0" height="540" src="https://4.bp.blogspot.com/--1_HiV9ntSs/VNHh0QdE2bI/AAAAAAAAJPY/ZAje8FzMYYQ/s1600/17.png" title="How to Debug AngularJS Apps with the free Batarang Debugger 16 " width="560" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Remember to use the $log functionality to send to yourself messages , easing to debug the AngularJS app.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
That's All!!! You have begun making GET Requests with pagination to OData Web API RESTful service using $http AngularJS with Dependency Injection . In the next article we will continue to learn Step by Step about <a href="http://angularjsclub.blogspot.com/2015/02/make-post-requests-odata-web-api-restful-service-using-http-angularjs.html" target="_blank">making post requests to an odata web api restful service using the $http angularjs</a> .<b> </b><br />
<b>Enjoy AngularJS.....</b><br />
<b><br />
</b><b> </b>by Carmel Schvartzman<br />
<br />
<br />
<b><a href="http://angularjsclub.blogspot.com/2015/02/add-css3-style-to-angularjs-Application-with-Twitter-Bootstrap.html" target="_blank"><<<< PREVIOUS LESSON</a> <a href="http://angularjsclub.blogspot.com/2015/02/make-post-requests-odata-web-api-restful-service-using-http-angularjs.html" target="_blank">NEXT LESSON >>>></a></b><br />
<br />
<b><br />
</b> <br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
<b><span style="font-size: x-small;"><br />
</span></b></div>
<div>
</div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-7714715581339500120.post-33796159939964102502015-12-26T10:08:00.000-08:002015-12-26T10:08:53.972-08:00#13 - Add CSS3 Style to AngularJS Application with Twitter BootstrapIn this article we review <b>how to Add CSS3 Style to an AngularJS Application with Twitter Bootstrap,</b> developing from scratch in 20 minutes a complete SPA (Single Page App) Angular Application that shows the outstanding features of both the Twitter Bootstrap and the AngularJS javascript framework.<br />
We'll build here a SPA app which shows an item list, and allows you to append more items to it.<br />
<b><i>You can learn this step-by-step tutorial as a standalone</i></b>, or you can see the previous lessons of the series. This is the Lesson #13 in the "AngularJS: From 0 To 100" Series specially written for Beginners. This lessons begin at the <a href="http://angularjsclub.blogspot.com/2014/12/first-angularjs-application-for-Beginners-in-10-minutes.html" target="_blank">Lesson #1</a> .<br />
<br />
Also, this tutorial contains two parts:<br />
1) creating an SPA AngularJS app<br />
2) <i><b>adding the Twitter Bootstrap to an existing AngularJS Application</b></i><br />
<i><b><br />
</b></i> Therefore, if you already have an SPA app, you can directly jump to the <a href="http:/#Step2">Step 2</a>.<br />
<br />
<br />
<b><a href="http://angularjsclub.blogspot.com/2015/01/learn-angularjs-css3-and-html5-dom-manipulation.html" target="_blank"><<<< PREVIOUS LESSON</a> <a href="http://angularjsclub.blogspot.com/2015/02/make-http-get-requests-with-pagination-to-OData-WebAPI-RESTful-service.html" target="_blank">NEXT LESSON >>>></a></b><br />
<b><br />
</b><b><br />
</b><br />
This is the AngularJS App that we'll develop in 20 minutes in this Tutorial :<br />
<br />
<a href="http://2.bp.blogspot.com/-aTKamFtVkVw/VNeGF7odSCI/AAAAAAAAJSI/9sCVAbocgYk/s1600/13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 1 " border="0" height="540" src="http://2.bp.blogspot.com/-aTKamFtVkVw/VNeGF7odSCI/AAAAAAAAJSI/9sCVAbocgYk/s1600/13.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 1 " width="540" /></a><br />
<br />
<br />
<br />
<h3 style="text-align: center;">
Add CSS3 Style to an AngularJS Application with Twitter Bootstrap</h3>
<br />
<h4>
<br />
</h4>
<h4>
<u>Step #1 - Creating an SPA (Single Page Application) with AngularJS:</u></h4>
<br />
First, let's add the references to the AngularJS javascript framework using CDN, and defining the HTML5 file as an <b><span style="color: #38761d;">data-ng-app</span></b> Angular App:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Se3mFTb-7iw/VNeGFGcIHJI/AAAAAAAAJRc/hKMJ9zDC7Ow/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 2 " border="0" height="174" src="http://1.bp.blogspot.com/-Se3mFTb-7iw/VNeGFGcIHJI/AAAAAAAAJRc/hKMJ9zDC7Ow/s1600/1.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 2 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
(Get the source code):</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><!doctype html></b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"><html </span><span style="color: red;">data-ng-app</span><span style="color: #38761d;">="MusicApp"></span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><head></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><title></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> AngularJS Twitter Bootstrap</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b></title></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><link href="Style.css" rel="stylesheet" type="text/css" /> </b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"><script src="</span><span style="color: red;">https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js</span><span style="color: #38761d;">"></script></span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><script src="Controllers.js" type="text/javascript"></script></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b></head></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Here we're using the "Brackets" open source web Editor , which supports AngularJS Apps. You can read more about it <a href="http://angularjsclub.blogspot.com/2014/12/powerful-open-source-web-editor-optimized-for-AngularJS-Web-Design.html" target="_blank">in this post</a>.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Our first step is coding a list of items using the <b><span style="color: #38761d;">data-ng-repeat</span></b> AngularJS Directive:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-ImVIsNIQS14/VNeGI26GAHI/AAAAAAAAJSQ/Cds4715NG4o/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 3 " border="0" height="338" src="http://4.bp.blogspot.com/-ImVIsNIQS14/VNeGI26GAHI/AAAAAAAAJSQ/Cds4715NG4o/s1600/2.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 3 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
We explained in detail this kind of AngularJS collections <a href="http://angularjsclub.blogspot.com/2015/01/7-using-data-collections-in-angularjs.html" target="_blank">in this tutorial</a> . Take a look if you have the time.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
(Copy):</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"><body </span><span style="color: red;">data-ng-controller</span><span style="color: #38761d;">="MusicController"></span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><div></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <div> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <h2>Fragile State Discography</h2> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <h3>Neil Cowley (Zero 7) and Ben Mynott</h3> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <div> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <ul> </b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <li </span><span style="color: red;">data-ng-repeat</span><span style="color: #38761d;">="album in albums"> </span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> .{{$index + 1}} </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <img src="{{album.img}}" alt="{{album.name}}" > </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <span >{{album.name}} - {{album.price | currency:"USD$" | uppercase}}</span> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </li> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </ul><br /> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </div> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b></div></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b></body></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b></html></b></span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
The Controller part of this MVC (Model View Controller) AngularJS SPA App consists in this code that we add to the javascript .js file:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-0IrC1vT6q7I/VNeGLhSMbJI/AAAAAAAAJTU/2QIHKz6Sv0E/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 4 " border="0" height="248" src="http://4.bp.blogspot.com/-0IrC1vT6q7I/VNeGLhSMbJI/AAAAAAAAJTU/2QIHKz6Sv0E/s1600/3.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 4 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This code just initialize the item's list we're building.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
(Copy):</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b><span style="color: #38761d; font-size: x-small;">var oMusicApp = angular.module('MusicApp', []);</span></b></div>
<div class="separator" style="clear: both;">
<b><span style="color: #38761d; font-size: x-small;"><br />
</span></b></div>
<div class="separator" style="clear: both;">
<b><span style="color: #38761d; font-size: x-small;">oMusicApp.controller('MusicController', [ '$scope', function ($scope) {</span></b></div>
<div class="separator" style="clear: both;">
<b><span style="color: #38761d; font-size: x-small;"> </span></b></div>
<div class="separator" style="clear: both;">
<b><span style="color: #38761d; font-size: x-small;"> var albums = </span></b></div>
<div class="separator" style="clear: both;">
<b><span style="color: #38761d; font-size: x-small;"> [</span></b></div>
<div class="separator" style="clear: both;">
<b><span style="color: #38761d; font-size: x-small;"> {id:111,img:"Nocturnal.jpg",name:"Nocturnal Beats",price:"12.50"},</span></b></div>
<div class="separator" style="clear: both;">
<b><span style="color: #38761d; font-size: x-small;"> {id:112,img:"Facts.jpg",name:"The Facts And The Dreams",price:"11.20"},</span></b></div>
<div class="separator" style="clear: both;">
<b><span style="color: #38761d; font-size: x-small;"> {id:113,img:"Voices.jpg",name:"Voices From The Dust Bowl",price:"13.70"},</span></b></div>
<div class="separator" style="clear: both;">
<b><span style="color: #38761d; font-size: x-small;"> {id:114,img:"Pretz.jpg",name:"Soundcastles",price:"14.80"}</span></b></div>
<div class="separator" style="clear: both;">
<b><span style="color: #38761d; font-size: x-small;"> ]</span></b></div>
<div class="separator" style="clear: both;">
<b><span style="color: #38761d; font-size: x-small;"> $scope.albums = albums;</span></b></div>
<div class="separator" style="clear: both;">
<b><span style="color: #38761d; font-size: x-small;"><br />
</span></b></div>
<div class="separator" style="clear: both;">
<b><span style="color: #38761d; font-size: x-small;">}]);</span></b></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Run the App to see if everything's OK:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-4FX7dgdGtwI/VNeGNQ4f7DI/AAAAAAAAJTs/gRNx9f6Zm4o/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 5 " border="0" height="404" src="http://3.bp.blogspot.com/-4FX7dgdGtwI/VNeGNQ4f7DI/AAAAAAAAJTs/gRNx9f6Zm4o/s1600/4.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 5 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Next, we build the web form that allows us to append a new Music Album item to the list. We mimic here a real-world submit form with input checking. But, instead of sending the data form to a web server, we handle the submit event and immediately add the item to the list:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-RNFWK-VOCwU/VNeGMW-dtoI/AAAAAAAAJTY/defp0hIIguo/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 6 " border="0" height="444" src="http://4.bp.blogspot.com/-RNFWK-VOCwU/VNeGMW-dtoI/AAAAAAAAJTY/defp0hIIguo/s1600/5.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 6 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Take a close look: our form includes several HTML5 input elements, with the correspondent validation and error checking , using the Angular <b><span style="color: #38761d;">data-ng-disabled</span></b> directive to disable the submit button in case that the input data do not comply with the legal input requirements.</div>
<div class="separator" style="clear: both; text-align: left;">
We bind all the input data to a <b><span style="color: #38761d;">data-ng-model</span></b> named "album", as its properties. For example, "album.name" , "album.price" , etc. At runtime, the Angular engine will take care of the entire "album" entity for us.</div>
<div class="separator" style="clear: both; text-align: left;">
A deeper explanation of this validation features can be found in the following <a href="http://angularjsclub.blogspot.com/2015/01/html5-forms-data-validation-error-messages-AngularJS.html" target="_blank">Tutorial on Forms Validation</a>.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
(Get the source code):</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <div class="jumbotron"> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <div class="container" ></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <h3>Add a New Music Album</h3></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <form </span><span style="color: red;">data-ng-submit</span><span style="color: #38761d;">="submitForm()" name="NewAlbumForm"></span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> Album Name </b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <span </span><span style="color: red;">data-ng-show</span><span style="color: #38761d;">="NewAlbumForm.Name.$error.required" class="errorMessage">*</span><br /></span></b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <input class="form-control" name="Name" </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="album.name" </span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> required data-ng-minlength="3" /> <br /></b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <span class="alert alert-danger" </span><span style="color: red;">data-ng-show</span><span style="color: #38761d;">="NewAlbumForm.Name.$error.minlength" class="errorMessage">Minimum length 3</span><br /></span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <br />Album Price</b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <span </span><span style="color: red;">data-ng-show</span><span style="color: #38761d;">="NewAlbumForm.Price.$error.required" class="errorMessage">*</span><br /></span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <input class="form-control" type="number" name="Price" min="1" </b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="album.price" required><br /><br /><br /></span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> Select a Picture<br /></b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <select class="form-control" </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="album.img" </span></b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-options</span><span style="color: #38761d;">="picture + '.jpg' as picture for picture in pictures" required></span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </select><br /></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> <input class="btn btn-primary btn-lg" type="submit" value="Add New Music Album" </b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">data-ng-disabled</span><span style="color: #38761d;">="NewAlbumForm.$invalid"></span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </form></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </div> </b></span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
And at the Controller we add the following code to handle the submit event:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-hNlaEd-2_go/VNeGMrXQxWI/AAAAAAAAJTg/iaxUEGkmPJA/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 7 " border="0" height="314" src="http://1.bp.blogspot.com/-hNlaEd-2_go/VNeGMrXQxWI/AAAAAAAAJTg/iaxUEGkmPJA/s1600/6.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 7 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This code just loads the data for the select element, and appends a new "album" item to the list. Then, it cleans the "album" object, to allow adding more items . As you can see, Angular takes care of all the Album's properties. </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
(Copy):</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>$scope.pictures = ["Nocturnal","Facts","Voices","Pretz"];</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> $scope.submitForm = function() {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> $scope.albums.push($scope.album);</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> $scope.album = {};</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> };</b></span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<h4 style="clear: both;">
<a href="https://www.blogger.com/null" name="Step2"></a><br />
<u>Step #2 - Adding the Twitter Bootstrap to an AngularJS SPA Application:</u></h4>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<u><b><i>#First step: adding the Bootstrap references:</i></b></u></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-r-IkuNmxwWU/VNeGMxvTwiI/AAAAAAAAJUA/IBHlczgTmQA/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 8 " border="0" height="134" src="http://3.bp.blogspot.com/-r-IkuNmxwWU/VNeGMxvTwiI/AAAAAAAAJUA/IBHlczgTmQA/s1600/7.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 8 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
You can get the style using CDN (Content Delivery Network) just copying this links:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
(Copy):</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" /></b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Or you can download the latest versions from the <a href="http://getbootstrap.com/" target="_blank">Bootstrap web site</a>:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://4.bp.blogspot.com/-Eu5GmZmCwjo/VNeGKwio-II/AAAAAAAAJTA/9yEEZPyUVUs/s1600/24.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 9 " border="0" height="422" src="http://4.bp.blogspot.com/-Eu5GmZmCwjo/VNeGKwio-II/AAAAAAAAJTA/9yEEZPyUVUs/s1600/24.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 9 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b><i><u>#Second Step: adding the Bootstrap Navbar to the App:</u></i></b></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Browse to the Bootstrap web site , and find the Navbar at the "Components" tab:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://1.bp.blogspot.com/-j13H3EobjV8/VNeGIFxTN-I/AAAAAAAAJSk/0Xmf2DYN5DI/s1600/19.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 10 " border="0" height="522" src="http://1.bp.blogspot.com/-j13H3EobjV8/VNeGIFxTN-I/AAAAAAAAJSk/0Xmf2DYN5DI/s1600/19.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 10 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Copy-paste the HTML5 markup to a new HTML file in your directory:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://2.bp.blogspot.com/-r5NoIZAwRb0/VNeGKCXC6nI/AAAAAAAAJTI/bavvmmRpC4Y/s1600/21.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 11 " border="0" height="578" src="http://2.bp.blogspot.com/-r5NoIZAwRb0/VNeGKCXC6nI/AAAAAAAAJTI/bavvmmRpC4Y/s1600/21.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 11 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Then, use the <b><span style="color: #38761d;">data-ng-include</span></b> and <b><span style="color: #38761d;">src </span></b>AngularJS directives to insert the Navbar inside the App:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://3.bp.blogspot.com/-O3A2J2Ng4pk/VNeGKTkVu5I/AAAAAAAAJSw/gSM_ZMKS7nY/s1600/22.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 12 " border="0" height="254" src="http://3.bp.blogspot.com/-O3A2J2Ng4pk/VNeGKTkVu5I/AAAAAAAAJSw/gSM_ZMKS7nY/s1600/22.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 12 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b><span style="color: #38761d;"><div </span><span style="color: red;">data-ng-include src</span><span style="color: #38761d;">="'Navbar.html'"></div></span></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Notice the double quotes we used here: "' '" : it's very important!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<i><b><u>#Third Step: add the Bootstrap classes to the <div>s elements</u> :</b></i></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now we just decorate all divs and elements with the Bootstrap classes:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-xwtx1X65J8U/VNeGNS2qHkI/AAAAAAAAJTo/MwrQP-FDzro/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 13 " border="0" height="248" src="http://3.bp.blogspot.com/-xwtx1X65J8U/VNeGNS2qHkI/AAAAAAAAJTo/MwrQP-FDzro/s1600/8.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 13 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
For instance, we use the "Jumbotron" component to give style to the title, as explained at the <a href="http://getbootstrap.com/components/" target="_blank">Bootstrap web site</a>:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://1.bp.blogspot.com/-qpNFfT3pPUE/VNeGJjmaoWI/AAAAAAAAJSg/CgxSzqW3RGE/s1600/20.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 14 " border="0" height="454" src="http://1.bp.blogspot.com/-qpNFfT3pPUE/VNeGJjmaoWI/AAAAAAAAJSg/CgxSzqW3RGE/s1600/20.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 14 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
After you added the style, browse to your app and refresh it:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<a href="http://3.bp.blogspot.com/-HNbjg2EDR0I/VNeGFJ0aJHI/AAAAAAAAJRY/Rfx_NjikLBA/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 15 " border="0" height="545" src="http://3.bp.blogspot.com/-HNbjg2EDR0I/VNeGFJ0aJHI/AAAAAAAAJRY/Rfx_NjikLBA/s1600/10.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 15 " width="540" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
We can already see the Navbar and the Jumbotron.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Now we add the Bootstrap classes to the web form as follows:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-L21eIJoDOCY/VNeGNx559JI/AAAAAAAAJT0/JEcqmzFfqCU/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap " border="0" height="390" src="http://1.bp.blogspot.com/-L21eIJoDOCY/VNeGNx559JI/AAAAAAAAJT0/JEcqmzFfqCU/s1600/9.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
We can choose another kind of button from the <a href="http://getbootstrap.com/css/" target="_blank">Bootstrap web site</a>:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://2.bp.blogspot.com/-82QLShYR2eM/VNeGKq9ft1I/AAAAAAAAJTM/nV4H_7LOUHU/s1600/23.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 16 " border="0" height="532" src="http://2.bp.blogspot.com/-82QLShYR2eM/VNeGKq9ft1I/AAAAAAAAJTM/nV4H_7LOUHU/s1600/23.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 16 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Also there you'll find all kinds of Alerts to choose:<br />
<br />
<a href="http://4.bp.blogspot.com/-xrMpM41p994/VNeGH1R9yzI/AAAAAAAAJSo/kTlm8Gc6D5k/s1600/18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 17 " border="0" height="512" src="http://4.bp.blogspot.com/-xrMpM41p994/VNeGH1R9yzI/AAAAAAAAJSo/kTlm8Gc6D5k/s1600/18.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 17 " width="540" /></a><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
Refresh the SPA:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-fmpsWbaxtRQ/VNeGFOA7MfI/AAAAAAAAJRU/Lew15j9fJyM/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 18 " border="0" height="540" src="http://3.bp.blogspot.com/-fmpsWbaxtRQ/VNeGFOA7MfI/AAAAAAAAJRU/Lew15j9fJyM/s1600/11.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 18 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now for the items list, add the Bootstrap Style classes as follows:</div>
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-AHooIMz3338/VNeGFt0uqaI/AAAAAAAAJRg/cvTtJojzb-c/s1600/12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 19 " border="0" height="230" src="http://2.bp.blogspot.com/-AHooIMz3338/VNeGFt0uqaI/AAAAAAAAJRg/cvTtJojzb-c/s1600/12.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 19 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Refresh:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-aTKamFtVkVw/VNeGF7odSCI/AAAAAAAAJSI/9sCVAbocgYk/s1600/13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 20 " border="0" src="http://2.bp.blogspot.com/-aTKamFtVkVw/VNeGF7odSCI/AAAAAAAAJSI/9sCVAbocgYk/s1600/13.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 20 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
We have all the Bootstrap Style we need.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now let's see how it works. Let's add a new "Fragile State" Music Album to the Collection:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-kYMzAoFEfEM/VNeGGNeVbbI/AAAAAAAAJRs/EMQ9d0UFgzY/s1600/14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 21 " border="0" height="540" src="http://3.bp.blogspot.com/-kYMzAoFEfEM/VNeGGNeVbbI/AAAAAAAAJRs/EMQ9d0UFgzY/s1600/14.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 21 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Notice the Bootstrap Alert informing the user that the length requisites have not been provided.</div>
<div class="separator" style="clear: both; text-align: left;">
Select a Price:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-awOYD2WxNY4/VNeGGQ4ghPI/AAAAAAAAJRo/6Cq2S3776zk/s1600/15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 22 " border="0" height="352" src="http://1.bp.blogspot.com/-awOYD2WxNY4/VNeGGQ4ghPI/AAAAAAAAJRo/6Cq2S3776zk/s1600/15.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 22 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
And select a Picture from the Drop Down List:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-sv7cXXLW37c/VNeGHOweNhI/AAAAAAAAJR0/HL9AEBf_UfE/s1600/16.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 23 " border="0" height="350" src="http://4.bp.blogspot.com/-sv7cXXLW37c/VNeGHOweNhI/AAAAAAAAJR0/HL9AEBf_UfE/s1600/16.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 23 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Click the button :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-0lXnbcS9eOE/VNeGHbLMhQI/AAAAAAAAJR4/IolT7wM-Soo/s1600/17.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 24 " border="0" height="540" src="http://1.bp.blogspot.com/-0lXnbcS9eOE/VNeGHbLMhQI/AAAAAAAAJR4/IolT7wM-Soo/s1600/17.png" title="Add CSS3 Style to AngularJS Application with Twitter Bootstrap 24 " width="544" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
A new item has been appended to the list.</div>
<br />
Finally, the only CSS3 style that we need is the following: (copy-paste the following CSS3 style to your style.css file) :<br />
<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b>ul</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>list-style:none; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>div.centered</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> text-align:center </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.errorMessage</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> color:red; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
That's All!!! You have Added CSS3 Style to an AngularJS Application using the Twitter Bootstrap . In the next article we will continue to learn Step by Step about <a href="http://angularjsclub.blogspot.com/2015/02/make-http-get-requests-with-pagination-to-OData-WebAPI-RESTful-service.html" target="_blank">Making GET Requests with pagination to OData Web API RESTful service using $http AngularJS </a><b>. </b><br />
<b>Enjoy AngularJS.....</b><br />
<b><br />
</b><b> </b>by Carmel Schvartzman<br />
<br />
<br />
<b><a href="http://angularjsclub.blogspot.com/2015/01/learn-angularjs-css3-and-html5-dom-manipulation.html" target="_blank"><<<< PREVIOUS LESSON</a> <a href="http://angularjsclub.blogspot.com/2015/02/make-http-get-requests-with-pagination-to-OData-WebAPI-RESTful-service.html" target="_blank">NEXT LESSON >>>></a></b><br />
<br />
<b><br />
</b> <br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
<b><span style="font-size: x-small;"><br />
</span></b></div>
<div>
</div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-7714715581339500120.post-76781881131452448672015-10-26T14:59:00.000-07:002015-10-26T14:59:58.050-07:00#12 - Learn AngularJS CSS3 and HTML5 DOM manipulation with DirectivesIn this article we <b>learn AngularJS CSS3 and HTML5 DOM manipulation with Directives,</b> and develop from scratch an Angular Application which includes CSS3 style and HTML5 DOM changing upon user's interaction. Our Angular App will allow us to manipulate both CSS3 style and DOM elements.<br />
We'll perform the following, by handling a <button> click event :<br />
<br />
<i><b>1) change an <img> element source</b></i><br />
<i><b>2) change the style class of an element</b></i><br />
<i><b>3) change the inline style of an element</b></i><br />
<i><b>4) hide/show a <div> element</b></i><br />
<i><b>5) create a new HTML DOM custom element named "<copyright>"</b></i><br />
<br />
This is the Lesson #12 in the "AngularJS: From 0 To 100" articles written for Beginners. This lessons start at <a href="http://angularjsclub.blogspot.com/2014/12/first-angularjs-application-for-Beginners-in-10-minutes.html" target="_blank">Lesson #1</a> , and you're invited to follow them.<br />
<br />
<b><a href="http://angularjsclub.blogspot.com/2015/01/how-to-create-your-own-custom-angularjs-service.html" target="_blank"><<<< PREVIOUS LESSON</a> <a href="http://angularjsclub.blogspot.com/2015/02/add-css3-style-to-angularjs-Application-with-Twitter-Bootstrap.html" target="_blank">NEXT LESSON >>>></a></b><br />
<b><br />
</b><b><br />
</b>You can read more about the "Brackets" open source web Editor , which supports AngularJS Apps, <a href="http://angularjsclub.blogspot.com/2014/12/powerful-open-source-web-editor-optimized-for-AngularJS-Web-Design.html" target="_blank">in this post</a>.<br />
<br />
The AngularJS App that we'll develop here will be shown this way :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-IVpS2hz3XaM/VMSuyZBX89I/AAAAAAAAJLM/B8NyyOHSHzE/s1600/27.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives " border="0" src="http://1.bp.blogspot.com/-IVpS2hz3XaM/VMSuyZBX89I/AAAAAAAAJLM/B8NyyOHSHzE/s1600/27.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives " /></a></div>
<br />
<br />
<br />
<br />
<h3 style="text-align: center;">
Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives</h3>
<br />
<br />
The DOM (Document Object Model) is a W3C standard for manipulating an HTML5 page, by performing all CRUD (Create, Read,Update, Delete) operations on the HTML5 elements, meaning creating new HTML5 elements, getting existing HTML elements, changing elements, and deleting them. Because changing an HTML5 element includes changing its Attributes, DOM manipulation applies also on its CSS3 style, in that we can change style as well. For example, a DOM can show like the following elements tree:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-dA6GC1QcGB4/VMDKKoqXZJI/AAAAAAAAJIU/WD2WTkPjIGY/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 1 " border="0" height="344" src="http://4.bp.blogspot.com/-dA6GC1QcGB4/VMDKKoqXZJI/AAAAAAAAJIU/WD2WTkPjIGY/s1600/1.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 1 " width="540" /></a></div>
<br />
AngularJS includes built-in functionality to change the HTML5 DOM and the CSS3 style of a web page, through Angular "Directives".<br />
AngularJS Directives are expressions which tell the Angular $compiler to transform a DOM element or its properties. By the end of this lesson, we'll create a new HTML DOM custom element named "<copyright>" , using an AngularJS Directive.<br />
<br />
First , we create from scratch an AngularJS web page as follows:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-5pvpIyMF_f4/VMSuyw00u2I/AAAAAAAAJK4/D_fk5IdY1dQ/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 2 " border="0" height="198" src="http://4.bp.blogspot.com/-5pvpIyMF_f4/VMSuyw00u2I/AAAAAAAAJK4/D_fk5IdY1dQ/s1600/4.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 2 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(copy-paste):<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b><!doctype html></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><html data-ng-app="MusicApp"></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><head></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><title></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> AngularJS CSS3 & DOM Manipulation</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></title></b></span><b style="color: #38761d; font-size: small;"> </b><br />
<span style="color: #38761d; font-size: x-small;"><b><link href="style.css" rel="stylesheet" type="text/css" /></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><script src="Controller.js" type="text/javascript"></script></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></head></b></span><br />
<div>
<br /></div>
Next, we create an Angular View bound to a Controller, to show a list of Music Albums , as learned at the <a href="http://angularjsclub.blogspot.com/2015/01/first-angularjs-application-for-Beginners-in-10-minutes.html" target="_blank">Lesson #1</a> :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-pjYDGvdML9U/VMSuzY0LLOI/AAAAAAAAJKc/0PjVAx0QaqY/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 3 " border="0" height="424" src="http://4.bp.blogspot.com/-pjYDGvdML9U/VMSuzY0LLOI/AAAAAAAAJKc/0PjVAx0QaqY/s1600/5.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 3 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(copy-paste):<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b><body > </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"><div </span><span style="color: red;">data-ng-controller</span><span style="color: #38761d;">="MusicController"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="centered"> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <img </span><span style="color: red;">data-ng-src</span><span style="color: #38761d;">="{{angularImgSrc}}"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div id="controls"> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="centered" > </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <h1>Fragile State Discography</h1> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <h2>Neil Cowley (Zero 7) and Ben Mynott</h2> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <ul > </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <li </span><span style="color: red;">data-ng-repeat</span><span style="color: #38761d;">="</span><span style="color: #0b5394;">album in albums</span><span style="color: #38761d;">"> </span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div > </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <img src="{{</span><span style="color: #0b5394;">album.img</span><span style="color: #38761d;">}}" alt="{{</span><span style="color: #0b5394;">album.name</span><span style="color: #38761d;">}}" > </span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <span >{{</span><span style="color: #0b5394;">album.name</span><span style="color: #38761d;">}} - {{</span><span style="color: #0b5394;">album.price | currency:"USD$" | uppercase</span><span style="color: #38761d;">}}</span> </span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </li> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </ul><br /> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></body></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></html></b></span><br />
<div>
<br /></div>
Open the Controller javascript file, and copy-paste the following code:<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b>angular.module('MusicApp', [])</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span> <span style="color: #38761d; font-size: x-small;"><b>.controller('MusicController', [ '$scope', '$log', function ($scope, $log) {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> var albums = </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> [</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> {id:111,img:"Nocturnal.jpg",name:"Nocturnal Beats",price:"10.50"},</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> {id:112,img:"Facts.jpg",name:"The Facts And The Dreams",price:"10.20"},</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> {id:113,img:"Voices.jpg",name:"Voices From The Dust Bowl",price:"11.70"},</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> {id:114,img:"Pretz.jpg",name:"Soundcastles",price:"10.80"}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> ]</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.albums = albums;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.angularImgSrc = "IMG_2.jpg";</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}])</b></span><br />
<br />
<br />
<br />
<br />
<br />
Now, because we'll be changing the CSS3 style, here you have the code to copy:<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b>div[id^=controls] </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>padding:5px 5px 5px 25px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>margin:10px 15px 15px 25px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>font:900 12px Comic Sans MS;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>opacity:0.9;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>background:#fed; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>border:10px solid #ddd; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>border-radius: 10px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>box-shadow:10px 10px 2px #c0c0c0;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>button</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>padding:5px 5px 5px 5px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>margin:10px 15px 15px 15px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>width:220px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>text-align: center;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>background:#ddd; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>font:900 14px Comic Sans MS;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>opacity:0.9;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>border:1px solid #c0c0c0; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>border-radius: 10px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>box-shadow:10px 10px 2px #c0c0c0;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>ul</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>list-style:none; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>div.centered</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> text-align:center; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.angular</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>{</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>padding:5px 5px 5px 5px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>margin:25px 15px 15px 25px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>width:350px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>text-align:center;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>background:#fee; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>font:900 14px Comic Sans MS;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>opacity:0.9;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>border:1px solid #c0c0c0; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>border-radius: 10px;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>box-shadow:10px 10px 2px #faf;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}</b></span><br />
<br />
<br />
Run the App to check if everything's OK :<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-nlVSgZhnqo8/VMSuztPea4I/AAAAAAAAJKk/FGz-_W2dU7k/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 4 " border="0" src="http://2.bp.blogspot.com/-nlVSgZhnqo8/VMSuztPea4I/AAAAAAAAJKk/FGz-_W2dU7k/s1600/6.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 4 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Provided it's OK, add a button to perform the style changes:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-w4uJXDHVMdk/VMSu0YZqwQI/AAAAAAAAJKs/BPRS0imVU0Q/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 5 " border="0" height="222" src="http://1.bp.blogspot.com/-w4uJXDHVMdk/VMSu0YZqwQI/AAAAAAAAJKs/BPRS0imVU0Q/s1600/8.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 5 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(copy-paste):<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b><div class="centered"> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <button </span><span style="color: red;">data-ng-click</span><span style="color: #38761d;">="applyStyle()">Change CSS3 Style</button></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<br />
<div class="separator" style="clear: both; text-align: left;">
Append this code to the Controller:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-evfrlW4Ux50/VMSu0_SuJoI/AAAAAAAAJK0/cwDR08vvpP8/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 6 " border="0" height="320" src="http://4.bp.blogspot.com/-evfrlW4Ux50/VMSu0_SuJoI/AAAAAAAAJK0/cwDR08vvpP8/s1600/9.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 6 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Here we just code a toggle mechanism to enable/disable the changes. The $log.info() is to help you to debug this Controller, as you will see the log info inside the Developer's Tools (F 12) Console.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(copy-paste):<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b> var bIsCustomStyle = false; </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.applyStyle = function() {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $log.info("InsideCtl") </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> bIsCustomStyle = !bIsCustomStyle;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> };</b></span><br />
<br />
Refresh the App and open the Developer's Tools (F 12) Console to see the message:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-9qRY4AsLQa0/VMSu0Lg4jUI/AAAAAAAAJLQ/8Tl2vUAPgYU/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 7 " border="0" src="http://3.bp.blogspot.com/-9qRY4AsLQa0/VMSu0Lg4jUI/AAAAAAAAJLQ/8Tl2vUAPgYU/s1600/7.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 7 " width="540" /></a></div>
<br />
<br />
<h3>
<u>1 - Change an <img> element source:</u></h3>
How to change an image <img> source dynamically using AngularJS?<br />
Remember that we used previously an <b><span style="color: #38761d;">data-ng-src</span></b> Directive inside the <img> image element. That <b><span style="color: #38761d;">data-ng-src</span></b> is bound in our example to a Model called "angularImgSrc", therefore we just change its value at the method.<br />
By adding the following code to the method that handles the OnClick event, you change the image at the Angular View:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-XtLCvVEIqvc/VMSuq7Qs5PI/AAAAAAAAJLY/7Y9ckT2iu9k/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 8 " border="0" height="328" src="http://1.bp.blogspot.com/-XtLCvVEIqvc/VMSuq7Qs5PI/AAAAAAAAJLY/7Y9ckT2iu9k/s1600/10.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 8 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(copy-paste):<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b>$scope.angularImgSrc = "IMG_2.jpg";</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>$scope.angularImgSrc = "IMG_1.jpg";</b></span><br />
<br />
Refresh the web page and see how it works:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-rvczphNMslA/VMSurQZ2oWI/AAAAAAAAJI4/TjNoG0Iox50/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 9 " border="0" src="http://3.bp.blogspot.com/-rvczphNMslA/VMSurQZ2oWI/AAAAAAAAJI4/TjNoG0Iox50/s1600/11.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 9 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Click the button to change the picture:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ci4DHkJVbng/VMSuygUevOI/AAAAAAAAJKQ/IMWYPjcvHaE/s1600/12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 10 " border="0" src="http://2.bp.blogspot.com/-ci4DHkJVbng/VMSuygUevOI/AAAAAAAAJKQ/IMWYPjcvHaE/s1600/12.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 10 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 style="clear: both;">
<u>2 - Change the style class of an element:</u></h3>
<div class="separator" style="clear: both;">
This second exercise shows how to change the style Class of an HTML5 element using AngularJS. </div>
<div class="separator" style="clear: both;">
Add the <b><span style="color: #38761d;">data-ng-class</span></b> AngularJS Directive to the div element inside the list :</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-frI6v_MsV3c/VMSur7rCxjI/AAAAAAAAJI0/uSaSCmTZAjI/s1600/13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 11 " border="0" height="240" src="http://1.bp.blogspot.com/-frI6v_MsV3c/VMSur7rCxjI/AAAAAAAAJI0/uSaSCmTZAjI/s1600/13.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 11 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Next, add this code to the method, to toggle the style class:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-BzJFYBrOUro/VMSusD0CrPI/AAAAAAAAJLY/XgqlMxRsyJw/s1600/14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 12 " border="0" height="420" src="http://1.bp.blogspot.com/-BzJFYBrOUro/VMSusD0CrPI/AAAAAAAAJLY/XgqlMxRsyJw/s1600/14.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 12 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(copy-paste):<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b>$scope.angularClass = "";</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>$scope.angularClass = "angular";</b></span><br />
<br />
Refresh the web page and click the button, to see the style changing:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-FKxoIvEtGww/VMSusy1H9UI/AAAAAAAAJJI/ha-SH0nvFZ4/s1600/15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 13 " border="0" src="http://3.bp.blogspot.com/-FKxoIvEtGww/VMSusy1H9UI/AAAAAAAAJJI/ha-SH0nvFZ4/s1600/15.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 13 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="clear: both; text-align: left;">
<u>3 - Change the inline style of an element :</u></h3>
<div class="separator" style="clear: both; text-align: left;">
Now we'll see how to change part of an element's CSS3 style using AngularJS. Add the <b><span style="color: #38761d;">data-ng-style</span></b> AngularJS Directive to the div :</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-AdXTkj793mE/VMSus9QK8gI/AAAAAAAAJLY/bp-IB1u_Um0/s1600/16.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 14 " border="0" height="310" src="http://3.bp.blogspot.com/-AdXTkj793mE/VMSus9QK8gI/AAAAAAAAJLY/bp-IB1u_Um0/s1600/16.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 14 " width="540" /></a></div>
<br />
<br />
Next, add this javascript code to the Controller's method:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-mGyp7lJOJnk/VMSutpLIj3I/AAAAAAAAJJM/r0aO0HuV5oE/s1600/17.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 15 " border="0" height="494" src="http://4.bp.blogspot.com/-mGyp7lJOJnk/VMSutpLIj3I/AAAAAAAAJJM/r0aO0HuV5oE/s1600/17.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 15 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
We just toggle CSS style for an element , dynamically changing its font, color, background , corners and opacity.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(copy-paste):<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b>$scope.angularStyle = "";</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>$scope.angularStyle = { "opacity":"0.3",</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> "borderRadius":"10px",</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> "background":"#00F",</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> "font":"900 Tahoma 14px",</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> "color":"#F00"</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> };</b></span><br />
<br />
Refresh the web page and click the button:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-cRPyNW5L1DY/VMSuuONJEmI/AAAAAAAAJJg/GnKsV9AzyRI/s1600/18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 16 " border="0" src="http://1.bp.blogspot.com/-cRPyNW5L1DY/VMSuuONJEmI/AAAAAAAAJJg/GnKsV9AzyRI/s1600/18.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 16 " /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Compare the style's changes:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-e-ZnwnQhxA0/VMSuuWGtFQI/AAAAAAAAJLY/6N9LwywAN00/s1600/19.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 17 " border="0" src="http://2.bp.blogspot.com/-e-ZnwnQhxA0/VMSuuWGtFQI/AAAAAAAAJLY/6N9LwywAN00/s1600/19.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 17 " /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 style="clear: both; text-align: left;">
<u>4 - Hide/show a <div> element :</u></h3>
<div class="separator" style="clear: both; text-align: left;">
Now we'll see how to display and hide a DOM element using AngularJS. </div>
<div class="separator" style="clear: both; text-align: left;">
Add a new <div> to the page, and use the <b><span style="color: #38761d;">data-ng-show</span></b> AngularJS Directive:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-1-BKIED0byw/VMSuvcYbaaI/AAAAAAAAJJs/TbEIb8xP31c/s1600/20.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 18 " border="0" height="284" src="http://2.bp.blogspot.com/-1-BKIED0byw/VMSuvcYbaaI/AAAAAAAAJJs/TbEIb8xP31c/s1600/20.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 18 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Because "IsVisible" is boolean (true/false) , it receives the "false" value for default. Now, inside the Controller's method, just toggle the boolean value of the Model, as follows:</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-orVig6vuSFk/VMSuviUe2MI/AAAAAAAAJLg/F0Bp5K5_34Y/s1600/21.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 19 " border="0" height="340" src="http://1.bp.blogspot.com/-orVig6vuSFk/VMSuviUe2MI/AAAAAAAAJLg/F0Bp5K5_34Y/s1600/21.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 19 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(copy-paste):<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b>$scope.IsVisible = !$scope.IsVisible;</b></span><br />
<br />
Refresh the web page:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-JiIyA14lkp4/VMSuwCrWhGI/AAAAAAAAJLg/-hvBYIg4ipE/s1600/22.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 20 " border="0" src="http://4.bp.blogspot.com/-JiIyA14lkp4/VMSuwCrWhGI/AAAAAAAAJLg/-hvBYIg4ipE/s1600/22.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 20 " /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Click the button to see the div displayed and hidden:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-7K09GNF4cHQ/VMSuw4C_wxI/AAAAAAAAJLI/GhPKi2XwrrY/s1600/23.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 21 " border="0" src="http://4.bp.blogspot.com/-7K09GNF4cHQ/VMSuw4C_wxI/AAAAAAAAJLI/GhPKi2XwrrY/s1600/23.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 21 " /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="clear: both; text-align: left;">
<u>5 - Create a new HTML DOM custom element :</u></h3>
<div class="separator" style="clear: both; text-align: left;">
Now we'll see how to create a new DOM element by using AngularJS Directives.</div>
<div class="separator" style="clear: both; text-align: left;">
We'll create a custom HTML DOM element called "Copyright", using Directives.</div>
<div class="separator" style="clear: both; text-align: left;">
First, you must know that Directives can apply on HTML Elements ("E") , element's Attributes ("A") , element's Classes ("C") and also on an element's Comments ("M"), as can be learned from the <a href="https://docs.angularjs.org/guide/directive" target="_blank">official AngularJS documentation</a> :</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-x-0wBCKSBNE/VMSuvPzK1-I/AAAAAAAAJLY/4WtSkRODtME/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 22 " border="0" height="230" src="http://1.bp.blogspot.com/-x-0wBCKSBNE/VMSuvPzK1-I/AAAAAAAAJLY/4WtSkRODtME/s1600/2.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 22 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
We'll create an AngularJS Directive, that will receive three parameters : $scope (the Model scope), $element (the specific HTML DOM element) and $attrs (the HTML attributes of the element):</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-MN3cdYLPXwE/VMSuyXhE0GI/AAAAAAAAJK8/Dv5Bb6SXGdI/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 23 " border="0" height="224" src="http://1.bp.blogspot.com/-MN3cdYLPXwE/VMSuyXhE0GI/AAAAAAAAJK8/Dv5Bb6SXGdI/s1600/3.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 23 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
You can read more about AngularJS Directives on the <a href="https://docs.angularjs.org/guide/directive" target="_blank">AngularJS Official web site</a> .<br />
Append the Directive as follows:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-0PDkGtOuG7Y/VMSuwml1p0I/AAAAAAAAJLU/Fa9vrR9F_dI/s1600/24.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 24 " border="0" height="236" src="http://4.bp.blogspot.com/-0PDkGtOuG7Y/VMSuwml1p0I/AAAAAAAAJLU/Fa9vrR9F_dI/s1600/24.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 24 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(copy-paste):<br />
<br />
<span style="font-size: x-small;"><b><span style="color: #38761d;">.</span><span style="color: red;">directive</span><span style="color: #38761d;">('copyright', function(){</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> return {</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">restrict</span><span style="color: #38761d;">:'E',</span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">template</span><span style="color: #38761d;">:'<div class="{{style}}">(c) Copyright 2015 by {{owner}} - The AngularJS Club</div>',</span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">controller</span><span style="color: #38761d;">: function($scope, $element, $attrs){</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.owner = $attrs.ownerAttr;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.style = $attrs.classAttr;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> } </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> }</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>})</b></span><br />
<div>
<br /></div>
<div>
As you can see, we "restrict" this Directive only to elements, and create the "template" to be embedded to the DOM by the Angular engine. This template is bound to an "anonymous" Controller which gets the element's attributes and injects them inside the $scope Model, instantiating the two properties "owner" and "style":</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-WSo7V_C2esA/VMSuxbziaNI/AAAAAAAAJKA/cq3RE9mZiVI/s1600/25.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 25 " border="0" height="240" src="http://4.bp.blogspot.com/-WSo7V_C2esA/VMSuxbziaNI/AAAAAAAAJKA/cq3RE9mZiVI/s1600/25.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 25 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Notice that the attribute named "owner-attr" is cited inside the method as "ownerAttr", using camel notation. You can use the names you want, but respecting that rule.</div>
<div class="separator" style="clear: both; text-align: left;">
Now you can use your custom <copyright> HTML tag at the web page, provided it's inside the tag with the <b><span style="color: #38761d;">data-ng-app</span></b> declaration, that means, inside the AngularJS Module. In our example, this Module is the following: <b style="color: #38761d; font-size: small;"><html </b><b style="font-size: small;"><span style="color: red;">data-ng-app</span></b><b style="color: #38761d; font-size: small;">="MusicApp"> :</b></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-AZ10_UDvB6Y/VMSuxyJLZqI/AAAAAAAAJLE/-BMsnESX9vA/s1600/26.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 26 " border="0" height="244" src="http://4.bp.blogspot.com/-AZ10_UDvB6Y/VMSuxyJLZqI/AAAAAAAAJLE/-BMsnESX9vA/s1600/26.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 26 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(copy-paste):<br />
<br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"><</span><span style="color: red;">copyright</span><span style="color: #38761d;"> </span><span style="color: #0b5394;">class-attr</span><span style="color: #38761d;">="angular" </span><span style="color: #0b5394;">owner-attr</span><span style="color: #38761d;">="Your_Name"></</span><span style="color: red;">copyright</span><span style="color: #38761d;">></span></b></span><br />
<br />
Refresh the web page and see your brand new HTML element:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-IVpS2hz3XaM/VMSuyZBX89I/AAAAAAAAJLM/B8NyyOHSHzE/s1600/27.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 27 " border="0" src="http://1.bp.blogspot.com/-IVpS2hz3XaM/VMSuyZBX89I/AAAAAAAAJLM/B8NyyOHSHzE/s1600/27.png" title="Learn AngularJS CSS3 and HTML5 DOM manipulation with Directives 27 " /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
That's All!!! You have begun learning AngularJS CSS3 and HTML5 DOM manipulation with Directives . In the next article we will continue to learn <a href="http://angularjsclub.blogspot.com/2015/01/make-http-get-requests-to-OData-RESTful-service.html" target="_blank">Step by Step about sending HTTP GET requests to an OData RESTful web service using the $http AngualrJS Service</a> <b>. </b><br />
<b>Enjoy AngularJS.....</b><br />
<b><br />
</b><b> </b>by Carmel Schvartzman<br />
<br />
<br />
<br />
<br />
<b><a href="http://angularjsclub.blogspot.com/2015/01/how-to-create-your-own-custom-angularjs-service.html" target="_blank"><<<< PREVIOUS LESSON</a> <a href="http://angularjsclub.blogspot.com/2015/02/add-css3-style-to-angularjs-Application-with-Twitter-Bootstrap.html" target="_blank">NEXT LESSON >>>></a></b><br />
<br />
<br />
<br />
<b><br />
</b> <br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
<b><span style="font-size: x-small;"><br />
</span></b></div>
<div>
</div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-7714715581339500120.post-54639051400896629552015-09-10T22:30:00.000-07:002015-09-10T22:30:56.461-07:00#11 - How to create your own Custom AngularJS $serviceIn this article we review <b>how to create your own Custom AngularJS $service,</b> by developing an Angular App that includes two Views and two Controllers, and share some Model variables by using a Custom AngularJS $service .<br />
This is the Lesson #11 in the "AngularJS: From 0 To 100" learning articles written for AngularJS Beginners. This lessons start at <a href="http://angularjsclub.blogspot.com/2014/12/first-angularjs-application-for-Beginners-in-10-minutes.html" target="_blank">Lesson #1</a> , if you wish to take a look at them. <br />
<b><a href="http://angularjsclub.blogspot.com/2015/01/what-are-angularjs-services-dependency-injection.html" target="_blank"><<<< PREVIOUS LESSON</a> <a href="http://angularjsclub.blogspot.com/2015/01/learn-angularjs-css3-and-html5-dom-manipulation.html" target="_blank">NEXT LESSON >>>></a></b><br />
<br />
<br />
We're using the "Brackets" open source Editor , which supports AngularJS Apps . You can see the 5 minutes tutorial about Brackets <a href="http://angularjsclub.blogspot.com/2014/12/powerful-open-source-web-editor-optimized-for-AngularJS-Web-Design.html" target="_blank">in this post</a>.<br />
<br />
Our AngularJS App will be shown this way : <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-9x7PAHSb6FY/VLPxFLqv-nI/AAAAAAAAJFQ/wlmCaN2osBw/s1600/15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to create your own Custom AngularJS $service " border="0" src="http://1.bp.blogspot.com/-9x7PAHSb6FY/VLPxFLqv-nI/AAAAAAAAJFQ/wlmCaN2osBw/s1600/15.png" title="How to create your own Custom AngularJS $service " /></a></div>
<br />
<br />
<br />
<h3 style="text-align: center;">
How to create your own Custom AngularJS $service</h3>
<br />
<br />
First of all, let's declare our Angular App by referencing the AngularJS framework and Module:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-5wDvHLRojwo/VLPxC2zjL_I/AAAAAAAAJDY/9KPe_pf9grg/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to create your own Custom AngularJS $service 1 " border="0" height="208" src="http://1.bp.blogspot.com/-5wDvHLRojwo/VLPxC2zjL_I/AAAAAAAAJDY/9KPe_pf9grg/s1600/1.png" title="How to create your own Custom AngularJS $service 1 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Then we add the bind to an "external" Controller, which just toggle the two Views using the <b><span style="color: #0b5394;">data-ng-switch-when</span></b> directive : a View representing the list of Music Albums and a web form setting the selected one, and a View showing the chosen Music Album item after the selection:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-Ke6rdKjH_E8/VLPxGKOXvdI/AAAAAAAAJFE/vFGF-FrWTSE/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to create your own Custom AngularJS $service 2 " border="0" height="330" src="http://4.bp.blogspot.com/-Ke6rdKjH_E8/VLPxGKOXvdI/AAAAAAAAJFE/vFGF-FrWTSE/s1600/2.png" title="How to create your own Custom AngularJS $service 2 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(copy-paste):<br />
<br />
<blockquote class="tr_bq">
<span style="color: #38761d; font-size: x-small;"><b><body data-ng-controller="SwitcherCtl as TabsCtl"> </b></span><span style="font-size: x-small;"><b><span style="color: #38761d;"><div </span><span style="color: red;">data-ng-switch on</span><span style="color: #38761d;">="TabsCtl.View"> </span></b></span><span style="font-size: x-small;"><b><span style="color: #38761d;"><div </span><span style="color: red;">data-ng-switch-when</span><span style="color: #38761d;">="WebFormView"></span></b></span><span style="color: #38761d; font-size: x-small;"><b></div></b></span><span style="font-size: x-small;"><b><span style="color: #38761d;"><div id="controls" </span><span style="color: red;">data-ng-switch-when</span><span style="color: #38761d;">="SelectedItemView"></span></b></span><span style="color: #38761d; font-size: x-small;"><b></div></b></span><span style="color: #38761d; font-size: x-small;"><b></div></b></span><span style="color: #38761d; font-size: x-small;"><b></body></b></span><span style="color: #38761d; font-size: x-small;"><b></html></b></span></blockquote>
<br />
<br />
Then add the corresponding Controller at the javascript Controllers file:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-_gLcQCqbDN0/VLPxGefiolI/AAAAAAAAJFA/ljYr8-rLxJA/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to create your own Custom AngularJS $service 3 " border="0" height="288" src="http://3.bp.blogspot.com/-_gLcQCqbDN0/VLPxGefiolI/AAAAAAAAJFA/ljYr8-rLxJA/s1600/3.png" title="How to create your own Custom AngularJS $service 3 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
This javascript just takes care of toggling the two Views according to the user's clicks.<br />
<br />
(copy-paste):<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b>angular.module('MusicApp', [])</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>.controller('SwitcherCtl', [function() {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> this.View = 'WebFormView';</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> this.open = function(tab) {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> this.View = tab;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> };</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}])</b></span><br />
<br />
<br />
<br />
Then we add at the first View the code to show the Album's list, and to input the selected Album's user's choice, as we saw at the <a href="http://angularjsclub.blogspot.com/2015/01/html5-forms-data-validation-error-messages-AngularJS.html" target="_blank">Lesson #9</a> :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-WcdF8nfjkOE/VLPxG0zDigI/AAAAAAAAJE8/L8ePO4DuYWI/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to create your own Custom AngularJS $service 4 " border="0" height="540" src="http://4.bp.blogspot.com/-WcdF8nfjkOE/VLPxG0zDigI/AAAAAAAAJE8/L8ePO4DuYWI/s1600/4.png" title="How to create your own Custom AngularJS $service 4 " width="590" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(copy-paste): <a href="http://angularjsclub.blogspot.com/2015/01/html5-forms-data-validation-error-messages-AngularJS.html" target="_blank">go to the Lesson #9</a> .<br />
<br />
Take care to add to the former HTML5 from Lesson #9, the following code to be performed when the "Send" submit button is clicked:<br />
<br />
<a href="http://3.bp.blogspot.com/-uueMWBvU3l8/VLPxDyDylEI/AAAAAAAAJDo/u9mKXW6Fvp4/s1600/12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="How to create your own Custom AngularJS $service 5 " border="0" height="158" src="http://3.bp.blogspot.com/-uueMWBvU3l8/VLPxDyDylEI/AAAAAAAAJDo/u9mKXW6Fvp4/s1600/12.png" title="How to create your own Custom AngularJS $service 5 " width="540" /></a><br />
<br />
Also, append a second Controller to the javascript file, to be bound to the "WebFormView" :<br />
<br />
<span style="color: #38761d; font-size: x-small;"><b>.controller('MusicController', [ '$scope', function ($scope) {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> var albums = </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> [</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> {id:111,img:"Nocturnal.jpg",name:"Nocturnal Beats",price:"12.50"},</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> {id:112,img:"Facts.jpg",name:"The Facts And The Dreams",price:"11.20"},</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> {id:113,img:"Voices.jpg",name:"Voices From The Dust Bowl",price:"13.70"},</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> {id:114,img:"Pretz.jpg",name:"Soundcastles",price:"14.80"}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> ]</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.albums = albums;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.submitForm = function() {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> };</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}])</b></span><br />
<br />
<br />
Inside the first View, append a button to go to the second View ("SelectedItemView"):<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-JsZQzTkk-qs/VLPxG_lvejI/AAAAAAAAJEo/amKALtfii1Q/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to create your own Custom AngularJS $service 6 " border="0" height="182" src="http://4.bp.blogspot.com/-JsZQzTkk-qs/VLPxG_lvejI/AAAAAAAAJEo/amKALtfii1Q/s1600/5.png" title="How to create your own Custom AngularJS $service 6 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
We just send the View's name to where we want to go, as an argument for the Controller's method open() : </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-gMUe8DWzpLA/VLPxHSN0ALI/AAAAAAAAJEc/qLhjcqkqSVg/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to create your own Custom AngularJS $service 7 " border="0" height="145" src="http://3.bp.blogspot.com/-gMUe8DWzpLA/VLPxHSN0ALI/AAAAAAAAJEc/qLhjcqkqSVg/s1600/6.png" title="How to create your own Custom AngularJS $service 7 " width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Next, create the second AngularJS View "SelectedItemView" , bound to a "SelectedItemCtl", as follows:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-0JU22UVDrb4/VLPxH6mlrCI/AAAAAAAAJE4/bjz-tLPEZv4/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to create your own Custom AngularJS $service 8 " border="0" height="276" src="http://1.bp.blogspot.com/-0JU22UVDrb4/VLPxH6mlrCI/AAAAAAAAJE4/bjz-tLPEZv4/s1600/7.png" title="How to create your own Custom AngularJS $service 8 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(copy-paste):<br />
<br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"><div id="controls" </span><span style="color: red;">data-ng-switch-when</span><span style="color: #38761d;">="SelectedItemView"></span></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <div class="centered" </span><span style="color: red;">data-ng-controller</span><span style="color: #38761d;">="SelectedItemCtl"></span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <div class="centered"> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <h1>Fragile State Discography</h1> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <h2>Selected Music Album</h2> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <table></b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> <tr><td>Client Email : </td><td><input </span><span style="color: red;">data-ng-model</span><span style="color: #38761d;">="order.Email" /> </td></tr> </span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <tr><td>Item's Quantity: </td><td><input </b></span><span style="color: red;"><b style="font-size: small;">data-</b><b style="font-size: small;">ng-model</b></span><b style="color: #38761d; font-size: small;">="order.Quantity" /> </td></tr></b><br />
<span style="color: #38761d; font-size: x-small;"><b> <tr><td>Item's ID : </td><td><input </b></span><span style="color: red;"><b style="font-size: small;">data-</b><b style="font-size: small;">ng-model</b></span><b style="color: #38761d; font-size: small;">="order.album.id" /> </td></tr></b><br />
<span style="color: #38761d; font-size: x-small;"><b> </table></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> <button data-ng-click="TabsCtl.open('WebFormView')">See Music Album's List</button></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b></div></b></span><br />
<br />
Notice that we have a button to go back to the selection web form.<br />
<br />
Append the third Controller to the javascript file as follows:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-NsKfBAUZgTs/VLPxIPv3YgI/AAAAAAAAJEw/A5dRO1NbHOU/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to create your own Custom AngularJS $service 9 " border="0" height="278" src="http://2.bp.blogspot.com/-NsKfBAUZgTs/VLPxIPv3YgI/AAAAAAAAJEw/A5dRO1NbHOU/s1600/8.png" title="How to create your own Custom AngularJS $service 9 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Now run the AngularJS App to see if everything works, before going on:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-UmCjTnQ9u1E/VLPxIuW2ryI/AAAAAAAAJE0/qghVIczc37I/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to create your own Custom AngularJS $service 10 " border="0" src="http://1.bp.blogspot.com/-UmCjTnQ9u1E/VLPxIuW2ryI/AAAAAAAAJE0/qghVIczc37I/s1600/9.png" title="How to create your own Custom AngularJS $service 10 " /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Enter some input data, and click the "Send" button :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/--QA4uWhPIqs/VLPxDUD84CI/AAAAAAAAJDU/OfAGqkwaJr0/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to create your own Custom AngularJS $service 11 " border="0" src="http://1.bp.blogspot.com/--QA4uWhPIqs/VLPxDUD84CI/AAAAAAAAJDU/OfAGqkwaJr0/s1600/10.png" title="How to create your own Custom AngularJS $service 11 " /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
The user is redirected to the second AngularJS View, but it's empty:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-nZkgoltGu0E/VLPxEWYPRtI/AAAAAAAAJFY/M8Rkrro7HEI/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to create your own Custom AngularJS $service 12 " border="0" height="634" src="http://1.bp.blogspot.com/-nZkgoltGu0E/VLPxEWYPRtI/AAAAAAAAJFY/M8Rkrro7HEI/s1600/11.png" title="How to create your own Custom AngularJS $service 12 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Why is it empty? Because in AngularJS, the Controllers use different $scope s : they don't share state!</div>
<div class="separator" style="clear: both; text-align: left;">
For example, the "order" Model belongs ONLY to the "SelectedItemCtl" Controller, and not to other Controllers:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-lTl8u8mpGkQ/VLPxDzM9NxI/AAAAAAAAJDs/xcLUSlzj__8/s1600/13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to create your own Custom AngularJS $service 13 " border="0" height="222" src="http://4.bp.blogspot.com/-lTl8u8mpGkQ/VLPxDzM9NxI/AAAAAAAAJDs/xcLUSlzj__8/s1600/13.png" title="How to create your own Custom AngularJS $service 13 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
To solve the problem, and share the "order" variable state between the two Controllers, we will define a custom "SharingService" $service, and inject it in the two Controllers using Dependency Injection.<br />
So, append an AngularJS Factory to create the custom $service, containing just two methods : get() and set(). These methods will get and set the shared "Order" variable, as follows:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-6815AlA6gZY/VLPxE-6W7kI/AAAAAAAAJFU/H3bE1MM7lzA/s1600/14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to create your own Custom AngularJS $service 14 " border="0" height="454" src="http://2.bp.blogspot.com/-6815AlA6gZY/VLPxE-6W7kI/AAAAAAAAJFU/H3bE1MM7lzA/s1600/14.png" title="How to create your own Custom AngularJS $service 14 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Notice that we also used Dependency Injection to insert the custom AngularJS Service inside the two Controller's constructors. </div>
<div class="separator" style="clear: both; text-align: left;">
In AngularJS, Factories just create the single object which represents a $service to the rest of the AngularJS application, and can be inserted in the constructors of every other Service.</div>
<div class="separator" style="clear: both; text-align: left;">
You can read more about AngularJS Factories at the <a href="https://docs.angularjs.org/guide/services" target="_blank">official AngularJS web site</a>.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(copy-paste):<br />
<br />
<span style="font-size: x-small;"><b><span style="color: #38761d;">.controller('MusicController', [ '$scope', </span><span style="color: red;">'SharingService'</span><span style="color: #38761d;">, function ($scope,</span><span style="color: red;">SharingService</span><span style="color: #38761d;">) {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> var albums = </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> [</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> {id:111,img:"Nocturnal.jpg",name:"Nocturnal Beats",price:"12.50"},</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> {id:112,img:"Facts.jpg",name:"The Facts And The Dreams",price:"11.20"},</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> {id:113,img:"Voices.jpg",name:"Voices From The Dust Bowl",price:"13.70"},</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> {id:114,img:"Pretz.jpg",name:"Soundcastles",price:"14.80"}</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> ]</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.albums = albums;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.submitForm = function() {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">SharingService.set</span><span style="color: #38761d;">($scope.order); </span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> };</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}])</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;">.controller('SelectedItemCtl', ['$scope', </span><span style="color: red;">'SharingService'</span><span style="color: #38761d;">,'$log', function($scope,</span><span style="color: red;">SharingService</span><span style="color: #38761d;">,$log) {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> $scope.order = </span><span style="color: red;">SharingService.get();</span><span style="color: #38761d;"> </span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $log.info($scope.order);</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}])</b></span><br />
<span style="color: red; font-size: x-small;"><b>.factory('SharingService', [function() {</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> var oSelectedItem;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> return {</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">get</span><span style="color: #38761d;">: function() {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> return oSelectedItem;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> },</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">set</span><span style="color: #38761d;">: function(item) {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> oSelectedItem = item;</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> }</b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> };</b></span><br />
<span style="color: red; font-size: x-small;"><b>}]);</b></span><br />
<br />
Note that we also injected the $log $service in order to output some info to the Console, as we saw at the previous <a href="http://angularjsclub.blogspot.com/2015/01/what-are-angularjs-services-dependency-injection.html" target="_blank">Lesson #10</a>.<br />
Again, enter some data in the web form, and click "Send":<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-9x7PAHSb6FY/VLPxFLqv-nI/AAAAAAAAJFQ/wlmCaN2osBw/s1600/15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to create your own Custom AngularJS $service 15 " border="0" src="http://1.bp.blogspot.com/-9x7PAHSb6FY/VLPxFLqv-nI/AAAAAAAAJFQ/wlmCaN2osBw/s1600/15.png" title="How to create your own Custom AngularJS $service 15 " /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This time, the data has been read at the second Controller:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-E6LA67ccR9E/VLPxFEcDlSI/AAAAAAAAJFM/sOL2DzfaCQ0/s1600/16.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to create your own Custom AngularJS $service 16 " border="0" height="632" src="http://1.bp.blogspot.com/-E6LA67ccR9E/VLPxFEcDlSI/AAAAAAAAJFM/sOL2DzfaCQ0/s1600/16.png" title="How to create your own Custom AngularJS $service 16 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
We added the $log service as follows, to see the "Order" object in the Console:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-Y3PhWRZQFK4/VLPxFtdQeUI/AAAAAAAAJFI/UoyRnjqqSns/s1600/17.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to create your own Custom AngularJS $service 17 " border="0" height="140" src="http://3.bp.blogspot.com/-Y3PhWRZQFK4/VLPxFtdQeUI/AAAAAAAAJFI/UoyRnjqqSns/s1600/17.png" title="How to create your own Custom AngularJS $service 17 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(copy-paste):<br />
<br />
<span style="font-size: x-small;"><b><span style="color: #38761d;">.controller('SelectedItemCtl', ['$scope', 'SharingService','</span><span style="color: red;">$log</span><span style="color: #38761d;">', function($scope,SharingService,</span><span style="color: red;">$log</span><span style="color: #38761d;">) {</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> $scope.order = SharingService.get(); </b></span><br />
<span style="font-size: x-small;"><b><span style="color: #38761d;"> </span><span style="color: red;">$log.info</span><span style="color: #38761d;">($scope.order);</span></b></span><br />
<span style="color: #38761d; font-size: x-small;"><b> </b></span><br />
<span style="color: #38761d; font-size: x-small;"><b>}])</b></span><br />
<br />
<br />
Now if you send again the selected item, you could see the "Order" JSON object :<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-UFxHy4eoqzc/VLPxF6GqIfI/AAAAAAAAJEM/GG8RkaXfMr8/s1600/18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to create your own Custom AngularJS $service 18 " border="0" src="http://1.bp.blogspot.com/-UFxHy4eoqzc/VLPxF6GqIfI/AAAAAAAAJEM/GG8RkaXfMr8/s1600/18.png" title="How to create your own Custom AngularJS $service 18 " /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
As you see, "Order" includes several properties like "Email", "Quantity" , and "Album". This later includes an "ID" property with the identity of the Music album selected. The state has been shared when passing from one AngularJS View and Controller , to the other.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
That's All!!! You have begun using custom AngularJS Services with Dependency Injection in AngularJS , in order to share state between Controllers . In the next article we will continue to learn <a href="http://angularjsclub.blogspot.com/2015/01/make-http-get-requests-to-OData-RESTful-service.html" target="_blank">Step by Step how to make HTTP GET requests to an OData RESTful web service , using the $http AngularJS service</a><b>. </b><br />
If you liked the CSS3 style, here you have the code to copy:<br />
<br />
<blockquote class="tr_bq">
<span style="color: #38761d; font-size: x-small;"><b> div[id^=controls]</b></span><span style="color: #38761d; font-size: x-small;"><b>{</b></span><span style="color: #38761d; font-size: x-small;"><b>padding:5px 5px 5px 25px;</b></span><span style="color: #38761d; font-size: x-small;"><b>margin:10px 15px 15px 25px;</b></span><span style="color: #38761d; font-size: x-small;"><b>font:900 12px Comic Sans MS;</b></span><span style="color: #38761d; font-size: x-small;"><b>opacity:0.9;</b></span><span style="color: #38761d; font-size: x-small;"><b>background:#fed; </b></span><span style="color: #38761d; font-size: x-small;"><b>border:10px solid #ddd; </b></span><span style="color: #38761d; font-size: x-small;"><b>border-radius: 10px;</b></span><span style="color: #38761d; font-size: x-small;"><b>box-shadow:10px 10px 2px #c0c0c0;</b></span><span style="color: #38761d; font-size: x-small;"><b>}</b></span><span style="color: #38761d; font-size: x-small;"><b>button,input[type=submit] </b></span><span style="color: #38761d; font-size: x-small;"><b>{</b></span><span style="color: #38761d; font-size: x-small;"><b>padding:5px 5px 5px 5px;</b></span><span style="color: #38761d; font-size: x-small;"><b>margin:10px 15px 15px 15px;</b></span><span style="color: #38761d; font-size: x-small;"><b>width:220px;</b></span><span style="color: #38761d; font-size: x-small;"><b>text-align: center;</b></span><span style="color: #38761d; font-size: x-small;"><b>background:#ddd; </b></span><span style="color: #38761d; font-size: x-small;"><b>font:900 14px Comic Sans MS;</b></span><span style="color: #38761d; font-size: x-small;"><b>opacity:0.9;</b></span><span style="color: #38761d; font-size: x-small;"><b>border:1px solid #c0c0c0; </b></span><span style="color: #38761d; font-size: x-small;"><b>border-radius: 10px;</b></span><span style="color: #38761d; font-size: x-small;"><b>box-shadow:10px 10px 2px #c0c0c0;</b></span><span style="color: #38761d; font-size: x-small;"><b>}</b></span><span style="color: #38761d; font-size: x-small;"><b>ul</b></span><span style="color: #38761d; font-size: x-small;"><b>{</b></span><span style="color: #38761d; font-size: x-small;"><b>list-style:none; </b></span><span style="color: #38761d; font-size: x-small;"><b>}</b></span><span style="color: #38761d; font-size: x-small;"><b>input </b></span><span style="color: #38761d; font-size: x-small;"><b>{</b></span><span style="color: #38761d; font-size: x-small;"><b>padding:5px 5px 5px 5px;</b></span><span style="color: #38761d; font-size: x-small;"><b>margin:10px 15px 15px 15px;</b></span><span style="color: #38761d; font-size: x-small;"><b>width:150px;</b></span><span style="color: #38761d; font-size: x-small;"><b>text-align: center;</b></span><span style="color: #38761d; font-size: x-small;"><b>background:#fea; </b></span><span style="color: #38761d; font-size: x-small;"><b>font:900 12px Comic Sans MS;</b></span><span style="color: #38761d; font-size: x-small;"><b>opacity:0.9;</b></span><span style="color: #38761d; font-size: x-small;"><b>border:7px solid #ddd; </b></span><span style="color: #38761d; font-size: x-small;"><b>border-radius: 10px;</b></span><span style="color: #38761d; font-size: x-small;"><b>box-shadow:10px 10px 2px #c0c0c0;</b></span><span style="color: #38761d; font-size: x-small;"><b>}</b></span><span style="color: #38761d; font-size: x-small;"><b>select</b></span><span style="color: #38761d; font-size: x-small;"><b>{</b></span><span style="color: #38761d; font-size: x-small;"><b>padding:5px 5px 5px 5px;</b></span><span style="color: #38761d; font-size: x-small;"><b>margin:10px 15px 15px 15px;</b></span><span style="color: #38761d; font-size: x-small;"><b>width:250px;</b></span><span style="color: #38761d; font-size: x-small;"><b>text-align: center;</b></span><span style="color: #38761d; font-size: x-small;"><b>background:#fea; </b></span><span style="color: #38761d; font-size: x-small;"><b>font:900 12px Comic Sans MS;</b></span><span style="color: #38761d; font-size: x-small;"><b>opacity:0.9;</b></span><span style="color: #38761d; font-size: x-small;"><b>border:1px solid #fe9; </b></span><span style="color: #38761d; font-size: x-small;"><b>border-radius: 10px;</b></span><span style="color: #38761d; font-size: x-small;"><b>box-shadow:10px 10px 2px #c0c0c0;</b></span><span style="color: #38761d; font-size: x-small;"><b>}</b></span><span style="color: #38761d; font-size: x-small;"><b>div.centered</b></span><span style="color: #38761d; font-size: x-small;"><b>{</b></span><span style="color: #38761d; font-size: x-small;"><b> text-align:center </b></span><span style="color: #38761d; font-size: x-small;"><b>}</b></span><span style="color: #38761d; font-size: x-small;"><b>.errorMessage</b></span><span style="color: #38761d; font-size: x-small;"><b>{</b></span><span style="color: #38761d; font-size: x-small;"><b> color:red; </b></span><span style="color: #38761d; font-size: x-small;"><b>}</b></span><span style="color: #38761d; font-size: x-small;"><b>}</b></span></blockquote>
<div>
<br /></div>
<br />
<b><a href="http://angularjsclub.blogspot.com/2015/01/what-are-angularjs-services-dependency-injection.html" target="_blank"><<<< PREVIOUS LESSON</a> <a href="http://angularjsclub.blogspot.com/2015/01/learn-angularjs-css3-and-html5-dom-manipulation.html" target="_blank">NEXT LESSON >>>></a></b><br />
<br />
<b>Enjoy AngularJS.....</b><br />
<b><br />
</b><b> </b>by Carmel Schvartzman<br />
<b><br />
</b> <br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
</div>
</div>
<br />
<br />
<br />Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-7714715581339500120.post-6535622590065980102015-08-14T04:48:00.000-07:002015-08-14T04:48:58.000-07:00#10 - What are AngularJS Services and Dependency InjectionIn this article we review <b>What are AngularJS Services and Dependency Injection,</b> by developing an Angular App and using a built-in AngularJS $service .<br />
This is the Lesson #10 in the "AngularJS: From 0 To 100" learning articles written for AngularJS Beginners. This lessons start at <a href="http://angularjsclub.blogspot.com/2014/12/first-angularjs-application-for-Beginners-in-10-minutes.html" target="_blank">Lesson #1</a> , if you wish to take a look at them. <br />
<b><a href="http://angularjsclub.blogspot.com/2015/01/html5-forms-data-validation-error-messages-AngularJS.html" target="_blank"><<<< PREVIOUS LESSON</a> <a href="http://angularjsclub.blogspot.com/2015/01/how-to-create-your-own-custom-angularjs-service.html" target="_blank">NEXT LESSON >>>></a></b><br />
<br />
<br />
We're using the "Brackets" open source Editor , which supports AngularJS Apps . You can see the 5 minutes tutorial about Brackets <a href="http://angularjsclub.blogspot.com/2014/12/powerful-open-source-web-editor-optimized-for-AngularJS-Web-Design.html" target="_blank">in this post</a>.<br />
<br />
Our AngularJS App will be this way : <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-ODVUaCfU78s/VLJiFKqMfzI/AAAAAAAAJC8/BjbmcnNQ4kc/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="What are AngularJS Services and Dependency Injection " border="0" src="http://4.bp.blogspot.com/-ODVUaCfU78s/VLJiFKqMfzI/AAAAAAAAJC8/BjbmcnNQ4kc/s1600/10.png" title="What are AngularJS Services and Dependency Injection " /></a></div>
<br />
<br />
<br />
<h3 style="text-align: center;">
What are AngularJS Services and Dependency Injection</h3>
<br />
<br />
<b>$services</b> are <b>singleton </b>(created only once on all the lifespan of the app) objects <b>lazy instantiated</b> (created just the first time the object is needed, not before that) through an entire AngularJS App lifespan (services share variables state, cache and behavior). Using $services we can share state and behavior all over our app. They can be built-in (like $http, $log, $location, $window, etc) , or custom services written by you.<br />
Because of the importance of mastering the AngularJS logging, we'll practice here using the $log AngularJS service. We'll learn about the $http Service while learning to persist data in the web server.<br />
More details about $services can be learned from the official <a href="https://docs.angularjs.org/api/ng/service" target="_blank">AngularJS web site</a>.<br />
<b>$services</b> implement the <b>Dependency Injection Paradigm</b>,<br />
<br />
For example, the traditional way to use a component inside another object is as follows:<br />
<br />
<span style="font-size: x-small;"><b>function fnUsingAService()</b></span><br />
<span style="font-size: x-small;"><b>{</b></span><br />
<span style="font-size: x-small;"><b> var $someService = new SomeService(new SomeOtherService(new YetAnotherService()));</b></span><br />
<span style="font-size: x-small;"><b> $someService.DoSomething();</b></span><br />
<span style="font-size: x-small;"><b>}</b></span><br />
<br />
Here we're instantiating a component, which must get some other component instantiated inside. And what if the "SomeOtherService()" also needs some inner services instantiated("YetAnotherService()") ? The component's chain could be rather complicated.<br />
However, using dependency injection, we don't instantiate neither the injected service, nor the component's chain of services inside it. Instead, we receive it already instantiated and working:<br />
<br />
<span style="font-size: x-small;"><b>function fnUsingAService(<span style="color: #0b5394;">$someService</span>)</b></span><br />
<span style="font-size: x-small;"><b>{ </b></span><br />
<span style="font-size: x-small;"><b> <span style="color: #0b5394;">$someService</span>.DoSomething();</b></span><br />
<span style="font-size: x-small;"><b>}</b></span><br />
<br />
The AngularJS engine takes care of creating the service for us.<br />
Let's see how it works: let's create our own AngularJS and use the $log built in AngularJS Service. First add to the HTML5 the data-ng-app Angular directive, and load the AngularJS Framework via CDN (Content Delivery Network):<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-RiwA4Vl2bP4/VLJiE07nVlI/AAAAAAAAJDE/6FJwf1Cw-qA/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="What are AngularJS Services and Dependency Injection 1 " border="0" height="218" src="http://1.bp.blogspot.com/-RiwA4Vl2bP4/VLJiE07nVlI/AAAAAAAAJDE/6FJwf1Cw-qA/s1600/1.png" title="What are AngularJS Services and Dependency Injection 1 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
(copy-paste):</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b><!doctype html></b></span></div>
<div class="separator" style="clear: both;">
<b style="font-size: small;"><span style="color: #0b5394;"><html lang="en" </span><span style="color: red;">data-ng-app</span><span style="color: #0b5394;">="usingServices"></span></b></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394;"><b style="font-size: small;"><head></b><b style="font-size: small;"> </b></span></div>
<div class="separator" style="clear: both;">
<b style="font-size: small;"><span style="color: #0b5394;"><meta charset="UTF-8"></span></b></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b> <title>Using Services</title></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b> <script src="Controller.js"></script></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b> <link href="style.css" rel="stylesheet"/></b></span></div>
<div class="separator" style="clear: both;">
<b style="font-size: small;"><span style="color: #0b5394;"> </span></b></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b></head></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Then add a div bound to a Controller, containing an input text and a button as follows:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-gz24-YaKybY/VLJiE6Io5uI/AAAAAAAAJC4/HVUXTgE5Mmk/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="What are AngularJS Services and Dependency Injection 2 " border="0" height="264" src="http://4.bp.blogspot.com/-gz24-YaKybY/VLJiE6Io5uI/AAAAAAAAJC4/HVUXTgE5Mmk/s1600/2.png" title="What are AngularJS Services and Dependency Injection 2 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
At the Controller javascript file, create a Controller and use dependency injection inserting two services in it : $scope and $log , as follows:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-xT_0aOcAQYY/VLJiFh1mLMI/AAAAAAAAJCM/9at3QaCfIMg/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="What are AngularJS Services and Dependency Injection 3 " border="0" height="302" src="http://2.bp.blogspot.com/-xT_0aOcAQYY/VLJiFh1mLMI/AAAAAAAAJCM/9at3QaCfIMg/s1600/3.png" title="What are AngularJS Services and Dependency Injection 3 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
As you see, we are using those two services for the Controller's method: $scope will store the method itself, while $log will be used to output the received message, by calling the $log.info() method.<br />
Browse to the AngularJS app , enter a message and click the button:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-ED3uivoL1gg/VLJiGKA-lCI/AAAAAAAAJCY/7ZAQwSKOOK8/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="What are AngularJS Services and Dependency Injection 4 " border="0" height="406" src="http://3.bp.blogspot.com/-ED3uivoL1gg/VLJiGKA-lCI/AAAAAAAAJCY/7ZAQwSKOOK8/s1600/4.png" title="What are AngularJS Services and Dependency Injection 4 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Then, open the Developer's Tools (F12) to see the "info" message in the Console:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-i6BLV4wstn0/VLJiGTbUzqI/AAAAAAAAJDA/DsnN6v_kHiI/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="What are AngularJS Services and Dependency Injection 5 " border="0" height="620" src="http://3.bp.blogspot.com/-i6BLV4wstn0/VLJiGTbUzqI/AAAAAAAAJDA/DsnN6v_kHiI/s1600/5.png" title="What are AngularJS Services and Dependency Injection 5 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Next, append to the AngularJS View another three buttons for sending "warning", "log" and "error" messages through the $log service:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-wCznm7lUsg0/VLJiGvSm5tI/AAAAAAAAJCo/kNeqe1PAXRY/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="What are AngularJS Services and Dependency Injection 6 " border="0" height="262" src="http://1.bp.blogspot.com/-wCznm7lUsg0/VLJiGvSm5tI/AAAAAAAAJCo/kNeqe1PAXRY/s1600/6.png" title="What are AngularJS Services and Dependency Injection 6 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
(copy-paste):<br />
<br />
<span style="font-size: x-small;"><b><body></b></span><br />
<span style="font-size: x-small;"><b> <div <span style="color: red;">data-ng-controller</span>="LogCtl"></b></span><br />
<span style="font-size: x-small;"><b> <h2>Type the message to be displayed on the Console:</h2></b></span><br />
<span style="font-size: x-small;"><b><br />
</b></span> <span style="font-size: x-small;"><b> Message:</b></span><br />
<span style="font-size: x-small;"><b> <input <span style="color: red;">data-ng-model</span>="msg"/></b></span><br />
<span style="font-size: x-small;"><b><br />
</b></span> <span style="font-size: x-small;"><b> <button <span style="color: red;">data-ng-click</span>='fnShowInfoMessage(msg)'>Info</button></b></span><br />
<span style="font-size: x-small;"><b><br />
</b></span> <span style="font-size: x-small;"><b> <button <span style="color: red;">data-ng-click</span>='fnShowWarningMessage(msg)'>Warning</button></b></span><br />
<span style="font-size: x-small;"><b><br />
</b></span> <span style="font-size: x-small;"><b> <button <span style="color: red;">data-ng-click</span>='fnShowLogMessage(msg)'>Log</button></b></span><br />
<span style="font-size: x-small;"><b><br />
</b></span> <span style="font-size: x-small;"><b> <button <span style="color: red;">data-ng-click</span>='fnShowErrorMessage(msg)'>Error</button></b></span><br />
<span style="font-size: x-small;"><b><br />
</b></span> <span style="font-size: x-small;"><b></div></b></span><br />
<span style="font-size: x-small;"><b></body></b></span><br />
<span style="font-size: x-small;"><b></html></b></span><br />
<span style="font-size: x-small;"><b><br />
</b></span> <br />
<br />
At the Controller, add the corresponding methods and call the $log warn() , log() and error() functions:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/--wWHbbzQ9ls/VLJiG0s1tqI/AAAAAAAAJCc/VzZpfXyeL_k/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="What are AngularJS Services and Dependency Injection 7 " border="0" height="440" src="http://4.bp.blogspot.com/--wWHbbzQ9ls/VLJiG0s1tqI/AAAAAAAAJCc/VzZpfXyeL_k/s1600/7.png" title="What are AngularJS Services and Dependency Injection 7 " width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
(copy-paste):</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b>angular.module('usingServices', []) </b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #0b5394;">.controller('LogCtl', ['$scope', '$log', function(</span><span style="color: red;">$scope, $log</span><span style="color: #0b5394;">) { </span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #0b5394;"> </span><span style="color: red;"> $scope</span><span style="color: #0b5394;">.fnShowInfoMessage = function(msg){ </span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #0b5394;"> </span><span style="color: red;">$log.info</span><span style="color: #0b5394;">(msg); </span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b> }; </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b> $scope.fnShowWarningMessage = function(msg){ </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #0b5394;"> </span><span style="color: red;"> $log.warn</span><span style="color: #0b5394;">(msg); </span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b> }; </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b> $scope.fnShowLogMessage = function(msg){</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #0b5394;"> </span><span style="color: red;">$log.log</span><span style="color: #0b5394;">(msg); </span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b> }; </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b> $scope.fnShowErrorMessage = function(msg){ </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: x-small;"><b><span style="color: #0b5394;"> </span><span style="color: red;">$log.error</span><span style="color: #0b5394;">(msg); </span></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b> }; </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #0b5394; font-size: x-small;"><b> }]);</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Refresh the web page and click the "Warning" button:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-tzdSDapnDwI/VLJiHXZPHPI/AAAAAAAAJCs/1q3N4WA4XY4/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="What are AngularJS Services and Dependency Injection 8 " border="0" height="540" src="http://1.bp.blogspot.com/-tzdSDapnDwI/VLJiHXZPHPI/AAAAAAAAJCs/1q3N4WA4XY4/s1600/8.png" title="What are AngularJS Services and Dependency Injection 8 " width="508" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The Console reflects the warning message. Now do the same for the "Log" button:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-pc6xLYtJ4ZE/VLJiHlVeVNI/AAAAAAAAJCw/EE1qRgHiO1w/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="What are AngularJS Services and Dependency Injection 9 " border="0" height="540" src="http://3.bp.blogspot.com/-pc6xLYtJ4ZE/VLJiHlVeVNI/AAAAAAAAJCw/EE1qRgHiO1w/s1600/9.png" title="What are AngularJS Services and Dependency Injection 9 " width="502" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
And finally send an error message:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-ODVUaCfU78s/VLJiFKqMfzI/AAAAAAAAJC8/BjbmcnNQ4kc/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="What are AngularJS Services and Dependency Injection 10 " border="0" height="540" src="http://4.bp.blogspot.com/-ODVUaCfU78s/VLJiFKqMfzI/AAAAAAAAJC8/BjbmcnNQ4kc/s1600/10.png" title="What are AngularJS Services and Dependency Injection 10 " width="434" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
That's All!!! You have begun learning AngularJS Services and Dependency Injection in AngularJS , and using the $log service to send warnings, log, info and error messages to and from the app . In the next article we will continue to learn <a href="http://angularjsclub.blogspot.com/2015/01/how-to-create-your-own-custom-angularjs-service.html" target="_blank">Step by Step about how to share data between different AngularJS Controllers by using Custom AngularJS $services</a><b>. </b><br />
If you liked the CSS3 style, here you have the code to copy:<br />
<br />
<span style="font-size: x-small;"><b> div,input</b></span><br />
<span style="font-size: x-small;"><b>{</b></span><br />
<span style="font-size: x-small;"><b>padding:5px 5px 5px 25px;</b></span><br />
<span style="font-size: x-small;"><b>margin:10px 15px 15px 25px;</b></span><br />
<span style="font-size: x-small;"><b>font:900 12px Comic Sans MS;</b></span><br />
<span style="font-size: x-small;"><b>opacity:0.9;</b></span><br />
<span style="font-size: x-small;"><b>background:#fed; </b></span><br />
<span style="font-size: x-small;"><b>border:10px solid #ddd; </b></span><br />
<span style="font-size: x-small;"><b>border-radius: 10px;</b></span><br />
<span style="font-size: x-small;"><b>box-shadow:10px 10px 2px #c0c0c0;</b></span><br />
<span style="font-size: x-small;"><b>text-align:center;</b></span><br />
<span style="font-size: x-small;"><b>}</b></span><br />
<span style="font-size: x-small;"><b>input</b></span><br />
<span style="font-size: x-small;"><b>{</b></span><br />
<span style="font-size: x-small;"><b>padding:5px 5px 5px 25px;</b></span><br />
<span style="font-size: x-small;"><b>margin:10px 15px 15px 25px;</b></span><br />
<span style="font-size: x-small;"><b>font:900 12px Comic Sans MS;</b></span><br />
<span style="font-size: x-small;"><b>opacity:0.9;</b></span><br />
<span style="font-size: x-small;"><b>background:#FFF; </b></span><br />
<span style="font-size: x-small;"><b>border:10px solid #ddd; </b></span><br />
<span style="font-size: x-small;"><b>border-radius: 10px;</b></span><br />
<span style="font-size: x-small;"><b>box-shadow:10px 10px 2px #c0c0c0;</b></span><br />
<span style="font-size: x-small;"><b>text-align:center;</b></span><br />
<span style="font-size: x-small;"><b>}</b></span><br />
<span style="font-size: x-small;"><b>button </b></span><br />
<span style="font-size: x-small;"><b>{</b></span><br />
<span style="font-size: x-small;"><b>padding:5px 5px 5px 5px;</b></span><br />
<span style="font-size: x-small;"><b>margin:10px 15px 15px 15px;</b></span><br />
<span style="font-size: x-small;"><b>width:220px;</b></span><br />
<span style="font-size: x-small;"><b>text-align: center;</b></span><br />
<span style="font-size: x-small;"><b>background:#ddd; </b></span><br />
<span style="font-size: x-small;"><b>font:900 14px Comic Sans MS;</b></span><br />
<span style="font-size: x-small;"><b>opacity:0.9;</b></span><br />
<span style="font-size: x-small;"><b>border:1px solid #c0c0c0; </b></span><br />
<span style="font-size: x-small;"><b>border-radius: 10px;</b></span><br />
<span style="font-size: x-small;"><b>box-shadow:10px 10px 2px #c0c0c0;</b></span><br />
<span style="font-size: x-small;"><b>}</b></span><br />
<span style="font-size: x-small;"><b>ul</b></span><br />
<span style="font-size: x-small;"><b>{</b></span><br />
<span style="font-size: x-small;"><b>list-style:none; </b></span><br />
<span style="font-size: x-small;"><b>}</b></span><br />
<br />
<b><a href="http://angularjsclub.blogspot.com/2015/01/html5-forms-data-validation-error-messages-AngularJS.html" target="_blank"><<<< PREVIOUS LESSON</a> <a href="http://angularjsclub.blogspot.com/2015/01/how-to-create-your-own-custom-angularjs-service.html" target="_blank">NEXT LESSON >>>></a></b><br />
<b><br /></b>
<b>Enjoy AngularJS.....</b><br />
<b><br />
</b><b> </b>by Carmel Schvartzman<br />
<b><br />
</b> <br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
<b><span style="font-size: x-small;"><br />
</span></b></div>
<div>
</div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com2