FleetMS version 3 kicks off today!<\/p>\n
Here’s the technology stack for FleetMS version 3.<\/p>\n
Additionally, we would be using the following tools and technologies<\/p>\n
The following is covered here<\/p>\n
<\/p>\n
In this session, we will download and install Node, Angular and PostgreSQL.<\/p>\n
Step 1<\/strong> – Download Node.js from here<\/a> and install it following the prompts.<\/p>\n Step 2<\/strong> – Install Angular using the CLI via this command<\/p>\n <\/p>\n Step 3<\/strong>\u00a0 – Download and install PostgreSQL. Get it from here<\/a>.<\/p>\n <\/p>\n For this application, we would be using the AdminLTE template version 3.0<\/a> from ColorLib and you can get it from here<\/a>. You can follow the steps below to set it up.<\/p>\n Step 1<\/strong> – Create an Angular application is some directory using this command:<\/p>\n You need to include routing.<\/p>\n Step 2<\/strong> – Navigate into the installed application and install the adminlte3 node modules using the command below:<\/p>\n You can check that it installed by looking into the node_modules directory<\/p>\n Step 3<\/strong> – Build the application using the command<\/p>\n <\/p>\n Step 4<\/strong> – Fire up the application using the ng serve command as shown below:<\/p>\n If it works, then thumbs up!<\/p>\n Step 5<\/strong> – Check your package.json file to make sure you have the admin-lte dependency<\/p>\n <\/p>\n Now we need to actually setup the AdminLTE pages, scripts and stylesheets.<\/p>\n Step 1<\/strong> – Open one of the dashboard pages. Here, I choose index2.html. Open the page source and check the path of the included js and css files.<\/p>\n Step 2<\/strong> – Open the angular.json file and check the styles and scripts keys under the build section.<\/p>\n Step 3<\/strong> – Copy the css<\/strong><\/em> paths as given below to the styles section<\/p>\n <\/p>\n <\/p>\n Step 4<\/strong> – Copy the js<\/em><\/strong> paths as given below the scripts section.<\/p>\n <\/p>\n Follow the steps to modify the index.html<\/p>\n Step 1<\/strong> – Open the index.html file and update the body class tag with the one in the index2.html<\/strong><\/em> from the AdminLTE template<\/p>\n Step 2<\/strong> – Open the app.component.html file and delete everything except the <router-outlet><\/router-outlet><\/em><\/strong> tags.<\/p>\n Step 3<\/strong> – Copy the rest of code inside the <body><\/body><\/em><\/strong> tag from the index2.html<\/em><\/strong> from the index2.html<\/em> <\/strong>in the AdminLTE template.<\/p>\n Step 4<\/strong> – Paste this code in the app.component.html<\/em><\/strong> file just before the <router-outlet><\/router-outlet><\/em><\/strong> tags.<\/p>\n Step 5<\/strong> – Copy the img folder located inside the admin-lte\/dist<\/strong><\/em> directory to the src\/assets<\/em><\/strong> folder<\/p>\n Step 6<\/strong> – Find this path <img src=”dist\/img\/user1-128×128.jpg” alt=”User Avatar”class=”img-size-50 mr-3 img-circle”> <\/em><\/strong><\/p>\n and change the src to “assets\/img\/user1-128×128.jpg”<\/strong><\/em><\/p>\n Step 7<\/strong> <\/em>– You should actually replace all occurrence of dist\/img\/<\/em><\/strong> with assets\/img\/. <\/strong><\/em><\/span>You can use find and replace to achieve this.<\/p>\n Step 8<\/strong> – Stop the application. Rebuild it and serve it up. Visit the home page, you will see the dashboard working perfectly well.<\/p>\nnpm install -<\/span> g @angular<\/span>\/<\/span>cli\r\n<\/pre>\n2. Setup the AdminLTE 3.2 Angular Template<\/strong><\/h4>\n
ng new fleetmsv3\r\n<\/pre>\n
npm install admin-lte@^3.2 --save\r\n<\/pre>\n
ng build\r\n<\/pre>\n
ng serve --open\r\n<\/pre>\n
3. Setting Up the Scripts and Stylesheets<\/strong><\/h4>\n
\"node_modules\/admin-lte\/plugins\/fontawesome-free\/css\/all.min.css\",\r\n\"node_modules\/admin-lte\/plugins\/overlayScrollbars\/css\/OverlayScrollbars.min.css\",\r\n\"node_modules\/admin-lte\/dist\/css\/adminlte.min.css\"\r\n<\/pre>\n
\"node_modules\/admin-lte\/plugins\/jquery\/jquery.min.js\",\r\n\"node_modules\/admin-lte\/plugins\/bootstrap\/js\/bootstrap.bundle.min.js\",\r\n\"node_modules\/admin-lte\/plugins\/overlayScrollbars\/js\/jquery.overlayScrollbars.min.js\",\r\n\"node_modules\/admin-lte\/dist\/js\/adminlte.js\",\r\n\"node_modules\/admin-lte\/plugins\/jquery-mousewheel\/jquery.mousewheel.js\",\r\n\"node_modules\/admin-lte\/plugins\/raphael\/raphael.min.js\",\r\n\"node_modules\/admin-lte\/plugins\/jquery-mapael\/jquery.mapael.min.js\",\r\n\"node_modules\/admin-lte\/plugins\/jquery-mapael\/maps\/usa_states.min.js\",\r\n\"node_modules\/admin-lte\/plugins\/chart.js\/Chart.min.js\",\r\n\"node_modules\/admin-lte\/dist\/js\/demo.js\",\r\n\"node_modules\/admin-lte\/dist\/js\/pages\/dashboard2.js\"\r\n<\/pre>\n
4. Modify the index.html and app.component.html<\/strong><\/h4>\n