Getting started with Angular - Learning Angular (Part 2) — Transcript

Full transcript

1. 0:02hi friends welcome back in this module
2. 0:05we'll go through the setup for getting
3. 0:07started with angular but before we do
4. 0:09that let's take a moment to discuss
5. 0:11pacing we're going to go through a lot
6. 0:14of steps during our time together
7. 0:16through this course so I would encourage
8. 0:18you to pause this video at any time get
9. 0:21caught up and then resume the video when
10. 0:24you are ready please take all the time
11. 0:26that you need
12. 0:27all right let's get you set up for
13. 0:30development with angular
14. 0:32first you'll need to install node.js so
15. 0:35you can use the annual CLI and have
16. 0:37access to npm the node package manager
17. 0:41in the browser navigate to
18. 0:44nodejs.org to find it download and
19. 0:46installation instructions now be sure to
20. 0:49choose a version that's either active or
21. 0:51in maintenance long-term support mode
22. 0:53your installation should include npm
23. 0:57now that noted and PMR installed we're
24. 1:00ready to install the angular CLI from
25. 1:03the command line run the following
26. 1:05command
27. 1:06npm install Dash G at angular4 CLI when
28. 1:12the installation completes we can
29. 1:14confirm that our installation was
30. 1:16successful by running the following
31. 1:18command from the command line in G space
32. 1:21version
33. 1:23the output of NG version should contain
34. 1:25information about the installed version
35. 1:27of angular on your machine such as the
36. 1:31angular version the node version the
37. 1:33packets manager version and even the OS
38. 1:36being used now this tutorial is using
39. 1:39angular version 15.
40. 1:41so to be helpful we've already created a
41. 1:45starter project for you and the next
42. 1:47step is to download the code to your
43. 1:49local machine Let's choose the location
44. 1:51for the code now I'm going to put my
45. 1:54code in a directory called projects on
46. 1:57my computer but for you you can choose
47. 1:59the right location for yourself on your
48. 2:02system
49. 2:03in a browser navigate to the following
50. 2:06URL
51. 2:08goo.gle forward slash homes Dash app
52. 2:13dash start
53. 2:14now we're downloading a zip file of the
54. 2:17starter project when the download is
55. 2:19complete extract the code to a directory
56. 2:22name home stash app and a file location
57. 2:25where you'll be storing your code now
58. 2:27with the code downloaded and extracted
59. 2:30the next steps are to from the command
60. 2:32line navigate into the homes Dash app
61. 2:35directory and then run npm install
62. 2:39the last command will install all of the
63. 2:42dependencies needed to run the
64. 2:44application
65. 2:45we can test out this application right
66. 2:48now using a development server hosted
67. 2:51right on your computer and provided by
68. 2:53angular here's how
69. 2:55from the command line run NG serve
70. 3:00this command starts a local development
71. 3:03server now it gives us a URL that we can
72. 3:06use to find our web app running that URL
73. 3:10is localhost Port 4200
74. 3:15let's open that URL in the browser and
75. 3:18find our base application awesome we
76. 3:21have a functioning web app that we can
77. 3:23edit to make changes so that it can have
78. 3:26the features that we want now to edit
79. 3:28our code I'll be using vs code now I'm
80. 3:33also going to install an extension
81. 3:35called the angular language service by
82. 3:37the angular team that'll give us some
83. 3:39extra tools when writing the code and
84. 3:42it'll help us be more productive
85. 3:44we've included links to everything in
86. 3:46the description for this video to help
87. 3:48you get started let's launch vs code and
88. 3:51open the directory containing our
89. 3:53project the starter code has created a
90. 3:56lot of files for us so let's take a
91. 3:58moment to explore some of them
92. 4:01first up we have angular.json which
93. 4:04allows us to configure our project there
94. 4:07are settings for things like build
95. 4:08configuration
96. 4:10internationalization and more
97. 4:13there are a few more important
98. 4:15configuration files there's package.json
99. 4:17for our project dependencies and
100. 4:20tsconfig.json for typescript settings
101. 4:22now angular components have typescript
102. 4:25class for logic now this is where we
103. 4:29configure the rules around how
104. 4:30typescript is used in a project now
105. 4:33that's a little bit beyond the scope of
106. 4:35our course but it's good to know that
107. 4:37this exists
108. 4:38all right here's where all the magic
109. 4:40happens the SRC or Source directory
110. 4:45our application code lives in this
111. 4:47directory and when we update our
112. 4:49application to include new functionality
113. 4:51this is the directory in which we'll
114. 4:53make our changes
115. 4:55let's take the first step towards
116. 4:57customizing our application
117. 4:59we're going to update the existing app
118. 5:01to display a new message in the browser
119. 5:05app.component.ts contains the HTML
120. 5:08template code that determines what's
121. 5:10being displayed on screen now we're
122. 5:13going to learn all about components and
123. 5:15templates soon but for now we'll start
124. 5:17by opening this file and making an
125. 5:19update the template property has the
126. 5:22text hello world now let's update the
127. 5:25text and change it to Hello Universe
128. 5:28save this file
129. 5:30because we have the development server
130. 5:32running with NG serve our web page will
131. 5:35refresh itself automatically
132. 5:37and there we have it the application now
133. 5:40displays the text Hello Universe
134. 5:45you've just updated your first angular
135. 5:47app I have something special for you
136. 5:50high five from me to you nice work
137. 5:54whoa we've done a lot so far friends up
138. 5:57to this point we've been able to install
139. 5:59the angular tooling the angular CLI use
140. 6:03the built-in development server to
141. 6:05automatically load our changes in the
142. 6:07browser and even updated our first
143. 6:09angular application now that's a lot of
144. 6:13great progress and I think that you
145. 6:15should be very proud of yourself
146. 6:17in the next section we're going to
147. 6:19create the home page for the application
148. 6:21and bring everything closer to reality
149. 6:23so I'll meet you there
150. 6:28foreign
151. 6:32foreign