The document discusses how web pages are created using HTML, CSS, and JavaScript. It explains the Document Object Model (DOM) and how JavaScript can manipulate the DOM. It then provides an overview of AngularJS including what it is, how it works, and some key concepts like directives, dependency injection, services, and data binding.
Material I prepared for a beginner's workshop on AngularJS. Feel free to change it for your own use. I would appreciate it if you attributed the original to me.
Chicago Coder Conference 2015
Speaker Biography: Wei Ru
Wei Ru has over 15 years of professional experience in design and development of Java enterprise applications across multiple industries. Currently he works as a technical architect at STA Group, LLC. He received a M.S. degree in Computer Science from Loyola University Chicago. As a software developer with an emphasis on Java, he strongly believes in software re-usability, open standards, and various best practices. He has successfully delivered many products using open source platforms and frameworks during his IT consultancies.
Speaker Biography: Vincent Lau
Vincent Lau has been Senior Architect at STA Group in Chicago for the last two years. He received a B.S. degree in Accounting and Finance from the University of Illinois at Chicago and worked on M.S. of Computer Science at DePaul University. He has over 15 years of software design, development, testing and project management experience on large enterprise distributed computing platforms. Most recently, he has worked on web based applications using Java, Spring, JavaScript, Angular.js, jQuery and web services. He previously had Senior Software Engineer and Lead positions in Royal Caribbean Cruises, Wells Fargo Bank, Cap Gemini America and Trans Union Corp.
Presentation: Practical AngularJS
AngularJS has been seen gaining momentum recently. Whether you want to develop a modern single-page application or to spice up only the view enabled by a traditional MVC web framework, AngularJS allows you to write cleaner, shorter code. AngularJS’ two-way data binding feature allows a declarative approach on views and controllers, and ultimately code modulization. With this strategic change and many features offered by AngularJS, learning AngularJS can be challenging. In this session, we will share some of the experiences we had in Angular UI development, we will cover:
AngularJS modules and common project setup
Communicating to a Restful service
Commonly used Angular functions, directives
UI Bootstrap, grid views and forms in AngularJS
Custom Angular directives
Asynchronous functions and event processing
An introduction to the complex single page web application framework known as AngularJs. An attempt to overview the high-level aspects of the framework, and to supply references for further exploration.
Single-page applications (SPAs) take user interaction with web applications to a new level. This means that more logic will be moved to the web browser and we have to become more familiar with JavaScript. AngularJS is one of the leading JavaScript frameworks when talking about SPAs. In this workshop I will present AngularJS in terms of problems it addresses and how it does this. Together we will develop a single-page application and we will go through how traditional concepts of web applications (data and state management, authentication) can be solved using the framework. Furthermore, we will dive into typical pitfalls when developing applications using AngularJS and will see how we can avoid them.
Material I prepared for a beginner's workshop on AngularJS. Feel free to change it for your own use. I would appreciate it if you attributed the original to me.
Chicago Coder Conference 2015
Speaker Biography: Wei Ru
Wei Ru has over 15 years of professional experience in design and development of Java enterprise applications across multiple industries. Currently he works as a technical architect at STA Group, LLC. He received a M.S. degree in Computer Science from Loyola University Chicago. As a software developer with an emphasis on Java, he strongly believes in software re-usability, open standards, and various best practices. He has successfully delivered many products using open source platforms and frameworks during his IT consultancies.
Speaker Biography: Vincent Lau
Vincent Lau has been Senior Architect at STA Group in Chicago for the last two years. He received a B.S. degree in Accounting and Finance from the University of Illinois at Chicago and worked on M.S. of Computer Science at DePaul University. He has over 15 years of software design, development, testing and project management experience on large enterprise distributed computing platforms. Most recently, he has worked on web based applications using Java, Spring, JavaScript, Angular.js, jQuery and web services. He previously had Senior Software Engineer and Lead positions in Royal Caribbean Cruises, Wells Fargo Bank, Cap Gemini America and Trans Union Corp.
Presentation: Practical AngularJS
AngularJS has been seen gaining momentum recently. Whether you want to develop a modern single-page application or to spice up only the view enabled by a traditional MVC web framework, AngularJS allows you to write cleaner, shorter code. AngularJS’ two-way data binding feature allows a declarative approach on views and controllers, and ultimately code modulization. With this strategic change and many features offered by AngularJS, learning AngularJS can be challenging. In this session, we will share some of the experiences we had in Angular UI development, we will cover:
AngularJS modules and common project setup
Communicating to a Restful service
Commonly used Angular functions, directives
UI Bootstrap, grid views and forms in AngularJS
Custom Angular directives
Asynchronous functions and event processing
An introduction to the complex single page web application framework known as AngularJs. An attempt to overview the high-level aspects of the framework, and to supply references for further exploration.
Single-page applications (SPAs) take user interaction with web applications to a new level. This means that more logic will be moved to the web browser and we have to become more familiar with JavaScript. AngularJS is one of the leading JavaScript frameworks when talking about SPAs. In this workshop I will present AngularJS in terms of problems it addresses and how it does this. Together we will develop a single-page application and we will go through how traditional concepts of web applications (data and state management, authentication) can be solved using the framework. Furthermore, we will dive into typical pitfalls when developing applications using AngularJS and will see how we can avoid them.
This is a talk I gave the at the AngleBrackets/DevIntersection conference in April of 2014 that covers the AngularJS JavaScript framework (one of my favorite frameworks out there!). In this talk I discussed the challenges with Single Page Applications (SPA) and how AngularJS helps solve those challenges with built-in support for two-way data binding, directives and filters, controllers and more. I also discuss the relationship of modules to controllers, factories and services, and more.
7 common Angularjs Anti-patterns and how to avoid them.
Slide 8: Controller Bloat completed fiddle - http://jsfiddle.net/straker/t8dLzws3/
Slide 9: The "Angular" Way completed fiddle - http://jsfiddle.net/straker/kL5wdnbr/
Introduction to Angular js , Angular js PDF , What is angular js ?? angular js pdf explanied. introduction to angular js. angular js online slide presentations. angular js explained pdf introductions
This is a talk I gave the at the AngleBrackets/DevIntersection conference in April of 2014 that covers the AngularJS JavaScript framework (one of my favorite frameworks out there!). In this talk I discussed the challenges with Single Page Applications (SPA) and how AngularJS helps solve those challenges with built-in support for two-way data binding, directives and filters, controllers and more. I also discuss the relationship of modules to controllers, factories and services, and more.
7 common Angularjs Anti-patterns and how to avoid them.
Slide 8: Controller Bloat completed fiddle - http://jsfiddle.net/straker/t8dLzws3/
Slide 9: The "Angular" Way completed fiddle - http://jsfiddle.net/straker/kL5wdnbr/
Introduction to Angular js , Angular js PDF , What is angular js ?? angular js pdf explanied. introduction to angular js. angular js online slide presentations. angular js explained pdf introductions
Angular-Js is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.
Learning AngularJS - Complete coverage of AngularJS features and conceptsSuresh Patidar
AngularJS learning sessions tailored for 6 days/12 hours. Complete coverage of AngularJS features that will be helpful for both beginner as well as expert. Also covers common development use cases and their answer/solution in AngularJS. A good coverage on tooling required for development and testing.
Angular Js Get Started - Complete CourseEPAM Systems
Angular Js Advantages.Developed by Google - Most Popular, SPA (Single Page Appplications), Data Binding, Easy to Test.
Complete guide for Angular Js. Covers Basics of Angular - Module, Controllers, Filters, and Advanced topics Routing, Services, UI-Routing
AngularJS is a very powerful JavaScript library. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache license version 2.0.
Introduction to AngularJS - 'Up and Running With Front End Web Development' course at VAMK (Vaasa University of Applied Science).
Code samples are in the notes alongside each slide, so download the file in case you want to check them.
Introduction to AI for Nonprofits with Tapp NetworkTechSoup
Dive into the world of AI! Experts Jon Hill and Tareq Monaur will guide you through AI's role in enhancing nonprofit websites and basic marketing strategies, making it easy to understand and apply.
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...Levi Shapiro
Letter from the Congress of the United States regarding Anti-Semitism sent June 3rd to MIT President Sally Kornbluth, MIT Corp Chair, Mark Gorenberg
Dear Dr. Kornbluth and Mr. Gorenberg,
The US House of Representatives is deeply concerned by ongoing and pervasive acts of antisemitic
harassment and intimidation at the Massachusetts Institute of Technology (MIT). Failing to act decisively to ensure a safe learning environment for all students would be a grave dereliction of your responsibilities as President of MIT and Chair of the MIT Corporation.
This Congress will not stand idly by and allow an environment hostile to Jewish students to persist. The House believes that your institution is in violation of Title VI of the Civil Rights Act, and the inability or
unwillingness to rectify this violation through action requires accountability.
Postsecondary education is a unique opportunity for students to learn and have their ideas and beliefs challenged. However, universities receiving hundreds of millions of federal funds annually have denied
students that opportunity and have been hijacked to become venues for the promotion of terrorism, antisemitic harassment and intimidation, unlawful encampments, and in some cases, assaults and riots.
The House of Representatives will not countenance the use of federal funds to indoctrinate students into hateful, antisemitic, anti-American supporters of terrorism. Investigations into campus antisemitism by the Committee on Education and the Workforce and the Committee on Ways and Means have been expanded into a Congress-wide probe across all relevant jurisdictions to address this national crisis. The undersigned Committees will conduct oversight into the use of federal funds at MIT and its learning environment under authorities granted to each Committee.
• The Committee on Education and the Workforce has been investigating your institution since December 7, 2023. The Committee has broad jurisdiction over postsecondary education, including its compliance with Title VI of the Civil Rights Act, campus safety concerns over disruptions to the learning environment, and the awarding of federal student aid under the Higher Education Act.
• The Committee on Oversight and Accountability is investigating the sources of funding and other support flowing to groups espousing pro-Hamas propaganda and engaged in antisemitic harassment and intimidation of students. The Committee on Oversight and Accountability is the principal oversight committee of the US House of Representatives and has broad authority to investigate “any matter” at “any time” under House Rule X.
• The Committee on Ways and Means has been investigating several universities since November 15, 2023, when the Committee held a hearing entitled From Ivory Towers to Dark Corners: Investigating the Nexus Between Antisemitism, Tax-Exempt Universities, and Terror Financing. The Committee followed the hearing with letters to those institutions on January 10, 202
Model Attribute Check Company Auto PropertyCeline George
In Odoo, the multi-company feature allows you to manage multiple companies within a single Odoo database instance. Each company can have its own configurations while still sharing common resources such as products, customers, and suppliers.
Synthetic Fiber Construction in lab .pptxPavel ( NSTU)
Synthetic fiber production is a fascinating and complex field that blends chemistry, engineering, and environmental science. By understanding these aspects, students can gain a comprehensive view of synthetic fiber production, its impact on society and the environment, and the potential for future innovations. Synthetic fibers play a crucial role in modern society, impacting various aspects of daily life, industry, and the environment. ynthetic fibers are integral to modern life, offering a range of benefits from cost-effectiveness and versatility to innovative applications and performance characteristics. While they pose environmental challenges, ongoing research and development aim to create more sustainable and eco-friendly alternatives. Understanding the importance of synthetic fibers helps in appreciating their role in the economy, industry, and daily life, while also emphasizing the need for sustainable practices and innovation.
A Strategic Approach: GenAI in EducationPeter Windle
Artificial Intelligence (AI) technologies such as Generative AI, Image Generators and Large Language Models have had a dramatic impact on teaching, learning and assessment over the past 18 months. The most immediate threat AI posed was to Academic Integrity with Higher Education Institutes (HEIs) focusing their efforts on combating the use of GenAI in assessment. Guidelines were developed for staff and students, policies put in place too. Innovative educators have forged paths in the use of Generative AI for teaching, learning and assessments leading to pockets of transformation springing up across HEIs, often with little or no top-down guidance, support or direction.
This Gasta posits a strategic approach to integrating AI into HEIs to prepare staff, students and the curriculum for an evolving world and workplace. We will highlight the advantages of working with these technologies beyond the realm of teaching, learning and assessment by considering prompt engineering skills, industry impact, curriculum changes, and the need for staff upskilling. In contrast, not engaging strategically with Generative AI poses risks, including falling behind peers, missed opportunities and failing to ensure our graduates remain employable. The rapid evolution of AI technologies necessitates a proactive and strategic approach if we are to remain relevant.
The French Revolution, which began in 1789, was a period of radical social and political upheaval in France. It marked the decline of absolute monarchies, the rise of secular and democratic republics, and the eventual rise of Napoleon Bonaparte. This revolutionary period is crucial in understanding the transition from feudalism to modernity in Europe.
For more information, visit-www.vavaclasses.com
Embracing GenAI - A Strategic ImperativePeter Windle
Artificial Intelligence (AI) technologies such as Generative AI, Image Generators and Large Language Models have had a dramatic impact on teaching, learning and assessment over the past 18 months. The most immediate threat AI posed was to Academic Integrity with Higher Education Institutes (HEIs) focusing their efforts on combating the use of GenAI in assessment. Guidelines were developed for staff and students, policies put in place too. Innovative educators have forged paths in the use of Generative AI for teaching, learning and assessments leading to pockets of transformation springing up across HEIs, often with little or no top-down guidance, support or direction.
This Gasta posits a strategic approach to integrating AI into HEIs to prepare staff, students and the curriculum for an evolving world and workplace. We will highlight the advantages of working with these technologies beyond the realm of teaching, learning and assessment by considering prompt engineering skills, industry impact, curriculum changes, and the need for staff upskilling. In contrast, not engaging strategically with Generative AI poses risks, including falling behind peers, missed opportunities and failing to ensure our graduates remain employable. The rapid evolution of AI technologies necessitates a proactive and strategic approach if we are to remain relevant.
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdfTechSoup
In this webinar you will learn how your organization can access TechSoup's wide variety of product discount and donation programs. From hardware to software, we'll give you a tour of the tools available to help your nonprofit with productivity, collaboration, financial management, donor tracking, security, and more.
2. How Web Page Creates?
HTML (Structure)
Css (Style)
Javascript (Behavior)
◦ HTML tags create objects.
In other words……Document Object Model(DOM)
◦ <SCRIPT></SCRIPT>
Once page found this tag – Start download the javascript.
◦ JavaScript lets you manipulate the DOM.
◦ Css – do the styles.
3. What is DOM?
The Document Object Model (DOM) is an application programming
interface (API) for valid HTML and well-formed XML documents. It
defines the logical structure of documents and the way a document
is accessed and manipulated.
6. What is Angularjs?
A JavaScript framework for creating
dynamic web applications
Open Source
◦ GitHub:
https://github.com/angular/angular.js
◦ MIT License
Uses jQuery
◦ jQuery 1.7.1 or above
◦ jQLite
7. MVC or MVW….
Model
◦ The data
View
◦ The interface
◦ How the data is presented to the user
Whatever
(Controller/Services/Directives/Filters)
◦ The behavior
◦ Modifying / updating the models
8. How Angularjs works?
bindJQuery() : Either one of jQuery or jqLite is bound to angular.
angularInit(document, bootstrap) : method which checks for ng-app module
bootstrap(element) : method which is invoked once an ng-app module is found
◦ Invoke createInjector() method which returns dependency injector
◦ The dependency injector invokes the compilation and linking process with some of the following
key parameters:
Scope object – Reference to rootScope
Reference to element with ng-app
Compile service
Reference to dependency injector
9. How Angularjs works? Cont…
compile(element): bind events to the element
compile(element)(scope): bind element to the scope
◦ At this phase compiler will look for every directive and creates the watchers ($watch) that are
needed.
scope.$apply(function{}): Finally, the $apply method is invoked on
the scope object
As a result of execution of $apply
method, the view appears……
11. Reusable components with
directives….
A directive is an extension of the HTML vocabulary that allows us to
create new behaviours. This technology lets the developers create
reusable components that can be used within the whole application.
The directive can be applied as an
◦ Attribute
◦ Element
◦ Class
◦ Comment
we can use ng-model, ng:model, ng_model,data-ng-model,
and x-ng-model in the HTML markup.
12. AngularJS built-in directives...
ngApp - defines the root of an AngularJS application
ngController - attach any controller to the view
◦ Nested Controllers
ngBind – act as same as {{expression}}
ngBindHtml – bind plain html
13. AngularJS built-in directives...
ngRepeat - iterate over arrays and objects.
ngModel - attaches the element to a property in
the scope
ngClick – bind any custom behavior to the click
event of the element
ngDisable – disable elements based on the
Boolean value of an expression.
ngClass – dynamically apply a class to an element
ngOptions – create the options of a select element
ngStyle – apply the dynamic style configuration
demand
14. AngularJS built-in directives...
ngShow/ngHide – apply visibility of an element
based on its
display property.
ngIf - prevents the rendering of an element in our template
ngClick – bind any custom behavior to the click
event of the element
ngInclude – include other external HTML fragments in to
pages
16. Dependency Injection
and Services…
Services
◦ Use to isolating the business logic in the application
Lazily instantiated – Angular only instantiates a service when an application component depends on it.
Singletons – Each component dependent on a service gets a reference to the single instance generated
by the service factory.
No UI
Dependency Injection
◦ A software design pattern that deals with how components get hold of
their dependencies.
◦ eg :
17. Dependency Injection
and Services…
Custom Services
◦ We can define our own custom services in different ways in angular js app
and use them wherever required
Service()
Factory()
Provider()
18. Dependency Injection
and Services…
Creating services with the factory
◦ You give angular a function
◦ Angular create an object
◦ add properties to it
◦ return that same object
19. Dependency Injection
and Services…
Creating services with the Service
◦ You give angular a function
◦ Angular will instantiated with the ‘new’ keyword
◦ add properties to “this”
◦ return “this”
20. Dependency Injection
and Services…
Creating services with the Provider
◦ You give angular a function
◦ angular will call its $get function
◦ return value from the $get function
22. Data handling…
Expressions
◦ An expression is a simple piece of code
that will be evaluated by the framework
and can be written between double curly
brackets
eg : {{car.plate}}
23. Data handling…
Filters
◦ perfect solution to easily perform any data manipulation.
Eg :
{{expression | filter}}
{{expression | filter1 | filter2}}
◦ Currency
{{ 10 | currency}} => $10.00 (take locale currency)
{{ 10 | currency:'R$'}} => R$ 10.00
◦ Date
{{ car.entrance | date }} => Dec 10, 2014
{{ car.entrance | date:'MMMM dd/MM/yyyy HH:mm:ss' }} =>
December 10/12/2013 21:42:10.
27. Data handling…
Form validations
$pristine =>form is not modified
$dirty => form is modified
28. Data handling…
Form validations
$error => It accumulates the detailed list of
everything that happens with the form
29. Data Binding – Two way
Data-binding in Angular apps is the automatic synchronization of
data between the model and view components.
The view is a projection of the model at all times. When the model
changes, the view reflects the change, and vice versa.
30. How Data binding works?
Exactly what happen when you do event on a
browser….
browser is waiting for events / user interactions.
click on a button or write into an input.
fire browser event loop.
browser will make the appropriate changes in the DOM
31. How Data binding works?
How angulerjs reacts?
When you create ui component using directive
Add $watch to watch list call $digest
After fire event loop $digest loop will be fired.
It checks values are updated.
Call $apply()
As a result of execution of $apply method, the view
updated……
32. Scope….
scope is an object that refers to the application model
Scopes are arranged in hierarchical structure which mimic the DOM
structure of the application
Create connection between view & controller
33. $rootscope / $parent / $scope
You give angular a functionYou give angular a function
34. Exercise..
Writing own directory…
◦ Replace label with dropdown when click
the edit button.
◦ When user change the dropdown
automatically update the model.