Learn AngularJS With These 5 Practical Examples

Martin Angelov By now you’ve probably heard of AngularJS – the exciting open source framework, developed by Google, that changes the way you think about web apps. There has been much written about it, but I have yet to find something that is written for developers who prefer quick and practical examples. This changes today. Below you will find the basic building blocks of Angular apps – Models, Views, Controllers, Services and Filters – explained in 5 practical examples that you can edit directly in your browser. If you prefer to open them up in your favorite code editor, grab the zip above. What is AngularJS? On a high level, AngularJS is a framework that binds your HTML (views) to JavaScript objects (models). To use AngularJS, you have to include it in your page before the closing <body> tag. AngularJS gives you a large number of directives that let you associate HTML elements to models. Enough with the theory! <! Run 2. <! 3. 4. Use the angular.module("name",[]) function call in your JS.

Smooth Scrolling To Internal Links With jQuery jQuery allows you change the way you interact with your website with very little code. jQuery has an animate function which allows you to animate anything that jQuery does, including scrolling. Animate scrolling creates a better effect to the visitor than to just job to a place on the page. There are many websites that will use internal links to jump to different parts of the page this is done by using a # and then the element id in the anchor tag. <a href="#services">Jump to services</a><div id="services"></div> Doing the above creates a link that will move the page to the services div when you click it. In jQuery if you set an animation on the scroll event then it creates a scrolling effect in the browser. Add the above in your $(document).ready function in your jQuery file and all links which start with a # will have an animated scroll to the target. Look at the demo to see the effect this creates. Demo