AngularJS Basics

0

Posted by tadhg88

Category :

Time: 3:54 PM

1) Angular Directive = ng-app

2) Access Angular Model through controllers

3) $scope is Angular Model

4) ng-controller directive sets js function name to use as controller for a portion of page, different portions of the page could have diff controllers.

5) Setting ng-app="nameApp" prevents polluting of the global namespace:
 
 <html ng-app="nameApp">
   <head>
     <meta charset="utf-8">
     <title>Angular.js Example</title>
     <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
     <script>
       var nameApp = angular.module('nameApp', []);
       nameApp.controller('NameCtrl', function ($scope){
         $scope.firstName = 'John';
         $scope.lastName = 'Smith';
       });
     </script>
   </head>
   <body ng-controller="NameCtrl">
     First name:<input ng-model="firstName" type="text"/>
     <br>
     Last name:<input ng-model="lastName" type="text"/>
     <br>
     Hello {{firstName}} {{lastName}}
   </body>
     </html>
6) Could have multiple Angular apps running on the same page.







my thanks to:
https://github.com/curran/screencasts/tree/gh-pages/introToAngular

AngularJS Intro

3

Posted by tadhg88

Category :

Time: 12:26 PM

Data Binding Framework

Main usage creating single-page apps.
Based on MVC architecture

Provide solutions for:

  • Routing - handling updates to the url hash fragment
  • Templating - dynamically creating and updating HTML based on templates and models
  • Data binding - synchronise the model and user interface

    • Top data-binding frameworks:

    AngularJS
    KnockoutJS
    Ember
    JsViews

    Related libraries

    • jQuery - industry standard library for DOM manipulation and AJAX
    • AMD - for seperating JavaScrip projects across many files using modules, allowing depencies from one files on another. Require
    • Angular provides a jQuery like API jqLite - which is like jQuery minimal functionality
    • Promises - industry standard pattern for dealing with asynchronous control flow. The top Promises implementation is Q.
    • Async.js
    • Handlebars - templating engine. Angular Templates use similar syntax.

    Angular Learning Resources

    It is straightforward to teach yourself about Angular, as there are so many learning resources on the Web.

    Bird's-eye-view:

    Learn Angularjs This Weekend - Advice on which resources to use for getting up to speed on Angular.
    A Better Way to Learn AngularJS - A great collection of links to resources for learning Angular.
    AngularJS-Learning - A kitchen sink of links to Angular learning resources.

    Introductory tutorials and guides:

    Angular Developer Guide Conceptual Overview
    • Enumerates fundamental concepts
    • Provides several code examples
    Official Angular Tutorial
    • Useful to read through
    • Emphasizes testing
    • Starts with complex boilerplate project
    • Great diagrams
    Egghead.io
    • A collection of short screencasts (scroll to the bottom for intoduction content)
    AngularJS Fundamentals In 60-ish Minutes
    • A talk on YouTube that covers fundamentals of Angular
    Learn Angular.js in 30 Min
    • A screencast showing how to build an app using UI-Router
    • Does not cover basics, jumps to advanced usage
    • Great example of how development flows in practice
    An Introduction to AngularJS Forms Validation

    Design and implementation of Angular:

    Re-Imagining the Browser with AngularJS
    • Talk by Miško Hevery, creator of Angular
    • Discusses the high-level goals of Angular
    Bringing Angular Apps to Life with Animation by Miško Hevery
    Google I/O 2013 - Design Decisions in AngularJS
    "Writing Directives" talk by Misko Hevery




    my thanks to: https://www.youtube.com/watch?v=TRrL5j3MIvo
    https://github.com/curran/screencasts/tree/gh-pages/introToAngular
    Subscribe to: Posts (Atom)