AngularJS

Business planning ideas from around the internet.

Publishing documents on edocr is a proven way to start demand generation for your products and services. Thousands of professionals and businesses publish marketing (brochures, data sheets, press releases, white papers and case studies), sales (slides, price lists and pro-forma agreements), operations (specifications, operating manuals, installation guides), customer service (user manuals) and financial (annual reports and financial statements) documents making it easier for prospects and customers to find content, helping them to make informed decisions. #SEO #leadgen #content #analytics

About edocr

I am an accomplished content marketing professional helping you to build your brand and business. In my current role, I fulfill a multi-faceted solution marketplace including: publishing and sharing your content, embedding a document viewer on your website, improving your content’s search engine optimization, generating leads with gated content and earning money by selling your documents. I gobble up documents, storing them for safekeeping and releasing the text for excellent search engine optimization, lead generation and earned income.

Publishing documents on edocr.com is a proven way to start demand generation for your products and services. Thousands of professionals and businesses publish marketing, sales, operations, customer service and financial documents making it easier for prospects and customers to find content, helping them to make informed decisions.

Get publishing now!

CS142 Lecture Note Lecture Note AngularJS Scope HTML Angular Model yourName placeholder

CS142 Lecture Notes - AngularJS
AngularJS Introduction
Mendel Rosenblum
CS142 Lecture Notes - AngularJS
AngularJS 
 JavaScript framework for writing web applications

 Handles: DOM manipulation, input validation, server communication,  URL mangement, etc.
 Uses Model-View-Controller pattern 
 HTML Templating approach with two-way binding
 Minimal server-side support dictated
 Focus on supporting for programming in the large and single page applications
 Modules, reusable components, testing, etc.
 Widely used framework (Angular 1 - 2009) with a major rewrite coming out 
(Angular 2)
 CS142 will use Angular 1
CS142 Lecture Notes - AngularJS
Angular Concepts and Terminology
Template
HTML with additional markup used to describe what should be displayed
Directive
Allows developer to extend HTML with own elements and attributes (reusable pieces)
Scope
Context where the model data is stored so that templates and controllers can access
Compiler
Processes the template to generate HTML for the browser
Data Binding
Syncing of the data between the Scope and the HTML (two ways)
Dependency 
Injection
Fetching and setting up all the functionality needed by a component
Module
A container for all the parts of an application
Service
A way of packaging functionality to make it available to any view
CS142 Lecture Notes - AngularJS
Angular Example
<!doctype html>
<html ng-app>
   <head>
      <script src="./angular.min.js"></script>
   </head>
   <body>
      <div>
         <label>Name:</label>
         <input type="text" ng-model="yourName" placeholder="Enter a name here">
         <h1>Hello {{yourName}}!</h1>
      </div>
   </body>
</html>
CS142 Lecture Notes - AngularJS
Angular Bootstrap
<!doctype html>
<html ng-app>
   <head>
      <script src="./angular.min.js"></script> 
   </head>
   <body>
      <div>
         <label>Name:</label>
         <input type="text" ng-model="yourName" placeholder="Enter a name here">
         <h1>Hello {{yourName}}!</h1>
      </div>
   </body>
</html>
Script loads and runs on when browser 
signals context is loaded and ready
CS142 Lecture Notes - AngularJS
Angular Bootstrap
<!doctype html>
<html ng-app>
   <head>
      <script src="./angular.min.js"></script> 
   </head>
   <body>
      <div>
         <label>Name:</label>
         <input type="text" ng-model="yourName" placeholder="Enter a name here">
         <h1>Hello {{yourName}}!</h1>
      </div>
   </body>
</html>
Once ready, scans the html looking for a 
ng-app attribute - Creates a scope.
CS142 Lecture Notes - AngularJS
Angular Bootstrap
<!doctype html>
<html ng-app>
   <head>
      <script src="./angular.min.js"></script> 
   </head>
   <body>
      <div>
         <label>Name:</label>
         <input type="text" ng-model="yourName" placeholder="Enter a name here">
         <h1>Hello {{yourName}}!</h1>
      </div>
   </body>
</html>
Compiler - Scans DOM covered by the 
ng-app looking for templating markup - 
Fills in with information from scope.
CS142 Lecture Notes - AngularJS
Angular Compiler Output
<!doctype html>
<html ng-app class="ng-scope">
   <head>
      <script src="./angular.min.js"></script> 
   </head>
   <body>
      <div>
         <label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here" 
class="ng-pristine ng-untouched ng-valid">
<h1 class="ng-binding">Hello !</h1>
      </div>
   </body>
</html>
Changes to template HTML in red.  Classes:
ng-scope - Angular attached a scope here.
ng-binding - Angular bound something here.
ng-pristine/ng-dirty - User interactions?
ng-untouched/ng-touched - Blur event?
ng-valid/ng-invalid - Valid value?
Note: {{yourName}} replaced 
with value of yourName
CS142 Lecture Notes - AngularJS
Two-way binding:  Type 'D' character into input box
<!doctype html>
<html ng-app class="ng-scope">
   <head>
      <script src="./angular.min.js"></script> 
   </head>
   <body>
      <div>
         <label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here" 
