Angular 6 recipe Book - Summary Digital Marketing PDF

Preview

Summary

Summary for the Angular 6 course on Udemy....

Description

Index Title Abstract/Executive Summary

Chapter-1 Introduction To Project

Chapter-2 Introduction To Angular

Chapter-3 Introduction To Firebase

Chapter-4 Introduction To Bootstrap

Chapter-5 References / Bibliography

Introduction To Project Aim: The aim of the project is to create a platform someone can get the recipes of various dishes and can also create your own recipes with the help of an integrated feature of creating your own shopping list based on your choice of recipe of the dish. This project basically comprises of 2 major components : 1. Recipe component 2. Shopping list component Components: Recipe components: In this component we are concerned with our recipes so this component has a list of recipes. So, we can select a particular recipe and read about all the details and ingredients. You can perform various activities like : 1. To shop list 2. Edit recipe 3. Delete recipe You can add your own recipes .this recipe component also comprises of sub components which are: 1. Start: it is the default sub component,which opens along the recipe component and it displays the user to select a specific recipe. 2. List: this component contains the list of all the recipes,it has a sub component named recipe list items,which on selection opens the details component of that particular recipe. 3. Detail: it contains all the details about the recipe that the user has added and also contains the actions that are being performed. 4. Edit: edit component is used for editing the details of the selected recipe. Shopping list components: This component stores all the ingredients which are sent to the shopping list by the recipe component. User can also add items according to their wishes user also the

ability to update this shopping list using shopping list edit subcomponent which allows us to update, edit and delete various shopping list items. This shopping list maintains the name and the quantity of the ingredients present in the list which are mandatory fields. Routing: This app navigates among its components and sub components using a special feature of angular 6 “routing”.Each component is assigned with a route and this route uniquely identifies which component is to be used or navigated . all the routes are maintained in a special class app-routing.module.ts to reduce the complexity of the app.module.ts file. Services: For interaction between different components and for sharing of resources among various different components , we created services ❖ In shopping list : 1. ● ● ● ● ● ●

Functions: addIngredients: multiple ingredients were added to the shopping list. addIngredient: only a single ingredient was added to the shopping list. getIngredients: fetching multiple ingredients . Getingredient: fetching only a single ingredient. updateIngredient: whenever a change is made the shopping list. deleteIngredient: whenever an article is deleted from the shopping list this function comes into play

2. Arrays of recipes: ● Ingredient: an array is made accordingly to the quantity and the articles required in the recipe. 3. Events: ● ingredientsChanged: ● startedEditting:

❖ In Recipe: 1. ● ● ● ● ●

Functions: getRecipes: when multiple recipes are required. getRecipe: when only a single recipe is required. addIngredientsToshoppingList: ingredients can be added to the shopping list addRecipe: recipe can be added by making this selection. updateRecipe: whenever a change is made to the recipe, then it is used.

● deleteRecipe: removal/deletion of the selected recipe ● setRecipe: the selected recipe is displayed

2. Arrays of recipes: ● Ingredient: an array is made accordingly to the quantity and the articles required in the recipe. 3. Events: ● recipeSelected: it notifies whenever a recipe is selected and displays the selected recipe. ● recipeChanged: when another recipe is selected ,the other recipe is displayed.

Model: Here encapsulation is taking place i.e wrapping up of data as a single unit. We have two models in this project ,namely: 1. Recipe: ● Name ● Desc ● Imagepath ● ingredients 2. Ingredients: ● Name ● Amount

Cloud : The cloud services are used in this project for either Fetching the data or saving the data . The firebase console is used in the project which takes the file as json which makes it highly efficient.In case of fetching the data the data will be fetched from the firebased accordingly to all the updates made the user.In case of saving, whenever a new recipe is added or items are added to the shopping list the data should be saved so that whenever the data is fetched the next time, all the tasks can be done accordingly.

Screenshots

