angular-notes

book-body

Notes on Angular Framework

Contents

local

References

Angular 1 aka AngularJS

  • The version 1.* of Angular is also known as AngularJs.

  • Very good video by Dan Wahlin:
    https://weblogs.asp.net/dwahlin/video-tutorial-angularjs-fundamentals-in-60-ish-minutes

  • The code is here: https://github.com/gurjeet/AngularJSDemos

  • Uses SPA - Single Page Application - Yet modular too.

  • You can simply bind the data input with your model view template. What ever you type appears below in the same div as below. How is this implemented ? By angular.js script that is included at the bottom :

    <div class="container">
      <h3>Data Binding Fundamentals</h3>
      <h4>Using a Data Binding Template</h4>
      Name: <input type="text" data-ng-model="name" />  {{ name }}
    </div>
    <script src="angular.js" />
    
  • There is angular.js javascript you include at the bottom, and use some specific tags in your normal html code. Similar to Jquery, it processes your DOM and you get your SPA. :

    <h3>Filtering and Sorting Data using "filter"</h3>
    
    <!-- As you type input the filtered values appear below ... -->
    
    <div class="container" data-ng-controller="SimpleController">
      <input type="text" data-ng-model="nameText" />
      <ul>
        <li data-ng-repeat="customer in customers | filter:nameText | orderBy:'name'">
             {{ customer.name | uppercase }} - {{ customer.city }}</li>
      </ul>
    </div>
    
    <script>
        function SimpleController($scope) {
            $scope.customers = [                                // Init model data.
                { name: 'Dave Jones', city: 'Phoenix' },
                { name: 'Jamie Riley', city: 'Phoenix' }
            ];
            $scope.addCustomer = function () {                  // Define model API functions.
                $scope.customers.push({ name: $scope.inputData.name, city: $scope.inputData.city });
            }
        }
        ...
    </script>
    
  • Concepts supported :

    • Module (Your app is a module)
    • Config (You can configure your App with specific routing)
    • Routes (Connects http endpoints to your Controler js code and view .html templates)
    • Controller (Javascript function. Can initialize variables which are essentially the data models)
    • View (Html templates with embedded model elements e.g. {{name}} )
    • View, $Scope, Controller ($Scope is what you call as 'Model' in MVC framework)
    • Directives, Filters and Data Binding (
    • Factory
  • It is great, but the limitations are:

    • Monolithic angular.js file. Not easy to extend capabilities with 3rd party libs.
    • Hard to do development in Javascript. Typescript or as such would be better.
  • Then Angular 2 was born.

Angular CLI

Synopsis

npm install -g @angular/cli            # Install globally.
ng new my-project
cd my-project
ng serve                                # Navigate to http://localhost:4200. 
ng test   
ng build --prod  OR ng serve --prod     # Build
ng test                                 # Test is done through Karma; watch for changes. 
ng test --watch=false or --single-run   # Just test. No need to watch.
ng e2e                                  # End-to-end tests run via Protractor.
                                        # Protractor is browser simulator.     
ng generate                             # 
ng lint
ng get/ng set
ng update

To re-install or upgrade ng-cli :
  [sudo] npm uninstall -g angular-cli @angular/cli
  npm cache clean
  [sudo] npm install -g @angular/cli

# List user installed packages
npm list -g --depth=0

ng generate

Synopsis:

ng generate class my_class

# Available Schematics:
    class
    component
    directive
    enum
    guard
    interface
    module
    pipe
    service
    appShell
    application
    library
    universal

Options
        dry-run
        force

Installation

Synopsis:

# Install node version manager
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

Torrents

<magnet:?xt=urn:btih:d3520b5b2a3a178f9f050a33bf7cfcc145f8928e&dn=Udemy+-+Angular+Crash+Course+for+Busy+Developers&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Fzer0day.ch%3A1337&tr=udp%3A%2F%2Fopen.demonii.com%3A1337&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Fexodus.desync.com%3A6969>

MEAN stack guide by maximilian

<magnet:?xt=urn:btih:0a23d6c47c674ceeca251d8097ee5096013c7788&dn=Udemy+-+Angular+%26amp%3B+NodeJS+-+The+MEAN+Stack+Guide+&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Fzer0day.ch%3A1337&tr=udp%3A%2F%2Fopen.demonii.com%3A1337&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Fexodus.desync.com%3A6969>