Learn Angular CLI Day 13

Lecture 13 : Learn Angular CLI

Installing Angular CLI :


  • Major versions of Angular CLI follow the supported major version of Angular, but minor versions can be released separately.

  • Install the CLI using the npm package manager: 

             npm install -g @angular/cli

  • To create, build, and serve a new, basic Angular project on a development server, go to the parent directory of your new workspace use the following commands:

             ng new my-first-project

             cd my-first-project   

                    ng serve

Agular CLI :

  • Angular CLI is the official tool for initializing and working with Angular projects.

  • It saves you from the hassle of complex configurations and build tools like TypeScript, Webpack.

Webpack : Webpack is a popular module bundler, a tool for bundling application source code in convenient chunks and for loading that code from a server into a browser.

You determine what Webpack does and how it does it with a JavaScript configuration file...

                    webpack.config.js

  • Angular CLI makes it easy to start with any Angular project. Angular CLI comes with commands that help us create and start on our project very fast.

  • Let us now go through the commands available to create a project, a component and services, change the port, etc.

Folder Structure :

Configuration :

ng commands :

ng new :

  • The Angular CLI makes it easy to create an application that already works, right out of the box.

  • Syntax

          ng new <name> [options]

                 ng n <name> [options] 

  • ng new command creates a workspace of given name with a default Angular Application.

  • It provides interactive prompts to set optional configurations.

  • All prompts have default values to choose.

  • Options are optional parameters.

ng serve :

  • Easily test your app locally while developing. Builds and serves your app, rebuilding on file changes.

  • Syntax

                ng serve <project> [options] 

                ng s <project> [options]

  • ng serve command builds and serve the application.

  • It rebuilds the application if changes occur.

  • Here project is the name of the application as defined in angular.json.

  • Options are optional parameters.

Comments

Post a Comment

Popular posts from this blog

Basic Concept In C Sharp Day 16

Image
Lecture 16 : Basic Concept In C Sharp C Sharp : C#  (pronounced  see sharp , like the musical note C♯, but written with the number sign) is a general-purpose, multi-paradigm programming language encompassing static typing, strong typing, lexically scoped, imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented programming disciplines. C# was developed around 2000 by Microsoft as part of its .NET initiative and later approved as an international standard by Ecma (ECMA-334) in 2002 and ISO (ISO/IEC 23270) in 2003. It was designed by Anders Hejlsberg, and its development team is currently led by Mads Torgersen, being one of the programming languages designed for the Common Language Infrastructure (CLI). The most recent version is 9.0, which was released in 2020 in .NET 5.0 and included in Visual Studio 2019 version 16.8. C-sharp musical note : " C sharp " was inspired by the musical notation whereby a sharp symb
Read more

Understanding C Sharp Day 18

Image
Lecture 18 : Understanding C Sharp   Class Library : A class library  defines types and methods that are called by an application. The  Class Library .DLL  contains program code, data, and resources that can be can used by other programs and are easily implemented into other Visual Studio projects. Create New Class Library Project with Visual Studio :  Create New Project : Select C# in the language tab And then select  Class Library (.NET Framework) and press the NEXT button You can then proceed to give your project a Project Name Call the project  MathLibrary  (in order to copy/paste example code) Press the CREATE button, After you have given a name to your project Building the Class Library .DDL for C# : The following code example is a C# version of the Class Library.  The Class Library .DLL contains program code, data, and resources.  The Class Library in this example will feature a custom Math API that has a set of functions to Substract, Devide and Multiply numbers.
Read more

Concept In Angular Day 14

Image
Lecture 14 : Concept In Angular What is ngModel : ngModel is Angular’s answer to the two-way data binding problem. Previously in AngularJS, there was no way to perform a binding which would update automatically. What are Directives : Directives are markers on a DOM element that tell AngularJS to attach a specified behaviour to that DOM element or even transform the DOM element and its children. Angular includes various built-in directives. In addition to this, you can create custom directives for your application. ng-model Directive : The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. With the ng-model directive you can bind the value of an input field to a variable created in AngularJS. Two-Way Binding : The binding goes both ways. If the user changes the value inside the input field. Two-way binding, we can display a data property as well as an update that property when the user makes changes. Two-way binding
Read more