Angular Learning

What is SPA - Singel Page Applications

  • There is no complete page re-load that is only required areas are updated instead of reloading the page each and every page at postbacks
  • Speed up the page load and navigation for the users
  • Similar to Desktop applications user experience
  • It gives feeling like there is only one page. Ex : Gmail is developed using SPA
  • I mean we need responsive web apps
  • How to achieve SPA is that we need to use Javascript Frameworks such as AngularJS, KnockoutJS EmberJS, React etc
Why we need Angular

  • I want Bi-directional dataBinding 
  • I want to keep HTML separate and Javascript code separate so that we can make use of code-reuse
How do I tell the browser that the page is AngularJS is that we need to add directive called "ng-app" to either html tag, Div tag or Body tag

What is Directives - It is a special kind of attributes [which has meaning described inside the angular js file referred] for an HTML element

Ex: ng-app , ng-init , ng-hide , ng-show, 
ng-true-value and ng-false-value for checkboxes
ng-options for dropdown or list boxes
ng-repeat mostly for loop like
ng-bind - It binds expression value to the HTML element
ng-model - what ever data we type in input element like textbox, will be stored inside that ng-model assigned variable. It means two way data binding [ what ever we type in model will reflect in view]

Module [nothing but it is a logical unit] - It is like a namespace which contains set of classes
Controllers - it is Javascript function used to prepare data [Models] that can be rendered in HTML page [Views]

$Scope - it is an object where we can store Model  and binds data between HTML pages View and controller

Comments

Post a Comment

Popular posts from this blog

Understanding Collection and Object Initializer

Image
  collection - we use it when we want to group objects of different types into one bucket. Remember that each item in a collection is an object. Example ArrayList adds all items in the form of objects so we were taking out values from the ArrayList instance then we must type from object type to its corresponding type   Here item is of object type, and we are type casting it to its corresponding type. collection Initializer - The group of object initializers are nothing but collection Initializer       Object Initialzier - It is used to initialize the data members or properties of a class.To avoid creating multiple constructor of a class, we go for Object Initialzier. Object   initializers creates parameterless constructor internally. The curly braces opening and closing is called Object   initializers block.  
Read more

How to execute Javascript in VS code

Image
S1 : install node software s2 : install VS code software s3 : Open VS code editor. Open the extensions windows. Install two software   JavaScript (ES6) snippets Code Runner - By Jun Han s4 : Open new terminal window and type "npm install prompt-sync" --->This is used to prompt user input s5 : Type the JavaScript code as shown in the below screenshot. s6 : There is Run button on the right side of the window. Click on it to run the program. s7:  Console will ask for input from the user, if it is not allowing to edit then do the following open settings and type code runner and then put a check mark on that option. s8: Re-run the program                
Read more