We Will learn about:
What is AngularJs?
Key Points
Core Features of AngularJS
How is it works?
AngularJs Terminologies
AngularJs directives
How we start work on AngularJs?
AngularJs Tags
How we use Yeoman?
Advantages and Disadvantages
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
Introduction to JavaScript course. The course was updated in 2014-15.
Will allow you to understand what is JavaScript, what's it history and how you can use it.
The set of slides "Introduction to jQuery" is a follow up - which would allow the reader to have a basic understanding across JavaScript and jQuery.
What is Node.js | Node.js Tutorial for Beginners | Node.js Modules | Node.js ...Edureka!
This Edureka "What is Node.js" tutorial will help you to learn the Node.js fundamentals and how to create an application in Node.js. Node.js is an open-source, cross-platform JavaScript runtime environment for developing a diverse variety of server tools and applications. Below are the topics covered in this tutorial:
1) Client Server Architecture
2) Limitations of Multi – Threaded Model
3) What is Node.js?
4) Features of Node.js
5) Node.js Installation
6) Blocking Vs. Non – Blocking I/O
7) Creating Node.js Program
8) Node.js Modules
NodeJS is an open source, cross platform run time environment for server side and networking application. NodeJS is popular in development because front & back end side both uses JavaScript Code.
AngularJS 101 - Everything you need to know to get startedStéphane Bégaudeau
In this presentation, you will find everything need to get started with AngularJS.
For more details, have a look at my blog (http://stephanebegaudeau.tumblr.com) or follow me on twitter (@sbegaudeau)
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
Introduction to JavaScript course. The course was updated in 2014-15.
Will allow you to understand what is JavaScript, what's it history and how you can use it.
The set of slides "Introduction to jQuery" is a follow up - which would allow the reader to have a basic understanding across JavaScript and jQuery.
What is Node.js | Node.js Tutorial for Beginners | Node.js Modules | Node.js ...Edureka!
This Edureka "What is Node.js" tutorial will help you to learn the Node.js fundamentals and how to create an application in Node.js. Node.js is an open-source, cross-platform JavaScript runtime environment for developing a diverse variety of server tools and applications. Below are the topics covered in this tutorial:
1) Client Server Architecture
2) Limitations of Multi – Threaded Model
3) What is Node.js?
4) Features of Node.js
5) Node.js Installation
6) Blocking Vs. Non – Blocking I/O
7) Creating Node.js Program
8) Node.js Modules
NodeJS is an open source, cross platform run time environment for server side and networking application. NodeJS is popular in development because front & back end side both uses JavaScript Code.
AngularJS 101 - Everything you need to know to get startedStéphane Bégaudeau
In this presentation, you will find everything need to get started with AngularJS.
For more details, have a look at my blog (http://stephanebegaudeau.tumblr.com) or follow me on twitter (@sbegaudeau)
How many times have you experienced the agonizing wait as you navigate through a web application? Looking expectantly at the screen, and waiting for the page to load? Frustrating, isn’t it?
Using Single Page web application (SPA) technique can give your web application as seamless an experience as a desktop application. So, what is SPA? And how does it enhance the viewer experience?
The webinar will take you through a step-by-step introduction to SPA, its building blocks, the design techniques and advantages of SPA. It will also discuss the distinct advantages of using AngularJS for Single Page Applications and feature an application demo.
Key Takeaways:
Single Page Web Applications [SPA] , Present and Future
- Introduction
- Why SPA, advantages
- SPA- Multiplatform perspective
- Future of SPA
Architectural considerations for developing SPA
- Building blocks of SPA
- Main Challenges in Web Application Development
Why choose AngularJS for SPA
- Walkthrough of Key AngularJS features
- Advantages of AngularJS in SPA development
Application Demo
Who will benefit from this webinar?
ISVs who want to make their web applications more fluid and engaging for their users
Businesses who don’t want to lose customers because of a slow website
- B2C portals
- Online Retailers
- Travel & Hospitality
- Online shopping portals
- Healthcare portals
Educational & training institutions
Deep Dive into AngularJS Javascript FrameworkEdureka!
AngularJS, a MVW framework from Google is based on JavaScript, a language globally known to millions of developers worldwide - thus giving it a much lower learning curve even for complete beginners. Integrating AngularJS is simple as it evaluates page once HTML is in the DOM and make easier to bind Angular on top of existing applications. It can run along with Node.js, an asynchronous development platform with lightning speed execution, which makes building Mean Stack applications easier and faster. AngularJS comes with a very good documentation and also have wide range of third party modules making it user-friendly for developers.
Requirements Bazaar powered by AngularJS and Polymer - Talk at Google Develop...IstvanKoren
In this talk that we gave on April 21st, 2015 at the GDG Brussels, we presented the Requirements Bazaar with a special focus on its front end that is built with AngularJS and Polymer.
http://www.requirements-bazaar.org
SharePoint Saturday Paris 2016 - AngularJS with the Microsoft GraphSébastien Levert
Tous les développeurs entendent parler d'AngularJs et de toute la magie que cette plateforme peur faire pour vos applications. Afin de démarrer votre aventure avec AngularJS, cette session est une introduction aux concepts AngularJS appliqués à tout développement Office365. Les différentes expériences d'Office365 seront traitées (Mail, Calendrier, Fichiers, etc.) et le Microsoft Graph sera notre principale source de données.
En tant que développeur, vous apprendrez les concepts de base d'AngularJS et serez en mesure de les appliquer dans un contexte Office 365. Vous serez alors en mesure de développer des applications riches (SPA ou Single Page Application) qui utilisent les données stockées dans votre tenant Office365!
According to builtwith.com around 143,891 websites used a next generation JavaScript framework angular.js developed by Google. AngularJS Development is used for creating dynamic browser based applications. Here Brainvire introduces the key factors that can make you adopt AngularJS Development for your websites. Looking for Hiring AngularJS Developers visit: http://www.brainvire.com/angularjs-development-services/
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 course teaches you the concepts of Angular. You will learn how to utilize Components, Annotations, Views, Event Handlers, Directives and more. In Angular everything is a Component and this course takes a component-centric approach. We will use Components as the main point of discussion and you will learn about other concepts in Angular in the context of Components.
The evolution of Angular 2 @ AngularJS Munich Meetup #5Johannes Weber
The evolution of Angular 2
Angular 1 was born in 2009. Since that a lot of web standards are born and supported by most of the browsers natively. So it's time to use the new possibilities. That's how Angular 2 started. It's not just a major update. It's a whole rewrite!
The key theme of this talk it to get an overview of Angular 2. I’ll walk you through what you need to know to stay up to date, explain the main concepts behind A2 and the current state.
It is rounded off with some practical suggestions on how to proceed today - to make the transition from Angular 1.x to Angular 2.x easier.
Original slides with animated gifs can be found here: https://docs.google.com/presentation/d/122ptcLESkfSw8omK9ekG8FksD_zvegGrqOL2GR5PE80/edit?usp=sharing
best angular js book/toturial provided by <a href="https://www.hopeseller.in/">hopeseller </a> this is best book to foer bignners to get knowledge about angular js
1> IMPORTANT PARTS OF ANGULARJS
2> Angular Js FEATURES
3> ADVANTAGES / DISADVANTAGES OF ANGULARJS
4> THE ANGULARJS COMPONENTS
5> MVC
6> STEPS TO CREATE ANGULARJS APP
Agenda:
1- Introduction: basic description and overview about what is angular and why we should use it.
2- AngularJS Core Features: key features of angularJS.
3- Guides and help: API and documentation references, in addition of online courses.
Angular js interview question answer for fresherRavi Bhadauria
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.
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.
this presentation serve as an introduction to Angular JavaScript framework and also touch on some basic modern JavaScript, front-end development basics.
angularjs_vs_angular_the_key_differences_between_javascript_and_typescript.pptxsarah david
The primary distinction between AngularJS and Angular is that AngularJS is built with JavaScript, whereas Angular is built with TypeScript. There are significant similarities between these two open-source front-end frameworks for creating dynamic web applications and SPAs. Let’s have a look at their differences as well.
Angular js 1.3 presentation for fed nov 2014Sarah Hudson
AngularJS is an up-and-coming JavaScript framework supported and maintained by Google. Over the past year, usage for the framework has exploded, giving many developers reason to believe it's the next big thing. In this presentation by Angular developer Sarah Hudson, you will learn the basics of what Angular is and what it can do for your projects, as well as breaking down the components of Angular, what makes it unique, and how it gives developers more control over custom templates and elements.
Sections include:
• Core structure and components of Angular, such as custom directives, factories for sharing data, two-way binding, and modules
• Companion libraries to Angular, such as the popular AngularUI suite which includes UI-Bootstrap
• A brief overview of routing options from Angular's native routing to UI Router, and how it offers flexibility for your apps
angularjs_vs_angular_the_key_differences_between_javascript_and_typescript.pptxsarah david
The primary distinction between AngularJS and Angular is that AngularJS is built with JavaScript, whereas Angular is built with TypeScript. There are significant similarities between these two open-source front-end frameworks for creating dynamic web applications and SPAs. Let’s have a look at their differences as well.
Through this blog you will get to know more about Angular and AngularJS framework and also the major differences between them.
Getting Started with Apache Spark (Scala)Knoldus Inc.
In this session, we are going to cover Apache Spark, the architecture of Apache Spark, Data Lineage, Direct Acyclic Graph(DAG), and many more concepts. Apache Spark is a multi-language engine for executing data engineering, data science, and machine learning on single-node machines or clusters.
Secure practices with dot net services.pptxKnoldus Inc.
Securing .NET services is paramount for protecting applications and data. Employing encryption, strong authentication, and adherence to best coding practices ensures resilience against potential threats, enhancing overall cybersecurity posture.
Distributed Cache with dot microservicesKnoldus Inc.
A distributed cache is a cache shared by multiple app servers, typically maintained as an external service to the app servers that access it. A distributed cache can improve the performance and scalability of an ASP.NET Core app, especially when the app is hosted by a cloud service or a server farm. Here we will look into implementation of Distributed Caching Strategy with Redis in Microservices Architecture focusing on cache synchronization, eviction policies, and cache consistency.
Introduction to gRPC Presentation (Java)Knoldus Inc.
gRPC, which stands for Remote Procedure Call, is an open-source framework developed by Google. It is designed for building efficient and scalable distributed systems. gRPC enables communication between client and server applications by defining a set of services and message types using Protocol Buffers (protobuf) as the interface definition language. gRPC provides a way for applications to call methods on a remote server as if they were local procedures, making it a powerful tool for building distributed and microservices-based architectures.
Using InfluxDB for real-time monitoring in JmeterKnoldus Inc.
Explore the integration of InfluxDB with JMeter for real-time performance monitoring. This session will cover setting up InfluxDB to capture JMeter metrics, configuring JMeter to send data to InfluxDB, and visualizing the results using Grafana. Learn how to leverage this powerful combination to gain real-time insights into your application's performance, enabling proactive issue detection and faster resolution.
Intoduction to KubeVela Presentation (DevOps)Knoldus Inc.
KubeVela is an open-source platform for modern application delivery and operation on Kubernetes. It is designed to simplify the deployment and management of applications in a Kubernetes environment. KubeVela is a modern software delivery platform that makes deploying and operating applications across today's hybrid, multi-cloud environments easier, faster and more reliable. KubeVela is infrastructure agnostic, programmable, yet most importantly, application-centric. It allows you to build powerful software, and deliver them anywhere!
Stakeholder Management (Project Management) PresentationKnoldus Inc.
A stakeholder is someone who has an interest in or who is affected by your project and its outcome. This may include both internal and external entities such as the members of the project team, project sponsors, executives, customers, suppliers, partners and the government. Stakeholder management is the process of managing the expectations and the requirements of these stakeholders.
Introduction To Kaniko (DevOps) PresentationKnoldus Inc.
Kaniko is an open-source tool developed by Google that enables building container images from a Dockerfile inside a Kubernetes cluster without requiring a Docker daemon. Kaniko executes each command in the Dockerfile in the user space using an executor image, which runs inside a container, such as a Kubernetes pod. This allows building container images in environments where the user doesn’t have root access, like a Kubernetes cluster.
Efficient Test Environments with Infrastructure as Code (IaC)Knoldus Inc.
In the rapidly evolving landscape of software development, the need for efficient and scalable test environments has become more critical than ever. This session, "Streamlining Development: Unlocking Efficiency through Infrastructure as Code (IaC) in Test Environments," is designed to provide an in-depth exploration of how leveraging IaC can revolutionize your testing processes and enhance overall development productivity.
Exploring Terramate DevOps (Presentation)Knoldus Inc.
Terramate is a code generator and orchestrator for Terraform that enhances Terraform's capabilities by adding features such as code generation, stacks, orchestration, change detection, globals, and more . It's primarily designed to help manage Terraform code at scale more efficiently . Terramate is particularly useful for managing multiple Terraform stacks, providing support for change detection and code generation 2. It allows you to create relationships between stacks to improve your understanding and control over your infrastructure . One of the key features of Terramate is its ability to detect changes at both the stack and module level. This capability allows you to identify which stacks and resources have been altered and selectively determine where you should execute commands.
Clean Code in Test Automation Differentiating Between the Good and the BadKnoldus Inc.
This session focuses on the principles of writing clean, maintainable, and efficient code in the context of test automation. The session will highlight the characteristics that distinguish good test automation code from bad, ultimately leading to more reliable and scalable testing frameworks.
Integrating AI Capabilities in Test AutomationKnoldus Inc.
Explore the integration of artificial intelligence in test automation. Understand how AI can enhance test planning, execution, and analysis, leading to more efficient and reliable testing processes. Explore the cutting-edge integration of Artificial Intelligence (AI) capabilities in Test Automation, a transformative approach shaping the future of software testing. This session will delve into practical applications, benefits, and considerations associated with infusing AI into test automation workflows.
State Management with NGXS in Angular.pptxKnoldus Inc.
NGXS is a state management pattern and library for Angular. NGXS acts as a single source of truth for your application's state - providing simple rules for predictable state mutations. In this session we will go through the main for components of NGXS -Store, Actions, State, and Select.
Authentication in Svelte using cookies.pptxKnoldus Inc.
Svelte streamlines authentication with cookies, offering a secure and seamless user experience. Effortlessly manage sessions by storing tokens in cookies, ensuring persistent logins. With Svelte's simplicity, implement robust authentication mechanisms, enhancing user security and interaction.
OAuth2 Implementation Presentation (Java)Knoldus Inc.
The OAuth 2.0 authorization framework is a protocol that allows a user to grant a third-party web site or application access to the user's protected resources, without necessarily revealing their long-term credentials or even their identity. It is commonly used in scenarios such as user authentication in web and mobile applications and enables a more secure and user-friendly authorization process.
Supply chain security with Kubeclarity.pptxKnoldus Inc.
Kube clarity is a comprehensive solution designed to enhance supply chain security within Kubernetes environments. Kube clarity enables organizations to identify and mitigate potential security threats throughout the software development and deployment process.
Mastering Web Scraping with JSoup Unlocking the Secrets of HTML ParsingKnoldus Inc.
In this session, we will delve into the world of web scraping with JSoup, an open-source Java library. Here we are going to learn how to parse HTML effectively, extract meaningful data, and navigate the Document Object Model (DOM) for powerful web scraping capabilities.
Akka gRPC Essentials A Hands-On IntroductionKnoldus Inc.
Dive into the fundamental aspects of Akka gRPC and learn to leverage its power in building compact and efficient distributed systems. This session aims to equip attendees with the essential skills and knowledge to leverage Akka and gRPC effectively in building robust, scalable, and distributed applications.
Entity Core with Core Microservices.pptxKnoldus Inc.
How Developers can use Entity framework(ORM) which provides a structured and consistent way for microservices to interact with their respective database, prompting independence, scaliblity and maintainiblity in a distributed system, and also provide a high-level abstraction for data access.
Introduction to Redis and its features.pptxKnoldus Inc.
Join us for an interactive session where we'll cover the fundamentals of Redis, practical use cases, and best practices for incorporating Redis into your projects. Whether you're a developer, architect, or system administrator, this session will equip you with the knowledge to harness the full potential of Redis for your applications. Get ready to elevate your understanding of in-memory data storage and revolutionize the way you handle data in your projects with Redis
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
2. Agenda
1. What is AngularJs?
2. Key Points
3. Core Features of AngularJS
4. How it works?
5. AngularJs Terminologies
6. AngularJs directives
7. How we start work on AngularJs?
8. AngularJs Tags
9. How we Yeoman?
10. Advantages and Disadvantages
3. What is Angular?
AngularJS is an open-source JavaScript framework,
maintained by Google, that assists with running single-page
applications. Its goal is to augment browser-based applications
with model–view–controller (MVC) capability, in an effort to
make both development and testing easier.
4. Key points of AngularJs
1. AngularJS is a client-side JavaScript framework used to
make single-page web applications
It means the browser only loads the page once, but then makes asynchronous
calls to the server to fetch new information
2. It helps you build front-ends for web-based applications
3. Makes creating a user interface (UI) easier through data-binding
4. It helps organize and architect an application means it is
prescribing a way for you to divide your application up into
smaller parts.
5. It runs in the web browser.
6. Core Features of AngularJS ...
2. Model View Controller
MVC is a pattern for dividing an application into different parts (called Model, View,
and Controller), each with distinct responsibilities.
7. Core Features of AngularJS ...
3 .HTML Templates Deep Linking
Dynamic Data
Static HTML
Final HTML
8. Core Features of AngularJS ...
4 .Deep Linking
Deep linking allows you to encode the state of the application in the
URL so that it can be bookmarked and the application can be restored
from the URL to the same state.
5 .Dependency Injection Directives
10. How it works? ...
1. The browser loads the HTML and parses it into a DOM
2. The browser loads angular.js script
3. Angular waits for DOMContentLoaded event
4. Angular looks for ng-app directive, which designates the application boundary
5. The Module specified in ng-app (if any) is used to configure the $injector
6. The $injector is used to create the $compile service as well as $rootScope
7. The $compile service is used to compile the DOM and link it with $rootScope
8. The ng-init directive assigns World to the name property on the scope
9. The {{name}} interpolates the expression to Hello World!
13. AngularJs Terminologies ...
3. View
The view is what the users sees. The view begins its life as a template,
it is merged with the model and finally rendered into the browser
DOM.
14. AngularJs Terminologies ...
4. Scope
The scope is responsible for detecting changes to the model
section and provides the execution context for expressions.
5. Directives
A directive is a behavior or DOM transformation which is
triggered by the presence of a custom attribute, element name,
or a class name.
6. Filters
Filters perform data transformation. Typically they are used in
conjunction with the locale to format the data in locale specific
output.
15. AngularJs directives
ng-app
Declares an element as a root element of the application allowing behavior to be modified through custom
HTML tags.
ng-bind
Automatically changes the text of a HTML element to the value of a given expression.
ng-model
Similar to ng-bind, but allows two-way data binding between the view and the scope.
ng-class
Allows class attributes to be dynamically loaded.
ng-controller
Specifies a JavaScript controller class that evaluates HTML expressions.
ng-repeat
Instantiate an element once per item from a collection.
ng-show & ng-hide
Conditionally show or hide an element, depending on the value of a boolean expression.
ng-switch
Conditionally instantiate one template from a set of choices, depending on the value of a selection
expression.
ng-view
The base directive responsible for handling routes that resolve JSON before rendering templates driven by
specified controllers.
ng-if
Basic if statement directive which allow to show the following element if the conditions are true.
16. How to use AngularJs
1. Include AngularJs Library
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js
"></script>
2. Create AngularJs Application
<html ng-app></html>
Or
<html ng-app=”demoApp”></html>
Or
<div ng-app></div>
Or
<div ng-app=”demoApp”></div>
3. Define Controller:
<div ng-controller="Ctrl">
<input type="text" ng-model="message">
</div>
4. Implementation of Controller
Function Ctrl($scope){
$scope.message=”Hello.Please Enter your name”;
}
18. How we begin?
We need a development setup e.g. Server
Task Runner
Test Runner
CoffeeScript / SASS transpiler
Dependency Management
Yeoman
Yo is used to generate things, from other generators to files and more.
Grunt is used for task management such as building, previewing and testing.
Bower: is used for dependency management, downloading and installing .js
components.
19. How we begin?
We need a development setup e.g. Server
Task Runner
Test Runner
CoffeeScript / SASS transpiler
Dependency Management
Yeoman
Yo is used to generate things, from other generators to files and more.
Grunt is used for task management such as building, previewing and testing.
Bower: is used for dependency management, downloading and installing .js
components.
21. Steps to create app
1.Installing Yeoman
To install yo, grunt, and bower, execute the following command:
$ npm install -g yo grunt-cli bower
2.Installing Generators
$npm install -g generator-angular
3.Creating the project
$ mkdir knolx-angularjs && cd knolx-angularjs
Now we are ready to use the available generators to build our application:
angular:app, angular:controller, angular:directive,angular:filter,angular:route
angular:service,angular:view
4.Creating application structure
$ yo angular:app knolxAngularApp
23. Steps to create app..
5.Running the project
To start the local web server run the following command:
$grunt server
6.Testing the project Grunt takes care of running all of your tests using Karma, so
execute the following command:
$ grunt test
7.Building the Project
7.1 .Concatenates all your JS into one file.
7.2 Versions all your files.
7.3 Optimizes all images and HTML templates.
7.4 Concatenates all your CSS into one file.
7.5 Generates Application Cache manifest file.
7.6 Building your application is easy – just run the following command:
$ grunt build