asi 116 gu Cnt news Skip to main content hived documentation for Angular v17. Please visit angular.dev is page for Create a new project Use the ng_new command to start creating your Tour of Heroes application. Please note: Starting in Angular version 17 new projects will be standalone by default @. To create a Project with NgModute use the option ng new --no-standalone This tutorial 1. Sets up your environment, 2. Creates a new workspace and initial application project. 3. Serves the application. 4, Makes changes to the new application. hipe:ivi argusionseranourt rastSkip to main content lication’s code, see the live example / download example, Set up your environment ‘To set up your development environment, follow the instructions in Local Environment Setup, Create a new workspace and an initial application You develop applications in the context of an Angular workspace. A workspace contains the files for one ‘or more projects. A projects the set of files that make up an application ora library To create a new workspace and an initial project: hipe:ivi argusionseranourt rastasi 116 gu Cnt news ‘arent already in an Angular workspace directory. For example, if you'e in the Skip to main content ‘workspace from an earlier exercise, navigate to its parent. 2.Run ng new followed by the application name as shown here: fag new angular-tour-of -heroes 3. ng_new prompts you for information about features to include inthe intial project. Accept the defaults by pressing the Enter or Return key. ng new installs the necessary npn packages and other dependencies that Angular requires. This can lake a few minutes, ng new also creates the following workspace and starter project files: + Anew workspace, with a root directory named angular-tour-of-heroes ‘+ Aninitial skeleton application project in the sre/app subdirectory + Related configuration files ‘The initial application project contains a simple application that's ready to run, hipe:ivi argusionseranourt rastSkip to main content verve ure application Go to the workspace directory and launch the application, od angular-tour-of-heroes ng serve --open The ng serve command + Builds the application + Starts the development server + Watches the source files + Rebuilds the application as you make changes The --open flag opens a browser to http://localhost :4200 You should see the application running in your browser, hipe:ivi argusionseranourt rastSkip to main content mtrygurar cumponents ‘The page you see is the application shell, The shells controlled by an Angular component named ‘AppComponent 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. Make changes to the application Open the project in your favorite editor or IDE. Navigate to the src/app directory to edit the starter application. In the IDE, locate these files, which make up the AppConponent that you just created: ues verals app.conponent..ts The component class cace, written in TyoeScript, app.conponent .htel Tre component template, written in HTML. app.conponent .css The component's private CSS styles, hipe:ivi argusionseranourt rast 0asi 116A gu Cnt news Skip to main content 4 new , Angular created test specifications for your new application, Unfortunately, making these changes breaks your newly created specifications, ‘That wor't be a problem because Angular testing is outside the scope of this tutorial and wor't be used To learn more about testing with Angular, see Testing, Change the application title Open the apo.component.ts and change the title property value to Tour of Heroes. app.co title = ‘Tour of Heroes: Open apo component .ntnl and delete the default template that ng new created. Replace itwith the following line of HTML. app.comp nent.htm! (tem; hte {(title} besht> ‘The double curly braces are Angular’s interpolation binding syntax. This interpolation binding presents the component's title] property value inside the HTML header tag hipe:ivi argusionseranourt rast eoasi 116 gu Cnt news ' and displays the new application title. Skip to main content Add application styles Most apps strive for a consistent look across the application. ng new created an empty styles.css for this purpose. Put your application-wide styles there, Open src/styles.css and add the code below to the file. hipe:ivi argusionseranourt rast m0Skip to main content /* spplication-wide Styles */ mt color: 4969; font-family: Ariel, Helvetica, sans-serif; font-size: 250%; > ha, na ¢ color: #444; font-family: Arial, Helvetica, sans-serif, font-weight: Lighter; y body { margin: 2em; y body, input[types"text"], button { color: #333; font-family: Cambria, Georgia, serif; y button ¢ background-color: eee; border: none border-radius: 4px; cursor: pointer; color: black; font-size: 1.2ren: padding: trem; margin-right: tren; margin-bottom: tren; hipe:ivi argusionseranourteroasth a0Skip to main content background-color: black: color: white; y button:disabled ( background-color: #eee; color: #a2a; cursor: auto; y /* everyubere else */ *{ font-family: Arial, Helvetica, sans-serif; > Final code review Here are the code files discussed on this page. stc/app/app.component.ts stc/app/app.component.htm stc/styles.css (excerpt) Amport (Component) from \gular/core’ ; ‘ecomponent({ hipe:ivi argusionseranourt rast oostandalone: true, selector: ‘app-root’, templateUrl: './app.conponent html’, styleUris: ['./app.component.css' ], » ‘export class AppComponent { title = ‘Tour of Heroes" ; Summary ‘+ You created the initial application structure using ng new ‘+ You learned that Angular components display data + You used the double curly braces of interpolation to display the application title Next steps +1. Thehero editor hipe:ivi argusionseranourt rast Last reviewed on Wed Aug 302029