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 AngularJS
AngularJS main components
View / Controller / Module / Scope
Scope Inheritance.
Two way data binding
$watch / $digest / $apply
Dirty Checking
DI - Dependence Injection
$provider vs $factory vs $service
Http Service will help us fetch external data, post to it, etc. We need to import the http module to make use of the http service. Let us consider an example to understand how to make use of the http service.
A directive is a custom HTML element that is used to extend the power of HTML. Angular 2 has the following directives that get called as part of the BrowserModule module.
ngif
ngFor
If you view the app.module.ts file, you will see the following code and the BrowserModule module defined. By defining this module, you will have access to the 2 directives.
Presentation about new Angular 9.
It gives introduction about angular framework.
Provides information about why we use angular,
additional features and fixes from old versions. It will clearly explain how to create a new angular project and how to use angular commands and their usages.
It will also explain about the key components like angular architecture, routing, dependency injection etc.,
What is AngularJS
AngularJS main components
View / Controller / Module / Scope
Scope Inheritance.
Two way data binding
$watch / $digest / $apply
Dirty Checking
DI - Dependence Injection
$provider vs $factory vs $service
Http Service will help us fetch external data, post to it, etc. We need to import the http module to make use of the http service. Let us consider an example to understand how to make use of the http service.
A directive is a custom HTML element that is used to extend the power of HTML. Angular 2 has the following directives that get called as part of the BrowserModule module.
ngif
ngFor
If you view the app.module.ts file, you will see the following code and the BrowserModule module defined. By defining this module, you will have access to the 2 directives.
Presentation about new Angular 9.
It gives introduction about angular framework.
Provides information about why we use angular,
additional features and fixes from old versions. It will clearly explain how to create a new angular project and how to use angular commands and their usages.
It will also explain about the key components like angular architecture, routing, dependency injection etc.,
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy
In Angular , events such as button click or any other sort of events can also be handled very easily. The events get triggered from the html page and are sent across to Angular JS class for further processing.
Data binding is a core concept in Angular and allows to define communication between a component and the DOM, making it very easy to define interactive applications without worrying about pushing and pulling data. There are four forms of data binding and they differ in the way the data is flowing.
Introduction to angular with a simple but complete projectJadson Santos
A simple front end project with angular. Its show how to create your first components, include bootstrap templates, create routes and build the project to production.
A simple tutorial for understanding the basics of angular JS. Very useful for the beginners. Also useful for the quick revision. Very attractive design for the tutorial of angular js.
This Edureka "Angular Directives" tutorial will help you to learn about different directives in Angular 2. Below are the topics covered in this tutorial:
1) Why we need Angular Directive?
2) What is Angular Directive?
3) Types of Angular Directive
4) Built-in Angular Directives
5) Working with Custom Angular Directives
Subscribe to our channel to get updates. Check our complete Angular playlist here: https://goo.gl/09KsDC
Introduction to the Spring Framework:
Generar description
IoC container
Dependency Injection
Beans scope and lifecycle
Autowiring
XML and annotation based configuration
Additional features
In this Java Spring Training session, you will learn Spring – Inversion of Control, Dependency Injection and Bean definitions. Topics covered in this session are:
For more information, visit this link:
Spring Framework
• Core Container
• Data Access/Integration
• Web Layer
• Spring Setup
• Key features
• Spring Bean
• Dependency Injection
• Relation between DI and IoC
• Spring IoC Containers
• Spring DI
https://www.mindsmapped.com/courses/software-development/spring-fundamentals-learn-spring-framework-and-spring-boot/
Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.
Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template.
A component must belong to an NgModule in order for it to be available to another component or application. To make it a member of an NgModule, list it in the declarations field of the NgModule metadata.
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy
In Angular , events such as button click or any other sort of events can also be handled very easily. The events get triggered from the html page and are sent across to Angular JS class for further processing.
Data binding is a core concept in Angular and allows to define communication between a component and the DOM, making it very easy to define interactive applications without worrying about pushing and pulling data. There are four forms of data binding and they differ in the way the data is flowing.
Introduction to angular with a simple but complete projectJadson Santos
A simple front end project with angular. Its show how to create your first components, include bootstrap templates, create routes and build the project to production.
A simple tutorial for understanding the basics of angular JS. Very useful for the beginners. Also useful for the quick revision. Very attractive design for the tutorial of angular js.
This Edureka "Angular Directives" tutorial will help you to learn about different directives in Angular 2. Below are the topics covered in this tutorial:
1) Why we need Angular Directive?
2) What is Angular Directive?
3) Types of Angular Directive
4) Built-in Angular Directives
5) Working with Custom Angular Directives
Subscribe to our channel to get updates. Check our complete Angular playlist here: https://goo.gl/09KsDC
Introduction to the Spring Framework:
Generar description
IoC container
Dependency Injection
Beans scope and lifecycle
Autowiring
XML and annotation based configuration
Additional features
In this Java Spring Training session, you will learn Spring – Inversion of Control, Dependency Injection and Bean definitions. Topics covered in this session are:
For more information, visit this link:
Spring Framework
• Core Container
• Data Access/Integration
• Web Layer
• Spring Setup
• Key features
• Spring Bean
• Dependency Injection
• Relation between DI and IoC
• Spring IoC Containers
• Spring DI
https://www.mindsmapped.com/courses/software-development/spring-fundamentals-learn-spring-framework-and-spring-boot/
Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.
Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template.
A component must belong to an NgModule in order for it to be available to another component or application. To make it a member of an NgModule, list it in the declarations field of the NgModule metadata.
This meetup will bring us back to basics with a bootstrapping session on building an all Javascript web application on a MEAN Stack:
• MongoDB - NoSQL DB
• ExpressJS - Server Application Framework
• AngularJS - Client Application Framework
• NodeJS - Application Platform
I'll cover the basics of getting bootstrapped with Node.js and building out a fully featured web application from backend-to-frontend. I'll highlight some of the advantages of an all javascript web application as well as show some development tips leveraging gruntJS based on Nate's presentation last meetup.
A Lecture given in Aalto University course "Design of WWW Services".
Single page app is already several years old web application paradigm that is now gaining traction due to the interest towards HTML5 and particularly cross-platform mobile (web) applications. The presentation overviews the single page application paradigm and compares it with other web app paradigms.
The presentation uses Backbone.js as the sample and gives practical tips on how to best structure Backbone.js applications. It contains an extensive set of tips and links in the notes section.
The reader is adviced to download the presentation for better readability of the notes.
MEAN Stack is a full-stack JavaScript solution that helps you build fast, robust and maintainable production web applications using MongoDB, Express, AngularJS, and Node.js.
AngularJS 1.3 is by far the best version of Angular available today. It was just released a few weeks ago. It's chock full of bug fixes, feature enhancements and performance improvements.
YouTube link: - https://youtu.be/bghVyCbxj6g
The SlideShare 101 is a quick start guide if you want to walk through the main features that the platform offers. This will keep getting updated as new features are launched.
The SlideShare 101 replaces the earlier "SlideShare Quick Tour".
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosLearnimtactics
AngularJs is next big thing. Have a read for making strong your skills in AngularJs. We are sharing with you basic model of angularjs, How it is work and what are his basics. Enjoy the information.
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.
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.
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. AngularJS'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.
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 training - Day 1 - Basics: Why, What and basic features of AngularJSmurtazahaveliwala
First part of AngularJS Training.
Covers details of AngularJs community and answers
- Why AngularJS ?
- What is AngularJS ?
- Getting started
- Basic Application layout and anatomies
- Data-binding, Existing Directives, Filters, Controllers
- Hosting on local (NodeJS) HTTPServer
Code samples available at
https://github.com/murtazahaveliwala/technext-angularjs-demo/tree/master/demos/static/angular-apps
Introduction to AngularJS By Bharat MakwanaBharat Makwana
In this presentation, you will find everything need to get started with AngularJS. We will walk through with architecture, core features, detailing of features.
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 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
Modern Web Application Development Workflow - EclipseCon France 2014Stéphane Bégaudeau
People often consider that creating a web application is done by creating a bunch of HTML, Javascript and CSS files in a text editor, putting them in a folder and uploading them on the web.
Well, things have changed and in this presentation, you will see how the workflow used to deliver web applications has evolved over the past few years and where the Eclipse Foundation's tools stand in this new world!
In this talk, we will start by having a look at all the new development tools that have appeared with the arrival of Node.js and how they are used by the web development community.
With tools like Bower used to manage the dependencies of a project, Grunt and Gulp used for the continuous integration and Yeoman used to kickstart web applications, web developers have dramatically increased their productivity.
After that, we will see what tools like the Eclipse IDE and Orion can offer to web developers in order to build and maintain their applications and finally how they could be improved to provide the features needed by web developers.
Modern Web Application Development Workflow - EclipseCon US 2014Stéphane Bégaudeau
People often consider that creating a web application is done by creating a bunch of HTML, Javascript and CSS files together in a text editor and uploading them on the web.
Well, things have changed and in this presentation, you will see how the workflow used to deliver web applications has evolved over the past few years!
We will start by seeing how you can use Yeoman and its generators to kickstart your project. Then you will see how Bower let you manage the dependencies of your project. Downloading the JavaScript and CSS frameworks that you are using for you. After that we will have a look at Chrome Devtools in order to debug and edit our application. We will also see how to use remote debugging to inspect a web application running on a phone or a tablet.
Finally we will see how you can set up your whole continuous integration workflow with Grunt. Compilation, static code analysis, unit tests, integration tests, minification, code coverage, you name it.
This talk has been presented during EclipseCon North America 2014 in San Francisco
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
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.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
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.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Let's dive deeper into the world of ODC! Ricardo Alves (OutSystems) will join us to tell all about the new Data Fabric. After that, Sezen de Bruijn (OutSystems) will get into the details on how to best design a sturdy architecture within ODC.
Search and Society: Reimagining Information Access for Radical FuturesBhaskar Mitra
The field of Information retrieval (IR) is currently undergoing a transformative shift, at least partly due to the emerging applications of generative AI to information access. In this talk, we will deliberate on the sociotechnical implications of generative AI for information access. We will argue that there is both a critical necessity and an exciting opportunity for the IR community to re-center our research agendas on societal needs while dismantling the artificial separation between the work on fairness, accountability, transparency, and ethics in IR and the rest of IR research. Instead of adopting a reactionary strategy of trying to mitigate potential social harms from emerging technologies, the community should aim to proactively set the research agenda for the kinds of systems we should build inspired by diverse explicitly stated sociotechnical imaginaries. The sociotechnical imaginaries that underpin the design and development of information access technologies needs to be explicitly articulated, and we need to develop theories of change in context of these diverse perspectives. Our guiding future imaginaries must be informed by other academic fields, such as democratic theory and critical theory, and should be co-developed with social science scholars, legal scholars, civil rights and social justice activists, and artists, among others.
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
4. Expressions
To create the views of your applications, you can use expressions within your HTML
● Javascript like code
● Used for small operations in the HTML page
Expressions are nice for small operations, for real applications, we have something more powerful
<div>1+1 = {{1+1}}</div>
6. Directives
Extends HTML to structure your application
● Declarative
● Use the data available in the scope (more on that later)
● Create the DOM of the fly
Let's have a look at an example: ngRepeat.
It iterates on a collection in the scope to create the DOM
<div>
<div ng-repeat="user in users">
<h3>{{user.name}}</h3>
<p>{{user.description}}</p>
</div>
</div>
7. Directives - ngRepeat
For each elements in the collection "users" a new <div> has been created with all its children
<div>
<div ng-repeat="user in users">
<h3>{{user.name}}</h3>
<p>{{user.description}}</p>
</div>
</div>
8. Directives - ngShow
AngularJS comes with a collection of standard directives that can be combined
ngShow let you hide elements that do not validate a given predicate
Here, the users that do not have the gender "female" have generated a hidden <div>
<div>
<div ng-repeat="user in users" ng-show="user.gender == 'female'">
<h3>{{user.name}}</h3>
<p>{{user.description}}</p>
</div>
</div>
9. Directives - ngSwitch
AngularJS also provides you with complex directives like ngSwitch
With those directives, you can create the basic structure of your web application easily
<div>
<div ng-repeat="user in users"
ng-show="user.gender == 'female'"
ng-switch="user.house">
<h3>{{user.name}}</h3>
<p>{{user.description}}</p>
Sigil:
<img src="images/targaryen.gif" ng-switch-when="Targaryen">
<img src="images/stark.gif" ng-switch-when="Stark">
<img src="images/lannister.gif" ng-switch-when="Lannister">
</div>
</div>
10. Directives
A final word on directives
● All the directives of the AngularJS standard library are named "ngMyAwesomeDirective"
● You can use them with "ng-my-awesome-directive"
● Some directives can be used as attributes, comments, DOM elements name or even CSS classes
And of course, you can create your own directives (we will create a very basic one later)
<div>
<div ng-my-awesome-directive></div>
<ng-my-awesome-directive></ng-my-awesome-directive>
<div class="ng-my-awesome-directive"></div>
<!-- directive: ng-my-awesome-directive -->
</div>
12. Data Binding
Angular gives you the ability to define the binding between the data in your scope and your views
● Most directives that are using expressions are creating a bidirectionnal data binding for you
● You can create manually new bindings with the directive ngModel
The changes are visible in real-time in all the expressions
<div>
<div ng-repeat="user in users">
<h3>{{user.name}}</h3>
<p>{{user.description}}</p>
Edit Description:
<textarea rows="5" cols="50" ng-model="user.description">
</div>
</div>
14. Filters - uppercase
Angular comes with a collection of filters that can change the way your data are displayed
● Usage: {{expression | filter}}
You can also easily create your own filters
<div>
<div ng-repeat="user in users">
<h3>{{user.name | uppercase}}</h3>
<p>{{user.description}}</p>
Edit Description:
<textarea rows="5" cols="50" ng-model="user.description">
</div>
</div>
16. Partial Views
Everything you need to build single page applications
● Angular handles the History management
● You can easily bind your views to the routes
All you need to do is
● Creates the page that will hold the structure of the application
● Bind the page to a specific AngularJS module thanks to ngApp
● Select where the views will be included with ngView
● Writes the different views
● Binds the view and the routes
17. Partial Views - ngView
● When the route changes, Angular will load the partial view in the DOM thanks to ngView
● The views can be created in other HTML files
● We will see later how we can bind a view to a route
<!DOCTYPE html>
<html>
<head><title>AngularJS</title></head>
<body ng-app="AngularJSModule">
<div ng-view>Loading...</div>
<!-- vendors -->
<script src="angular.min.js"></script>
<!-- modules -->
<script src="app.js"></script>
<!-- controllers -->
<script src="users.js"></script>
</body>
</html>
<div>
<div ng-repeat="user in users">
<h3>{{user.name | uppercase}}</h3>
<p>{{user.description}}</p>
</div>
</div>
index.html
users.html
19. Modules and ngApp
In AngularJS, applications are structured in modules
You can define a new module very easily thanks to the function "module'
You just have to declare the name of the module and an array containing the name of the
modules that you wre depending on
Inside of a module, you can create:
● controllers
● services
● filters
● directives
var angularJSModule = angular.module('AngularJSModule', []);
20. Modules and ngApp
Use ngApp, in order to tell Angular that a part of your application will be manage by a module
var angularJSModule = angular.module('AngularJSModule', []);
<!DOCTYPE html>
<html>
<head><title>AngularJS</title></head>
<body ng-app="AngularJSModule">
<div ng-view>Loading...</div>
<!-- vendors -->
<script src="angular.min.js"></script>
<!-- modules -->
<script src="app.js"></script>
<!-- controllers -->
<script src="users.js"></script>
</body>
</html>
index.html
app.js
22. Dependency Injection
In Angular, most of the operation of the framework are using dependency injection (DI)
For example, in order to configure the routes of your module, you will have to inject the service
$routeProvider in your configuration function.
All the components that you will create will specify their dependencies thanks to DI
This way, you will have a collection of small specialized components that can be easily tested
var angularJSModule = angular.module('AngularJSModule', []);
angularJSModule.config(function ($routeProvider) {
// do something
});
23. Dependency Injection
The basic way of doing dependency injection in Angular uses the name of the parameters of the
function
This solution will not work with the minification of the code
Each time you can use dependency injection in Angular, you can use this way instead
The string '$routeProvider' would not change with the minification of the code
var angularJSModule = angular.module('AngularJSModule', []);
angularJSModule.config(function ($routeProvider) {});
var angularJSModule = angular.module('AngularJSModule', []);
angularJSModule.config(['$routeProvider', function ($routeProvider) {}]);
25. Configure the module
In order to create the routes of your application, you will use the $routeProvider
If the end user visit the URL "http://www.ourdomain.com/#/users", the view "views/users.html"
will be injected in the page, otherwise the view "views/404.html" will loaded.
var angularJSModule = angular.module('AngularJSModule', []);
angularJSModule.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/users', {
templateUrl: 'views/users.html',
controller: 'UsersCtrl'
});
$routeProvider.otherwise({
templateUrl: 'views/404.html'
});
}]);
27. Controllers
In Angular, the controller is used to provide data for the view
In order to provide the data to the view, the controller can be injected with the scope of the view
In the module, we have binded the view, the route and the controller, so the controller can receive
the scope of the view when the route is modified
var angularJSModule = angular.module('AngularJSModule', []);
angularJSModule.controller('UsersCtrl', ['$scope', function ($scope) {
// do something
}]);
<div>
<div ng-repeat="user in users">
<h3>{{user.name}}</h3>
<p>{{user.description}}</p>
</div>
</div>
28. Controllers
var angularJSModule = angular.module('AngularJSModule', []);
angularJSModule.controller('UsersCtrl', ['$scope', function ($scope) {
$scope.users = [
{
name: 'Tyrion Lannister',
description: 'Youngest son of Loard Tywin',
gender: 'male',
house: 'Lannister',
}
];
}]);
<div>
<div ng-repeat="user in users">
<h3>{{user.name}}</h3>
<p>{{user.description}}</p>
Edit Description:
<textarea rows="5" cols="50" ng-model="user.description">
</div>
</div>
controller
view
result
30. Scope
The scope is used to link the controllers and the views to which they are binded.
A controller can add data and function in its scope and then they will be accessible in the view.
In our case, we have used in the view a variable named “users" which was created in the scope by
the controller “UsersCtrl".
A scope can have child scopes which can see the content of the parent scopes.
Each directive can create and manage its own scope.
The scope also comes with additional operations that can be quite useful to build your application
31. Scope - $watch
AngularJS provides the necessary tool to observe the changes on the data of the scope from the
controller.
With the operation "$watch", a controller can add a listener on an expression of the scope.
var angularJSModule = angular.module('AngularJSModule', []);
angularJSModule.controller('UsersCtrl', ['$scope', function ($scope) {
$scope.users = [];
$scope.$watch('users', function (newValue, oldValue) {
console.log('The value of "users" has changed');
}, true);
}]);
32. Scope - $broadcast and $on
AngularJS also gives you access to a system of events and listeners on the scope.
You can use the operation "$broadcast" in order to fire an event on a specific scope, then the
event will be transmitted to the selected scope and all its children. With $on, you can receive the
event.
If you want to send an event to the whole application, you can use the root scope by injected the
service $rootScope.
var angularJSModule = angular.module('AngularJSModule', []);
angularJSModule.controller('UsersCtrl', ['$scope', function ($scope) {
$scope.$on('AngularJSModule.Event', function () {
console.log('An event "AngularJSModule.Event" has been fired!');
});
$scope.$broadcast('AngularJSModule.Event');
}]);
34. Services
Controllers contains the data of the application that should be available to the view.
If you have some code that you want to re-use or that you want to separate from a controller, use
a service and inject it thanks to dependency injection.
Services can be injected into other services, filters, controllers or directives to build more complex
components.
var angularJSModule = angular.module('AngularJSModule', []);
angularJSModule.factory('UsersServer', [function () {
return {};
}]);
35. Services - public API
By using the function "factory", you can create your service and return it manually
You can then define the public API of your service and the private functions and variables
There are other ways to create your services but we won't see them here.
var angularJSModule = angular.module('AngularJSModule', []);
angularJSModule.factory('UsersServer', [function () {
var privateFunction = function () {};
var usersServer = {};
usersServer.publicFunction = function () {
privateFunction();
};
return usersServer;
}]);
37. Directives
Directives are insanely powerful in Angular but it is a bit complex to create an advanced directive.
I won't explain here all the options available to create a directive, but here is a simple example.
var angularJSModule = angular.module('AngularJSModule', []);
angularJSModule.directive('whereIsThePower, [function () {
return {
template: '<p>Power resides where men believe it resides. No more and no less</p>',
replace: true
};
}]);
<div where-is-the-power></div>
38. One more thing
You should never ever ever manipulate the
DOM from a controller!
respect the separation of concerns, the data in the controller, the behavior in the directives
it's easier to test and easier to maintain
39. Wrapping things up
As you have seen it during this presentation, Angular is a MVC framework with a strong opinion on
how things should be done. It helps you build an application
● testable with dependency injection
● maintainable with small specialized components
● with reusable components
● well architectured (data in controllers, behavior in the directives, utility stuff in services)
40. Frameworks, libraries and tools
If you want to build an Angular application, you should have a look at those tools too
● Batarang - chrome extension to debug Angular applications
● Bower - dependency management tooling for front end applications by Twitter
● Grunt - tasks management (minification, autoreload, SASS or CoffeeScript compilation)
● Yeoman - generate preconfigured kickass web applications
● Karma - Angular tests runner
● Angular-ui - collection of Angular directives (datepicker, Google Maps, Bootstrap)
● Restangular - improved Angular services for REST communication