{"id":73182,"date":"2020-01-15T15:36:24","date_gmt":"2020-01-15T10:06:24","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=73182"},"modified":"2024-04-12T14:27:12","modified_gmt":"2024-04-12T08:57:12","slug":"sample-angular-application-3","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/","title":{"rendered":"Sample Angular Application"},"content":{"rendered":"\n<p><a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/mean-stack-tutorials\/\" target=\"_blank\" rel=\"noreferrer noopener\">Go back to Tutorial<\/a><\/p>\n\n\n<p>You develop apps in the context of an Angular workspace. A workspace contains the files for one or more projects. A project is the set of files that comprise an app, a library, or end-to-end (e2e) tests. To create a new workspace and initial app project:<\/p>\n<ul>\n<li>Run the CLI command ng new and provide the name my-app, as shown here: ng new my-app<\/li>\n<li>The ng new command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.<\/li>\n<\/ul>\n<p>The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.<\/p>\n<p>It also creates the following workspace and starter project files:<\/p>\n<ul>\n<li>A new workspace, with a root folder named my-app<\/li>\n<li>An initial skeleton app project, also called my-app (in the src subfolder)<\/li>\n<li>An end-to-end test project (in the e2e subfolder)<\/li>\n<li>Related configuration files<\/li>\n<\/ul>\n<p>The initial app project contains a simple Welcome app, ready to run.<\/p>\n<p><u>Next Step &#8211; Serve the application<\/u> &#8211; Angular includes a server, so that you can easily build and serve your app locally.<\/p>\n<ul>\n<li>Go to the workspace folder (my-app).<\/li>\n<li>Launch the server by using the CLI command ng serve, with the &#8211;open option.<\/li>\n<\/ul>\n<p>cd my-app<\/p>\n<p>ng serve &#8211;open<\/p>\n<p>The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files. The &#8211;open (or just -o) option automatically opens your browser to <a href=\"http:\/\/localhost:4200\/\">http:\/\/localhost:4200\/<\/a>.<\/p>\n<p><u>Edit your first Angular component<\/u> &#8211; Components are the fundamental building blocks of Angular applications. They display data on the screen, listen for user input, and take action based on that input. As part of the initial app, the CLI created the first Angular component for you. It is the root component, and it is named app-root.<\/p>\n<p>Open .\/src\/app\/app.component.ts.<\/p>\n<p>Change the title property from &#8216;my-app&#8217; to &#8216;My First Angular App&#8217;.<\/p>\n<p>src\/app\/app.component.ts<\/p>\n<p>@Component({<\/p>\n<p>selector: &#8216;app-root&#8217;,<\/p>\n<p>templateUrl: &#8216;.\/app.component.html&#8217;,<\/p>\n<p>styleUrls: [&#8216;.\/app.component.css&#8217;]\n<p>})<\/p>\n<p>export class AppComponent {<\/p>\n<p>title = &#8216;My First Angular App!&#8217;;<\/p>\n<p>}<\/p>\n<p>The browser reloads automatically with the revised title. That&#8217;s nice, but it could look better. Open .\/src\/app\/app.component.css and give the component some style.<\/p>\n<p><u>src\/app\/app.component.css<\/u><\/p>\n<p>h1 {<\/p>\n<p>color: #369;<\/p>\n<p>font-family: Arial, Helvetica, sans-serif;<\/p>\n<p>font-size: 250%;<\/p>\n<p>}<\/p>\n<p>Your app greets you with a message:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-140094\" src=\"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2019\/07\/image076.jpg\" alt=\"\" width=\"682\" height=\"360\"><\/p>\n<p>&nbsp;<\/p>\n\n\n<p><a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/mean-stack-tutorials\/\" target=\"_blank\" rel=\"noreferrer noopener\">Go back to Tutorial<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Go back to Tutorial You develop apps in the context of an Angular workspace. A workspace contains the files for one or more projects. A project is the set of files that comprise an app, a library, or end-to-end (e2e) tests. To create a new workspace and initial app project: Run the CLI command ng&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8514],"tags":[7276],"class_list":["post-73182","page","type-page","status-publish","hentry","category-mean-stack","tag-sample-angular-application"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Sample Angular Application - Tutorial<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sample Angular Application - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Go back to Tutorial You develop apps in the context of an Angular workspace. A workspace contains the files for one or more projects. A project is the set of files that comprise an app, a library, or end-to-end (e2e) tests. To create a new workspace and initial app project: Run the CLI command ng...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:57:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2019\/07\/image076.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/\",\"name\":\"Sample Angular Application - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2019\/07\/image076.jpg\",\"datePublished\":\"2020-01-15T10:06:24+00:00\",\"dateModified\":\"2024-04-12T08:57:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/#primaryimage\",\"url\":\"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2019\/07\/image076.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2019\/07\/image076.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sample Angular Application\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sample Angular Application - Tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/","og_locale":"en_US","og_type":"article","og_title":"Sample Angular Application - Tutorial","og_description":"Go back to Tutorial You develop apps in the context of an Angular workspace. A workspace contains the files for one or more projects. A project is the set of files that comprise an app, a library, or end-to-end (e2e) tests. To create a new workspace and initial app project: Run the CLI command ng...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:57:12+00:00","og_image":[{"url":"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2019\/07\/image076.jpg","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/","name":"Sample Angular Application - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/#primaryimage"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2019\/07\/image076.jpg","datePublished":"2020-01-15T10:06:24+00:00","dateModified":"2024-04-12T08:57:12+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/#primaryimage","url":"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2019\/07\/image076.jpg","contentUrl":"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2019\/07\/image076.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Sample Angular Application"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/73182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=73182"}],"version-history":[{"count":4,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/73182\/revisions"}],"predecessor-version":[{"id":87744,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/73182\/revisions\/87744"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=73182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=73182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=73182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}