Having created the Spring rest service in the previous two blogs, it is time to look at the angular based application that will be interacting with those end points. I prefer using angular-cli to create and add features to my application, it is an easy and reliable way of adding stub code which is easier to manage and traverse. ng : Angular CLI A simple definition from the angular.io website The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications. You can use the tool directly in a command shell, or indirectly through an interactive UI such as Angular Console. In this blog I will try to provide quick insights into how one can use Angular CLI and some basic introduction of its commonly used commands, as we work towards creating our example application to consume the Sprint Data-LDAP rest endpoints. The first step in the journey is to install angular cli. Please note, I am not going to cover angular basics, or node and npm and will assume you have some prior exposure to these technologies. How to install @angular/cli You can open a terminal and issue a simple command to install the angular cli as in shown in the image below. npm install -g @angular/cli To validate you can issue a command as under on the terminal ng -v ng --version On the day I am writing this blog the version that I am using is 7.3.8. Options The --help option can help you explore the options for any of the commands. In the image below you can see all the options available that we can use along with new. The information is available with a brief ddescription to what purpose it serves. If you issue just ng on the terminal you can see the commands that you can use and can explore further by using the --help option. Node & NPM The Node and NPM version information for my sytem is samarthyas$ node -v && npm -v v10.4.1 6.4.1 Creating a New app Time to get started for creating a new application that I will use for my Spring data-ldap integration. ng create --help Provides with all the information required to launch a new application. Let's create the boiler plate code using the new option ng new samarthya -d Option: --dry-run (-d) I have used an option -d for dry run which lists the file that it will create without actually creating them on the disk. I often use this option to see the number of files that it will create and the folder structure, if applicable. You can also see the NOTE at the end pointing to the information - no changes were made. Option: --skip-install Skip install allows you skip npm install that is executed after the files are created, I seldom use it, but is a good option to reduce the development time. After I verified, the list of files that it will create, time for executing the command without the flag. The last step of the command is executing the npm install that pulls in all the dependencies required to launch test and debug the application. You can open the folder in any preferred code editor, I use VS code and is my go to option for any Angular related development and validate the folder structure. From the angular documentation Folder and files PURPOSE app/ Contains the component files in which your app logic and data are defined. See details in App source folder below. assets/ Contains image files and other asset files to be copied as-is when you build your application. environments/ Contains build configuration options for particular target environments. By default there is an unnamed standard development environment and a production ("prod") environment. You can define additional target environment configurations. browserslist Configures sharing of target browsers and Node.js versions among various front-end tools. See Browserslist on GitHub for more information. favicon.ico An icon to use for this app in the bookmark bar. index.html The main HTML page that is served when someone visits your site. The CLI automatically adds all JavaScript and CSS files when building your app, so you typically don't need to add any
