introduction to angular with a simple but complete project
TRANSCRIPT
![Page 1: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/1.jpg)
Jadson Santos
Computing Engineer
Introduction to Angular
with a simple but complete project
![Page 2: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/2.jpg)
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
![Page 3: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/3.jpg)
Angular Introduction
• Evolution
3Angular
![Page 4: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/4.jpg)
Angular Introduction
• Angular is oriented to develop the front end
uncoupled of the back end
4Angular
![Page 5: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/5.jpg)
Angular Introduction
• Traditional WEB Architecture
5Angular
Web Page
Construction
Logic
Business Logic
and
Persistence
![Page 6: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/6.jpg)
Angular Introduction
• Service Oriented Front End Architecture - SOFEA
6Angular
HTTP Server
Serv
ices
Business Logic
and
Persistence
![Page 7: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/9.jpg)
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
![Page 10: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/10.jpg)
Angular Install the Environment
10Angular
![Page 11: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/11.jpg)
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
![Page 12: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/12.jpg)
Angular Install the Environment
• Download and install Aton (https://atom.io/)
12Angular
![Page 13: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/13.jpg)
Angular Install the Environment
• Aton Plugins: Aton -> Settings -> Install
• atom-typescript
• file-icons
• angular-2-typeScript-snippets
13Angular
![Page 14: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/14.jpg)
Angular Install the Environment
• Download and install Node.js (https://nodejs.org)
to have access to npm
14Angular
![Page 15: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/15.jpg)
Angular Install the Environment
• 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
![Page 16: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/16.jpg)
Angular Install the Environment
16Angular
• Checking
![Page 17: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/17.jpg)
Angular Create a new Project
17Angular
![Page 18: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/18.jpg)
Angular Create a new Project
18Angular
• Create a new angular project
• ng new project_name
![Page 19: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/19.jpg)
Angular Create a new Project
19Angular
• Open angular project in Atom
![Page 20: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/20.jpg)
Angular Create the Project
• Running the project
• ng server inside of project folder
• open the browser on http://localhost:4200
20Angular
![Page 21: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/21.jpg)
Angular Create a new Project
• Default Angular Page
21Angular
![Page 22: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/22.jpg)
Angular Creating Components
22Angular
![Page 23: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/23.jpg)
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
![Page 24: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/24.jpg)
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
![Page 25: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/25.jpg)
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
![Page 26: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/26.jpg)
Angular Creating Components
• Create Angular components
• ng g c header
• ng g c home
• ng g c footer
26Angular
![Page 27: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/27.jpg)
Angular Creating Components
• Each component has a simple html page
27Angular
![Page 28: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/28.jpg)
Angular Creating Components
• A empty css file
28Angular
![Page 29: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/29.jpg)
Angular Creating Components
• And a typescript class
29Angular
![Page 30: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/30.jpg)
Angular Creating Components
• Each component has a selector in the typescript
class that identify the component
30Angular
![Page 31: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/31.jpg)
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
![Page 32: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/32.jpg)
Angular Creating Components
• ng server to run the development angular server
32Angular
![Page 33: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/33.jpg)
Angular Project Look and Feel
33Angular
![Page 34: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/34.jpg)
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
![Page 35: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/35.jpg)
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
![Page 36: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/36.jpg)
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
![Page 37: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/37.jpg)
Angular Project Look and Feel
• Now we can open the home component template
(html file) and use some bootstrap css class
37Angular
![Page 38: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/38.jpg)
Angular Project Look and Feel
• The page will use bootstrap css style:
38Angular
![Page 39: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/39.jpg)
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
![Page 40: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/40.jpg)
Angular Project Look and Feel
• Adding the SB Admin 2 bootstrap theme
• Download it
40Angular
![Page 41: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/41.jpg)
Angular Project Look and Feel
• Adding the SB Admin 2 bootstrap theme
• Copy it content to the assets directory
41Angular
![Page 42: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/42.jpg)
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
![Page 43: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/43.jpg)
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
![Page 44: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/44.jpg)
Angular Data Binding
44Angular
![Page 45: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/45.jpg)
Angular Data Binding
• Interpolation
• Allows us to read primitive or object values from
component properties in the template (html file)
45Angular
![Page 46: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/46.jpg)
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
![Page 47: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/47.jpg)
Angular Data Binding
• Event Binding
• A component method responds to an event raised by an
element, component, or directive.
47Angular
![Page 48: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/48.jpg)
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
![Page 49: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/49.jpg)
Angular Data Binding
• Two-Way Data Binding
• You can use a property + event binding
• Or [ ( ) ] syntax
49Angular
![Page 50: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/50.jpg)
Angular Data Binding
50Angular
![Page 51: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/51.jpg)
Angular Directives
51Angular
![Page 52: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/52.jpg)
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
![Page 53: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/53.jpg)
Angular Directives
• ngIf
53Angular
![Page 54: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/54.jpg)
Angular Directives
• ngFor
54Angular
![Page 55: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/55.jpg)
Angular Directives
55Angular
![Page 56: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/56.jpg)
Angular Communicate with back end
56Angular
![Page 57: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/57.jpg)
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
![Page 58: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/58.jpg)
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
![Page 59: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/59.jpg)
Angular Communicate with back end
• HomeService
59Angular
![Page 60: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/60.jpg)
Angular Communicate with back end
• HomeService
60Angular
![Page 61: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/61.jpg)
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
![Page 62: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/62.jpg)
Angular Communicate with back end
• HomeComponent
62Angular
![Page 63: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/63.jpg)
Angular Communicate with back end
• HomeComponent
63Angular
![Page 64: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/64.jpg)
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
![Page 65: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/65.jpg)
Angular Communicate with back end
• In the app module (app.module.ts file)
65Angular
![Page 66: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/66.jpg)
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
![Page 67: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/67.jpg)
Angular Communicate with back end
• Back end
67Angular
![Page 68: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/68.jpg)
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
![Page 69: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/69.jpg)
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
![Page 70: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/70.jpg)
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
![Page 71: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/71.jpg)
Angular Routes
71Angular
![Page 72: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/72.jpg)
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
![Page 73: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/73.jpg)
Angular Routes
• We create 2 new components charts and
scenarios
• And a new file app.routing.ts
73Angular
![Page 74: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/74.jpg)
Angular Routes
• In the file app.routing.ts we will declare the root
routes of our application
74Angular
![Page 75: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/75.jpg)
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
![Page 76: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/76.jpg)
Angular Routes
• Declare a const with the routes for root routes
76Angular
![Page 77: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/77.jpg)
Angular Routes
• And import this const in the app.module.ts
77Angular
![Page 78: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/78.jpg)
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
![Page 79: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/79.jpg)
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
![Page 80: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/80.jpg)
Angular Routes
• Accessing the path “”
80Angular
![Page 81: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/81.jpg)
Angular Routes
• Accessing the path “/scenarios”
81Angular
![Page 82: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/82.jpg)
Angular Routes
• Accessing the path “/charts”
82Angular
![Page 83: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/83.jpg)
Angular Routes
• We can redirect from a link without reload the
page using the directive routerLink
83Angular
![Page 84: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/84.jpg)
Angular Versioning the Project
84Angular
![Page 85: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/85.jpg)
Angular Versioning the Project
• Angular/cli automatically create a .gitignore file
that ignore the node_modules directory
85Angular
![Page 86: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/86.jpg)
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
![Page 87: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/87.jpg)
Angular Environment Variables
87Angular
![Page 88: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/88.jpg)
Angular Environment Variables
• You can manage different environments
• Angular create under src directory, a directory
named environments, where you can configure
global constants
88Angular
![Page 89: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/89.jpg)
Angular Environment Variables
• Define the environments that you will have in
environments array in .angular-cli.json file:
89Angular
![Page 90: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/90.jpg)
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
![Page 91: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/91.jpg)
Angular Environment Variables
• You can import env file in components, services,
etc…, like this:
91Angular
![Page 92: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/92.jpg)
Angular Build to Production
92Angular
![Page 93: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/93.jpg)
Angular Build to Production
• Edit the index.html to set the <base href>
appropriately with the context of the application,
ending with “/”.
93Angular
![Page 94: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/94.jpg)
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
![Page 95: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/95.jpg)
Angular Build to Production
• The build will generated a dist directory
95Angular
![Page 96: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/96.jpg)
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
![Page 97: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/97.jpg)
Angular Build to Production
97Angular
![Page 98: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/98.jpg)
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)
![Page 99: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/99.jpg)
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
![Page 100: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/100.jpg)
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
![Page 101: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/101.jpg)
Angular Project Structure (Inside app folder)
101Angular
The main component (mandatory)
Our specific components
The main model (mandatory)
![Page 102: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/102.jpg)
Source Code
102Angular
• https://github.com/jadsonjs/angular/tree/master/k
ootenai-web
![Page 103: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/103.jpg)
• 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
![Page 104: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/104.jpg)
• 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
![Page 105: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/105.jpg)
• 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
![Page 106: Introduction to angular with a simple but complete project](https://reader034.vdocuments.mx/reader034/viewer/2022052210/5a65899e7f8b9a931a8b6961/html5/thumbnails/106.jpg)
• 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