Scribd Logo
Importer

Bienvenue sur Scribd !

  • Learning ( (AngularJS) ) W PDF

    Transféré par

    Fernando Grille
    62 vues6 pages
    Learning {{AngularJS}} w..pdf

    Titre original

    Learning {{AngularJS}} w..pdf

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    Learning {{AngularJS}} w..pdf

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    62 vues6 pages

    Learning ( (AngularJS) ) W PDF

    Transféré par

    Fernando Grille
    Learning {{AngularJS}} w..pdf

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 6
    aro Learning ({AnquarJS)} with Examples-Part2| Code Wala Learning {{AngularJS}} with Examples—Part 2 Posted on June 3, 2014 by Brij In the last post , we learnt about the basics of AngularJS and created a simple hello world application. You can refer the link of my earlier post. Learning {{AngularJS}} with Examples-Part 1 We have discussed the basic components of AngularJS that we used in our last post. As we discussed that AngularJS is a complete framework for writing client side code that allows us to. use latest design principles, there are many important components. Let's see some of the important ones i iin” iE There could be few other components and concepts of AngularJS that is not part of the above catatexthiml:charset=ut-8,960Cheader'i2iclas GD Z2erry header kZZZOstleMaD 6 2zborder%e3A%-200pxIBAOIOrfamlysesAKAOHelveCarIC.... 1 282015 Learing((gdari) with Examples-Part2| Code Wola image but it includes all that we need to lear to built up the foundation on AngularJS. I'll be discussing all the mentioned components in the series of posts with tons of example Let me tell you the color coding briefly. The dark blue color shows that we have discussed it that in our last posts. Other two highlighted items will be discussed in today's post. And items with light blue color will be covered in coming post. In today’s post, we'll take a step further and discuss some more concepts of AngularJS. In our example , we'll provide a structure to our application which is the beauty of AngularJS. In last post, we created a Hello World application, which used a controller and ng-app directive was used to bootstrap the application One of the most common tasks in the web applications is, to show the data the tabular format and angular does kept it in mind. If you've worked earlier on some client side templating features then you will find it similar to that. Else also it is very simple and easy to understand. Angular provides a way to repeat the some part of HTML based on the provided list of data. So we can have code like | talks reste 9 new | new tr and evaluate | the {{expression}} based on the talk. , {talk id}}
    SpeakerVenueDuration
    {{talk.name}} {{talk. speaker}} {{talk. venue}} {{talk.duration}}
    So if we see here the red encircled area then we see ng-repeat directive. It actually repeat the element on which it is used based on the provide list of data . Here talks is an JSON object which contains list of talk. It says for every talk in talks, repeat the tr and evaluate the used expression based on the properties of talk. So if we have four items in the list then four rows will be created. catatexthiml:charset=ut-8,969Cheader'iZoclass GD Z2erry header kZ2ZOstleMaD 2zbarder%e3A%200px 363 2OIOrtfamilysesAKZOHelvelcar2C.... 26 2062015 Learrng ((AnguarJS) with Examples-Part2 | Code Wala Now the next question is, how to provide the value tota/ks. As talks is being accessed here, it should be a global variable or a variable in the scope where it can be accessed. To fetch the data, There could be two ways 1- Initialize the value on the page 2- Or get the data from server/web services etc Let's take first scenario, initialize the value the on the page. AngularJS provides us a simple way to initialize using a directive that is called ng-init. ng-init — This directive provides us a way to initialize a variable on the page. We can initialize the talks as SRS) | (iat tear Teal Tine ed Applications with SignalR’, spe te ae Power of Node.fe", speaker: ‘Ohananjay Kunar (ia + “1003° ‘Getting started with angular3S", speaker © (ia: 3000 | ‘Mieroust® Azure = Your cloud destinet ion’, 3 + venue Mall 2", duration + "450" Jy "asa! ) Hall 2, duration + “6m ), ‘wath 2) duration 2 "450" } sasTatk fable class-"table table-condensed table-hover"> So here, put a div over the table and in div element, we initialized the variable talks using ng- init directive as above. So using this directive, we can provide some initial value to a variable. | added the angular library on the page. Also | have usedbootstrap.css for rendering the not so. bad @looking Ul. Now let’s run the application. catatexthiml:charset=ut-8,969Cheader'iZoclass 3D Z2erry-neader‘kZZZOstleMGD 2zbarder%e3A%200px 363 AOIOrfamllysesAKZOHelvelcaNIC.... I 2062015 Learring (ArquardS) with Examples-Part2| Code Wala (2) |G nto tocatnose 24534/events/index D~ © Pinder. My ASPET Apaic.. x Talk Details Ié Name Speaker Venue Duration 1001 Real Time Web Applicatons with SignalR Brij Bhushan Mishra = Hall 45m 1002 Power of Nodes Dhananiey Kumar Hal2 45m 1003 Getting started with AngularJS Bri Bhushan Mishra = Hall 60m 1004 Microsoft Azure - Your cloud destination Gaurav Hal) 45m So we have created an angular app. Now before providing it a structure, let's discuss one very important component of Angular that we'll use in todays post that is called Module.So, What is Module? Modules — Modules are like containers . It is a top level element and contains all the part of AngularJS that are used on the page. So let's see how does it fit into an application Angular JS App Above image is for the basic understanding, It shows an AngularJS application can have multiple modules and every module contains controllers, views etc. catatexthiml:charset=ut-8,9h9Cheader'iZoclass 3D Z2erry ender kZ2ZOstleM2D zor der%e3A%-200px IB 2OIOtfamilyieSAKOHelveCaNAC.... AG 2016/2015 Learning {(AnguiarJS}} with Examples-Part 2 | Code Wala There are many other components which we'll introduce in coming posts. As we discussed in last post that the main beauty of the an AngularJS application is it's architecture so let’s restructure the code that we have written and we'll use another component module in this example. As now we have controller and module in our application. These should be put in different JavaScript file, So If you are working some enterprise level application which has lots of pages then one need to decide how is (s)he going manage or structure that. There are different views on that I'll not discuss in detail on that. But In my code, I normally prefer having folders functionality wise, which makes very easy to find any file, add/remove any functionality at any point of time etc. In this example, | have created a folder named as events . Now I have put all the angular JavaScript files associated to this feature in the same folder. As we discussed that the top level item is module. So lets create an module named as eventModule. So | have created a file eventModule.js and here | registered this module with angular | var eventModule = angular.module("eventMo TT > Now let's create a controller named eventController as eventContnolier”, function (S502pe) ( ar sscope. talks (49: 1001", rane: “Real Tine Web applications with SigealR’, speakers “GrS) ahushan fenea’, venue: “Wall 1°, duration: 45H"), { 48: ‘1002"7 nana: ‘Dover of Node.Je", speaker: "Drananjay Konar', venue: "fall 2", duration! "450"}, [Ads ‘1o07") pane: “Getting started wioh angulants", speakers "Grd Phushon Miser“, venues “Well 1", dunatSons “Gow, (4d: 1008") pane: "Mierovofe Azure ~ Your cloud destination’, speaker: "Gaurav", venga: "Wall 2", duration: "4Sn’) So here controller also got registered with Module. In this method we initialized the talks in $scope variable which is a default parameter to the controller. Now let's move our HTML page and provide the controller name to the element. as..
    We need to include all the controller and module JavaScript files to our page that we created. Now, we don't have any JavaScript code on our page Now when we run the page, we get the similar output, that we got initially Refer third figure from Top. So in this post, we discussed about some new directiveng-init, ng-repeat. Then we discussed and new component module and converted the application in properly structured manner. In next post, we will about ASP.NET MVC and AngularJS and create some examples using both. To navigate to previous and next post of the series, use the links at the bottom of the page Cheers, Brij catatexthiml:charset=ut-8,969Cheader'iZoclass 3D Z2erry header kZZZOsIleMID 6 2zbarcer%e3A%-200px IB AOIOrMamilyiesAKOHelveCaNIC.... GE

    Vous aimerez peut-être aussi