Introduction to angular with a simple but complete project

Jadson Santos
Computing Engineer
Introduction to Angular
with a simple but complete project

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

• Evolution
3Angular

• Angular is oriented to develop the front end
uncoupled of the back end
4Angular

• Traditional WEB Architecture
5Angular
Web Page
Construction
Logic
Business Logic
and
Persistence

• Service Oriented Front End Architecture - SOFEA
6Angular
HTTP Server
Services
Business Logic
and
Persistence

• 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

• 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

• Single Page Application Advantages:
• Faster, eliminate the download of html, js and css code
in each request
• Possibility to create off line applications
9Angular

Angular Install the Environment
10Angular

• 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

• Download and install Aton (https://atom.io/)
12Angular

• Aton Plugins: Aton -> Settings -> Install
• atom-typescript
• file-icons
• angular-2-typeScript-snippets
13Angular

• Download and install Node.js (https://nodejs.org)
to have access to npm
14Angular

• After install npm, install typescript and angular cli
using the npm of node.js
• sudo npm intall –g typescript
• sudo npm intall –g @angular/cli
15Angular

16Angular
• Checking

Angular Create a new Project
17Angular

18Angular
• Create a new angular project
• ng new project_name

19Angular
• Open angular project in Atom

Angular Create the Project
• Running the project
• ng server inside of project folder
• open the browser on http://localhost:4200
20Angular

• Default Angular Page
21Angular

Angular Creating Components
22Angular

• 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

• 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

• Our application will have 3 components
• Let's create then with ng g c name Angular CLI
command
25Angular
Header
Home
Footer

• Create Angular components
• ng g c header
• ng g c home
• ng g c footer
26Angular

• Each component has a simple html page
27Angular

• A empty css file
28Angular

• And a typescript class
29Angular

• Each component has a selector in the typescript
class that identify the component
30Angular

• 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

• ng server to run the development angular server
32Angular

Angular Project Look and Feel
33Angular

• 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

• 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

• Open the .angular-cli.json file and add the css
and js files of bootstrap and jQuery inside slyles
and scripts arrays.
36Angular

• Now we can open the home component template
(html file) and use some bootstrap css class
37Angular

• The page will use bootstrap css style:
38Angular

• 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

• Adding the SB Admin 2 bootstrap theme
• Download it
40Angular

• Copy it content to the assets directory
41Angular

• Add its js and css files in the .angular-cli.json file
42Angular

• Now we can use SB Admin 2 elements in the angular
components html files
43Angular

Angular Data Binding
44Angular

• Interpolation
• Allows us to read primitive or object values from
component properties in the template (html file)
45Angular

• Property Binding
• Angular executes the expression and assigns it to a
property of an HTML element, a component, or a
directive.
46Angular

• Event Binding
• A component method responds to an event raised by an
element, component, or directive.
47Angular

• Two-Way Data Binding
• Its takes a combination of setting a specific element
property and listening for an element change event.
48Angular

• Two-Way Data Binding
• You can use a property + event binding
• Or [ ( ) ] syntax
49Angular

50Angular

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

Angular Directives
• ngIf
53Angular

Angular Directives
• ngFor
54Angular

Angular Communicate with back end
56Angular

• 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

• 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

• HomeService
59Angular

• HomeService
60Angular

• 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

• HomeComponent
62Angular

• HomeComponent
63Angular

• In app module (app.module.ts file)
• import the HttpClientModule and the HomeService
• add HttpClientModule in imports[] arrays and
HomeService in providers[] array
64Angular

• In the app module (app.module.ts file)
65Angular

• 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

• Back end
67Angular

• The Scenario[] arrays return by getScenarios()
method of HomeService will have fields with the
same name of ScenarioDTO return by back end.
68Angular

• 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

• 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

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

Angular Routes
• We create 2 new components charts and
scenarios
• And a new file app.routing.ts
73Angular

Angular Routes
• In the file app.routing.ts we will declare the root
routes of our application
74Angular

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

Angular Routes
• Declare a const with the routes for root routes
76Angular

Angular Routes
• And import this const in the app.module.ts
77Angular

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

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

Angular Routes
• Accessing the path “”
80Angular

Angular Routes
• Accessing the path “/scenarios”
81Angular

Angular Routes
• Accessing the path “/charts”
82Angular

Angular Routes
• We can redirect from a link without reload the
page using the directive routerLink
83Angular

Angular Versioning the Project
84Angular

• Angular/cli automatically create a .gitignore file
that ignore the node_modules directory
85Angular

• 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

Angular Environment Variables
87Angular

• You can manage different environments
• Angular create under src directory, a directory
named environments, where you can configure
global constants
88Angular

• Define the environments that you will have in
environments array in .angular-cli.json file:
89Angular

• 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

• You can import env file in components, services,
etc…, like this:
91Angular

Angular Build to Production
92Angular

• Edit the index.html to set the <base href>
appropriately with the context of the application,
ending with “/”.
93Angular

• 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

• The build will generated a dist directory
95Angular

• 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

97Angular

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)

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

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

Angular Project Structure (Inside app folder)
101Angular
The main component (mandatory)
Our specific components
The main model (mandatory)

Source Code
102Angular
• https://github.com/jadsonjs/angular/tree/master/k
ootenai-web

• Pictures take from
• https://visualwebz.com/front-end-vs-back-end-
developers/
• http://www.cvivas.com/development-test-production-
environments/
• http://cafecomcodig0.com.br/o-que-e-back-end-e-front-
end/
• https://www.entrepreneur.com/article/286256
• http://www.datacenterdynamics.com.br/focus/archive/20
17/02/aumento-da-complexidade-e-custo-de-ti-
estimula-demanda-por-serviços-de-data-ce
103Angular

• Pictures take from
• http://meneleu.blogspot.com.br/2015/08/como-voce-
pode-impedir-manipulacao.html
• https://www.infragistics.com/community/blogs/dhananja
y_kumar/archive/2016/12/12/simplifying-two-way-data-
binding-in-angular-2.aspx
104Angular

• References
• http://cafe.algaworks.com/oficina-angular-rest-spring-
boot/
• https://medium.com/codingthesmartway-com-
blog/using-bootstrap-with-angular-c83c3cee3f4a
• https://loiane.training/course/angular-2/
• https://startbootstrap.com/template-overviews/sb-
admin-2/
• https://medium.com/beautiful-angular/angular-2-and-
environment-variables-59c57ba643be
• https://angular.io/tutorial
105Angular

• References
• https://imasters.com.br/desenvolvimento/single-page-
applications-e-outras-maravilhas-da-web-
moderna/?trace=1519021197
• https://blog.angular-university.io/angular-2-ngfor/
106Angular

Introduction to angular with a simple but complete project

In this document

More Related Content

What's hot

Similar to Introduction to angular with a simple but complete project

More from Jadson Santos

Recently uploaded

Introduction to angular with a simple but complete project