class="ng-valid ng-dirty ng-valid-parse ng-touched">
<h1 class="ng-binding">Hello D!</h1>
      </div>
   </body>
</html>
The scope variable yourName is 
updated to be "D" and the template 
is rerendered with yourName = "D". 
Note angular validation support
CS142 Lecture Notes - AngularJS
Two-way binding:  Type 'a', 'n'  into input box
<!doctype html>
<html ng-app class="ng-scope">
   <head>
      <script src="./angular.min.js"></script> 
   </head>
   <body>
      <div>
         <label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here" 
class="ng-valid ng-dirty ng-valid-parse ng-touched">
<h1 class="ng-binding">Hello Dan!</h1>
      </div>
   </body>
</html>
Template updated with each change 
(i.e. key stroke)!
CS142 Lecture Notes - AngularJS
angular.module
<!doctype html>
<html ng-app="cs142App">
   <head>
      <script src="./angular.min.js"></script>
   </head>
   <body>
      <div>
         <label>Name:</label>
         <input type="text" ng-model="yourName" placeholder="Enter a name here">
         <h1>Hello {{yourName}}!</h1>
      </div>
   </body>
</html>
angular.module("cs142App", []);
        or to fetch existing module:
angular.module("cs142App"); 
In a JavaScript file:  
Module - Container of everything needed under ng-app 
CS142 Lecture Notes - AngularJS
Controllers
<!doctype html>
<html ng-app="cs142App">
   <head>
      <script src="./angular.min.js"></script>
   </head>
   <body ng-controller="MyCntrl">  
      <div>
         <label>Name:</label>
         <input type="text" ng-model="yourName" placeholder="Enter a name here">
         <h1>{{greeting}} {{yourName}}!</h1>
      </div>
   </body>
</html>
angular.module("cs142App", [])
.controller('MyCntrl', function($scope) {
   $scope.yourName = "";
   $scope.greeting = "Hola";
});
In a JavaScript file:  
Will define a new scope and call 
controller MyCntrl.  
CS142 Lecture Notes - AngularJS
Templates, Scopes & Controllers 
 Best practice:  Each template component gets a new scope and is paired 
with a controller.
 Expressions in templates:
 
{{foo + 2 * func()}}
are evaluated in the context of the scope. Controller sets up scope:
$scope.foo = ... ; 
$scope.func = function() { ... };
 Best practice: Keep expressions simple put complexity in controller
 Controllers make model data available to view template
CS142 Lecture Notes - AngularJS
Scope inheritance
 A scope object gets its prototype set to its enclosing parent scope
<div ng-controller="crtl1">     
   <div ng-controller="crtl2"> 
     ...
   </div>
</div>
 ScopeB's prototype points at  ScopeA
 Mostly does what you want (all properties of A appear in B)
 Useful since scopes are frequently created (e.g. ng-repeat, etc.)
 $rootScope is parent of all
Creates new scope (ScopeA)  
Creates new scope (ScopeB)  
CS142 Lecture Notes - AngularJS
"There should always be a dot in your model"
Common advice to beginning AngularJS programmers.  Why?
Consider: <input type="text" ng-model="yourName" placeholder="Enter a name here">
Model reads will go up to fetch properties from inherited scopes.
Writes will create the property in the current scope!
<input type="text" ng-model="model.yourName" placeholder="Enter a name here">
Read of object model will locate it in whatever inherited scope it is in.  yourName 
will be create in that object in the right scope.
CS142 Lecture Notes - AngularJS
Scope digest and watches
 Two-way binding works by watching when expressions in view template 
change and updating the corresponding part of the DOM.
 Angular add a watch for every variable or function in template expressions
 During the digest processing all watched expressions are compared to their 
previously known value and if different the template is reprocessed and the 
DOM update
 Angular automatically runs digest after controller run, etc. 
It is possible to:
Add your own watches: ($scope.$watch(..))   (e.g. caching in controller)
Trigger a digest cycle: ($scope.$digest())  (e.g. model updates in event)
CS142 Lecture Notes - AngularJS
Example of needing scope $watch
Name: {{firstName}} {{lastName}}
     vs
Name: {{fullName}}
$scope.fullName = 
     $scope.firstName + 
       " " +  $scope.lastName;
$scope.$watch('firstName',
 function() { 
  $scope.fullName = 
     $scope.firstName + 
      " " + $scope.lastName;
  });
CS142 Lecture Notes - AngularJS
A digression: camelCase vs dash-case
Word separator in multiword variable name
 Use dash:   active-buffer-entry
 Capitalize first letter of each word: activeBufferEntry
Issue: HTML is case-insensitive so camelCase is a problem
AngularJS solution: You can use either, Angular will map them to the same thing. 
Use dash in HTML and camelCase in JavaScript
Example:  ng-model and ngModel 
CS142 Lecture Notes - AngularJS
ngRepeat - Directive for looping in templates
 ngRepeat - Looping for DOM element creation (tr, li, p, etc.)