Introduction to Angular Angular (commonly referred to as "Angular 2+" or "Angular v2 and above") is a TypeScript-based open-source front-end web application platform led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

Differences between Angular and AngularJS Angular was a ground-up rewrite of AngularJS. ●

Angular does not have a concept of "scope" or controllers, instead it uses a hierarchy of components as its primary architectural characteristic.

Angular has a different expression syntax, focusing on "[ ]" for property binding, and "( )" for event binding ● Modularity – much core functionality has moved to modules ● Angular recommends the use of Microsoft's TypeScript language, which introduces the following features: ●

●

●

Class-based Object Oriented Programming

●

Static Typing

●

Generics

TypeScript is a superset of ECMAScript 6 (ES6), and is backwards compatible with ECMAScript 5 (i.e.: JavaScript). Angular also includes ES6: ●

Lambdas

●

Iterators

●

For/Of loops

●

Python-style generators

●

Reflection

Dynamic loading ● Asynchronous template compilation ● ●

Iterative callbacks provided by RxJS. RxJS limits state visibility and debugging, but these can be solved with reactive add-ons like ngReact or ngrx.

History Naming Originally, the rewrite of AngularJS was called "Angular 2" by the team, but this led to confusion among developers. To clarify, the team announced that separate terms should be used for each framework with "AngularJS" referring to the 1.X versions and "Angular" without the "JS" referring to versions 2 and up.

Version 2.0.0 Angular 2.0 was announced at the ng-Europe conference 22-23. October 2014. The drastic changes in the 2.0 version created considerable controversy among developers.On April 30, 2015, the Angular developers announced that Angular 2 moved from Alpha to Developer Preview. Angular 2 moved to Beta in December 2015, and the first release candidate was published in May 2016.The final version was released on September 14, 2016.

Version 4.0.0 On 13 December 2016 Angular 4 was announced, skipping 3 to avoid a confusion due to the misalignment of the router package's version which was already distributed as v3.3.0. The final version was released on March 23, 2017. Angular 4 is backward compatible with Angular 2. Angular version 4.3 is a minor release, meaning that it contains no breaking changes and that it is a drop-in replacement for 4.x.x. Features in version 4.3 Introducing HttpClient, a smaller, easier to use, and more powerful library for making HTTP Requests. ● New router life cycle events for Guards and Resolvers. Four new events: GuardsCheckStart, GuardsCheckEnd, ResolveStart, ResolveEnd join the existing set of life cycle event such as NavigationStart. ● Conditionally disable animations.

●

Version 5.0.0 Angular 5 was released on November 1, 2017. Key improvements in Angular 5 include support for progressive web apps, a build optimizer and improvements related to Material Design. Version 6.0.0

Angular 6 was released on May 4, 2018. This is a major release focused less on the underlying framework, and more on the toolchain and on making it easier to move quickly with Angular in the future, like: ng update, ng add, Angular Elements, Angular Material + CDK Components, Angular Material Starter Components, CLI Workspaces, Library Support, Tree Shakable Providers, Animations Performance Improvements, and RxJS v6. Future releases Angular 7 release will be showing up in September or October 2018. Each version is expected to be backward-compatible with the prior release. Google pledged to do twice-a-year upgrades. Architecture

Architecture of an Angular application. The main building blocks are modules, components, templates, metadata, data binding, directives, services and dependency injection.

Introduction to Firebase Firebase is a mobile and web application development platform developed by Firebase, Inc. in 2011, then acquired by Google in 2014.Firebase frees developers to focus crafting fantastic user experiences. You don’t need to manage servers. You don’t need to write APIs. Firebase is your server, your API and your datastore, all written so generically that you can modify it to suit most needs. Yeah, you’ll occasionally need to use other bits of the Google Cloud for your advanced applications. Firebase can’t be everything to everybody. But it gets pretty close.

