Angular js

Angular is a development platform, built on TypeScript. As a platform, Angular includes:

• A component-based framework for building scalable web applications
• A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more
• A suite of developer tools to help you develop, build, test, and update your code

With Angular, you’re taking advantage of a platform that can scale from single-developer projects to enterprise-level applications. Angular is designed to make updating as straightforward as possible, so take advantage of the latest developments with a minimum of effort. Best of all, the Angular ecosystem consists of a diverse group of over 1.7 million developers, library authors, and content creators.

This day i learnt about the angular js. Here we started with learning the basics of angular js. There were many which was thought and it has been solved one by one. Then we started with the installation of the software required to work on angular js.

The software downloaded is node js. after node js installation is done the following commands are run on the command prompt ,

1. node -v
2. npm install -g @angular/cli@13
3. ng — version
4. ng new my_te_angular_app
5. cd my_te_angular_app
6. ng new my_te_angular_app
7. ng serve -o

Some things to be remembered

1. Src->app-> defaulst component->4 files:
   ->HTML-design structure
   ->CSS-styling
   ->Typescript-programming Logics->.ts
   ->Testing-Test cases->.spec.ts

common files:
->app.routing.module.ts->routing/Navigation configuaration between pages/ components
->app.module.ts

2. assets->media files

3. environments->API

4.favicon.ico

5. index.html->startup page

7.polyfiles.ts->browser settings

8.styles.css->global.css

9. test.ts->global test cases

10. browserlistrc> browser info

11. gitignore -> ignore specific files while pushing code to github

12. angular.json->project information

13. karma.conf.js-> testing information

In angular we started implementing the concept by doing the code first we learnt about various types of binding.. mainly there are four types of binding

1. String interpolation
2. Property binding
3. Event binding
4. Two way binding

Then we learnt to pass the data from parent to child component

Then the routing concept also been implemented.

Task 6

Create an e-commerce website using the following concepts:
1. Binding
2. Parent-Child component
3. Routing

Then we learnt to use the directives in the the angular code and implement them and get the result.

Here we used the for loop , switch case , and also accessed the data from other component and tried to retrive in the web page.

Then also came to know how to do the styling in the bootsrap card which has used in the website

Task7:

Continue working in the same website

Using *ngFor directive and retrieve all the details from the below sample array and display them in the bootstrap cards

productdetails=[{
“pid”:001,
“image”:””,
“pname”:”Laptop”,
“pdescription”:”Some details about laptops”,
“Status”:”In Stock”
}
]

Note: Create 9 product details and render 3 cards in a row
Apply style binding for the pdescription in the array
Based on the “Status” property *ngSwitchCase and use bootstrap contextual class for displaying “Instock” in green and “Out of Stock” in red

Here we started to work on the json files and fetch the details from json and render them in the corresponding component.

Then we also worked on the toggle option and which will help us to show and hide the data.

Tak8:

Continue working on the same website

Create a JSON file and fetch all the details and render them in the corresponding component

Note: Give Styling based on your choice
Implement the Toggle effect to show and hide the detailed description of the contents rendered
Use Nested components in your website
Reuse components in your application
Use advertisements in your application

On saturday afternoon we had an brainstorming activity where we enjoyed the working with the team and had a discussion on the teamwork and how it can help to our work

Then after nested components we also learnt to add the counter component and the toggling of individual items. This helped us to improve the reactiveness of the website. Whenever the website for the product has been built it should meet the customer requirements . The website should be in that form all the user requirements are maintained and produced by the system.. the changes may occur at any time but the product should be in a very good to condition to proceed.

Then we went on to learn about services component in the angular. Service is a broad category encompassing any value, function, or feature that an application needs. A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well. Angular distinguishes components from services to increase modularity and reusability.

Ideally, a component’s job is to enable only the user experience. A component should present properties and methods for data binding to mediate between the view and the application logic. The view is what the template renders and the application logic is what includes the notion of a Model.

A component should use services for tasks that don’t involve the view or application logic. Services are good for tasks such as fetching data from the server, validating user input, or logging directly to the console. By defining such processing tasks in an Injectable service class, you make those tasks available to any component. You can also make your application more adaptable by injecting different providers of the same kind of service, as appropriate in different circumstances.

Angular doesn’t enforce these principles. Instead, Angular helps you follow these principles by making it easy to factor your application logic into services. In Angular, Dependency Injection makes those services available to components.

Task 9

Create a Service for the Contact page in your website and access the contact service and render the details in the contact component.

Note: You can implement any styling in the contact component

Reactive forms : Validation classes
ng g c register

• >Reactive forms module
• ->Fields for registration: Here we need to enter all the details or the variables which will be used in the website
• Then in .ts we need to write which type of variable has been defined
• Then form control is used to write all the conditions which are required to solve the site questions or the task which ahs been performed in the site.
• 1)db.json
• 2)npm install json-server
• 3)json-server — watch db.json
• 4)create, read, update, delete
• 5)ng g class account Model
• 6)ng g s api
• 7)HTTP client model -> app.module.ts
• 8)ap.services.ts->Httpclient
• 9)get(read), put(update), delete, post

Validation of the forms

The alert messages or the messages which should be in some particular manner can be restricted and can used for the validation process.

The registration and the login pages are required for any page to maintain the security. This will be crucial for the development of the site and should have the effectiveness which will increase the System demand and the value. When there is a high amount of security more no of people will consider the website for their consideration.

We also worked on storing the data in the json server and enable it through command prompt. This is the usual procedure and are taken into consideration. The data will be stored in the json server and can be added new data to the json server. We also worked in the postman tool

Then i worked on the add to cart feature. as the website was able to fetch the data and all required components and the then to access it shortly we will keep the add to cart . Here all the product details will be present which will be added to cart and it will also return us the total amount of the product we pushed to the cart.