<ul>
   <li ng-repeat="person in peopleArray">
      <span>{{person.name}} nickname {{person.nickname}}</span>
   </li>
</ul>
 Powerful but opaque syntax. From documentation:
<div ng-repeat="model in collection | orderBy: 'id' as 
filtered_result track by model.id">
CS142 Lecture Notes - AngularJS
ngIf/ngShow - Conditional inclusion in DOM
 ngIf - Include in DOM if expression true (dialogs, modals, etc.)
   <div class="center-box" ng-if="showTrialOverWarning">
      {{buyProductAdmonishmentText}}
   </div>
Note: will create scope/controllers when going to true, exit going to false
 ngShow - Like ngIf except uses visibility to hide/show DOM elements
 Occupies space when hidden
 Scope & controllers created at startup
CS142 Lecture Notes - AngularJS
ngClick/ngModel - Binding user input to scope 
 ngClick - Run code in scope when element is clicked
<button ng-click="count = count + 1" ng-init="count=0">
  Increment
</button>
<span> count: {{count}} </span>
 ngModel - Bind with input, select, textarea tags
      <select name="singleSelect" ng-model="data.singleSelect">
         <option value="option-1">Option 1</option>
         <option value="option-2">Option 2</option>
      </select>
CS142 Lecture Notes - AngularJS
ngHref & ngSrc
Sometimes need to use ng version of attributes:
 a tag
<a ng-href="{{linkHref}}">link1</a>
 img tag
<img ng-src="{{imageSrc}}" alt="Description" />
CS142 Lecture Notes - AngularJS
ngInclude - Fetches/compile external HTML fragment
 Include partial HTML template (Take angular expression of URL)
<div ng-include="'navBarHeader.html'"</div>
 CS142 uses for components
<div ng-include="'components/example/exampleTemplate.html'"
 ng-controller="ExampleController"></div>
CS142 Lecture Notes - AngularJS
Directives
 Angular preferred method for building reusable components 
 Package together HTML template and Controller and extend templating language.
 Ng prefixed items in templates are directives 
 Directive can:
 Be inserted by HTML compiler as:

attribute (<div my-dir="foo">...</div>) 

element (<my-dir arg1="foo">...</my-dir>)

Specify the template and controller to use
 Accept arguments from the template 
 Run as a child scope or isolated scope
 Powerful but with a complex interface
Example: <example arg1="fooBar"></example>
CS142 Lecture Notes - AngularJS
Directives are heavily used in Angular
<body layout="row" ng-controller="AppCtrl">
    <md-sidenav layout="column" ... >
      <md-toolbar ...>
         ...
      </md-toolbar>
      <md-list>
      <md-item ng-repeat="item in menu">
          <md-item-content layout="row" layout-align="start center">
            <md-button aria-label="Add" ng-click="showAdd($event)">
          </md-item-content>
      </md-item>
      <md-divider></md-divider>
      <md-subheader>Management</md-subheader>
      
CS142 Lecture Notes - AngularJS
Services
 Used to provide code modules across view components 
 Example:  shared JavaScript libraries
 Angular has many built-in services
 Server communication (model fetching) 
$http, $resource, $xhrFactory
 Wrapping DOM access  (used for testing mocks)
$location, $window, $document, $timeout, $interval
 Useful JavaScript functionality
$animate, $sce, $log
 Angular internal accesses
$rootScope, $parse, $compile
CS142 Lecture Notes - AngularJS
Dependency injection
 Support for programming in large
a.
Entities list what they define and what they need
b.
At runtime  Angular brings entities and their dependencies together
 Example:
var cs142App = angular.module('cs142App', ['ngRoute']);
cs142App.config(['$routeProvider', function($routeProvider) {
cs142App.controller('MainController', ['$scope',function($scope) {
     
CS142 Lecture Notes - AngularJS
Angular APIs
 ngRoute - Client-side URL routing and URL management 
 CS142 - Passing parameters to the views 
 ngResource - REST API access
 CS142 - Fetch models
 ngCookies - Cookie management and access
 ngAria - Support for people with disabilities (Accessible Rich Internet Applications)
 ngTouch - Support for mobile devices (ngSwipeLeft, ngSwipeRight, etc.)
 ngAnimate - Support for animations (CSS & JavaScript based)
 ngSanitize - Parse and manipulate HTML safely
CS142 Lecture Notes - AngularJS
Some thoughts on JavaScript Frameworks
 Web app can not start until framework downloaded and initialized 
 Particular relevant for wimpy devices and networks (e.g. Mobile)
 Can lazy load Angular modules (Makes dependency tracking important)
 Core Angular is not small
1.4.8/angular.js
1,070,726 bytes 
1.4.8/angular.min.js
148,199 bytes
1.4.8/angular.min.js.gzip
53,281 bytes