History Firebase evolved from Envolve, a prior startup founded by James Tamplin and Andrew Lee in 2011. Envolve provided developers an API that enables the integration of online chat functionality into their websites. After releasing the chat service, Tamplin and Lee found that it was being used to pass application data that weren't chat messages. Developers were using Envolve to sync application data such as game state in real time across their users. Tamplin and Lee decided to separate the chat system and the real-time architecture that powered it. They founded Firebase as a separate company in April 2012. Firebase Inc. raised seed funding in May 2012. The company further raised Series A funding in June 2013. In October 2014, Firebase was acquired by Google. In October 2015, Google acquired Divshot to merge it with the Firebase team. Since the acquisition, Firebase has grown inside Google and expanded their services to become a unified platform for mobile developers. Firebase now integrates with various other Google services to offer broader products and scale for developers. In January 2017, Google acquired Fabric and Crashlytics from Twitter to join those services to the Firebase team. Firebase launched Cloud Firestore, a Document Database, in October 2017. Stability ● Crash Reporting creates detailed reports of the errors in the app. Errors are grouped into clusters of similar stack traces and triaged by the severity of impact on app users. In addition to automatic reports, the developer can log custom events to help capture the steps leading up to a crash.Before acquiring Crashlytics, Firebase was using its own Firebase Crash Reporting. ● Firebase Performance provides insights into an app's performance and the latencies the app's users experience.

● Firebase Test Lab for Android and iOS provides cloud-based infrastructure for testing Android and iOS apps. With one operation, developers can initiate testing of their apps across a wide variety of devices and device configurations. Test results—including logs, videos, and screenshots—are made available in the project in the Firebase console. Even if a developer hasn't written any test code for their app, Test Lab can exercise the app automatically, looking for crashes.Test Lab for iOS is currently in beta.

Services ● Firebase Analytics is a cost-free app measurement solution that provides insight into app usage and user engagement. ● Formerly known as Google Cloud Messaging (GCM), Firebase Cloud Messaging (FCM) is a cross-platform solution for messages and notifications for Android, iOS, and web applications, which currently can be used at no cost. Firebase Auth is a service that can authenticate users using only client-side code. It supports social login providers Facebook, GitHub, Twitter and Google (and Google Play Games). Additionally, it includes a user management system whereby developers can enable user authentication with email and password login stored with Firebase. ● Firebase provides a realtime database and backend as a service. The service provides application developers an API that allows application data to be synchronized across clients and stored on Firebase's cloud. The company provides client libraries that enable integration with Android, iOS, JavaScript, Java, Objective-C, Swift and Node.js applications. The database is also accessible through a REST API and bindings for several JavaScript frameworks such as AngularJS, React, Ember.js and Backbone.js. The REST API uses the Server-Sent Events protocol, which is an API for creating HTTP connections for receiving push notifications from a server. Developers using the realtime database can secure their data by using the company's server-side-enforced ●

security rules. Cloud Firestore which is Firebase's next generation of the Realtime Database was released for beta use. ● Firebase Storage provides secure file uploads and downloads for Firebase apps, regardless of network quality. The developer can use it to store images, audio, video, or other user-generated content. Firebase Storage is backed by Google Cloud Storage. Firebase Hosting is a static and dynamic web hosting service that launched on May 13, 2014. It supports hosting static files such as CSS, HTML, JavaScript and other files, as well as dynamic Node.js support through Cloud Functions. The service delivers files over a content delivery network (CDN) through HTTP Secure (HTTPS) and Secure Sockets Layerencryption (SSL). Firebase partners with Fastly, a CDN, to provide the CDN backing Firebase Hosting. The company states that Firebase Hosting grew out of customer requests; developers were using Firebase for its real-time database but needed a place to host their content. ● ML Kit is a mobile machine learning system for developers launched on May 8, 2018 in beta during the Google I/O 2018 . ML Kit API's feature a variety of features including text recognition, detecting faces, scanning barcodes, labelling images and recognising landmarks. It is currently available for iOS or Android developers. You may also import your own TensorFlow Lite models, if the given API's aren't enough. The API's can be used on-device or on cloud. ●

