RYAN'S WEBSITE

Just something small and tiny.

Held by Ryan Ruoshui Yan.


Here is the world of a nerdy guy.

Visited:

Angular

Introduction

  • A JavaScript framework
  • Extends HTML with ng-directive
    • ng-app directive: Defines an AngularJS application
    • ng-model directive: Binds value to application data
    • ng-bind directive: Binds application data to HTML view

Note:

For technical problems with markdown, need to replace \{\{ \}\} with {{}}

Source

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

Model & Bind

<div ng-app="">
	<input ng-model="name">
    <div ng-bind="name"></div>
    Or we can use: \{\{name\}\}
</div>

Init

<div ng-app="" ng-init="firstName='Ryan';lastName='Yan'">
	<div ng-bind="firstName + ' ' + lastName"/></div>
    Or
    \{\{ firstName + " " + lastName \}\}
</div>

Note: Multiple assignments in init are separated by ;

Or below if want to make page HTML valid

<div data-ng-app="" data-ng-init="firstName='RYAN'">
	<div data-ng-bind="firstName"></div>
</div>

Expression ({{}})

<div ng-app="">
	\{\{ 1 + 2 \}\}
    <input ng-model="name">\{\{name\}\}
</div>

Expressions also work in tags

<div ng-app="" ng-init="name='lightblue'">
    <input style="background-color:\{\{name\}\}" ng-model="name" value="\{\{name\}\}">
</div>

Define applications

var app = angular.module('app', []);

Control applications

app.controller('ctrl', function($scope) {
    // It must be called $scope
    $scope.name = "Ryan";
});

Controller

<div ng-app="app" ng-controller="ctrl">
	<input ng-model="name">\{\{name\}\}
</div>

<script>
    var app = angular.module('app', []);
    app.controller('ctrl', function($scope) {
		$scope.name = "Ryan";
    });
</script>

Object

<div ng-app="" ng-init="person={firstName:'Ryan',lastName:'Yan'}">
    <span ng-bind="person.lastName"></span>
	\{\{ person.lastName \}\}
    Note: Attributes are separated by ,
</div>

Array

<div ng-app="" ng-init="arr=[1,2,3,4]">
    <span ng-bind="arr[2]"></span>
	\{\{ arr[2] \}\}
</div>

PRO/CON of JS Expression and Angular Expression

  • Both
    • Can contain literals
    • Can contain operators
    • Can contain variables
  • Only JS Expressions
    • Support conditionals
    • Support loops
    • Support exceptions
  • Only Angular Expressions
    • Can be written inside HTML
    • Support filters

Module

<div ng-app="app">...</div>
<script>
    var app = angular.module("app", []);
</script>

Directive

<body ng-app="app">
	<test-directive></test-directive>
    <script>
    var app = angular.module("app", []);
    app.directive("testDirective", function() {
        return {
        template : "<h1>Sentence created by a directive constructor<h2>"
        };
    });
    </script>
</body>

Load library

While it is common in HTML applications to place scripts at the end of the <body> element, it is recommended that you load the AngularJS library either in the <head> or at the start of the <body>.

This is because calls to angular.module can only be compiled after the library has been loaded.

Repeat

<div ng-app="" ng-init="names=['A','B','C']">
  <ul>
    <li ng-repeat="x in names">
      \{\{ x \}\}
    </li>
  </ul>
</div>

<div ng-app="" ng-init="names=[
{name:'A',country:'a'},
{name:'B',country:'b'},
{name:'C',country:'c'}]">
  <ul>
    <li ng-repeat="x in names">
    \{\{ x.name + ', ' + x.country \}\}</li>
  </ul>
</div>

Call directive from classes only

<body ng-app="app">
    <div class="test-directive"></div>
    <script>
    var app = angular.module("app", []);
    app.directive("testDirective", function() {
        return {
            restrict : "C",
            // Must add the value "C" to the restrict property to be able to invoke the directive from a class name. If it is added, normal calling like <test-directive></test-directive> won't work anymore.
            template : "<h1>Made by a directive</h1>"
        };
    });
    </script>
</body>

Call directive from comments only

<body ng-app="app">
    <!-- directive: w3-test-directive -->
    <script>
    var app = angular.module("app", []);
    app.directive("w3TestDirective", function() {
        return {
            restrict : "M",
            replace : true,
            // Need to have restrict and replace above to work
            template : "<h1>Made by a directive</h1>"
        };
    });
    </script>
</body>

Call directive from attributes only

<body ng-app="myApp">
    <w3-test-directive></w3-test-directive>
    <div test-directive></div>
    <script>
    var app = angular.module("myApp", []);
    app.directive("testDirective", function() {
        return {
            restrict : "A",
            template : "<h1>Made by a directive</h1>"
        };
    });
    </script>
</body>

Restrictions

  • E: Element name
  • A: Attribute
  • C: Class
  • M: Comment
  • Default: EA

Validation (Email)

<form ng-app="" name="form">
    <input type="email" name="address" ng-model="emailForm">
    <span ng-show="form.address.$error.email">Not a valid e-mail address</span>
</form>

The span will be displayed only if the expression in the ng-show attribute returns true.

Validation Status

<form ng-app="" name="myForm" ng-init="myText = 'ryan@yan.com'">
    <input type="email" name="myAddress" ng-model="myText" required>
    <p>Valid: \{\{myForm.myAddress.$valid\}\} (if true, the value meets all criteria).</p>
    <p>Dirty: \{\{myForm.myAddress.$dirty\}\} (if true, the value has been changed).</p>
    <p>Touched: \{\{myForm.myAddress.$touched\}\} (if true, the field has been in focus).</p>
</form>

Validation CSS

<style>
    input.ng-invalid {
        background-color: red;
    }
</style>
<body>
    <form ng-app="" name="myForm">
        Enter your name:
        <input name="myName" ng-model="myText" required>
    </form>
</body>

Model Classes

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine

2-Way Binding

  • Data binding in AngularJS is the synchronization between the model and the view.
  • When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well.
  • This happens immediately and automatically, which makes sure that the model and the view is updated at all times.

Controller

<div ng-app="myApp" ng-controller="myCtrl">
    <h1 ng-click="changeName()">\{\{firstname\}\}</h1>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstname = "RYAN";
        $scope.changeName = function() {
            $scope.firstname = "Ryan";
        }
    });
</script>

Next?

Link

EARLIER

OpenCV Notes

import cv2import numpy as np# Show imagedef imshow(img): cv2.imshow("windows name", img) cv2.waitKey(0) # Need to add .waitKey() for the image to stay on the screen# Read an image using .imread()img = cv2.imread('pie.png')# Show imageimsh...…

MORE