Angular is a framework for building client applications in HTML, CSS and TypeScript. It provides best practices like modularity, separation of concerns and testability for client-side development. The document discusses creating an Angular project, generating components, binding data, using directives, communicating with backend services, routing between components and building for production. Key steps include generating components, services and modules, binding data, calling REST APIs, defining routes and building the app.
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 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.
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.,
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 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.
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.,
In this comprehensive guide, Angular is described as a one-stop solution for front-end development. Learn everything there is to know about Angular, including how it works, why, and the benefits.
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.
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.
An Open-Source JavaScript Framework
It’s used to build Single Page based Web Application (SPA)
Developed by Google,
Release date March 2017,
Current version 4.4.6 (stable).
Welcome to presentation on Spring boot which is really great and relatively a new project from Spring.io. Its aim is to simplify creating new spring framework based projects and unify their configurations by applying some conventions. This convention over configuration is already successfully applied in so called modern web based frameworks like Grails, Django, Play framework, Rails etc.
In this comprehensive guide, Angular is described as a one-stop solution for front-end development. Learn everything there is to know about Angular, including how it works, why, and the benefits.
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.
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.
An Open-Source JavaScript Framework
It’s used to build Single Page based Web Application (SPA)
Developed by Google,
Release date March 2017,
Current version 4.4.6 (stable).
Welcome to presentation on Spring boot which is really great and relatively a new project from Spring.io. Its aim is to simplify creating new spring framework based projects and unify their configurations by applying some conventions. This convention over configuration is already successfully applied in so called modern web based frameworks like Grails, Django, Play framework, Rails etc.
Introduction to angular | Concepts and Environment setupAnsley Rodrigues
Presentation explaining the concepts and theory of Angular2 framework for front-end development of web applications(Compent, template, Dependency Injection, Services, Component interaction, Directives, Data Binding, etc).
A live demo example helps to understand the concepts better.
Mastering Angular Training program will enable you to build modern and interactive web applications by using Angular best practices. Our Angular Training program covers Angular fundamentals like modules, components, Data binding, Directive, Services, Reactive Forms, Component level communication using Services and Dependency Injection (DI).
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.
Creating Modular Test-Driven SPAs with Spring and AngularJSGunnar Hillert
Single-page Applications (SPA) are all the rage these days and with them there is an avalanche of new tools, libraries and frameworks we need to know. But what does this mean for us as Spring developers? In this session we will give you an overview of the current landscape and illustrate the choices the Spring XD team has made for its user interface. What do I use to write SPA applications? How do I integrate them into existing Spring-based backends? How do I build them? Can I integrate them into my existing Gradle or Maven build processes in order to achieve complete build automation? How do I integrate realtime messaging using Spring's SockJS/WebSocket support? In this talk we will answer these and many more questions. We will cover frameworks such as AngularJS, Bootstrap, RequireJS; tools like Bower, Grunt, Gulp; and also talk about testing using Karma and Protractor.
What happens when two third-party Angular modules export a service with the same name? How do you access scope or dependency injection from a third-party control? How can you always ensure asynchronous code is executed within a digest loop without having to check? Should you store commonly referenced variables in $rootScope or a service? How do you ensure promises are resolved before your controller is invoked? In this talk, Jeremy Likness covers advanced tips, tricks, and techniques for building Angular apps. Based on his hands-on experience building large scale enterprise Angular applications with distributed teams of over 20 developers authoring hundreds of services, controllers, filters, and directives across tens of thousands of lines of code, Jeremy shares common problems and straightforward solutions.
Discussion on angular offering, approaches to integrate web worker in angular (5 and 6) application, their pros and cons. A sample example implementation using custom web worker approach and integrating the same with CLI(1 and 6) and the application.
Sitecore development approach evolution – destination helixPeter Nazarov
Sitecore Development Approach Evolution – Destination Helix
Sitecore officially recommended Helix as a set of overall design principles and conventions for Sitecore development around 18 month ago at SUGCON 2016 alongside with an official implementation example - Habitat. Why was it necessary? What are the benefits? Has it worked in practice? Peter Nazarov will share the outlook on why and how a combination of Sitecore Helix and Habitat benefits the business and development users of Sitecore in practice.
Angular 6 Training with project in hyderabad indiaphp2ranjan
ngularJS is one of the JavaScript open-source web application frameworks which is generally used to add an HTML page along with a tag. The major aim of AngularJS is to simplify the application development and testing performance by providing a framework called MVC (Model View Controller) Architecture. It enables the application to change from bulk amount of programming code into a simple code.
A Deep Dive into Continuous Integration Monitoring PracticesJadson Santos
One of the main activities in software development is monitoring, which plays a vital role in verifying the proper implementation of processes, identifying errors, and discovering opportunities for improvement. Continuous Integration (CI) covers a set of widely adopted practices that enhance software development. However, there are indications that developers may not adequately monitor all CI practices. In this thesis, we delve deep into the ocean of monitoring CI practices. Our goal is to discover how this monitoring is conducted, demonstrate the advantages of monitoring CI practices, and highlight the challenges that need to be overcome. We conducted a series of studies to analyze the impact of specific CI practices on the volume of Pull Requests and bug-related Issues, as well as the importance attributed to these practices by developers and the support for monitoring provided by the most popular CI tools. Finally, we evaluate monitoring in real-world scenarios, conducting a case study on three projects from three different organizations, where we investigate more deeply the developers' interest in monitoring CI practices, their benefits, challenges, and the evolution of CI practices over a two-month period.
In our first study, we analyze the impact of specific CI practices on the volume of Pull Requests and bug-related Issues. Our findings revealed a positive correlation between CI practices and the increase in the number of merged pull requests. We also identified a significant correlation between the number of bug-related issues and the number of bugs. Additionally, our findings suggest that higher values of CI practices can indicate better quality in the development process.
In our second study, we investigate the importance attributed to these practices by developers and the support for monitoring provided by the most popular CI services. We find that developers usually monitor only code coverage and basic build metadata (e.g. build duration and build status). Developers expressed interest in monitoring CI practices if provided the opportunity. Furthermore, we have identified that several leading CI services still have initial support in monitoring CI practices.
Finally, we evaluate monitoring in real-world scenarios, conducting a case study on three projects from three different organizations, where we investigate more deeply the developers' interest in monitoring CI practices, their benefits, challenges, and the evolution of CI practices over a two-month period. The case study revealed that monitoring CI practices provides several benefits to the project and is cost-effective. Participants demonstrated a strong desire to integrate CI monitoring dashboards with popular CI services.
Conheça o Junit, Mockito e PowerMock, Frameworks que permitem você criar testes unitários para sistemas de informação. Até menos sistemas não foram pensados para testes.
Usando JMeter para testar sua aplicação JSFJadson Santos
Testes de performance são uns dos testes fundamentais que toda equipe de desenvolvimento com o mínimo de profissionalismo deveria executar.
Essa apresentação mostra um exemplo básico de com usar JMeter para realizar testes de performance em aplicações web com JSF.
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...Globus
Large Language Models (LLMs) are currently the center of attention in the tech world, particularly for their potential to advance research. In this presentation, we'll explore a straightforward and effective method for quickly initiating inference runs on supercomputers using the vLLM tool with Globus Compute, specifically on the Polaris system at ALCF. We'll begin by briefly discussing the popularity and applications of LLMs in various fields. Following this, we will introduce the vLLM tool, and explain how it integrates with Globus Compute to efficiently manage LLM operations on Polaris. Attendees will learn the practical aspects of setting up and remotely triggering LLMs from local machines, focusing on ease of use and efficiency. This talk is ideal for researchers and practitioners looking to leverage the power of LLMs in their work, offering a clear guide to harnessing supercomputing resources for quick and effective LLM inference.
Unleash Unlimited Potential with One-Time Purchase
BoxLang is more than just a language; it's a community. By choosing a Visionary License, you're not just investing in your success, you're actively contributing to the ongoing development and support of BoxLang.
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...Shahin Sheidaei
Games are powerful teaching tools, fostering hands-on engagement and fun. But they require careful consideration to succeed. Join me to explore factors in running and selecting games, ensuring they serve as effective teaching tools. Learn to maintain focus on learning objectives while playing, and how to measure the ROI of gaming in education. Discover strategies for pitching gaming to leadership. This session offers insights, tips, and examples for coaches, team leads, and enterprise leaders seeking to teach from simple to complex concepts.
Experience our free, in-depth three-part Tendenci Platform Corporate Membership Management workshop series! In Session 1 on May 14th, 2024, we began with an Introduction and Setup, mastering the configuration of your Corporate Membership Module settings to establish membership types, applications, and more. Then, on May 16th, 2024, in Session 2, we focused on binding individual members to a Corporate Membership and Corporate Reps, teaching you how to add individual members and assign Corporate Representatives to manage dues, renewals, and associated members. Finally, on May 28th, 2024, in Session 3, we covered questions and concerns, addressing any queries or issues you may have.
For more Tendenci AMS events, check out www.tendenci.com/events
Multiple Your Crypto Portfolio with the Innovative Features of Advanced Crypt...Hivelance Technology
Cryptocurrency trading bots are computer programs designed to automate buying, selling, and managing cryptocurrency transactions. These bots utilize advanced algorithms and machine learning techniques to analyze market data, identify trading opportunities, and execute trades on behalf of their users. By automating the decision-making process, crypto trading bots can react to market changes faster than human traders
Hivelance, a leading provider of cryptocurrency trading bot development services, stands out as the premier choice for crypto traders and developers. Hivelance boasts a team of seasoned cryptocurrency experts and software engineers who deeply understand the crypto market and the latest trends in automated trading, Hivelance leverages the latest technologies and tools in the industry, including advanced AI and machine learning algorithms, to create highly efficient and adaptable crypto trading bots
How to Position Your Globus Data Portal for Success Ten Good PracticesGlobus
Science gateways allow science and engineering communities to access shared data, software, computing services, and instruments. Science gateways have gained a lot of traction in the last twenty years, as evidenced by projects such as the Science Gateways Community Institute (SGCI) and the Center of Excellence on Science Gateways (SGX3) in the US, The Australian Research Data Commons (ARDC) and its platforms in Australia, and the projects around Virtual Research Environments in Europe. A few mature frameworks have evolved with their different strengths and foci and have been taken up by a larger community such as the Globus Data Portal, Hubzero, Tapis, and Galaxy. However, even when gateways are built on successful frameworks, they continue to face the challenges of ongoing maintenance costs and how to meet the ever-expanding needs of the community they serve with enhanced features. It is not uncommon that gateways with compelling use cases are nonetheless unable to get past the prototype phase and become a full production service, or if they do, they don't survive more than a couple of years. While there is no guaranteed pathway to success, it seems likely that for any gateway there is a need for a strong community and/or solid funding streams to create and sustain its success. With over twenty years of examples to draw from, this presentation goes into detail for ten factors common to successful and enduring gateways that effectively serve as best practices for any new or developing gateway.
Enhancing Research Orchestration Capabilities at ORNL.pdfGlobus
Cross-facility research orchestration comes with ever-changing constraints regarding the availability and suitability of various compute and data resources. In short, a flexible data and processing fabric is needed to enable the dynamic redirection of data and compute tasks throughout the lifecycle of an experiment. In this talk, we illustrate how we easily leveraged Globus services to instrument the ACE research testbed at the Oak Ridge Leadership Computing Facility with flexible data and task orchestration capabilities.
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...Globus
The Earth System Grid Federation (ESGF) is a global network of data servers that archives and distributes the planet’s largest collection of Earth system model output for thousands of climate and environmental scientists worldwide. Many of these petabyte-scale data archives are located in proximity to large high-performance computing (HPC) or cloud computing resources, but the primary workflow for data users consists of transferring data, and applying computations on a different system. As a part of the ESGF 2.0 US project (funded by the United States Department of Energy Office of Science), we developed pre-defined data workflows, which can be run on-demand, capable of applying many data reduction and data analysis to the large ESGF data archives, transferring only the resultant analysis (ex. visualizations, smaller data files). In this talk, we will showcase a few of these workflows, highlighting how Globus Flows can be used for petabyte-scale climate analysis.
Advanced Flow Concepts Every Developer Should KnowPeter Caitens
Tim Combridge from Sensible Giraffe and Salesforce Ben presents some important tips that all developers should know when dealing with Flows in Salesforce.
Software Engineering, Software Consulting, Tech Lead.
Spring Boot, Spring Cloud, Spring Core, Spring JDBC, Spring Security,
Spring Transaction, Spring MVC,
Log4j, REST/SOAP WEB-SERVICES.
Designing for Privacy in Amazon Web ServicesKrzysztofKkol1
Data privacy is one of the most critical issues that businesses face. This presentation shares insights on the principles and best practices for ensuring the resilience and security of your workload.
Drawing on a real-life project from the HR industry, the various challenges will be demonstrated: data protection, self-healing, business continuity, security, and transparency of data processing. This systematized approach allowed to create a secure AWS cloud infrastructure that not only met strict compliance rules but also exceeded the client's expectations.
Understanding Globus Data Transfers with NetSageGlobus
NetSage is an open privacy-aware network measurement, analysis, and visualization service designed to help end-users visualize and reason about large data transfers. NetSage traditionally has used a combination of passive measurements, including SNMP and flow data, as well as active measurements, mainly perfSONAR, to provide longitudinal network performance data visualization. It has been deployed by dozens of networks world wide, and is supported domestically by the Engagement and Performance Operations Center (EPOC), NSF #2328479. We have recently expanded the NetSage data sources to include logs for Globus data transfers, following the same privacy-preserving approach as for Flow data. Using the logs for the Texas Advanced Computing Center (TACC) as an example, this talk will walk through several different example use cases that NetSage can answer, including: Who is using Globus to share data with my institution, and what kind of performance are they able to achieve? How many transfers has Globus supported for us? Which sites are we sharing the most data with, and how is that changing over time? How is my site using Globus to move data internally, and what kind of performance do we see for those transfers? What percentage of data transfers at my institution used Globus, and how did the overall data transfer performance compare to the Globus users?
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus
As part of the DOE Integrated Research Infrastructure (IRI) program, NERSC at Lawrence Berkeley National Lab and ALCF at Argonne National Lab are working closely with General Atomics on accelerating the computing requirements of the DIII-D experiment. As part of the work the team is investigating ways to speedup the time to solution for many different parts of the DIII-D workflow including how they run jobs on HPC systems. One of these routes is looking at Globus Compute as a way to replace the current method for managing tasks and we describe a brief proof of concept showing how Globus Compute could help to schedule jobs and be a tool to connect compute at different facilities.
top nidhi software solution freedownloadvrstrong314
This presentation emphasizes the importance of data security and legal compliance for Nidhi companies in India. It highlights how online Nidhi software solutions, like Vector Nidhi Software, offer advanced features tailored to these needs. Key aspects include encryption, access controls, and audit trails to ensure data security. The software complies with regulatory guidelines from the MCA and RBI and adheres to Nidhi Rules, 2014. With customizable, user-friendly interfaces and real-time features, these Nidhi software solutions enhance efficiency, support growth, and provide exceptional member services. The presentation concludes with contact information for further inquiries.
Into the Box Keynote Day 2: Unveiling amazing updates and announcements for modern CFML developers! Get ready for exciting releases and updates on Ortus tools and products. Stay tuned for cutting-edge innovations designed to boost your productivity.
Developing Distributed High-performance Computing Capabilities of an Open Sci...Globus
COVID-19 had an unprecedented impact on scientific collaboration. The pandemic and its broad response from the scientific community has forged new relationships among public health practitioners, mathematical modelers, and scientific computing specialists, while revealing critical gaps in exploiting advanced computing systems to support urgent decision making. Informed by our team’s work in applying high-performance computing in support of public health decision makers during the COVID-19 pandemic, we present how Globus technologies are enabling the development of an open science platform for robust epidemic analysis, with the goal of collaborative, secure, distributed, on-demand, and fast time-to-solution analyses to support public health.
In software engineering, the right architecture is essential for robust, scalable platforms. Wix has undergone a pivotal shift from event sourcing to a CRUD-based model for its microservices. This talk will chart the course of this pivotal journey.
Event sourcing, which records state changes as immutable events, provided robust auditing and "time travel" debugging for Wix Stores' microservices. Despite its benefits, the complexity it introduced in state management slowed development. Wix responded by adopting a simpler, unified CRUD model. This talk will explore the challenges of event sourcing and the advantages of Wix's new "CRUD on steroids" approach, which streamlines API integration and domain event management while preserving data integrity and system resilience.
Participants will gain valuable insights into Wix's strategies for ensuring atomicity in database updates and event production, as well as caching, materialization, and performance optimization techniques within a distributed system.
Join us to discover how Wix has mastered the art of balancing simplicity and extensibility, and learn how the re-adoption of the modest CRUD has turbocharged their development velocity, resilience, and scalability in a high-growth environment.
Providing Globus Services to Users of JASMIN for Environmental Data AnalysisGlobus
JASMIN is the UK’s high-performance data analysis platform for environmental science, operated by STFC on behalf of the UK Natural Environment Research Council (NERC). In addition to its role in hosting the CEDA Archive (NERC’s long-term repository for climate, atmospheric science & Earth observation data in the UK), JASMIN provides a collaborative platform to a community of around 2,000 scientists in the UK and beyond, providing nearly 400 environmental science projects with working space, compute resources and tools to facilitate their work. High-performance data transfer into and out of JASMIN has always been a key feature, with many scientists bringing model outputs from supercomputers elsewhere in the UK, to analyse against observational or other model data in the CEDA Archive. A growing number of JASMIN users are now realising the benefits of using the Globus service to provide reliable and efficient data movement and other tasks in this and other contexts. Further use cases involve long-distance (intercontinental) transfers to and from JASMIN, and collecting results from a mobile atmospheric radar system, pushing data to JASMIN via a lightweight Globus deployment. We provide details of how Globus fits into our current infrastructure, our experience of the recent migration to GCSv5.4, and of our interest in developing use of the wider ecosystem of Globus services for the benefit of our user community.
Code reviews are vital for ensuring good code quality. They serve as one of our last lines of defense against bugs and subpar code reaching production.
Yet, they often turn into annoying tasks riddled with frustration, hostility, unclear feedback and lack of standards. How can we improve this crucial process?
In this session we will cover:
- The Art of Effective Code Reviews
- Streamlining the Review Process
- Elevating Reviews with Automated Tools
By the end of this presentation, you'll have the knowledge on how to organize and improve your code review proces
2. Angular Introduction
• Angular is a framework for building client
applications in HTML, CSS and TypeScript ( that
compiles to JavaScript ).
• It has changed the way we develop client side
applications, by providing the possibilities to
apply the best practices usually applied on server
side like modular programming, separation of
concerns, testability and many other, on client
side.
2Angular
6. Angular Introduction
• Service Oriented Front End Architecture - SOFEA
6Angular
HTTP Server
Services
Business Logic
and
Persistence
7. Angular Introduction
• SOFEA advantages
• Scalability (processing, stateless, caching)
• Interoperability (BaaS – Back-end as a Service, Web
and Mobile)
• Offline Applications
• Asynchronous development ( front-end x back-end)
7Angular
8. Angular Introduction
• Angular uses the concept of Single Page
Application (SPA)
• SPA is not an application of a unique html file but a fully
contained applications in the browser that do not need
to make requests for new pages on the server.
• Usually SPA makes request just of the data that will be
show inside of the pages ( accessing back end
REST+JSON services)
8Angular
9. Angular Introduction
• Single Page Application Advantages:
• Faster, eliminate the download of html, js and css code
in each request
• Possibility to create off line applications
9Angular
11. Angular Install the Environment
• ATOM : Text editor (or any other that you prefer)
• Node.js + npm: dependence management (npm
~= gradle/maven in java world)
• Angular CLI: Command Line Interfaces for
angular
• TypeScript: The language of angular 2
11Angular
12. Angular Install the Environment
• Download and install Aton (https://atom.io/)
12Angular
23. Angular Creating Components
• Angular is based on components.
• There is already the main component called
app.component that shows the “Wellcome to App” page
when you access localhost:4200
23Angular
24. Angular Creating Components
• Angular component have 3 basics parts.
• name-component.html (the html code of component)
• name-component.css (css style of component)
• name-component.ts (the typescritp of component)
24Angular
25. Angular Creating Components
• Our application will have 3 components
• Let's create then with ng g c name Angular CLI
command
25Angular
Header
Home
Footer
30. Angular Creating Components
• Each component has a selector in the typescript
class that identify the component
30Angular
31. Angular Creating Components
• So, let’s erase the content of the template
app.component.html file and put our components
selectors in the order of the components will be
shown
31Angular
34. Angular Project Look and Feel
• Now let’s install bootstrap in our project to make
view pretty
• To install new angular external modules use npm
npm install bootstrap@3 jquery --save
• This installs Bootstrap and jQuery into the
node_modules folder within the project directory
34Angular
35. Angular Project Look and Feel
• When we are development a web application with
bootstrap and jquery we need to include its .css
and .js files in our html pages.
• We can do this with angular, but usually angular
has a file .angular-cli.json where we can include
the .css and .javascript code that we will use in
our project
35Angular
36. Angular Project Look and Feel
• Open the .angular-cli.json file and add the css
and js files of bootstrap and jQuery inside slyles
and scripts arrays.
36Angular
37. Angular Project Look and Feel
• Now we can open the home component template
(html file) and use some bootstrap css class
37Angular
38. Angular Project Look and Feel
• The page will use bootstrap css style:
38Angular
39. Angular Project Look and Feel
• We can also use bootstrap templates in our
project
• Angular projects have a assets folder that we
can use to put static files, like images, html
templates, etc..
• Let’s use in our project the SB Admin 2 bootstrap
theme (https://startbootstrap.com/template-
overviews/sb-admin-2/)
39Angular
40. Angular Project Look and Feel
• Adding the SB Admin 2 bootstrap theme
• Download it
40Angular
41. Angular Project Look and Feel
• Adding the SB Admin 2 bootstrap theme
• Copy it content to the assets directory
41Angular
42. Angular Project Look and Feel
• Adding the SB Admin 2 bootstrap theme
• Add its js and css files in the .angular-cli.json file
42Angular
43. Angular Project Look and Feel
• Adding the SB Admin 2 bootstrap theme
• Now we can use SB Admin 2 elements in the angular
components html files
43Angular
45. Angular Data Binding
• Interpolation
• Allows us to read primitive or object values from
component properties in the template (html file)
45Angular
46. Angular Data Binding
• Property Binding
• Angular executes the expression and assigns it to a
property of an HTML element, a component, or a
directive.
46Angular
47. Angular Data Binding
• Event Binding
• A component method responds to an event raised by an
element, component, or directive.
47Angular
48. Angular Data Binding
• Two-Way Data Binding
• Its takes a combination of setting a specific element
property and listening for an element change event.
48Angular
49. Angular Data Binding
• Two-Way Data Binding
• You can use a property + event binding
• Or [ ( ) ] syntax
49Angular
52. Angular Directives
• Attribute Directives and Structural Directives
• Attribute Directives: changes the appearance or
behavior of a DOM element
• Structural Directives: Change the DOM's structure,
typically by adding, removing, or manipulating elements.
52Angular
57. Angular Communicate with back end
• To communication with back end angular uses
the concept of “services”
• Creating a new service
• cd src/app/home
• ng g s home
• This create inside of home
• folder the home.service.ts
• file
57Angular
58. Angular Communicate with back end
• In the HomeService
• import the HttpClient from “@angular/commum/http”
• Inject it by constructor
• Create a method getScearios()
• In the method getScenarios() call the get method
passing the URL of the service
• This call a REST service in the backend that will return a
array of scenarios using json.
58Angular
61. Angular Communicate with back end
• In the HomeComponent
• import the HttpService from ./home.service
• Inject it by constructor
• Create a method scenariosList() that call the
getScearios() from the service
• On the ngOnInit() method call the scenariosList(),
when the home component is create (the html code is
show)
• ngOnInit() -> sceneariosList() -> getScenarios()
61Angular
64. Angular Communicate with back end
• In app module (app.module.ts file)
• import the HttpClientModule and the HomeService
• add HttpClientModule in imports[] arrays and
HomeService in providers[] array
64Angular
66. Angular Communicate with back end
• In the back end you can use any technology
• We create a RestFul Web Service using Spring
that return a list of ScenarioDTO objects
66Angular
68. Angular Communicate with back end
• The Scenario[] arrays return by getScenarios()
method of HomeService will have fields with the
same name of ScenarioDTO return by back end.
68Angular
69. Angular Communicate with back end
• Now on the front end, you can iterate over the
array on the home template (.html file) using
ngFor directive and access the fields defined on
back end.
69Angular
70. Angular Communicate with back end
• Now on the front end, you can iterate over the
array on the home template (.html file) using
ngFor directive and access the fields defined on
back end.
70Angular
72. Angular Routes
• Routes is a functionally that helps your
application to become a Single Page Application
• It redirect the user to another component without
reload the page or call the back end.
72Angular
73. Angular Routes
• We create 2 new components charts and
scenarios
• And a new file app.routing.ts
73Angular
74. Angular Routes
• In the file app.routing.ts we will declare the root
routes of our application
74Angular
75. Angular Routes
• Declare a appRoutes variable of the type Routes
that is a array with two fields: the path and the
component
• When access one path the application will
redirect for the component
75Angular
78. Angular Routes
• Now we have to indicate where the html code of
component will be drawn in our application
• We will indicate this with router-outlet tag.
• We put this tag on the app.component.html
78Angular
79. Angular Routes
• In the Home component we will let just the
common code.
• When the user access the path “/scenarios”, the
code of ScenariosComponent will be rendered in
app.component.html
• When the user access the path “/charts”, the
code of ChartsComponent will be rendered in
app.component.html.
79Angular
85. Angular Versioning the Project
• Angular/cli automatically create a .gitignore file
that ignore the node_modules directory
85Angular
86. Angular Versioning the Project
• This happens because this directory contains all
dependence of project and is very big.
• When you clone a angular project ( that should
not contains the node_modules), you can restore
it with the command npm install.
• git clone url_to_my_project
• cd project_directory
• npm install
• ng server
86Angular
88. Angular Environment Variables
• You can manage different environments
• Angular create under src directory, a directory
named environments, where you can configure
global constants
88Angular
89. Angular Environment Variables
• Define the environments that you will have in
environments array in .angular-cli.json file:
89Angular
90. Angular Environment Variables
• environment.ts is default environment
• You can specify the environment on the moment
of the build
• ng build --env=test
• This is very useful to define the api url.
90Angular
93. Angular Build to Production
• Edit the index.html to set the <base href>
appropriately with the context of the application,
ending with “/”.
93Angular
94. Angular Build to Production
• To build the project to production, we use this
command:
ng build --prod --env=prod
• The prod option will minify all files and do another cool
things to format the files do production.
• The env option will build the correct environment file to
use
94Angular
95. Angular Build to Production
• The build will generated a dist directory
95Angular
96. Angular Build to Production
• Rename the dist directory as application context
name (same name of base href in index.html)
• Copy the directory put inside a HTTP Server
(apache, tomcat, etc)
96Angular
98. Angular Commands Summary
98Angular
• ng new name (create a new project)
• npm install (download all dependences and restore
node_modules directory)
• ng server (run the application for development
localhost:4200)
• ng g m name (generate a new module)
• ng g c name (generate a new component)
• ng g s name (generate a new server)
• ng build --prod --env=prod (build for production)
99. Angular Project Structure Overview
99Angular
Declaration of angular dependences
Configuration of your project
The code of our application
Contains all dependences
Git control Version
end to end tests
build output folder
100. Angular Project Structure (Inside src folder)
100Angular
index.html of our application
The icon of our application
configuration to different environments (dev, test e prod)
Global CSS styles can be put here
Images and other things can be put here
Our code
101. Angular Project Structure (Inside app folder)
101Angular
The main component (mandatory)
Our specific components
The main model (mandatory)