Bootstrap Bootstrap is a free and open-source front-end framework (library) for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only. Bootstrap is the second most-starred project on GitHub, with more than 126,000 stars.

Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden. According to Twitter developer Mark Otto: "A super small group of developers and I got together to design and build a new internal tool and saw an opportunity to do something more. Through that process, we saw ourselves build something much more substantial than another internal tool. Months later, we ended up with an early version of Bootstrap as a way to document and share common design patterns and assets within the company." After a few months of development by a small group, many developers at Twitter began to contribute to the project as a part of Hack Week, a hackathon-style week for the Twitter development team. It was renamed from Twitter Blueprint to Bootstrap, and released as an open source project on August 19, 2011.It has continued to be maintained by Mark Otto, Jacob Thornton, and a small group of core developers, as well as a large community of contributors.

On January 31, 2012, Bootstrap 2 was released, which added a twelve-column responsive grid layout system, inbuilt support for Glyphicons, several new components, as well as changes to many of the existing components.On August 19, 2013, Bootstrap 3 was released, which redesigned components to use flat design, and a mobile first approach.

On October 29, 2014, Mark Otto announced that Bootstrap 4 was in development.The first alpha version of Bootstrap 4 was released on August 19, 2015. The first beta version was released on 10 August 2017. The stable version of Bootstrap 4 was released on January 18, 2018 basically improving print styles, border utilities and provides more control over the flexbox.

Features Bootstrap 3 supports the latest versions of the Google Chrome, Firefox, Internet Explorer, Opera , and Safari (except on Windows). It additionally supports back to IE8 and the latest Firefox Extended Support Release (ESR). Since 2.0, Bootstrap supports responsive web design. This means the layout of web pages adjusts dynamically, taking into account the characteristics of the device used (desktop, tablet, mobile phone).Starting with version 3.0, Bootstrap adopted a mobile-first design philosophy, emphasizing responsive design by default. Version 4.0 added Sass and flexbox support.

Version 4.0 On October 29, 2014, Mark Otto announced that Bootstrap 4 was in development.On September 6, 2016, Mark suspended work on Bootstrap 3 in order to free up time to work on Bootstrap 4. Over 17,500 commits have been made to the Bootstrap 4 codebase so far. Bootstrap 4 is almost a complete rewrite from Bootstrap 3. Significant changes include: ●

Switched from Less to Sass.

Dropped IE8, IE9, and iOS 6 support. ● Added flexbox support and then dropped non-flexbox support. ● ●

Switched from pixels to root ems.

●

Increased global font-size from 14px to 16px.

●

Dropped the panel, thumbnail, and well components in favor of cards.

●

Rewrote almost all components, jQuery plugins and documentation.

Structure and Function

Bootstrap is modular and consists of a series of Less stylesheets that implement the various components of the toolkit. These stylesheets are generally compiled into a bundle and included in web pages, but individual components can be included or removed. Bootstrap provides a number of configuration variables that control things such as color and padding of various components. Since Bootstrap 2, the Bootstrap documentation has included a customization wizard which generates a customized version of Bootstrap based on the requested components and various settings. As of Bootstrap 4, Sass is used instead of Less for the stylesheets. Each Bootstrap component consists of an HTML structure, CSS declarations, and in some cases accompanying JavaScript code. Grid system and responsive design comes standard with an 1170 pixel wide grid layout. Alternatively, the developer can use a variable-width layout. For both cases, the toolkit has four variations to make use of different resolutions and types of devices: mobile phones, portrait and landscape, tablets and PCs with low and high resolution. Each variation adjusts the width of the columns.

Bibliography  Google.  Wikipedia. 

Udemy. Angular 6 (formerly Angular 2) - The Complete Guide...