D Software Machinist

1. What is angular? An open source framework for building single page applications using web technologies like HTML, CSS and JS. Angular is written in typescript and follow typescript syntax to write code. It helps developers to build applications for browsers, mobiles and desktops. 2. How many versions of angular released? From Angular 1 to Angular 11, In the whole they skipped version number 3.  Latest angular version is 14. And they have a 6 months of major release cycle.So we can expect a new version of angular in every 6 months. 3. What are the Difference between Angular 2+ and Angular 1.x? Angular 2+ Angular 1.x Based on Components Controller and Scope Mobile first Yes No Angular CLI Yes No Ways to define services Only by defining a class Factory, Service, Provider, Values and constants Runs Clinet-sed and Server-side Client-side Ways to initialize app Using bootstrapModule() function Using ng-app and angular.bootstrap functio...

 Font-Awesome + Angular using NPM Why NPM? Whenever we need a package in our Angular application, we'll be using npm to bring in the package. This is the way the Angular ecosystem is working. We need lots of packages to build something greater. Installing Font-awesome: This will bring the entire Font-awesome into our node_modules folder. The --save flag will add this dependency to our package.json Add Font-awesome in Angular app: For Angular applications, all starting configuration happens in the angular.json file. In that file, you'll find a styles array where we can add any CSS files we want to add to our project. You'll also find a script array where you can add scripts if you need that. ( Refer here for including Jquery and Bootstrap and here for Bulma CSS ) Restart the angular server (ng serve). Now you can able to use all the incredible icons of Font-awesome in your Angular application. 

Bulma + Angular using NPM Why NPM? Whenever we need a package in our Angular application, we'll be using npm to bring in the package. This is the way the Angular ecosystem is working. We need lots of packages to build something greater. Installing Bulma: This will bring the entire Bulma project into our node_modules folder. The --save flag will add this dependency to our package.json Add Bulma in Angular app: For Angular applications, all starting configuration happens in the angular.json file. In that file, you'll find a styles array where we can add any CSS files we want to add to our project. You'll also find a script array where you can add scripts if you need that. ( Refer here for including Jquery and Bootstrap ) Restart the angular server ( ng serve ). Now you can able to use all the incredible features of Bulma CSS in your Angular application.  Let's make something awesome with Bulma.

 If you are wondering how did a developer do something awesome on a web page, there is a way to see how they built that. View HTML Source Code: Right-click on an HTML page and select "View Page Source" (in Chrome) or "View Source" (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page. Inspect an HTML Element: Right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on the fly in the Elements or Styles panel that opens.

 Here we will see some HTML examples, Forget about the tags you have not learned yet. HTML Document: All HTML documents start with a document-type declarations : <!DOCTYPE html> A HTML document itself begins with <html> and close with </html> The visible part of the web page will be <body> and </body> The <!DOCTYPE> Declaration: The <!DOCTYPE> declaration represents the document type and helps browsers display web pages correctly. It must only appear once, at the top of the page (before any HTML tags). The <!DOCTYPE> declaration is not case sensitive. HTML Headings: HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. HTML Paragraphs: HTML paragraphs are defined with the <p> tag HTML Links: HTML links are defined with the <a> tag. The link's destination is specified in the href attribute. . Attributes are used ...

Visual Studio Code:  Visual Studio Code is a freeware source-code editor made by Microsoft for Windows, Linux, and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. Download VSCode: We can download VSCode by this  download link.  Select an installer based on your operating system and install it. Creating a new HTML file: Open VSCode Click ctrl+b (It will open the file explorer on the left side.) Choose your folder or in the root of your folder Click the new file in the top right corner of the explorer gives a name with the extension (Ex: inde.html). Write some HTML code. Click ctrl+s to save the file. Now browse the file in any of your favorite browsers to see your web page.

Purpose of web browser  The main purpose of a web browser is to read and render the HTML document into human-readable and formatted content. Common browsers There are many browsers available in the web era, and these are some commonly used browsers worldwide. Chrome Edge Firefox Safari Opera HTML page structure <html> <head> <title>Page title</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html> The HTML's timeline There have been many versions of HTML till now over the journey of the W orld W ide W eb. Year Version 1989 Tim Berners-Lee invented www 1991 Tim Berners-Lee invented HTML 1993 Dave Raggett drafted HTML+ 1995 HTML Working Group defined HTML 2.0 1997 W3C Recommendation: HTML 3.2 1999 W3C Recommendation: HTML 4.01 2000 W3C Recommendation: XHTML 1.0 2008 WHATWG HTML5 First Public Draft 2012 WHATWG HTML5 Living ...

 Hi, buddies! I hope you checked my video about What is HTML? and you are here to get the reading part and the reference area. If not, here is the link to my video for you. Let's get into the content. What is HTML?     HTML is the standard markup language for creating Web pages. HTML is a short form of H yper T ext M arkup L anguage. It describes the structure of a web page. It consists of a series of an element. HTML elements tell the browser how to display the content and finally it is pieces of content like this is a heading, this is a paragraph and etc... Example explanation: The <!DOCTYPE html> declaration defines that this document is an HTML5 document The <html> element is the root element of an HTML page The <head> element contains meta information about the HTML page The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data. The <title> element specifies a title for the HTML page (which is sho...

 3 Steps: Step 1 : Installing Angular CLI Step 2: Installing Bootstrap and Jquery in our project Step 3: Adding Bootstrap and jquery in our project using angular.json   Step 1 : Installing Angular CLI  If Angular CLI is not installed in your machin yet, Install it firs by using the below command in a new terminal. $ npm install -g @angular/cli Now, Create a new Angular project by using the ng utility. $ ng new myApp Now navigate to your root of the project by using  $ cd myApp Now we can serve the Angular app by using  $ ng serve This command will run the application in the default port http://127.0.0.1:4200/ Step 2 — Installing Bootstrap & Jquery in Your Angular Project Go back to your command-line interface and install Bootstrap 4 via npm as follows: $ npm install bootstrap Next, you also need to install jQuery using the following command: $ npm install jquery Step 3 :  Adding Bootstrap & Jquery to Angular Using angular.json Now open angular.json ...