AngularJS

Sep 8, 2018 | Publisher: edocr | Category: Technology |  | Collection: Business Ideas | Views: 13 | Likes: 3

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 Name: Hello {{yourName}}! CS142 Lecture Notes - AngularJS Angular Bootstrap Name: Hello {{yourName}}! Script loads and runs on when browser signals context is loaded and ready CS142 Lecture Notes - AngularJS Angular Bootstrap Name: Hello {{yourName}}! Once ready, scans the html looking for a ng-app attribute - Creates a scope. CS142 Lecture Notes - AngularJS Angular Bootstrap Name: Hello {{yourName}}! 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 Name: Hello ! 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 Name: Hello D! 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 Name: Hello Dan! Template updated with each change (i.e. key stroke)! CS142 Lecture Notes - AngularJS angular.module Name: Hello {{yourName}}! 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 Name: {{greeting}} {{yourName}}! 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 ... 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: Model reads will go up to fetch properties from inherited scopes. Writes will create the property in the current scope! 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.) {{person.name}} nickname {{person.nickname}} Powerful but opaque syntax. From documentation: CS142 Lecture Notes - AngularJS ngIf/ngShow - Conditional inclusion in DOM ngIf - Include in DOM if expression true (dialogs, modals, etc.) {{buyProductAdmonishmentText}} 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 Increment count: {{count}} ngModel - Bind with input, select, textarea tags Option 1 Option 2 CS142 Lecture Notes - AngularJS ngHref & ngSrc Sometimes need to use ng version of attributes: a tag <a ng-href="{{linkHref}}">link1</a> img tag CS142 Lecture Notes - AngularJS ngInclude - Fetches/compile external HTML fragment Include partial HTML template (Take angular expression of URL)

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!

×

Modal Header

Modal body